JSON Tree Viewer
A fully-customizable, collapsible, syntax-highlighted JSON tree viewer component. Ready to be copy-pasted into your project.
npx shadcn@latest add https://json-view-cn.vercel.app/r/json-view.jsonOR
"name": "json-view-cn",
"createdBy": "mnove",
"copy-paste-install",
"collapsible-nodes",
"syntax-highlighting",
"and-much-more!"
],
"shadcn": true,
"tailwind": "v4",
"darkMode": true
}
Showcase
"name": "John Doe",
"age": 32,
"email": "john@example.com",
"isActive": true,
"balance": 1250.75,
"street": "123 Main St",
"city": "Springfield",
"lat": 39.7817,
"lng": -89.6501
}
},
"admin",
"editor",
"viewer"
]
}
Default — expanded with indent guides
Collapsed by default
"host": "localhost",
"port": 5432,
"name": "myapp_production",
"ssl": true,
"min": 2,
"max": 10
}
},
"host": "127.0.0.1",
"port": 6379,
"ttl": 3600
},
"darkMode": true,
"betaAccess": false,
"maxUploadSize": 52428800
}
}
No indent guides
"name": "@acme/ui",
"version": "2.4.1",
"private": false,
"react": "^19.0.0",
"next": "^16.0.0",
"tailwindcss": "^4.0.0"
},
"dev": "next dev",
"build": "next build",
"test": "vitest"
}
}
Custom theme — Monokai-inspired
"value": "deeply nested",
1,
2,
3
]
}
}
}
}
}
Custom theme — Ocean
Collapsed, no indent guides, custom theme
"name": "John Doe",
"age": 32,
"email": "john@example.com",
"isActive": true,
"balance": 1250.75,
"street": "123 Main St",
"city": "Springfield",
"lat": 39.7817,
"lng": -89.6501
}
},
"admin",
"editor",
"viewer"
]
}
Root name label
"event": "user.signup",
"timestamp": "2025-03-15T08:30:00Z",
}
Expand to depth 1 only
"title": "Short title",
"description": "This is a very long description that exceeds the t…",
"notes": "Another lengthy field that goes on and on to show …",
"short",
"concise"
],
"count": 42
}
String truncation at 50 chars
"date": "2025-03-15T08:30:00.000Z",
"a": 1,
"b": 2
},
"x",
"y"
],
"bigint": 9007199254740993,
"fn": [Function: fn],
"name": "loop",
"self": [Circular]
},
"quotes": "say \"hi\" to <b>them</b>",
"newline": "line1\nline2",
"spaces": "a b",
"backslash": "C:\\temp\\file.txt",
"unicode": "héllo wörld 🚀",
"key\"with\"quotes": "escaped key",
"url": "https://example.com/a/very/long/path/that/has/no/spaces/at/a…",
"undefinedValue": undefined,
-0.5,
1e+21,
1234567890123
],
"emptyObject": {},
"emptyArray": [],
"deeper": {}
}
}
}
Edge cases — escaping, wrapping, undefined
"event": "user.signup",
"timestamp": "2025-03-15T08:30:00Z",
"id": "usr_abc123",
"name": "Jane Smith",
"email": "jane@example.com",
},
"ip": "192.168.1.1",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/…",
"referrer": null
}
}
All features combined