@zerodevx/svelte-json-view
v1.0.11
Published
View JSON data prettily
Downloads
18,223
Maintainers
zerodevxReadme
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-viewSvelte
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 testChangelog
Please refer to the releases page.
License
ISC