JSON Viewer

Component 4

About

A collapsible tree component for displaying and exploring JSON data, with type-based syntax highlighting, live search filtering, and click-to-copy JSONPath for each node.

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

import JsonViewer from "@/components/ui/json-viewer";

const sampleData = {
  id: "usr_8f2a1c",
  name: "Ada Lovelace",
  email: "ada@example.com",
  active: true,
  role: null,
  roles: ["admin", "editor"],
  address: {
    city: "London",
    country: "UK",
    coordinates: { lat: 51.5072, lng: -0.1276 },
  },
  createdAt: "2024-01-15T10:30:00Z",
};

export default function JsonViewerDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <div className="w-full max-w-lg rounded-lg border border-border bg-background p-4">
        <JsonViewer data={sampleData} searchable copyPath />
      </div>
    </div>
  );
}