<json-viewer>

A standalone JSON viewer web component. Native <details> for collapse, Shadow DOM for isolation, Vanilla Breeze tokens for theming, mobile-first toolbar, programmatic path API for expand / collapse / search.

Component API
TypeNameNotes
attrdataJSON string. Prefer the .data property for objects.
attrsrcURL to fetch JSON from.
attrexpandedDepth (integer), true, or false. Default 1.
attrmodetree (default) or raw.
attrshow-typesDisplay type chips next to values.
attrshow-sizesDisplay item counts on arrays/objects.
attrshow-indicesDisplay array indices.
attrindentch units for indentation (default 2).
prop.dataThe object to render. Setter triggers re-render.
method.expand(path)Path string, glob (**.name), or RegExp.
method.collapse(path)Same matcher style as .expand().
method.expandAll() / .collapseAll()Bulk operations.
method.search(query)Returns iterator; .next() scrolls to + highlights match.
method.copy()Copy current JSON to clipboard.
eventkeyclickDetail: { path, key, value }. Fires when a key is tapped.
eventvalueclickDetail: { path, value, type }.
token--vb-json-key, --vb-json-string, --vb-json-number, --vb-json-boolean, --vb-json-null, --vb-accent, --vb-surface, --vb-text, --vb-text-muted, --vb-border, --vb-font-mono, --vb-radius, --vb-space-1..4Override from outside the shadow boundary.