4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T33a4,"use client"; import { useMemo, useRef, useState } from "react"; import type { KeyboardEvent } from "react"; import { cn } from "@/lib/utils"; interface JsonViewProps { /** The value to render. Pass the object or array itself, never a JSON string. */ readonly data: unknown; /** 0 collapses everything, 1 opens the first level. Deeper values open further. */ readonly defaultExpandDepth?: number; /** Only while a search is active; `null` the rest of the time. */ readonly highlightPattern?: RegExp | null; readonly className?: string; } interface JsonNode { readonly id: string; readonly label: string | null; readonly value: unknown; readonly depth: number; readonly children: readonly JsonNode[] | null; } const REGEXP_SPECIAL = /[.*+?^${}()|[\]\\]/gu; /** Every metacharacter here is a syntax character, so `\x` stays legal under `u`. */ const escapeRegExp = (value: string) => value.replace(REGEXP_SPECIAL, "\\$&"); /** * Builds the pattern `JsonView` highlights with. Terms are matched literally, so * a search for `a.b` cannot turn into a wildcard. */ export const makeJsonViewHighlightPattern = (terms: readonly string[]): RegExp | null => { const cleaned = terms.flatMap((term) => { const trimmed = term.trim(); return trimmed ? [trimmed] : []; }); if (cleaned.length === 0) { return null; } return new RegExp(cleaned.map(escapeRegExp).join("|"), "giu"); }; const isContainer = (value: unknown): value is Record | unknown[] => typeof value === "object" && value !== null; const entriesOf = (value: Record | unknown[]): [string, unknown][] => Array.isArray(value) ? value.map((item, index) => [String(index), item]) : Object.entries(value); const buildNode = (value: unknown, id: string, label: string | null, depth: number): JsonNode => { if (!isContainer(value)) { return { children: null, depth, id, label, value }; } const entries = entriesOf(value); return { // An empty object has nothing to disclose, so it stays a leaf rather than // an expandable node whose group would be empty. children: entries.length === 0 ? null : entries.map(([key, child]) => buildNode(child, `${id}.${key}`, key, depth + 1)), depth, id, label, value, }; }; const collectExpanded = (node: JsonNode, maxDepth: number, into: Set): Set => { if (node.children && node.depth < maxDepth) { into.add(node.id); for (const child of node.children) { collectExpanded(child, maxDepth, into); } } return into; }; const flatten = (node: JsonNode, expanded: ReadonlySet, into: JsonNode[]): JsonNode[] => { into.push(node); if (node.children && expanded.has(node.id)) { for (const child of node.children) { flatten(child, expanded, into); } } return into; }; const bracketsOf = (value: unknown) => Array.isArray(value) ? (["[", "]"] as const) : (["{", "}"] as const); const toneOf = (value: unknown) => { if (typeof value === "string") { return "text-json-string"; } if (typeof value === "number") { return "text-json-number"; } if (typeof value === "boolean") { return "text-json-boolean"; } return "text-gray-900"; }; const printValue = (value: unknown) => typeof value === "string" ? JSON.stringify(value) : String(value); const countLabel = (count: number) => (count === 1 ? "1 item" : `${count} items`); const describe = (node: JsonNode) => { const name = node.label ?? "JSON"; if (!node.children) { return isContainer(node.value) ? `${name}: empty ${Array.isArray(node.value) ? "array" : "object"}` : `${name}: ${printValue(node.value)}`; } const kind = Array.isArray(node.value) ? "array" : "object"; return `${name}: ${kind}, ${countLabel(node.children.length)}`; }; /** Wraps every match in a `` so a search can point at what it found. */ const Highlight = ({ text, pattern, }: { readonly text: string; readonly pattern?: RegExp | null; }) => { if (!pattern) { return text; } const global = pattern.global ? pattern : new RegExp(pattern.source, `${pattern.flags}g`); const parts: React.ReactNode[] = []; let cursor = 0; for (const match of text.matchAll(global)) { const at = match.index; // A pattern that can match nothing would otherwise loop forever. if (match[0].length === 0) { continue; } if (at > cursor) { parts.push(text.slice(cursor, at)); } parts.push( {match[0]} , ); cursor = at + match[0].length; } if (parts.length === 0) { return text; } if (cursor < text.length) { parts.push(text.slice(cursor)); } return parts; }; const Chevron = ({ open }: { readonly open: boolean }) => ( ); export const JsonView = ({ data, defaultExpandDepth = 1, highlightPattern = null, className, }: JsonViewProps) => { const root = useMemo(() => buildNode(data, "$", null, 0), [data]); const [expanded, setExpanded] = useState(() => collectExpanded(root, defaultExpandDepth, new Set()), ); const [activeId, setActiveId] = useState(root.id); // Built once. `useRef(new Map())` would allocate a Map on every render and // throw it away, since only the first argument is ever kept. const nodesRef = useRef | null>(null); nodesRef.current ??= new Map(); const nodes = nodesRef.current; const visible = useMemo(() => flatten(root, expanded, []), [root, expanded]); // A collapse can strip the focused node out of the tree; without this the // roving tabindex would land on nothing and the whole tree would leave the // tab order. const active = visible.some((node) => node.id === activeId) ? activeId : root.id; const toggle = (node: JsonNode, open?: boolean) => { if (!node.children) { return; } setExpanded((current) => { const next = new Set(current); const shouldOpen = open ?? !next.has(node.id); if (shouldOpen) { next.add(node.id); } else { next.delete(node.id); } return next; }); }; const focus = (id: string) => { setActiveId(id); nodes.get(id)?.focus(); }; // The node comes from the row the key was pressed on, not from state. Reading // `active` here meant the handler bound in the previous render answered with // the previously focused node, so the first arrow after a move was eaten. const onKeyDown = (event: KeyboardEvent, node: JsonNode) => { const index = visible.findIndex((entry) => entry.id === node.id); if (index === -1) { return; } // Every treeitem carries this handler, so an unclaimed keystroke would run // again on each ancestor on the way up. That is harmless for a move, but a // toggle would flip straight back. const claim = () => { event.preventDefault(); event.stopPropagation(); }; const step = (to: number) => { const target = visible[to]; if (target) { claim(); focus(target.id); } }; switch (event.key) { case "ArrowDown": { step(index + 1); break; } case "ArrowUp": { step(index - 1); break; } case "ArrowRight": { claim(); // APG: the first press opens the node, the second walks into it, so a // node never expands and loses focus in the same keystroke. if (node.children && !expanded.has(node.id)) { toggle(node, true); } else if (node.children) { step(index + 1); } break; } case "ArrowLeft": { claim(); if (node.children && expanded.has(node.id)) { toggle(node, false); } else { for (let at = index - 1; at >= 0; at -= 1) { const candidate = visible[at]; if (candidate && candidate.depth < node.depth) { focus(candidate.id); break; } } } break; } case "Home": { step(0); break; } case "End": { step(visible.length - 1); break; } case "Enter": case " ": { if (node.children) { claim(); toggle(node); } break; } default: { break; } } }; const renderNode = (node: JsonNode, position: number, size: number) => { const open = Boolean(node.children) && expanded.has(node.id); const [openBracket, closeBracket] = bracketsOf(node.value); const container = isContainer(node.value); return (

0 && "ps-4")} key={node.id} onClick={(event) => { // The treeitem box wraps its own subtree, so without this a click on // a child would toggle every ancestor on the way up. event.stopPropagation(); toggle(node); }} onFocus={() => setActiveId(node.id)} onKeyDown={(event) => onKeyDown(event, node)} // A second click on a row that opens is a toggle, not a word select. // Drag still selects, and a leaf still selects on double click. onMouseDown={(event) => { event.stopPropagation(); if (node.children && event.detail > 1) { event.preventDefault(); } }} ref={(element) => { if (element) { nodes.set(node.id, element); } else { nodes.delete(node.id); } }} role="treeitem" tabIndex={node.id === active ? 0 : -1} >

{node.label === null ? null : ( : )} {container ? ( {openBracket} {node.children && !open ? … : null} {node.children && open ? null : closeBracket} ) : ( )}

{node.children && open ? ( <> {/* oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- a tree's child list is role="group" per the ARIA APG; the suggested tags all carry the wrong semantics here */}

{node.children.map((child, index) => renderNode(child, index + 1, node.children?.length ?? 0), )}

) : null}

); }; return (

{renderNode(root, 1, 1)}

); }; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://verno-studio.vercel.app/r/json-view.json","proxyUrl":"https://shadcnregistry.com/r/vernostudio/json-view","itemId":"@vernostudio/json-view"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"components/json-view.tsx","content":"$52","type":"registry:ui"}]}]]}],"$L53"]}]

JSON View

Installation

Files

components

Styles