magic-json-tree

magic-json-tree

Svelte component to render interactive JSON trees.

Quick Start

npm install --save magic-json-tree

In your Svelte app:

<script>
  import Tree from 'magic-json-tree'

  const json = {
    name: 'john',
    age: 123,
    male: true,
    pets: ['rat', 'flees'],
    inventory: {
      belt: ['coins', 'knife', 8, undefined],
      backpack: null,
    },
    skills: new Map([
      ['strength', 123],
      [456, ['one', 'two', 'three']],
      [['favourite', 'inputs'], { taste: 'apple', smell: 'banana' }],
    ]),
  }
</script>

<Tree value={json} />

This renders a tree view:

Props

Name	Type	Default	Description
expand	number | (string | number)[]	0	Pass a number to expand that many levels deep OR pass an object path like ['item', 'subItem', 'subSubItem']
formatKey	([any, any], path: any[]) => any	null	Pass a function to format object keys. The function is passed [key, value] as its first parameter, and an object path as its second (e.g. ['item', 'subItem', 2, 'subSubItem'])
formatValue	([any, any], path: any[]) => any	null	Pass a function to format object values. The function is passed [key, value] as its first parameter, and an object path as its second (e.g. ['item', 'subItem', 2, 'subSubItem'])

Example

Execute npm run dev and open the given URL in your browser.

Theming

You can set some of the following CSS variables to overwrite the default colors:

--mjt-color-key: var(--base1);
--mjt-color-string: var(--orange);
--mjt-color-number: var(--cyan);
--mjt-color-null: var(--yellow);
--mjt-color-undefined: var(--yellow);
--mjt-color-boolean: var(--blue);
--mjt-color-object: var(--base1);
--mjt-color-array: var(--base1);
--mjt-color-symbol: var(--green);
--mjt-color-map: var(--green);
--mjt-color-set: var(--green);