Json viewer
Inspects structured data with bounded nested disclosures and path search.
Preview
$: Object
name: "Untitled"
version: 1
In action
$: Object
vehicle: Object
range: 386
battery: 84
connected: true
When to use
Use it for
- Inspecting API responses, configuration, and nested records.
Not for
- Editing structured data; use a form or editor.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { JSONViewer } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/json-viewer.
2. Vendor the source
npx @noorddev/vlak-cli add json-viewer
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/json-viewer.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { JSONViewer } from "@noorddev/vlak-react";
<JSONViewer label="Vehicle data" data={{ vehicle: { range: 386, battery: 84 }, connected: true }} />Props
JSONViewer
Bounded JSON inspection using native disclosures and path/value search.
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | unknown | ||
label | string | "Structured data" | |
searchable | boolean | true | |
maxDepth | number | 8 | Bounds rendering of unusually deep data. |
maxEntries | number | 100 | Maximum children shown per object or array. |
maxNodes | number | 1000 | Total node budget across the inspected document. |
maxStringLength | number | 2000 | Maximum string characters displayed per value, before escaping. |
Also accepts HTMLAttributes<HTMLDivElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab, Enter, Space | Tab reaches search, expand/collapse controls, and summaries; Enter or Space toggles a disclosure. |
Accessibility
- Uses native details rather than a partial tree role. Depth, entry, total node, and string length limits disclose truncation; circular references are labeled. Inspection does not invoke getters. Search covers the displayed, bounded data.
Markup
<div class="rs-json-viewer" role="region" aria-label="Vehicle data"><div class="rs-json-viewer-body"><details open><summary class="rs-json-viewer-summary">vehicle: Object</summary><div class="rs-json-viewer-children"><p class="rs-json-viewer-value">range: 386</p></div></details></div></div>
Classes
.rs-json-viewer.rs-json-viewer-tools.rs-json-viewer-body.rs-json-viewer-summary.rs-json-viewer-children.rs-json-viewer-value.rs-json-viewer-note