JsonView

可折叠的 JSON 树：可复制任意路径，可高亮搜索结果。

查看源码

{

"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";

属性

defaultDepth
number = 2
初始展开的层级（默认 2）。
query
string
高亮包含此文字的键和值。
surface
"well" | "plain" = well
在填充底板上（well）或直接在面板上（plain）。
value
unknown
以格式化 JSON 显示的数据。