Package Exports

svelte-jsoneditor
svelte-jsoneditor/assets/jump.js/README.md
svelte-jsoneditor/assets/jump.js/src/easing.js
svelte-jsoneditor/assets/jump.js/src/jump.js
svelte-jsoneditor/components/JSONEditor.scss
svelte-jsoneditor/components/JSONEditor.svelte
svelte-jsoneditor/components/controls/Menu.scss
svelte-jsoneditor/components/controls/Menu.svelte
svelte-jsoneditor/components/controls/Message.scss
svelte-jsoneditor/components/controls/Message.svelte
svelte-jsoneditor/components/controls/ValidationErrorsOverview.scss
svelte-jsoneditor/components/controls/ValidationErrorsOverview.svelte
svelte-jsoneditor/components/controls/createFocusTracker.js
svelte-jsoneditor/components/modals/CopyPasteModal.scss
svelte-jsoneditor/components/modals/CopyPasteModal.svelte
svelte-jsoneditor/components/modals/Header.scss
svelte-jsoneditor/components/modals/Header.svelte
svelte-jsoneditor/components/modals/JSONRepairModal.svelte
svelte-jsoneditor/components/modals/Modal.scss
svelte-jsoneditor/components/modals/SortModal.scss
svelte-jsoneditor/components/modals/SortModal.svelte
svelte-jsoneditor/components/modals/TransformModal.scss
svelte-jsoneditor/components/modals/TransformModal.svelte
svelte-jsoneditor/components/modals/TransformWizard.scss
svelte-jsoneditor/components/modals/TransformWizard.svelte
svelte-jsoneditor/components/modals/popup/AbsolutePopup.scss
svelte-jsoneditor/components/modals/popup/AbsolutePopup.svelte
svelte-jsoneditor/components/modals/sortModalState.js
svelte-jsoneditor/components/modals/transformModalState.js
svelte-jsoneditor/components/modes/codemode/CodeMode.scss
svelte-jsoneditor/components/modes/codemode/CodeMode.svelte
svelte-jsoneditor/components/modes/codemode/ace
svelte-jsoneditor/components/modes/codemode/ace/theme-jsoneditor.js
svelte-jsoneditor/components/modes/codemode/menu/CodeMenu.scss
svelte-jsoneditor/components/modes/codemode/menu/CodeMenu.svelte
svelte-jsoneditor/components/modes/repairmode/RepairMode.scss
svelte-jsoneditor/components/modes/repairmode/RepairMode.svelte
svelte-jsoneditor/components/modes/treemode/BooleanToggle.scss
svelte-jsoneditor/components/modes/treemode/BooleanToggle.svelte
svelte-jsoneditor/components/modes/treemode/CollapsedItems.scss
svelte-jsoneditor/components/modes/treemode/CollapsedItems.svelte
svelte-jsoneditor/components/modes/treemode/JSONKey.scss
svelte-jsoneditor/components/modes/treemode/JSONKey.svelte
svelte-jsoneditor/components/modes/treemode/JSONNode.scss
svelte-jsoneditor/components/modes/treemode/JSONNode.svelte
svelte-jsoneditor/components/modes/treemode/JSONValue.scss
svelte-jsoneditor/components/modes/treemode/JSONValue.svelte
svelte-jsoneditor/components/modes/treemode/TreeMode.scss
svelte-jsoneditor/components/modes/treemode/TreeMode.svelte
svelte-jsoneditor/components/modes/treemode/ValidationError.scss
svelte-jsoneditor/components/modes/treemode/ValidationError.svelte
svelte-jsoneditor/components/modes/treemode/Welcome.scss
svelte-jsoneditor/components/modes/treemode/Welcome.svelte
svelte-jsoneditor/components/modes/treemode/contextmenu/ContextMenu.scss
svelte-jsoneditor/components/modes/treemode/contextmenu/ContextMenu.svelte
svelte-jsoneditor/components/modes/treemode/contextmenu/ContextMenuButton.scss
svelte-jsoneditor/components/modes/treemode/contextmenu/ContextMenuButton.svelte
svelte-jsoneditor/components/modes/treemode/json-node-selected-mixin.scss
svelte-jsoneditor/components/modes/treemode/menu/SearchBox.scss
svelte-jsoneditor/components/modes/treemode/menu/SearchBox.svelte
svelte-jsoneditor/components/modes/treemode/menu/TreeMenu.scss
svelte-jsoneditor/components/modes/treemode/menu/TreeMenu.svelte
svelte-jsoneditor/components/modes/treemode/shared.scss
svelte-jsoneditor/components/modes/treemode/singleton.js
svelte-jsoneditor/config.js
svelte-jsoneditor/constants.js
svelte-jsoneditor/dist/jsoneditor.js
svelte-jsoneditor/dist/jsoneditor.js.map
svelte-jsoneditor/img/customFontawesomeIcons.js
svelte-jsoneditor/img/inkscape_source/collapse_icon.svg
svelte-jsoneditor/img/inkscape_source/compact_icon.svg
svelte-jsoneditor/img/inkscape_source/expand_icon.svg
svelte-jsoneditor/img/inkscape_source/format_icon.svg
svelte-jsoneditor/logic/documentState.js
svelte-jsoneditor/logic/documentState.test.js
svelte-jsoneditor/logic/expandItemsSections.js
svelte-jsoneditor/logic/expandItemsSections.test.js
svelte-jsoneditor/logic/history.js
svelte-jsoneditor/logic/jsCreateQuery.js
svelte-jsoneditor/logic/operations.js
svelte-jsoneditor/logic/operations.test.js
svelte-jsoneditor/logic/search.js
svelte-jsoneditor/logic/search.test.js
svelte-jsoneditor/logic/selection.js
svelte-jsoneditor/logic/selection.test.js
svelte-jsoneditor/logic/sort.js
svelte-jsoneditor/logic/sort.test.js
svelte-jsoneditor/logic/validation.js
svelte-jsoneditor/logic/validation.test.js
svelte-jsoneditor/package.json
svelte-jsoneditor/plugins/createAjvValidator.js
svelte-jsoneditor/plugins/createAjvValidator.test.js
svelte-jsoneditor/styles.scss
svelte-jsoneditor/types.js
svelte-jsoneditor/utils/arrayUtils.js
svelte-jsoneditor/utils/arrayUtils.test.js
svelte-jsoneditor/utils/domUtils.js
svelte-jsoneditor/utils/domUtils.test.js
svelte-jsoneditor/utils/fileUtils.js
svelte-jsoneditor/utils/fileUtils.test.js
svelte-jsoneditor/utils/jsonPointer.js
svelte-jsoneditor/utils/jsonPointer.test.js
svelte-jsoneditor/utils/jsonUtils.js
svelte-jsoneditor/utils/jsonUtils.test.js
svelte-jsoneditor/utils/keyBindings.js
svelte-jsoneditor/utils/localStorageUtils.js
svelte-jsoneditor/utils/navigatorUtils.js
svelte-jsoneditor/utils/pathUtils.js
svelte-jsoneditor/utils/pathUtils.test.js
svelte-jsoneditor/utils/stringUtils.js
svelte-jsoneditor/utils/stringUtils.test.js
svelte-jsoneditor/utils/typeUtils.js
svelte-jsoneditor/utils/typeUtils.test.js
svelte-jsoneditor/utils/uniqueId.js

