examples.
Hands-on demos of @humanspeak/svelte-json-view-lite — live JSON editing, typed snippet overrides, CSS-variable theming, interaction hooks, value edge cases, and ARIA tree behavior. Edit, copy, ship.
pick a demo.
Each page is a self-contained live example with the source you need to copy into your own project.
live playground.
DEMO
Edit JSON in real time and see the tree render instantly with inline parse errors.
snippet overrides.
SNIPPETS
Decorate strings, numbers, dates, booleans, labels, and primitive values with typed Svelte snippets.
css variable themer.
THEMING
Tune the --sjv-* theme tokens live without replacing the viewer style map.
click to expand.
INTERACTION
Toggle label-click expansion and watch beforeExpandChange decisions stream into a live event log.
edge cases.
VALUES
Render dates, bigints, functions, nulls, empty containers, nested arrays, and long strings.
aria treeview.
A11Y
Inspect tree roles, expanded state, labelled controls, and keyboard-ready focus behavior.
the playground → edit JSON live