Component reference

JsonBlock

A collapsible block that shows a JSON value as a tree.

Preview

JsonBlock has no story of its own; this one draws it as part of a composed scene.

Sources, JSON and images

packages/meowtail/stories/content-views.stories.tsxline 18tsx

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>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { JsonBlock } from "meowtail";

<JsonBlock text={'{"broken":'} />

API reference

Serialization and rendering wait for expansion. Invalid text remains verbatim.

Props

Prop	Type	Default
`label`	`string`	`"JSON"`
`defaultOpen`	`boolean`	`false`
`onCopy`	`(text: string) => Promise<void>`	–

Also takes className, children and the attributes and events of its root element.

It also takes exactly one of these shapes:

{ text: string; payload?: never }{ payload: unknown; text?: never }

DOM parts

rootsummarybodyerror

Registry

The component is registered as json-block in the meowtail component registry.