svelte-json-tree

Install it

With npm

npm install svelte-json-tree

With yarn

yarn add svelte-json-tree

Use it

<script>
  import JsonTree from 'svelte-json-tree';
  let value = {
    message: 'hello world',
    item: [1, 2, 3],
  };
</script>

<JsonTree {value} />

Result

▶ { message: "hello world" ,item: Array(3) }

message: "hello world"
item: (3) [ 1 ,2 ,3 ]

Customise theme

Style with style-props

<script>
  let value = {
    message: 'hello world',
    item: [1, 2, 3],
    symbol: Symbol(1),
    n: null,
    u: undefined,
    fn: function (a, b) {},
    map: new Map([
      [1, 2],
      ['3', false],
    ]),
    set: new Set([true, false, Infinity]),
    regex: /^https?:\/\/$/g,
    error: new Error('oops'),
    date: new Date(),
  };
</script>

<div style="background: #272822; padding: 1em;">
  <JsonTree
    {value}
    --json-tree-property-color="#a6e22e"
    --json-tree-string-color="#f25a00"
    --json-tree-symbol-color="#66d9ef"
    --json-tree-boolean-color="#c594c5"
    --json-tree-function-color="#c594c5"
    --json-tree-number-color="#f99157"
    --json-tree-label-color="#f92672"
    --json-tree-arrow-color="#ae81ff"
    --json-tree-null-color="#66d9ef"
    --json-tree-undefined-color="#66d9ef"
    --json-tree-date-color="#fd971f"
    --json-tree-operator-color="#f8f8f2"
    --json-tree-regex-color="#9effff"
    --json-tree-li-identation="2em"
    --json-tree-li-line-height="1.5"
    --json-tree-font-size="16px"
    --json-tree-font-family="monospace"
  />
</div>

Result

  ▶ { message: "hello world" ,item: Array(3) ,symbol: Symbol(1)  ,n: null  ,u: undefined   , … }    message: "hello world"  
 item:   (3) [ 1  ,2  ,3    ]    
 symbol: Symbol(1)   
 n: null   
 u: undefined   
 fn:   ƒ fn(a, b)   
 map:   Map(2) { 1  => 2  ,"3" => false    }    
 set:   Set(3) { true  ,false  ,Infinity    }    
 regex:   /^https?:\/\/$/g   
 error:   Error: oops   
 date: 2023-10-15T10:45:50.962Z   
 

Default expanded nodes

Expand by paths

<script>
  let value = {
    a: {
      d: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
      e: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
      f: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
    },
    b: {
      d: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
      e: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
      f: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
    },
    c: {
      d: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
      e: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
      f: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
    },
  };
</script>

<JsonTree {value} defaultExpandedPaths={['$.a.d.h.1', '$.c.e.*']} />

Result

▶ { a: {…} ,b: {…} ,c: {…} }

a: { d: {…} ,e: {…} ,f: {…} }
b: { d: {…} ,e: {…} ,f: {…} }
c: { d: {…} ,e: {…} ,f: {…} }

Expand by level

<script>
  let value = {
    a: {
      d: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
      e: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
      f: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
    },
    b: {
      d: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
      e: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
      f: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
    },
    c: {
      d: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
      e: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
      f: { h: [{ x: 1 }, { y: 2 }], i: [{ x: 1 }, { y: 2 }], j: [{ x: 1 }, { y: 2 }] },
    },
  };
</script>

<JsonTree {value} defaultExpandedLevel={1} />

Result

▶ { a: {…} ,b: {…} ,c: {…} }

a: { d: {…} ,e: {…} ,f: {…} }
b: { d: {…} ,e: {…} ,f: {…} }
c: { d: {…} ,e: {…} ,f: {…} }

Hide preview

Sometimes when you have a JSON object or array, there’s a preview showing to the right of the object. You can set shouldShowPreview to false to hide it.

<script>
  let value = {
    message: 'hello world',
    item: [1, 2, 3],
    nested: {
      key: 'value',
    },
  };
</script>

<JsonTree {value} shouldShowPreview={false} />

▶ { message: "hello world" ,item: Array(3) ,nested: {…} }

message: "hello world"
item:
nested:

ESM / Standalone / UMD

You can import svelte-json-tree directly, without having to setting up plugins to transform .svelte code

import Jsontree from 'svelte-json-tree';

new Jsontree({
  target: document.body,
  props: { value: [14, 15] },
});

If you want to use it without installing svelte, use the standalone version

import Jsontree from 'svelte-json-tree/standalone';

new Jsontree({
  target: document.body,
  props: { value: [14, 15] },
});

Or use the UMD version

<html>
  <script src="https://unpkg.com/svelte-json-tree@1.0.0/dist/standalone/umd/index.js"></script>
  <script>
    new SvelteJsonTree({
      target: document.body,
      props: { value: [20, 21] },
    });
  </script>
</html>