JsonView

A folding JSON tree: copy any path, highlight a search.

View source

{

"model": "claude-sonnet-4-5",

"max_tokens": 1024,

"stream": true,

"metadata": {

"user_id": "usr_ada",

"team": "checkout"

"messages": [

0: {}

"tools": [

0: {}

"temperature": null

}

function Basic() {
  const [q, setQ] = useState("");
  return (
    <div className="flex w-560 flex-col gap-12">
      <SearchInput aria-label="Search JSON" placeholder="Search keys and values" value={q} onChange={(e) => setQ(e.target.value)} onClear={() => setQ("")} />
      <JsonView value={body} query={q || undefined} />
    </div>
  );
}

import { JsonView } from "@logicplanes/kaeso-ui";

Props

defaultDepth
number = 2
Levels open at first (2 by default).
query
string
Highlights keys and values that contain this text.
surface
"well" | "plain" = well
On a filled well (well) or on the panel itself (plain).
value
unknown
The data to show as formatted JSON.