JSON viewer

A collapsible, searchable tree for tool inputs and outputs, with copy path and copy value on every row and full keyboard navigation.

Markdown

On this page

A pull request from a GitHub tool call, with copy path and copy value on every row.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/json-viewer.json

Usage

tsx

import { JsonViewer } from "@/components/ui/chatcn/json-viewer"

<JsonViewer data={part.output} defaultExpandDepth={1} label="Tool output" />

Paths copy as JSONPath, for example $.labels[0].name. Strings longer than maxStringLength are cut with a control that shows the rest, and containers with more than pageSize children page in.

Examples

Search

Search matches keys and values, highlights every hit and opens the path to each one. Enter and Shift+Enter step through matches.

Search highlights matches and opens the path to each one.

Props

Prop	Type	Notes
`data`	`unknown`	Any JSON value
`defaultExpandDepth`	`number`	Containers shallower than this start open. Default 1
`defaultQuery`	`string`	Initial search
`toolbar`	`boolean`	Search, expand all and copy JSON. Default `true`
`maxStringLength`	`number`	Default 120
`pageSize`	`number`	Children per container before Show more. Default 100
`maxHeight`	`number \| string`	Default 360
`label`	`string`	Accessible name of the tree

Keyboard

Key	Action
`Up`, `Down`	Previous and next row
`Right`	Open a container, or move to its first child
`Left`	Close a container, or move to its parent
`Home`, `End`	First and last row
`Enter`, `Space`	Toggle a container, or show a whole long string
`C`	Copy the value of the focused row
`P`	Copy the path of the focused row
`Enter` in search	Next match. `Shift+Enter` for the previous one
`Esc` in search	Clear the search

Accessibility

The tree follows the APG tree view pattern: role=tree, treeitem rows with level, position and aria-expanded, and one roving tab stop.
Copying from the keyboard is announced in a polite live region, including the path that was copied.
Types get subtle hues (strings green, numbers blue, booleans purple, null gray), and strings keep their quotes and literals read as themselves, so nothing depends on color.

Motion

None. Opening and closing rows is frequent and keyboard-driven, so it is instant.
Row actions appear on hover or focus without a transition.