@zerodevx/svelte-json-view

v2.0.0

Published

19 days ago

View JSON data prettily

0High
0Medium
0Low

zerodevx

svelte vanillajs json-pretty-print json-tree

NPM Version NPM Downloads

svelte-json-view

View JSON data prettily.

A lightweight, expandable, tree-like JSON viewer. Use it as a Svelte component or drop it into any Vanilla JS app.

Here's a demo.

Install

npm i @zerodevx/svelte-json-view

Usage

Svelte

If you're using this in a Svelte app:

<!-- Component.svelte -->
<script>
  import { JsonView } from '@zerodevx/svelte-json-view'

  let json = $state({ foo: 'bar' })
</script>

<JsonView {json} />

[!WARNING]
Requires Svelte 5+ (runes mode). For compatibility with Svelte 4 or earlier, please use v1.x.

Vanilla JS

For other projects with a bundler:

// Import the bundled code
import { createJsonView } from '@zerodevx/svelte-json-view/bundled.js'

const app = createJsonView({
  target: document.querySelector('#target'), // node to render into
  json: { foo: 'bar' } // json data to view
})

app.update({ foo: 'baz' }) // update the data

app.destroy() // remove from DOM

Or load via CDN:

<head>
  <script type="module">
    import { createJsonView } from 'https://cdn.jsdelivr.net/npm/@zerodevx/svelte-json-view@2'
    const app = createJsonView({ target: document.querySelector('#target'), json: { foo: 'bar' } })
  </script>
</head>
<body>
  <div id="target"></div>
</body>

Theming

In general, use CSS variables.

| Name | Default | Description | | ------------------------------ | -------------- | ----------------------------------------- | | --jsonPaddingLeft | 1rem | Left padding applied at each depth | | --jsonBorderLeft | 1px dotted | Left border style applied at each depth | | --jsonBracketColor | currentcolor | Colour for brackets [, {, } and ] | | --jsonBracketHoverBackground | #e5e7eb | Bracket hover background | | --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 |

For a custom font (monospace recommended) or CSS var overrides, try wrapping the component and scope the styles to the wrapper:

<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

Setup

Clone the repository and install dependencies:

git clone https://github.com/zerodevx/svelte-json-view.git
cd svelte-json-view
npm i

Run the Dev Server

Start the Vite development server:

npm run dev

Open http://localhost:5173 in your browser to view the test page. The library source files are located in src/lib/.

Run Tests

End-to-end tests run on Playwright:

npm test

Test specifications in src/routes/.

Build the Package

Packaging via SvelteKit:

npm run build

Contributing

Bugs and Feature Requests

Please open a new issue or discussion on GitHub to request features or report bugs.

Pull Requests

Standard GitHub contribution workflow applies. Please ensure all tests pass before submitting a pull request.

Changelog

See the releases page.

License

ISC