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);