logo

Getting Started

@humanspeak/svelte-json-view-lite is a Svelte 5 port of react-json-view-lite. It renders any JSON-serializable value as a collapsible tree with keyboard navigation, SSR-stable IDs, CSS-variable theming, and typed per-type Snippet overrides — all with zero runtime dependencies.

Installation

npm install @humanspeak/svelte-json-view-lite
npm install @humanspeak/svelte-json-view-lite
pnpm add @humanspeak/svelte-json-view-lite
pnpm add @humanspeak/svelte-json-view-lite
yarn add @humanspeak/svelte-json-view-lite
yarn add @humanspeak/svelte-json-view-lite

The package ships types, so TypeScript consumers need no additional @types/*.

Quick Start

Import the component and pass any value as data:

<script lang="ts">
    import { JsonView } from '@humanspeak/svelte-json-view-lite'

    const payload = {
        user: { id: 42, name: 'Ada Lovelace' },
        active: true,
        nextReview: null
    }
</script>

<JsonView data={payload} />
<script lang="ts">
    import { JsonView } from '@humanspeak/svelte-json-view-lite'

    const payload = {
        user: { id: 42, name: 'Ada Lovelace' },
        active: true,
        nextReview: null
    }
</script>

<JsonView data={payload} />

That’s the whole API for the default case. The tree renders light-theme by default and respects prefers-color-scheme only through explicit theme swapping (see below).

Dark Theme

Every public style token ships in two flavors. Swap them with a single prop:

<script lang="ts">
    import { JsonView, darkStyles } from '@humanspeak/svelte-json-view-lite'
</script>

<JsonView data={payload} style={darkStyles} />
<script lang="ts">
    import { JsonView, darkStyles } from '@humanspeak/svelte-json-view-lite'
</script>

<JsonView data={payload} style={darkStyles} />

For a mode-aware site, bind the prop to your mode store:

<script lang="ts">
    import { JsonView, defaultStyles, darkStyles } from '@humanspeak/svelte-json-view-lite'
    import { mode } from 'mode-watcher'

    const theme = $derived(mode.current === 'dark' ? darkStyles : defaultStyles)
</script>

<JsonView data={payload} style={theme} />
<script lang="ts">
    import { JsonView, defaultStyles, darkStyles } from '@humanspeak/svelte-json-view-lite'
    import { mode } from 'mode-watcher'

    const theme = $derived(mode.current === 'dark' ? darkStyles : defaultStyles)
</script>

<JsonView data={payload} style={theme} />

Prefer theming with CSS variables? Every color is exposed as a --sjv-* custom property — see Themes & CSS variables.

Expansion Strategies

By default every node is collapsed except the root. Pass a shouldExpandNode predicate to change that:

<script lang="ts">
    import { JsonView, allExpanded, collapseAllNested } from '@humanspeak/svelte-json-view-lite'
</script>

<!-- Fully expanded -->
<JsonView data={payload} shouldExpandNode={allExpanded} />

<!-- Only the root -->
<JsonView data={payload} shouldExpandNode={collapseAllNested} />

<!-- Custom: expand first two levels -->
<JsonView data={payload} shouldExpandNode={(level) => level < 2} />
<script lang="ts">
    import { JsonView, allExpanded, collapseAllNested } from '@humanspeak/svelte-json-view-lite'
</script>

<!-- Fully expanded -->
<JsonView data={payload} shouldExpandNode={allExpanded} />

<!-- Only the root -->
<JsonView data={payload} shouldExpandNode={collapseAllNested} />

<!-- Custom: expand first two levels -->
<JsonView data={payload} shouldExpandNode={(level) => level < 2} />

Next Steps