JSON Viewer

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:

Installation

Usage

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

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

Examples

Default

Credits

• We use json-tree-viewer for the JSON Viewer component and style.
• For a more interactive playground, see here.