A collapsible JSON tree viewer with typed value colors, item counts on closed nodes, long-string truncation, expand/collapse-all controls, copy-to-clipboard, and arrow-key tree navigation.
"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>
);
}