# JSON viewer

> Collapsible, syntax-colored JSON tree.

Component · Free · https://lodeui.com/components/json-viewer

## When to use

- Inspecting API responses, webhook payloads and config.

## When not to use

- Editing JSON: use a code editor.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/json-viewer.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { JsonViewer } from "@/components/ui/json-viewer";

export function Payload({ event }: { event: unknown }) {
  return <JsonViewer data={event as never} defaultExpandDepth={1} />;
}
```

## API reference

### JsonViewer

A collapsible JSON tree with type colors and item counts.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `Json` | – | Any JSON value. |
| defaultExpandDepth | `number` | `2` | Levels open on first render. |
| rootName | `string` | – | Label for the root. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between expandable nodes |
| Enter / Space | Expand or collapse |

## Accessibility

- role="tree"; toggles use aria-expanded.

## Motion

- Chevrons rotate as nodes open.

## Responsive behavior

- Scrolls horizontally for deep nesting.

## Performance

- Collapsed nodes don't render their children.

## Notes for AI

- Lower defaultExpandDepth for large payloads.

## Related

- [Code viewer](https://lodeui.com/components/code-viewer) — File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.
- [Log viewer](https://lodeui.com/components/log-viewer) — Live log stream with level filters, search and follow mode.