Component reference

WebBlock

A web search result: an answer and the pages it came from.

Preview

WebBlock 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 { WebBlock } from "meowtail";

<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" },
  ]}
/>

API reference

Props

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

It also takes exactly one of these shapes:

{ kind: "search"; answer?: Child; sources: readonly WebSourceView[]; truncated?: boolean }{ kind: "fetch"; url: string; statusCode: number; truncated?: boolean }

DOM parts

rootanswersourcessourcelinksnippetmeta

Registry

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