---
title: JSON Viewer
description: Displays a JSON viewer in a stringified format.
icon: braces
author:
  name: NicolasMontone
  url: https://github.com/NicolasMontone
search:
  keywords: [json tree, object inspector]
mode: wide
---

### Installation

```package-install
npx shadcn@latest add @redpanda/json-viewer
```

<ComponentPreview name="json-viewer-demo" description="A JSON Viewer component." />

## When to use

The JSON Viewer component displays structured JSON data in a formatted, readable tree view. Use this decision tree to determine when it's appropriate:

```mermaid
graph TD;
    A[❓ Need to display data?] --> B{Is data JSON/structured?};
    A --> C[ℹ️ Use other display components];
    B --> D{Need interactive exploration?};
    B --> E[⚠️ Simple text display?];
    D --> F[✅ Use JsonViewer];
    D --> G{Read-only display?};
    E --> H[ℹ️ Use Code or Pre tag];
    G --> I[✅ Use JsonViewer];
    G --> J[✅ Use editable JSON editor];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class F,I,J recommended;
    class E discouraged;
    class A,B,D,G decision;
    class C,H neutral;
```

## Usage

```tsx
import { JsonViewer } from '@/registry/components/json-viewer';
```

```tsx
<JsonViewer
  data={{
    name: 'John Doe',
    age: 32,
    siblings: { brother: 'James Doe', sister: 'Jane Doe' },
  }}
/>
```

## Interaction

- Use Tab to reach expand, collapse, and copy actions. Enter or Space activates an action.
- Hover or focus a shortened string to preview its complete value. Activate it to expand or collapse the text in place.
- Copy includes the complete node value, even when its children or text are collapsed. Clipboard failures are announced without changing the expanded tree.
- Copy actions appear on hover or keyboard focus and remain visible on touch-first devices. Wide values scroll within the viewer instead of widening the page.

## Examples

### Default

<ComponentPreview name="json-viewer-demo" description="A JSON Viewer component." />

### Credits

- We use [json-tree-viewer](https://github.com/NicolasMontone/json-tree-viewer) for the JSON Viewer component and style.
- For a more interactive playground, see [here](https://json-tree-viewer-eight.vercel.app/).