JSON viewer

A collapsible JSON tree with search, paging for long arrays, and copy value or path.

$npx shadcn@latest add @silicon-ui/json-viewer

datanew

Installation

$npx shadcn@latest add @silicon-ui/json-viewer

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/json-viewer/json-viewer.tsx
- components/silicon-ui/json-viewer/json-viewer.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

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

Prop	Type	Default
`data*`	`unknown`	—
`rootName` Name of the root in paths, as in `root.users[0].name`. Defaults to "root".	`string`	`"root"`
`defaultExpandDepth` Levels open on first render when `defaultExpanded` is not set. Defaults to 1, which opens the root.	`number`	`1`
`expanded` Paths of open branches.	`string[]`	—
`defaultExpanded`	`string[]`	—
`onExpandedChange`	`(paths: string[]) => void`	—
`searchable` Show the search field. Defaults to true.	`boolean`	`true`
`query`	`string`	—
`defaultQuery`	`string`	`""`
`onQueryChange`	`(query: string) => void`	—
`pageSize` Children shown per page in a long array or object. Defaults to 50.	`number`	`50`
`copyable` Show copy value and copy path actions. Defaults to true.	`boolean`	`true`
`onCopy`	`(detail: JsonViewerCopyDetail) => void`	—
`onSelect` Called when a row becomes the current one.	`(detail: { path: string; value: unknown; type: JsonValueType }) => void`	—
`showPath` Show the path of the current row under the tree. Defaults to true.	`boolean`	`true`
`maxHeight` Height of the scrolling tree area. Defaults to 420px.	`number \| string`	`420`
`label` Accessible name of the tree.	`string`	`"JSON"`
`className`	`string`	—

Also accepts the props of HTMLAttributes.