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
