JSON ViewerNew

JSON to read and explore: folding objects and arrays, colored values, copy.

$ pnpm dlx shadcn@latest add @dashral/json-viewer

"id": "evt_1Q8xK2",

"type": "invoice.paid",

"created": "2026-11-06T09:30:12Z",

"livemode": false,

}

Installation

$ pnpm dlx shadcn@latest add @dashral/json-viewer

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/json-viewer.json

Usage

example.tsx

1import { JsonViewer } from "@/components/dashral/json-viewer"
2
3<JsonViewer data={event.payload} name="payload" />

Using the npm package? Import from @dashral/ui/components/json-viewer instead, here and in the examples; the rest is the same.

Examples

From a string

A JSON string is parsed; name labels the root and two levels open.

"status": 200,

"content-type": "application/json",

"x-request-id": "req_7f3a"

"next": null

}

Long arrays

pageSize shows them a page at a time; maxHeight scrolls it.

]

}

API reference

JsonViewer

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`data`	`unknown` Any JSON value, or a JSON string (parsed). Required.	—
`name`	`string` A key for the root.	—
`defaultExpandDepth`	`number` How many levels open at first; 0 starts it folded.	`1`
`pageSize`	`number` Past this many items in one array or object, a "Show N more" button.	`100`
`copyable`	`boolean` A copy button for the whole value, as indented JSON.	`true`
`maxHeight`	`number \| string` Scrolls past this height.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Tab`	Move between the foldable rows
`Enter`or`Space`	Fold or unfold a row

Accessibility

Each object and array is a button with aria-expanded; folded children are inert, out of the tab order.
Folded rows say their size ("3 keys", "12 items"), in the page's language.
Always left to right, Arabic pages included.

Motion

Children grow open and fold shut by their height, fading as they go (--duration-standard); the chevron turns on the spring.