JsonViewer
Collapsible JSON tree for API responses, event payloads, and config.
Component behavior
JsonViewer displays a collapsible value tree. Collapsed arrays and objects show summary counts, leaves use type colors, and a copy control copies the document.
- Webhook and API payloads with variable structures.
- Inspection of nested fields within a larger document.
- Configuration values that must be inspected and copied.
CodeBlock: the view requires source formatting, line numbers, or non-JSON text.
DiffViewer: two payloads must be compared.
DescriptionList: a record has a fixed set of fields.
TreeTable: hierarchical records need aligned data columns.
LogViewer: payloads arrive as a stream that must be followed and filtered.
Props
data is a JsonValue, the recursive union of string, number, boolean, null, array, and plain object. Pass the parsed value, not a string; a JSON string renders as a single quoted leaf. Expansion state is uncontrolled and keyed by path, and the component holds it internally: there is no expanded prop and no callback when a branch opens.
| Prop | Type | Default | Description |
|---|---|---|---|
data | JsonValue | — | The parsed JSON value to render. Strings are quoted and tinted, numbers and booleans are not, null renders italic. |
defaultExpandDepth | number | 1 | Depth open on first render. 1 shows the root's immediate children. Branches deeper than this collapse to a [n] / {n keys} summary. |
title | ReactNode | — | Monospace label on the left of the header. |
copyable | boolean | true | Displays a copy button for JSON.stringify(data, null, 2), including collapsed branches. |
searchable | boolean | — | Displays a filter input. Matching rows are tinted; nonmatching rows use 32% opacity. |
maxHeight | number | 320 | Maximum body height, in pixels, before scrolling. The header remains above the body. |
Examples
Default depth
defaultExpandDepth={1} expands the root level. Selecting a branch toggles its expansion. Reset clears manual toggles and restores the default depth.
Deeper initial expansion
defaultExpandDepth sets an expansion threshold. The component stores explicit branch toggles separately. Increasing the threshold expands untouched branches above the new depth. Greater expansion renders more nodes and increases work on large documents.
Title, filter, and copy
The header appears as soon as any of title, copyable, or searchable is on (copyable defaults to true); filtering collapses to what matches. Filtering matches a lowercased substring against key names and, for leaves, the stringified value; branch rows match on their key alone.
No header at all
With copyable={false} and no title or filter, the header is omitted. Use maxHeight to constrain the remaining scroll region.
import { JsonViewer } from "@solarius/onset";
import type { JsonValue } from "@solarius/onset";
<JsonViewer
data={JSON.parse(response)}
title="POST /v1/payments"
defaultExpandDepth={2}
searchable
/>;