JSON Viewer
A collapsible, syntax-colored tree view for inspecting JSON data — objects, arrays, and raw JSON strings alike.
{6}
id:"usr_1a2b3c"
name:"Ava Patel"
active:true
roles:[2]
profile:{3}
notes:null
API
All inputs and configuration options for zyra-json-viewer.
| Prop | Type | Default | Description |
|---|---|---|---|
data | unknown | null | A parsed object/array/primitive, or a raw JSON string to parse |
expandDepth | number | 1 | Depth (0 = root) below which nodes start out collapsed |
maxDepth | number | 20 | Hard cap on render depth — deeper nodes stop recursing, guarding against huge/circular-looking payloads |
copyable | boolean | true | Shows a "Copy" button that copies the full formatted JSON |
Tokens
CSS custom properties zyra-json-viewer reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-color-json-viewer-bg | var(--zyra-color-surface-code) | Fill color of the viewer panel — the same tuned code-surface tone Code Block uses. |
Border--zyra-color-json-viewer-border | var(--zyra-color-border-color) | Border color of the viewer panel. |
Key--zyra-color-json-viewer-key | var(--zyra-color-foreground) | Color of object property keys and array indices. |
Toggle icon--zyra-color-json-viewer-toggle | var(--zyra-color-foreground-subtle) | Color of the expand/collapse chevron. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Rows use role="treeitem" inside a role="tree" container, with aria-level and aria-expanded on container nodes
- Expand/collapse toggles are real <button> elements with an aria-label that reflects the current state
- Invalid JSON strings render an inline role="alert" message instead of a silently empty tree