Content Components

These components render Markdown, code, diffs and large lettering on the cell grid.

#<Markdown>

Streaming-safe Markdown. Pass a growing string and the frame stays stable.

const [text, setText] = useState("");useEffect(() => stream.on("token", (t) => setText((s) => s + t)), []);return <Markdown>{text}</Markdown>;

#<Code>

Syntax highlighting for ts, tsx, json, bash, python, rust, go and more.

<Code code={source} language="tsx" showLineNumbers maxHeight={12} />

#<Diff>

Unified diffs, or computed from { before, after }.

<Diff patch={{ before, after, filename: "app/page.tsx" }} />

#<Spinner>

Variants: dots, pulse, matrix and line. Timers stop while paused.

<Spinner variant="dots" label="Building…" />

#<AsciiFont>

Big pixel lettering for headers.

<AsciiFont text="▼ TEXT.JS" color="accent" />

Use font="compact" for a 3-row variant. Pass a FIGlet font from @textjs/font, like font={slant}, for figlet lettering.