Narcoleptic Programmers' Medicine

    svelte-json-tree

    1.0.0 • Public • Published

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

    Install

    npm i svelte-json-tree

    DownloadsWeekly Downloads

    3,326

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    487 kB

    Total Files

    65

    Last publish

    Collaborators

    • tanhauhau