Components
JSONViewer
Render any JSON value as a syntax-highlighted, collapsible tree.
JSONViewer takes any value and renders it as an interactive tree with
syntax-highlighted keys and values; objects and arrays are collapsible nodes.
Set defaultExpanded to false to start collapsed. Use it for inspecting API
responses, config, or debug payloads in admin tools and dev panels.
Example
Preview
Object(3)
"plan":"commercial"
"ready":false
"primitives":116
import { JSONViewer } from '@officina/ui';
function ResponseInspector({ data }) {
return <JSONViewer value={data} defaultExpanded />;
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | unknown | — | The value to render as an interactive JSON tree. |
| className | string | — | Extra classes for the viewer container. |
| defaultExpanded | boolean | true | Expand all nodes on first render. |