svelte-json-tree

Svelte JSON Viewer Component

Usage no npm install needed!

<script type="module">
  import svelteJsonTree from 'https://cdn.skypack.dev/svelte-json-tree';
</script>

README

svelte-json-tree

version MIT License

svelte-json-tree

Svelte JSON Viewer Component used in Svelte REPL. Supports Map, Set, Iterable, Symbol.

Try it out on repl.

Install

Use npm or yarn to install:

# npm
npm install --save svelte-json-tree

# yarn
yarn install svelte-json-tree

Usage

With Svelte:

<script>
  import JSONTree from 'svelte-json-tree';
  // your json data to view
  const value = {
    array: [1, 2, 3],
    bool: true,
    object: {
      foo: 'bar'
    }
  };
</script>

<JSONTree {value} />

Without Svelte:

const JSONTree = require('svelte-json-tree');
const jsonTree = new JSONTree({
    target: document.body,
    props: {
        value: { "foo": "bar" }
    }
});

// update value
jsonTree.$set({ value: ['1'] });

Overriding Styles

svelte-json-tree uses the following CSS variables to theme:

/* color */
--json-tree-string-color: #cb3f41;
--json-tree-symbol-color: #cb3f41;
--json-tree-boolean-color: #112aa7;
--json-tree-function-color: #112aa7;
--json-tree-number-color: #3029cf;
--json-tree-label-color: #871d8f;
--json-tree-arrow-color: #727272;
--json-tree-null-color: #8d8d8d;
--json-tree-undefined-color: #8d8d8d;
--json-tree-date-color: #8d8d8d;
/* position */
--json-tree-li-indentation: 1em;
--json-tree-li-line-height: 1.3;
/* font */
--json-tree-font-size: 12px;
--json-tree-font-family: 'Courier New', Courier, monospace;

To overwrite the style, specify the css variables on the parent:

<div style="--json-tree-string-color: yellow;">
  <JSONTree {value} />
</div>

License

MIT