JSON view | Glaze design system

Usage

When to use it

Use: A tool result, a run payload or a span's attributes that people search and drill into.
Use: Someone needs the path to a value for code, a jq filter or a bug report.
Not for: A file or a snippet to read top to bottom. Use Code block.
Not for: A handful of named fields about one thing. Use Data list.

6 rules

Never: Show structured output as JSON.stringify in a CodeBlock when people will search or fold it. Because a flat dump of 400 lines has no folding, no search and no path, so finding steps[2].ms means counting brackets.
Must: Name the tree with label: what the data is, such as "issue_refund result". Because label names the tree, the search field and the scroll region, and "JSON" alone does not say which of three results it is.
Should: Open two levels by default, and set defaultExpandDepth={1} for payloads over a few hundred rows. Because the top keys tell what is inside, and a fully open large payload buries them.
Never: Colour keys, strings or numbers with hues. Because colour means status in Glaze, and JSON view shares Code block's ink steps.
Must: Pass the parsed value as data, not a JSON string. Because a string renders as one long string row, with nothing to fold or search inside it.
Should: Keep maxRows at about 16 inside a card; the tree scrolls past it. Because an open payload can run to hundreds of rows and push the rest of the card away.

4 checks

: The tree follows the WAI-ARIA tree pattern: role="tree", treeitems with aria-level and aria-expanded, one tab stop.
: Search reports "2 of 5" or "No matches" in a polite live region.
: When the tree overflows, its scroll box takes a tab stop so the keyboard can scroll it.
: Copy and path copy say Copied once in a status region.

7 keys

5 edge cases

7 props

13 tokens