JSON Viewer
Prov1.0.0Browse and search JSON, then copy the path to any value.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { JsonViewer } from "@/components/ui/notchset/json-viewer";
const response = {
id: "run_8f3a1",
agent: "planner",
status: "ok",
latency_ms: 2104,
tools: [{ name: "search_docs", calls: 3 }, { name: "run_sql", calls: 1 }],
usage: { input_tokens: 1820, output_tokens: 412 },
};
export function RunResponse() {
return <JsonViewer data={response} rootKey="run" defaultDepth={2} />;
}Props
data–unknownAny JSON value.
rootKey–stringThe root's name, and the start of each path.
header–ReactNodeA line above the search (the request).
defaultExpanded / defaultDepth–string[] / numberWhat starts open.
defaultSelected–stringA path like run.usage.cost_usd.
height–numberThe scroll area (312px).
Anatomy
- No primitive needed: one file serves both builds.
- Shares its tree motion and keys with Tree View (lib/tree).
- Paths use dots and [index], ready to paste into code.
JsonViewerdata-slot="json-viewer"The viewer.
Source
components/ui/notchset/json-viewer.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @notchset-pro/json-viewerNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Inspecting API responses, events and payloads
Use something else when
- Editing JSON: use a code editor
Mistakes to avoid
- Search opens branches only while it runs; clearing restores what was open
Agents find it by
- json viewer, json tree, api response, payload inspector, object explorer, debug, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/json-viewer.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- ↑ / ↓ / → / ←
- Tree moves
- Enter / ↓ in search
- Next match
- Shift Enter / ↑
- Previous match
- Esc in search
- Clear
Accessibility
- role=tree with the tree keys; the match count is live
- Matches are marked text, not only colour
Motion
- Open
- Rows grow in staggered, as Tree View
- Match
- The view scrolls the current match to the centre
Responsive
- Fills its container; long values stay on one line and scroll.
Performance
- Every node renders: virtualise past ~2,000.
Changelog
v1.0.0 · 2026-10-02
First release
Part of
Included with Pro
Pro is in early access.
