4e: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/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f: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/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50: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/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T3366,"use client"; import { ChevronRightIcon } from "lucide-react"; import { createContext, type HTMLAttributes, useContext, useState, } from "react"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { cn } from "@/lib/utils"; interface JsonViewerContextType { expandedPaths: Set; togglePath: (path: string) => void; displayDataTypes: boolean; } const JsonViewerContext = createContext({ expandedPaths: new Set(), togglePath: () => undefined, displayDataTypes: false, }); interface JsonOutputProps { /** * The JSON data to render. Can be any JSON-serializable value. */ data: unknown; /** * Collapse nested objects beyond this depth. * Set to `false` to expand all, or a number for depth limit. * @default false */ collapsed?: boolean | number; /** * Show data types alongside values * @default false */ displayDataTypes?: boolean; /** * Additional CSS classes */ className?: string; } /** * JsonOutput component for rendering JSON data in notebook outputs * * Displays JSON data in an interactive, expandable tree view. * Useful for inspecting complex data structures, API responses, * and object representations from Jupyter kernels. */ export function JsonOutput({ data, collapsed = false, displayDataTypes = false, className = "", }: JsonOutputProps) { // Calculate initial expanded paths based on collapsed prop const getInitialExpanded = (): Set => { if (collapsed === false) { // Expand all - collect all paths return collectAllPaths(data, "$"); } if (collapsed === true) { // Collapse all return new Set(); } // Expand up to specified depth return collectPathsToDepth(data, "$", collapsed); }; const [expandedPaths, setExpandedPaths] = useState>(getInitialExpanded); const togglePath = (path: string) => { const newExpanded = new Set(expandedPaths); if (newExpanded.has(path)) { newExpanded.delete(path); } else { newExpanded.add(path); } setExpandedPaths(newExpanded); }; if (data === undefined || data === null) { return (

); } return (

); } function collectAllPaths(value: unknown, path: string): Set { const paths = new Set(); if (value && typeof value === "object") { paths.add(path); if (Array.isArray(value)) { value.forEach((item, index) => { const childPaths = collectAllPaths(item, `${path}[${index}]`); childPaths.forEach((p) => paths.add(p)); }); } else { Object.entries(value).forEach(([key, val]) => { const childPaths = collectAllPaths(val, `${path}.${key}`); childPaths.forEach((p) => paths.add(p)); }); } } return paths; } function collectPathsToDepth( value: unknown, path: string, maxDepth: number, currentDepth = 0, ): Set { const paths = new Set(); if (value && typeof value === "object" && currentDepth < maxDepth) { paths.add(path); if (Array.isArray(value)) { value.forEach((item, index) => { const childPaths = collectPathsToDepth( item, `${path}[${index}]`, maxDepth, currentDepth + 1, ); childPaths.forEach((p) => paths.add(p)); }); } else { Object.entries(value).forEach(([key, val]) => { const childPaths = collectPathsToDepth( val, `${path}.${key}`, maxDepth, currentDepth + 1, ); childPaths.forEach((p) => paths.add(p)); }); } } return paths; } interface JsonValueProps { value: unknown; path: string; keyName: string | null; isLast: boolean; } function JsonValue({ value, path, keyName, isLast }: JsonValueProps) { const { displayDataTypes } = useContext(JsonViewerContext); if (value === null || value === undefined) { return ( ); } if (Array.isArray(value)) { return ( ); } if (typeof value === "object") { return ( } path={path} keyName={keyName} isLast={isLast} /> ); } return ( ); } interface JsonEntryProps extends HTMLAttributes { keyName: string | null; isLast: boolean; } function JsonEntry({ keyName, isLast, children, className, ...props }: JsonEntryProps) { return (

{keyName !== null && ( <> "{keyName}" : )} {children} {!isLast && ,}

); } interface JsonObjectProps { value: Record; path: string; keyName: string | null; isLast: boolean; } function JsonObject({ value, path, keyName, isLast }: JsonObjectProps) { const { expandedPaths, togglePath, displayDataTypes } = useContext(JsonViewerContext); const isExpanded = expandedPaths.has(path); const entries = Object.entries(value); const isEmpty = entries.length === 0; if (isEmpty) { return ( {"{}"} {displayDataTypes && } ); } return ( togglePath(path)}>

{entries.map(([key, val], index) => ( ))}

{"}"} {displayDataTypes && } {!isLast && ,}

); } interface JsonArrayProps { value: unknown[]; path: string; keyName: string | null; isLast: boolean; } function JsonArray({ value, path, keyName, isLast }: JsonArrayProps) { const { expandedPaths, togglePath, displayDataTypes } = useContext(JsonViewerContext); const isExpanded = expandedPaths.has(path); const isEmpty = value.length === 0; if (isEmpty) { return ( [] {displayDataTypes && } ); } return ( togglePath(path)}>

{value.map((item, index) => ( ))}

] {displayDataTypes && } {!isLast && ,}

); } interface JsonPrimitiveProps { value: unknown; displayDataTypes: boolean; } function JsonPrimitive({ value, displayDataTypes }: JsonPrimitiveProps) { if (value === null) { return ( null {displayDataTypes && } ); } if (value === undefined) { return ( undefined {displayDataTypes && } ); } if (typeof value === "string") { return ( "{value}" {displayDataTypes && } ); } if (typeof value === "number") { return ( {value} {displayDataTypes && } ); } if (typeof value === "boolean") { return ( {value ? "true" : "false"} {displayDataTypes && } ); } // Fallback for other types return {String(value)}; } function JsonTypeLabel({ type }: { type: string }) { return {type}; } 4a:["$","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":[["$","li","@uiw/react-json-view",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40uiw%2Freact-json-view","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@uiw/react-json-view"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["collapsible"]}]]}],["$","$L4f",null,{"sourceUrl":"https://nteract-elements.vercel.app/r/json-output.json","proxyUrl":"https://shadcnregistry.com/r/nteract/json-output","itemId":"@nteract/json-output"}],["$","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"}],["$","$L50",null,{"files":[{"path":"registry/outputs/json-output.tsx","content":"$51","type":"registry:component","target":"components/outputs/json-output.tsx"}]}]]}],"$L52"]}]

JSON Output

Installation

Files

components

Styles