JSON Viewer

Component

About

A collapsible tree view for rendering a JSON payload, such as an API response or webhook body, with per-branch expand/collapse and a code-style colour palette for strings, numbers and literals.

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 RESPONSE = {
  id: "ship_40182",
  status: "in_transit",
  lane: { from: "Rotterdam", to: "Lyon", distanceKm: 1043 },
  vehicle: {
    plate: "HX-44-2",
    driver: "Priya Raman",
    temperatureControlled: false,
  },
  eta: "2026-09-12T14:20:00Z",
  stops: [
    { depot: "Antwerp", arrived: true },
    { depot: "Luxembourg", arrived: true },
    { depot: "Dijon", arrived: false },
  ],
  customs: null,
  weightKg: 18240.5,
};

export default function JsonViewerDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-8 text-foreground">
      <JsonViewer
        label="Shipment response"
        data={RESPONSE}
        className="w-full max-w-[560px]"
      />
    </div>
  );
}