Package Exports

svelte-json-tree

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-json-tree) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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