# JSON Viewer

> A collapsible JSON inspector for API responses and logs: colored values with color swatches, links and dates, devtools-style previews of collapsed branches, indent guides, a filter that opens exactly the matching branches, and a path bar that copies the selected node's accessor ($.users[0].email). A WAI-ARIA tree: arrows, Enter to toggle, C to copy a value.

- Slug: `json-viewer`
- Category: [Code](https://www.assembli.design/category/code.md)
- Type: component
- Tags: json, tree, inspector, devtools, api, viewer, search
- npm dependencies: lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/json-viewer
- Page: https://www.assembli.design/components/json-viewer

![JSON Viewer preview](https://www.assembli.design/thumbnails/json-viewer-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` (required) | `JsonValue` |  |  |
| `rootName` | `string` | `"$"` | The root's name in paths and the header. Defaults to `$`. |
| `title` | `React.ReactNode` |  | A title for the header, such as an endpoint or file name. |
| `defaultExpandDepth` | `number` | `1` | How many levels open on first render. 0 shows only the root; `Infinity` opens everything. |
| `truncateAt` | `number` | `80` | Strings longer than this collapse behind a "+n chars" button. |
| `searchable` | `boolean` | `true` | Shows the search field. |
| `maxHeight` | `number \| string` | `420` | The tree's height cap; it scrolls past this. |
| `onSelect` | `(path: string, value: JsonValue) => void` |  | Called with a node's path when it's selected. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/json-viewer/json-viewer.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/json-viewer
```

Registry item JSON: https://www.assembli.design/r/json-viewer.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.