JSON Viewer
Displays a JSON viewer in a stringified format.
Installation
bash
npx shadcn@latest add @redpanda/json-viewerbash
pnpm dlx shadcn@latest add @redpanda/json-viewerbash
yarn dlx shadcn@latest add @redpanda/json-viewerbash
bunx shadcn@latest add @redpanda/json-viewerbash
nubx shadcn@latest add @redpanda/json-viewerbash
aube dlx shadcn@latest add @redpanda/json-viewerWhen 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:
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
Credits
- We use json-tree-viewer for the JSON Viewer component and style.
- For a more interactive playground, see here.