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	Color for brackets `[`, `{`, `}` and `]`
--jsonBracketHoverBackground	#e5e7eb	Hover background for brackets
--jsonSeparatorColor	currentcolor	Color for separators `:` and `,`
--jsonKeyColor	currentcolor	Color for keys
--jsonValColor	#9ca3af	Default color for values
--jsonValStringColor	#059669	Color for `string` values
--jsonValNumberColor	#d97706	Color for `number` values
--jsonValBooleanColor	#2563eb	Color for `boolean` values

It's recommended to wrap the component to apply your own font family (a monospaced font is recommended) and also to apply custom CSS var overrides.

<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

medinamarquezp/svelte-json-view