# JSON View

An API response explorer: a tree you can fold, search and copy from.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/json-view
```

## Usage

```tsx
import { JsonView } from '@fetaui/components/json-view'

export function Example() {
  return <JsonView data={order} rootName="order" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| data | JsonValue | required |
| rootName | string | order |
| request | { method, path, status, duration } |  |
| defaultOpen | string[] | root |
| hint | ReactNode |  |
| animated | boolean | true |

## When to use

- For large API payloads, webhooks and logs.

## When not to use

- For small examples: use Code Block.

## Accessibility

- A tree with levels, expanded and selected states.
- The match count is announced.

## Motion

- Carets turn in 200 ms and rows wash on selection.
- With reduced motion, carets snap.