1.0.11 • Published 9 months ago

@zerodevx/svelte-json-view v1.0.11

Weekly downloads
-
License
ISC
Repository
github
Last release
9 months ago

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.

NameDefaultDescription
--jsonPaddingLeft1remAmount of left padding to apply at each depth
--jsonBorderLeft1px dottedStyle applied to left border for each depth
--jsonBracketColorcurrentcolorColour for brackets [, {, } and ]
--jsonBracketHoverBackground#e5e7ebHover background for brackets
--jsonSeparatorColorcurrentcolorColour for separators : and ,
--jsonKeyColorcurrentcolorColour for keys
--jsonValColor#9ca3afDefault colour for values
--jsonValStringColor#059669Colour for string values
--jsonValNumberColor#d97706Colour for number values
--jsonValBooleanColor#2563ebColour 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

NameTypeDefaultDescription
jsonobjectundefinedUn-stringified object to display
depthnumberInfinityInitial 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

1.0.11

9 months ago

1.0.10

10 months ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.2.1

3 years ago

0.2.2

3 years ago

0.2.0

3 years ago

0.1.2

4 years ago

0.1.3

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago