Demos

Tree rendering basics

Set .data to any JS value. Containers become collapsible <details> nodes; primitives render with color-coded type styling. The boolean attributes show-types, show-sizes, and show-indices reveal extra metadata.

Expansion control

The expanded attribute sets the initial depth. The toolbar's Expand / Collapse buttons and the methods .expandAll() / .collapseAll() work at any time.

Path & glob API

Paths use object keys (users.name), array indices (users[0]), and Map/Set entry markers (cache@0). The matcher accepts string, glob (* one segment, ** zero or more), RegExp, or a predicate.

Search across keys & values

Open the search panel in the toolbar (or call .search(query)) to filter. Search runs over a pre-built record array, not the DOM — only ancestors of the active match expand, not the whole tree. Press Enter to advance, Shift-Enter to step back.

Try queries like ada, email, or the regex \d{3} in regex mode.

Map / Set with object keys

Map entries are addressed by index with the @<i> path segment. The internal WeakMap preserves the original key reference, so .entryAt('cache@0').key returns the same object you put in.

Exotic types

BigInt, Date, RegExp, Function, and circular references all render with distinct styling. Circular self-references render as [circular] instead of stack-overflowing.

Live theming via CSS tokens

The token contract is --json-viewer-foo → --vb-foo → hardcoded light-dark(). Pick colors below to set custom properties directly on the host element — no JS rebuilds, just CSS.

Load JSON from a URL

The src attribute fetches and parses JSON on connect (or whenever the attribute changes). Errors render as a small { error: "..." } object.

<json-viewer src="../test/fixtures/api.json" expanded="1" show-types></json-viewer>

Raw mode

Set mode="raw" to render a pretty-printed JSON string instead of a tree — useful for copy/paste.