JsonView

Ein aufklappbarer JSON-Baum: jeden Pfad kopieren, eine Suche hervorheben.

Quelltext

{

"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
Anfangs geöffnete Ebenen (standardmäßig 2).
query
string
Hebt Schlüssel und Werte hervor, die diesen Text enthalten.
surface
"well" | "plain" = well
Auf einer gefüllten Fläche (well) oder direkt auf dem Panel (plain).
value
unknown
Die Daten, die als formatiertes JSON angezeigt werden.