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/DropdownButton.scss
svelte-jsoneditor/components/controls/DropdownButton.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/createAutoScrollHandler.js
svelte-jsoneditor/components/controls/createFocusTracker.js
svelte-jsoneditor/components/controls/navigationBar/NavigationBar.scss
svelte-jsoneditor/components/controls/navigationBar/NavigationBar.svelte
svelte-jsoneditor/components/controls/navigationBar/NavigationBarDropdown.scss
svelte-jsoneditor/components/controls/navigationBar/NavigationBarDropdown.svelte
svelte-jsoneditor/components/controls/navigationBar/NavigationBarItem.scss
svelte-jsoneditor/components/controls/navigationBar/NavigationBarItem.svelte
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/ValidationErrorPopup.scss
svelte-jsoneditor/components/modes/treemode/ValidationErrorPopup.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/generated/worker-json-data-url.js
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 list with dependencies viteOptimizeDeps, available in the svelte-jsoneditor/config.js, and use that in the configuration of vite (config.kit.vite.optimizeDeps.include):

// svelte.config.js

// ...
import { viteOptimizeDeps } from 'svelte-jsoneditor/config.js'

const config = {
  // ...

  kit: {
    // ...

    vite: {
      optimizeDeps: {
        include: [...viteOptimizeDeps]
      }
    }
  }
}

// ...

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
mode: 'tree' | 'code'. Open the editor in 'tree' mode (default) or 'code' mode.
mainMenuBar: boolean Show the main menu bar. Default value is true.
navigationBar: boolean Show the navigation bar with, where you can see the selected path and navigate through your document from there. Default value is true.
readOnly: boolean Open the editor in read-only mode: no changes can be made, non-relevant buttons are hidden from the menu, and the context menu is not enabled. Default value is false.
indentation: number Number of spaces use for indentation when stringifying JSON.
validator: function (json): ValidationError[]. Validate the JSON document. For example use the built-in JSON Schema validator powered by Ajv:
```
import { createAjvValidator } from 'svelte-jsoneditor'

const validator = createAjvValidator(schema, schemaRefs)
```
onError(err: Error). Callback fired when an error occurs. Default implementation is to log an error in the console and show a simple alert message to the user.
onChange({ json: JSON | undefined, text: string | undefined}). Callback which is invoked on every change made in the JSON document.
onChangeMode(mode: string). Invoked when the mode is changed.
onClassName(path: Array.<string|number>, value: any): string | undefined. Add a custom class name to specific nodes, based on their path and/or value.
onRenderMenu(mode: string, items: Array) : Array | undefined. Callback which can be used to make changes to the menu items. New items can be added, or existing items can be removed or reorganized. When the function returns undefined, the original items will be applied.

A menu item can be one of the following types:
- Button:
```
interface MenuButtonItem {
  onClick: () => void
  icon?: FontAwesomeIcon
  text?: string
  title?: string
  className?: string
  disabled?: boolean
}
```
- Separator (gray vertical line between a group of items):
```
interface MenuSeparatorItem {
  separator: true
}
```
- Space (fills up empty space):
```
interface MenuSpaceItem {
  space: true
}
```
onFocus() callback fired when the editor got focus.
onBlur() callback fired when the editor lost focus.

methods

get(): JSON Get the current JSON document. Will throw an error when the editor is code mode and does not contain valid JSON.
getText(): string Get the current JSON document as stringified JSON.
set(json: JSON) Replace the current JSON document. Will reset the state of the editor.
setText(text: string) Replace the current JSON document, passing stringified JSON contents.
update(json: JSON) Update the loaded JSON document, keeping the state of the editor (like expanded objects).
updateText(text: string) Update the loaded JSON document, keeping the state of the editor (like expanded objects).
patch(operations: JSONPatchDocument) Apply a JSON patch document to update the contents of the JSON document. A JSON patch document is a list with JSON Patch operations.
expand([callback: (path: Path) => boolean]) Expand or collapse paths in the editor. The callback determines which paths will be expanded. If no callback is provided, all paths will be expanded. It is only possible to expand a path when all of its parent paths are expanded too. Examples:
- editor.expand(path => true) expand all
- editor.expand(path => false) collapse all
- editor.expand(path => path.length < 2) expand all paths up to 2 levels deep
transform({ id?: string, onTransform?: ({ operations: JSONPatchDocument, json: JSON, transformedJson: JSON }) => void, onClose?: () => void }) programmatically trigger clicking of the transform button in the main menu, opening the transform model. If a callback onTransform is provided, it will replace the build-in logic to apply a transform, allowing you to process the transform operations in an alternative way. If provided, onClose callback will trigger when the transform modal closes, both after the user clicked apply or cancel. If an id is provided, the transform modal will load the previous status of this id instead of the status of the editors transform modal.
scrollTo(path: Array.<string|number>) Scroll the editor vertically such that the specified path comes into view. The path will be expanded when needed.
focus(). Give the editor focus.
destroy(). Destroy the editor, remove it from the DOM.

Develop

Clone the git repository

Install dependencies (once):

npm install

Start the demo project (at http://localhost:3000):

npm run dev

Build the library:

npm run package

Run unit tests:

npm test

Run linter:

npm run lint

Publish to npm (will increase version number and publish to npm):

npm run release

License

Released under the ISC license.