Package Exports

svelte-jsoneditor

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-jsoneditor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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, Angular, plain JavaScript).

JSONEditor screenshot

Install

Install via npm:

npm install

Use

See the /examples section for some full examples.

Svelte setup

In order to use svelte-jsoneditor in your project, a couple of plugins needs to be installed and configured:

@rollup/plugin-json needed by ajv to load a JSON Schema definition from a JSON file
svelte-preprocess and sass needed to preprocess SASS styling of the editor

First, install the required plugins dependencies:

npm install --save-dev @rollup/plugin-json svelte-preprocess sass

Now, configure the plugins in your ./rollup.config.js configuration:

// rollup.config.js

// ...
import json from '@rollup/plugin-json'
import sveltePreprocess from 'svelte-preprocess'

// ...
export default {
  // ...
  plugins: [
    svelte({
      // ...
      
      preprocess: sveltePreprocess()
    })
  ],
  
  // ...
  json()
}

A full example of a rollup.config.js can be found here: examples/svelte-basic-example/rollup.config.js.

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 = {
    text: '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>

Browser usage

Load as 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.mjs'

  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>

Or using UMD (exposed as window.jsoneditor.JSONEditor):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JSONEditor</title>
  <script src="svelte-jsoneditor/dist/jsoneditor.js"></script>
</head>
<body>
<div id="jsoneditor"></div>

<script>
  const editor = new window.jsoneditor.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