Data Display

Json Viewer

Collapsible JSON tree with type-colored values and per-row copy.

Import

tsx

import { JsonViewer } from "@cooud-ui/ui";

bash

npx cooud-ui add json-viewer

Examples

API response

Any JSON value rendered as a collapsible tree. Objects and arrays get a chevron with a muted child-count summary while collapsed; primitives are colored by type (string, number, boolean, null) and every row reveals a copy-value button on hover or focus.

{

"order": {

"id": "ord_8kX2",

"total": 248.9,

"currency": "BRL",

"paid": true,

"coupon": null,

"items": [ … 2 items ]

}

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cooud-ui add json-viewer

tsx

const payload = {
  order: {
    id: "ord_8kX2",
    total: 248.9,
    currency: "BRL",
    paid: true,
    coupon: null,
    items: [
      { sku: "tee-black-m", qty: 2 },
      { sku: "sticker-pack", qty: 1 },
    ],
  },
};

return <JsonViewer data={payload} defaultExpandedDepth={2} />;

Expanded depth

`defaultExpandedDepth` sets how many levels start open — the root value is depth 0, so the default of 1 shows the root's entries with nested branches collapsed. Pass `Number.POSITIVE_INFINITY` to expand everything.

{

"order": {

"id": "ord_8kX2",

"total": 248.9,

"currency": "BRL",

"paid": true,

"coupon": null,

"items": [

0: {

"sku": "tee-black-m",

"qty": 2

1: {

"sku": "sticker-pack",

"qty": 1

}

]

}

tsx

<JsonViewer data={payload} defaultExpandedDepth={Number.POSITIVE_INFINITY} />

API Reference

Generated from the component's exported types.

JsonViewerProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`data`*	`unknown`	—	The value to render. Objects and arrays become collapsible branches.
`defaultExpandedDepth`	`number`	`1`	How many levels start expanded — a mount-time default, not a controlled value. Expansion state is uncontrolled per branch and seeded once when a branch first mounts, so later changes to this prop leave already-mounted branches untouched. The root value is depth 0, so the default of 1 shows the root's entries with every nested branch collapsed. Pass `Number.POSITIVE_INFINITY` to expand everything.