svelte/json.
A fast, tiny JSON tree viewer for Svelte 5 — built for API explorers, dashboards, logs, docs, and generated JSON artifacts. React API parity, typed snippets, SSR-safe ARIA tree semantics, CSS-variable theming, and zero runtime dependencies.
inspect structured data.
Render object and array payloads as an accessible Svelte tree. The viewer
follows the active site theme through mode-watcher; no separate
theme toggle lives inside the demo.
data=28 lineswhy svelte-json-view-lite.
The React viewer API you know, rendered through Svelte 5 primitives.
React API Parity
Keep the familiar react-json-view-lite prop shape while moving rendering into Svelte 5.
Svelte 5 Runes
$props, $state, $derived, and $effect throughout — no Svelte 4 compatibility layer.
Typed Snippet Overrides
Customize strings, numbers, booleans, dates, functions, null, undefined, bigint, and labels inline.
Accessible Treeview
role="tree", aria-expanded, aria-controls, and roving tabindex keyboard navigation.
CSS Variable Themes
Built-in light and dark themes expose every color through the --sjv-* namespace.
Zero Runtime Dependencies
A compact viewer for dashboards, docs, logs, API explorers, and generated JSON artifacts.
how we compare.
A compact side-by-side look at JSON viewers and editors you might consider for Svelte surfaces.
| library | framework | read-only | editing | snippets | theming | zero deps |
|---|---|---|---|---|---|---|
| @humanspeak/svelte-json-view-lite | Svelte 5 | yes | no | yes | CSS vars | yes |
| react-json-view-lite | React | yes | no | no | theme | yes |
| svelte-jsoneditor | Svelte | yes | yes | no | yes | no |
| vanilla-jsoneditor | agnostic | yes | yes | no | yes | no |
| react-json-view | React | yes | no | no | theme | no |
| @uiw/react-json-view | React | yes | no | no | yes | no |
| @textea/json-viewer | React | yes | no | no | theme | no |
built for ai-assisted code.
Point Cursor, Claude Code, or any LLM at the manifests below and they know the full Svelte JSON View Lite API — props, types, snippets, themes, accessibility notes. Migration prompts from React JSON viewers have ground truth.
/llms.txt
Compact map. Project blurb, feature list, prop catalogue, snippet slots, doc URLs. Drop into any agent for ground-truth lookup.
/llms-full.txt
Full reference. Every prop, exported type, theme hook, snippet override, and accessibility note — with code snippets. Optimised for LLM context windows.
/docs/<slug>.md
Every doc page mirrored as raw markdown. Append .md to any doc
URL to fetch the source the chatbot can quote verbatim.
Use https://jsonview.svelte.page/llms.txt as the source for Svelte JSON
View Lite APIs. Rewrite this React JSON viewer snippet for Svelte 5 using <JsonView>, typed snippet overrides, and the same expansion
behavior.explore interactive examples.
Playground, snippets, themes, click-to-expand behavior, and edge-case values.
Live Playground
Edit JSON and watch the tree update with parse errors surfaced inline.
Snippet Overrides
Decorate URLs, dates, labels, booleans, and primitive values with Svelte snippets.
CSS Variable Themer
Tune --sjv-* variables live without replacing the style map.
Click to Expand
Make labels toggle nodes in addition to the disclosure control.
Edge Cases
Dates, functions, undefined, bigint, nested arrays, and compact top-level output.
ARIA Treeview
Inspect roles, expanded state, keyboard focus, and labelled node controls in context.