Logo
All projects

json-view-cn

NewShipped

A customizable, collapsible, syntax-highlighted JSON tree viewer for React, distributed as a copy-paste shadcn/ui registry component.

Role
Creator & Design Engineer
Technologies
ReactTypeScriptTailwind CSSshadcn/uiBase UINext.js
Link
json-view-cn.vercel.app/

json-view-cn - JSON Tree Viewer for React

json-view-cn is an open-source JSON tree viewer component for React, built with shadcn/ui, Base UI and Tailwind CSS v4. It renders any value as a collapsible, syntax-highlighted tree and ships as a shadcn registry item, so it installs straight into a project with a single command:

npx shadcn@latest add https://json-view-cn.vercel.app/r/json-view.json

No external JSON viewer libraries and no global CSS: the component is a single file you own and can change.

json-view-cn

Key Features:

  • Collapsible nodes: Click any object or array row to expand or collapse it. Collapsed nodes show their item count, and depth-based expansion controls how far the tree opens by default.
  • Syntax highlighting and theming: Keys, strings, numbers, booleans and null values are color-coded, and every color can be overridden through a theme prop that works in light and dark mode.
  • Copy on hover: Each line gets a copy button on hover or keyboard focus. Objects and arrays copy as formatted JSON, strings as raw text.
  • String truncation: Long strings are truncated with a tooltip preview and expand inline on click.
  • Non-JSON values: Dates, Maps, Sets, bigints, functions, undefined and circular references render close to what JSON.stringify would produce, without ever throwing.
  • Accessible: Toggles and copy buttons are real buttons with focus rings, aria-expanded and aria-label attributes.

Tech Stack:

  • Component: React 19, Tailwind CSS v4, shadcn/ui with Base UI primitives, TypeScript
  • Demo and registry: Next.js 16 App Router, deployed on Vercel, with registry files generated by shadcn build