Readme

svelte-jsoneditor

A web-based tool to view, edit, format, transform, and validate JSON

The library is written with Svelte, but can be used in any framework (React, Vue, Angular, plain JavaScript).

JSONEditor screenshot

Install

Install via npm:

npm install svelte-jsoneditor

Use

See the /examples section for some full examples.

SvelteKit setup

There is currently an issue in SvelteKit with processing some dependencies (more precisely: Vite used by SvelteKit). svelte-jsoneditor depends on some libraries that hit this issue. To work around it, each of these dependencies needs to be listed in the configuration. Without the workaround, you'll see errors like "ReferenceError: module is not defined" (for debug, ajv, ace-builds, etc.).

In your SvelteKit configuration file svelte.config.js, add the following:

// svelte.config.js

// ...

const config = {
  // ...
  kit: {
    // ...

    vite: {
      optimizeDeps: {
        include: [
          'ace-builds/src-noconflict/ace',
          'ace-builds/src-noconflict/ext-searchbox',
          'ace-builds/src-noconflict/mode-json',
          'ajv',
          'classnames',
          'debug',
          'diff-sequences',
          'json-source-map',
          'natural-compare-lite'
        ]
      }
    }
  }
}
// ...

Svelte usage

Create a JSONEditor with two-way binding bind:json:

<script>
  import { JSONEditor } from 'svelte-jsoneditor'

  let json = {
    array: [1, 2, 3],
    boolean: true,
    color: '#82b92c',
    null: null,
    number: 123,
    object: { a: 'b', c: 'd' },
    string: 'Hello World'
  }
</script>

<div>
  <JSONEditor bind:json />
</div>

Or one-way binding:

<script>
  import { JSONEditor } from 'svelte-jsoneditor'

  let json = {
    greeting: 'Hello World'
  }

  function onChange(content) {
    // content is an object { json: JSON | undefined, text: string | undefined }
    console.log('onChange: ', content)
    json = content.json
  }
</script>

<div>
  <JSONEditor json="{json}" onChange="{onChange}" />
</div>

Standalone bundle (use in React, Vue, Angular, plain JavaScript, ...)

The library provides a standalone bundle of the editor which can be used in any browser environment and framework. In a framework like React, Vue, or Angular, you'll need to write some wrapper code around the class interface.

Browser example loading the ES module:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JSONEditor</title>
  </head>
  <body>
    <div id="jsoneditor"></div>

    <script type="module">
      import { JSONEditor } from 'svelte-jsoneditor/dist/jsoneditor.js'

      const editor = new JSONEditor({
        target: document.getElementById('jsoneditor'),
        props: {
          json: {
            greeting: 'Hello World'
          },
          onChange: (content) => {
            // content is an object { json: JSON | undefined, text: string | undefined }
            console.log('onChange', content)
          }
        }
      })
    </script>
  </body>
</html>

API

constructor

Svelte component:

<script>
  import { JSONEditor } from 'svelte-jsoneditor'
</script>

<div>
  <JSONEditor json="{json}" />
</div>

JavasScript class:

import { JSONEditor } from 'svelte-jsoneditor'

const editor = new JSONEditor({
  target: document.getElementById('jsoneditor'),
  props: {
    json,
    onChange: (content) => {
      // content is an object { json: JSON | undefined, text: string | undefined }
      console.log('onChange', content)
    }
  }
})

properties

json Pass the JSON document to be rendered in the JSONEditor