voidit/svelte-json-tree

JSON tree component for Svelte

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 add 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-property-color: #000000;
--json-tree-arrow-color: #727272;
--json-tree-operator-color: #727272;
--json-tree-null-color: #8d8d8d;
--json-tree-undefined-color: #8d8d8d;
--json-tree-date-color: #8d8d8d;
--json-tree-internal-color: grey;
--json-tree-regex-color: #cb3f41;
/* 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