Skip to content

zerodevx/svelte-json-view

Repository files navigation

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