View JSON data prettily
npm install @zerodevx/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.
Install the package:
``
$ npm i @zerodevx/svelte-json-view
If you're using this in a Svelte app:
`html
`
For other applications with a bundler:
`js/dist
// Import the compiled code from
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:
`html`
...
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:
`html
`
| Name | Type | Default | Description |
| ------- | -------- | ----------- | -------------------------------- |
| json | object | undefined | Un-stringified object to display |depth
| | number | Infinity | Initial expansion depth |
Library is packaged via SvelteKit. Standard Github
contribution workflow
applies.
End-to-end testing via Playwright. To run tests
headlessly:
`
$ npm run test
Please refer to the releases page.
ISC