svelte-json-view
svelte-json-view copied to clipboard
Published
20 hours ago •
zerodevx
zerodevx
View JSON data prettily
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
zerodevx