Create a JSON viewer with Tailwind CSS. Use a max-w-2xl card with a toolbar holding a title, a muted node count, and two small buttons for expand all and collapse all, plus a copy button. The body renders a nested structure as indented rows: object and array nodes are buttons with a rotating chevron, the key in a medium weight, a muted type label, and a count of children in brackets; leaf rows show the key, a colon, and the value coloured by type — strings in green, numbers in blue, booleans in purple and null in muted grey — with strings quoted. Indentation is done with left padding and a faint vertical guide line per level. Then add JavaScript that renders the tree from an object literal, toggles a node open or closed, implements expand and collapse all, and copies the formatted JSON to the clipboard.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create a JSON viewer with Tailwind CSS. Use a max-w-2xl card with a toolbar holding a title, a muted node count, and two small buttons for expand all and collapse all, plus a copy button. The body renders a nested structure as indented rows: object and array nodes are buttons with a rotating chevron, the key in a medium weight, a muted type label, and a count of children in brackets; leaf rows show the key, a colon, and the value coloured by type — strings in green, numbers in blue, booleans in purple and null in muted grey — with strings quoted. Indentation is done with left padding and a faint vertical guide line per level. Then add JavaScript that renders the tree from an object literal, toggles a node open or closed, implements expand and collapse all, and copies the formatted JSON to the clipboard.
