@zerodevx/svelte-json-view
TypeScript icon, indicating that this package has built-in type declarations

1.0.9 • Public • Published

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

Package Sidebar

Install

npm i @zerodevx/svelte-json-view

Weekly Downloads

2,294

Version

1.0.9

License

ISC

Unpacked Size

68.5 kB

Total Files

10

Last publish

Collaborators

  • zerodevx