README
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 -D @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 { JsonView } from '@zerodevx/svelte-json-view'
const app = new JsonView({
target: document.body, // node to render into
props: {
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@0"></script>
<!-- Register the view -->
<script type="module">
window.view = 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>
Props
Name | Type | Default | Description |
---|---|---|---|
json | Object | None | Un-stringified object to display |
depth | Number | Infinity | Initial expansion depth |
CSS vars
ul {
padding-left: var(--nodePaddingLeft, 1rem);
border-left: var(--nodeBorderLeft, 1px dotted #9ca3af);
color: var(--nodeColor, #374151);
}
.bracket:hover {
background: var(--bracketHoverBackground, #d1d5db);
}
.comma {
color: var(--nodeColor, #374151);
}
.val {
color: var(--leafDefaultColor, #9ca3af);
}
.val.string {
color: var(--leafStringColor, #059669);
}
.val.number {
color: var(--leafNumberColor, #d97706);
}
.val.boolean {
color: var(--leafBooleanColor, #2563eb);
}
License
ISC