JSON Tree Viewer
A collapsible JSON tree with type-based coloring, path copying, and an expand animation.
Recursively renders any JSON data in a monospaced font: strings green, numbers blue, booleans orange, null red. Objects and arrays expand and collapse (a height animation plus a rotating arrow, with a summary of the item count), and hovering any row lets you copy that node's path or value in one click — a good fit for API debugging panels and developer tools.
Loading preview…
npx shadcn@latest add https://webberui.com/r/json-tree-viewer.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
2
<JsonTreeViewer />
Installation
npx shadcn@latest add https://webberui.com/r/json-tree-viewer.jsonOr, once registries are configured in components.json, install it as @webberui/json-tree-viewer.
Usage
import { JsonTreeViewer } from "@/components/ui/json-tree-viewer";
<JsonTreeViewer
data={{ name: "Webber", stars: 1024, tags: ["ui", "react"], beta: false }}
defaultExpandDepth={2}
rootName="$"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | JsonValue | — | The JSON data to render (an object, an array, or any primitive value) |
defaultExpandDepth | number | 2 | How many levels are expanded by default; 0 collapses everything, Infinity expands everything |
rootName | string | "$" | Root name used when copying a path, for example $ or data |
className | string | — | Forwarded to the outermost container and merged with the built-in styles |
Accessibility
- Expand/collapse is a native
buttonwitharia-expandedand a Chinesearia-labelcontaining the node path, operable with both Enter and Space from the keyboard - The "copy path / copy value" buttons also appear on keyboard focus (
focus-visible), so they do not depend on mouse hover - A successful copy gives visual feedback by switching the icon to a checkmark, and the button stays visible for 1.4 seconds
- When the user has "reduce motion" enabled at the system level, expanding, collapsing, and the arrow rotation switch instantly instead, with no height animation played