https://github.com/tanhauhau/svelte-json-tree

JSON tree component for Svelte
https://github.com/tanhauhau/svelte-json-tree

Last synced: 21 days ago
JSON representation

JSON tree component for Svelte

• Host: GitHub
• URL: https://github.com/tanhauhau/svelte-json-tree
• Owner: tanhauhau
• License: mit
• Created: 2019-11-16T13:05:04.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-22T21:38:32.000Z (6 months ago)
• Last Synced: 2024-09-19T03:10:13.083Z (about 2 months ago)
• Language: Svelte
• Homepage: https://lihautan.com/svelte-json-tree/
• Size: 793 KB
• Stars: 170
• Watchers: 5
• Forks: 35
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-json-tree

![version](https://img.shields.io/npm/v/svelte-json-tree?style=flat-square) ![MIT License](https://img.shields.io/npm/l/svelte-json-tree?style=flat-square)

![svelte-json-tree](./images/screenshot.png)

Svelte JSON Viewer Component used in [Svelte REPL](https://svelte.dev/repl). Supports [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set), [Iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable), [Symbol](https://developer.mozilla.org/en-US/docs/Glossary/Symbol).

[Try it out on repl](https://svelte.dev/repl/89867bd1acaa48b4b29e29d1fdfa1ddf?version=3.14.1).

## Install

Use [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/lang/en) to install:

```sh

# npm

npm install --save svelte-json-tree

# yarn

yarn add svelte-json-tree

```

## Usage

With Svelte:

```html

  import JSONTree from 'svelte-json-tree';

  // your json data to view

  const value = {

    array: [1, 2, 3],

    bool: true,

    object: {

      foo: 'bar',

    },

  };

```

Without Svelte:

```js

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:

```css

/* 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:

```html



  



```


## License

[MIT](https://github.com/tanhauhau/svelte-json-tree/blob/master/LICENSE)