JsonViewer
json-viewerInspects collapsible JSON values with syntax coloring, copying, and depth controls.
Usage
Basic usage
Passing data will render the foldable JSON tree, and the first layer will be expanded by default.
id:"chatcmpl-9hk2f7"
object:"chat.completion"
model:"claude-opus-4-7"
created:1749100800
tsx
<JsonViewer data={response} />Control the initial expansion depth
defaultExpandedDepth controls the initial expansion level (root direct child node depth=1).
prompt_tokens:128
completion_tokens:42
total_tokens:170
cost_usd:0.00169
tsx
<JsonViewer data={response.usage} defaultExpandedDepth={3} />Copy node path
onCopyPath returns the node JSON path when copying on hover; rootName determines the path prefix (e.g. $.response.usage).
id:"chatcmpl-9hk2f7"
object:"chat.completion"
model:"claude-opus-4-7"
created:1749100800
tsx
<JsonViewer
data={response}
rootName="response"
onCopyPath={(path) => console.log(path)}
/>When to use
Use JsonViewer to inspect arbitrary nested JSON in gateway logs, API debuggers, or configuration previews. Use Descriptions for flat key-value details. JsonViewer is read-only and designed for deep trees.
Import
ts
import { JsonViewer, valueType, jsonPath } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| data* | unknown | — | Any JSON-compatible value. |
| rootName | string | — | Optional root label such as "response". |
| defaultExpandedDepth | number | 1 | Nodes expand initially when depth < defaultExpandedDepth; direct root children have depth 1. |
| maxAutoExpandKeys | number | 50 | Child-count threshold above which an object or array starts collapsed. |
| className | string | — | Root class name. |
Events
| Event | Type | Description |
|---|---|---|
| onCopyPath | (path: string) => void | Called after copying a node value and its JSON path. |
Usage notes
- JsonViewer is read-only.
onCopyPathreports copying and never changesdata. - Objects with more than
maxAutoExpandKeyschildren start collapsed for performance; expand them manually. - The copy control uses built-in Chinese
"\u590d\u5236"(“Copy”) and changes to"\u5df2\u590d\u5236"(“Copied”).
Related
Table · Book3D · ProTable · PricingTable · EditableTable · List
Playground
id:"chatcmpl-9hk2f7"
object:"chat.completion"
model:"claude-opus-4-7"
created:1749100800
<JsonViewer data={response} defaultExpandedDepth={1} />