JSON view | Sodium design system

States

{
"table": "events_daily",
"rows": 1204330,
"bytes": 98234112,
"partitioned_by": [
0: "day",
1: "region"
open
{…}4 keys
folded
{
"step": "extract",
"code": "NoSuchKey",
"message": "The object lake://lake/events/2026-10-18T12/part-0000.parquet was not found. Th…
long string folded

When to use it

Use: A run's result, a job's config or a partition's stats that people search and drill into.
Use: Someone needs the path to a value for a query, a jq filter or a ticket.
Not for: A file or a snippet to read top to bottom. Use Code block.
Not for: Records that share the same fields. Use Table.

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 partitions[2].rows means counting brackets.
Must: Name the tree with label: what the data is, such as "run_8f2a91 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.
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.
Never: Colour keys, strings or numbers with hues or yellow. Because colour in Sodium is status and yellow is the action, and JSON view shares Code block's ink steps.
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.
Should: Keep maxRows near 16 beside other regions; the tree scrolls past it. Because an open payload can run to hundreds of rows and push the rest of the page 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 its "2/5" place 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 they copied once in a status region.

7 keys

6 edge cases

String over 120 characters: Folds to 80 with a "+n chars" cell.
Empty object or array: Shows {} or [] with nothing to open.
Key with spaces: The path writes it in brackets: $["row count"].
Search matches nothing: The tree says so in a sentence, with the query in mono.
Right to left page: The tree stays left to right.
Narrow at 390: Rows scroll sideways inside the frame.

7 props

15 tokens