svelte-json-view

View JSON data prettily.

Display JSON data in a tree-like expandable view. Use as a Svelte component or in Vanilla JS.

Here's a demo.

Usage

Install the package:

$ npm i @zerodevx/svelte-json-view

Svelte

If you're using this in a Svelte app:

<script>
  import { JsonView } from '@zerodevx/svelte-json-view'

  const json = { foo: 'bar' }
</script>

<JsonView {json} />

Vanilla JS

For other applications with a bundler:

// Import the compiled code from `/dist`
import { JsonView } from '@zerodevx/svelte-json-view/dist'

const app = new JsonView({
  target: document.body   // node to render into
})

app.$set({
  json: { foo: 'bar' },   // object to prettify
  ...                     // any other props
})

Or load via CDN:

<head>
  ...
  <!-- Load `JsonView` from CDN -->
  <script defer src="https://cdn.jsdelivr.net/npm/@zerodevx/svelte-json-view@1"></script>
  <!-- Register the view -->
  <script type="module">
    const app = new JsonView({
      target: document.querySelector('#target'), // node to render into
      props: {
        json: { foo: 'bar' }, // object to prettify
        ...                   // any other props
      }
    })
  </script>
</head>
<body>
  <div id="target"></div>
</body>

Theming

In general, use CSS variables.

Name	Default	Description
`--jsonPaddingLeft`	`1rem`	Amount of left padding to apply at each depth
`--jsonBorderLeft`	`1px dotted`	Style applied to left border for each depth
`--jsonBracketColor`	`currentcolor`	Colour for brackets `[`, `{`, `}` and `]`
`--jsonBracketHoverBackground`	`#e5e7eb`	Hover background for brackets
`--jsonSeparatorColor`	`currentcolor`	Colour for separators `:` and `,`
`--jsonKeyColor`	`currentcolor`	Colour for keys
`--jsonValColor`	`#9ca3af`	Default colour for values
`--jsonValStringColor`	`#059669`	Colour for `string` values
`--jsonValNumberColor`	`#d97706`	Colour for `number` values
`--jsonValBooleanColor`	`#2563eb`	Colour for `boolean` values

To apply your own font family (a monospaced font is recommended) or apply custom CSS var overrides, try wrapping the component and applying these styles to the wrapper like so:

<div class="wrap">
  <JsonView {json} />
</div>

<style>
  .wrap {
    font-family: monospace;
    font-size: 14px;
    --jsonBorderLeft: 2px dashed red;
    --jsonValColor: blue;
    ...
  }
</style>

Props

Name	Type	Default	Description
`json`	`object`	`undefined`	Un-stringified object to display
`depth`	`number`	`Infinity`	Initial expansion depth

Development

Library is packaged via SvelteKit. Standard Github contribution workflow applies.

Tests

End-to-end testing via Playwright. To run tests headlessly:

$ npm run test

Changelog

Please refer to the releases page.

License

ISC

zerodevx / svelte-json-view