Json Viewer

A collapsible JSON tree for React with syntax coloured values, item counts on folded nodes, copy value and copy path buttons, search highlighting and arrow key navigation.

src/registry/ui/json-viewer.tsx/r/json-viewer.json

Installation#

bash

npx shadcn@latest add @minidev/json-viewer

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/json-viewer.json

Usage#

tsx

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

export function Example() {
  return (
    <JsonViewer value={{ name: "minidev-ui", items: 300 }} />
  )
}

API reference#

JsonViewer props
Prop	Type	Default
`value`	`unknown`	`SAMPLE`
`title`	`string`	`"GET /v1/invoices/inv_8f3a2c"`
`rootName`	`string`	`""`
`defaultExpandDepth`	`number`	`1`
`defaultExpanded`	`string[]`	`["$.customer", "$.lines", "$.lines[0]"]`
`toolbar`	`boolean`	`true`
`maxStringLength`	`number`	`64`
`onCopy`	`(text: string, kind: "value" \| "path", path: string) => void`	`-`
`aria-label`	`string`	`-`
`className`	`string`	`-`