JSON Viewer

Component 5

About

Collapsible JSON tree with typed value colors, item counts on closed nodes, long-string truncation, expand or collapse all, copy, and arrow-key navigation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds JSON Viewer to your project and fits it to your theme.

Code

How JSON Viewer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import JsonViewer, {
  JsonViewerTree,
  JsonViewerCopy,
  JsonViewerExpandAll,
  JsonViewerCollapseAll,
} from "@/components/ui/json-viewer";

const data = {
  id: "usr_8f2a1c",
  name: "Ada Lovelace",
  active: true,
  roles: ["admin", "editor"],
  profile: {
    bio: "Mathematician and writer, chiefly known for her work on the Analytical Engine.",
    joined: new Date("2015-03-12"),
    followers: 1287,
  },
  metadata: null,
};

export default function JsonViewerDemo() {
  return (
    <div className="w-full max-w-xl">
      <JsonViewer value={data}>
        <div className="mb-2 flex items-center justify-end gap-1 border-b border-border pb-2">
          <JsonViewerCopy />
          <JsonViewerExpandAll />
          <JsonViewerCollapseAll />
        </div>
        <JsonViewerTree />
      </JsonViewer>
    </div>
  );
}