logo

Svelte JSON View Lite

Fast, tiny JSON tree viewer for Svelte 5.
A port of react-json-view-lite with runes, SSR, snippet overrides, CSS-variable theming, and zero runtime dependencies.

Get Started API Reference View on npm

Live playground

Edit the JSON on the left; the tree on the right updates as you type.

JSON source Rendered tree
Full playground
{
    user:{
      id:42,
      name:"Ada Lovelace",
      tags:[
        "admin",
        "beta"
      ],
      joined:"2024-01-15T09:00:00.000Z"
    },
    totals:{
      requests:1523,
      errors:0,
      latencyMs:12.4
    },
    active:true,
    nextReview:null
}

Why this port?

The React API you already know, with Svelte 5 runes under the hood and enough new surface to make the port worth the swap.

Svelte 5 Runes

$props, $state, $derived, $effect throughout — no Svelte 4 shims, no legacy reactivity syntax.

Familiar API

Same prop names, themes, and strategy helpers as react-json-view-lite — proven ergonomics, idiomatic Svelte 5.

Snippet Overrides

Per-type Svelte snippets for string, number, date, boolean, and every other primitive.

CSS-Variable Theming

Every color exposed as a --sjv-* custom property. Retheme without swapping the style prop.

SSR Safe

$props.id() keeps aria-controls stable across server render and client hydration.

WAI-ARIA Treeview

role="tree" with roving tabindex, arrow-key navigation, and collapse/expand labels.

See every knob in action

Snippet overrides, CSS-variable themers, click-to-expand, edge cases, and the full live playground — all with live code.

Browse Examples