JSON Viewer
Collapsible, syntax-colored JSON tree with path copying, search, and expand/collapse controls.
lucide-react
lucide-reactLoading...
Installation
$ shadcn add @jalco/json-viewerUsage
import { JsonViewer } from "@/components/json-viewer"<JsonViewer data={myObject} title="Response" />Examples
Auto-expanded nodes
Use the defaultExpanded prop to control the initial expand state. Pass a boolean to expand/collapse all, or a number for the maximum depth to expand.
Expand depth 2
API Response
8 keys"root": {
"id": "usr_7k2m9p",
"email": "jamie@example.com",
"name": "Jamie Chen",
"role": "admin",
"verified": true,
"created_at": "2026-03-10T23:42:00Z",
"metadata": {
"login_count": 142,
"last_ip": "203.0.113.42",
"preferences": {3 items}
},
"teams": [
0: {3 items},
1: {3 items}
]
}
Fully collapsed
API Response
8 keys"root": {8 items}
Configurations
Package manifest
package.json
6 keys"project": {
"name": "@acme/dashboard",
"version": "2.4.1",
"private": true,
"scripts": {5 items},
"dependencies": {5 items},
"devDependencies": {3 items}
}
API Reference
JsonViewer
PropType
Notes
- Client component. Uses "use client" for expand/collapse state, search, and clipboard access.
- Search behavior. When a search query is active, the tree auto-expands all nodes and hides branches with no matches. Clear the search to restore the previous collapse state.
- Path format. Copied paths use JavaScript dot notation for valid identifiers and bracket notation for numeric indices or special characters (e.g. root["special-key"] ).
- No dependencies. Only requires React, Tailwind, lucide-react, and the
cnutility. - Icon library. Uses Lucide icons by default. Since this is copy-paste code, you can swap the imports if your project uses a different icon library.