Marble UI
← Components

JSON Viewer

Preview: Default

Collapsible, keyboard-navigable JSON tree (React Aria Tree): typed colors, item counts, copy the path of any node.

Import

import { JsonViewer } from '@marbleui/ui'

Props

<JsonViewer>

PropTypeDefaultDescription
data *requiredstring | number | boolean | Json[] | { [k: string]: Json; } | null—
classNamestring—
defaultExpandDepthnumber1
labelstring'JSON'

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Tree · React Aria TreeItem · React Aria TreeItemContent. Follow the primitive's docs for the full keyboard map.

Usage notes

Read-only, collapsible tree for inspecting JSON such as API responses or webhook payloads. To edit JSON use JsonInput; to show it as text use CodeBlock.

<JsonViewer label="Webhook event" data={event} defaultExpandDepth={2} />
  • data is an already-parsed value, not a JSON string. Values are colored by type, and arrays and objects show their size (Array(2), {3}).
  • defaultExpandDepth sets how many levels start open (1, the default, opens the root to show its keys). It’s read once; after that the chevrons and the Expand all / Collapse all buttons control it.
  • It’s a React Aria Tree: arrow keys move between nodes and Right/Left expand or collapse. label names the tree for screen readers.
  • Hovering a row reveals a button that copies its path (data.invoice.number); “Copy JSON” copies the whole value, pretty-printed. Nothing is virtualized, so Expand all on a very large payload renders every node.
Example source · show
import { JsonViewer } from './json-viewer'

const data = { id: 'evt_1Q8x', type: 'invoice.paid', livemode: false, created: 1792432986, data: { invoice: { number: 'INV-2026-0142', total: 39930, currency: 'usd', lines: [{ description: 'Team plan · 12 seats', amount: 28800 }, { description: 'Agent runs', amount: 4200 }], customer: { name: 'Northwind Inc.', email: 'billing@northwind.com', tax_exempt: null } } } }
export const styles = { Default: () => <JsonViewer className="w-[30rem]" label="Webhook event" data={data} defaultExpandDepth={3} /> }

Source: packages/ui/src/json-viewer/json-viewer.tsx

Catalog

Category
editor
Priority
Extra
Primitive
composed
React Aria
Tree