@zerodevx/svelte-json-view

View JSON data prettily

Usage no npm install needed!

<script type="module">
  import zerodevxSvelteJsonView from 'https://cdn.skypack.dev/@zerodevx/svelte-json-view';
</script>

README

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 -D @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 { JsonView } from '@zerodevx/svelte-json-view'

const app = new JsonView({
  target: document.body,  // node to render into
  props: {
    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@0"></script>
  <!-- Register the view -->
  <script type="module">
    window.view = 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>

Props

Name Type Default Description
json Object None Un-stringified object to display
depth Number Infinity Initial expansion depth

CSS vars

ul {
  padding-left: var(--nodePaddingLeft, 1rem);
  border-left: var(--nodeBorderLeft, 1px dotted #9ca3af);
  color: var(--nodeColor, #374151);
}
.bracket:hover {
  background: var(--bracketHoverBackground, #d1d5db);
}
.comma {
  color: var(--nodeColor, #374151);
}
.val {
  color: var(--leafDefaultColor, #9ca3af);
}
.val.string {
  color: var(--leafStringColor, #059669);
}
.val.number {
  color: var(--leafNumberColor, #d97706);
}
.val.boolean {
  color: var(--leafBooleanColor, #2563eb);
}

License

ISC