"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; import { ChevronRightIcon } from "@kineticui/icons"; type Json = string | number | boolean | null | Json[] | { [k: string]: Json }; export type JsonViewerProps = { data: unknown; /** Levels expanded on first render. */ defaultDepth?: number; /** Root label. */ name?: string; className?: string; }; function Value({ v }: { v: Json }) { if (v === null) return null; if (typeof v === "string") return "{v}"; if (typeof v === "number") return {v}; if (typeof v === "boolean") return {String(v)}; return null; } function Node({ k, v, depth, defaultDepth, last, path }: { k?: string; v: Json; depth: number; defaultDepth: number; last: boolean; path: string }) { const isObj = v !== null && typeof v === "object"; const [open, setOpen] = React.useState(depth < defaultDepth); const comma = last ? "" : ","; const key = k !== undefined ? ( <> {/^\d+$/.test(k) ? k : `"${k}"`} : ) : null; if (!isObj) return (

{key} {comma}

); const arr = Array.isArray(v); const entries = arr ? (v as Json[]).map((x, i) => [String(i), x] as const) : Object.entries(v as Record); const [o, c] = arr ? ["[", "]"] : ["{", "}"]; return (

{open ? ( <> {entries.map(([ck, cv], i) => ( ))}

{c} {comma}

) : null}

); } /** Collapsible, syntax-coloured JSON tree with copy-path. */ export function JsonViewer({ data, defaultDepth = 2, name = "$", className }: JsonViewerProps) { return (

); }

JSON Viewer

Installation

Exports