Component reference
JsonTree
A JSON value as an expandable tree.
Preview
JsonTree has no story of its own; this one draws it as part of a composed scene.
Properties, expansion and copy feedback
render: () => (
<Stack>
<JsonTree
label="Result"
data={{
path: "/workspace/meowland/src/main.ts",
count: 3,
enabled: true,
empty: null,
nested: { text: "<content>\nsecond line", items: [1, 2] },
}}
/>
<JsonTree
label="Copy failure example"
data={{ message: "You can select the text to copy" }}
onCopy={async () => {
throw new Error("clipboard unavailable");
}}
/>
</Stack>
)Installation
bun add meowtail
Usage
Taken from the examples on this page.
import { JsonTree } from "meowtail";
<JsonTree
label="Result"
data={{
path: "/workspace/meowland/src/main.ts",
count: 3,
enabled: true,
empty: null,
nested: { text: "<content>\nsecond line", items: [1, 2] },
}}
/>Examples
Other stories that draw JsonTree.
Sources, JSON and images
render: () => (
<Stack>
<WebBlock
kind="search"
answer="Sources are provided by the host; the component does not run searches."
sources={[
{ title: "Example", url: "https://example.com", snippet: "A verifiable source note." },
{ url: "javascript:alert(1)", title: "A source that cannot be navigated" },
]}
/>
<JsonTree
data={{ name: "Meowland", options: { theme: "DeepSeek", enabled: true }, items: [1, 2, 3] }}
/>
<JsonBlock text={'{"broken":'} />
<ImageLightbox
src={sampleImage}
alt="Blue circle example"
caption="Image preview · Escape returns to the original button"
/>
</Stack>
)API reference
Children are materialized only when their branch is first expanded.
Props
| Prop | Type | Default |
|---|---|---|
dataRequired | JsonValue | – |
label | string | "JSON" |
defaultOpen | boolean | true |
onCopy | (text: string) => Promise<void> | – |
Also takes className, children and the attributes and events of its root element.
DOM parts
rootsummarychildrenpropertypunctuationexpandervaluecopyfeedback
Registry
The component is registered as json-tree in the meowtail component registry.