Component reference

CodeBlock

A block of code with its language, an optional title, soft wrap and copy.

Preview

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

Language, copy, and wrapping

packages/meowtail/stories/code-block.stories.tsxline 9tsx

render: () => (
  <Stack>
    <CodeBlock
      language="typescript"
      code={
        'const description = "Preserves code whitespace and long lines; soft wrap only changes the display, not the copied content.";\nconsole.log(description);'
      }
    />
    <CodeBlock
      code={'<script>alert("Displayed only, not executed")</script>\n  Preserves indentation'}
      defaultWrap
    />
    <CodeBlock
      language="Copy failed example"
      code="clipboard permission denied"
      onCopy={async () => {
        throw new Error("denied");
      }}
    />
  </Stack>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { CodeBlock } from "meowtail";

<CodeBlock
  language="typescript"
  code={
    'const description = "Preserves code whitespace and long lines; soft wrap only changes the display, not the copied content.";\nconsole.log(description);'
  }
/>

Examples

Title, caption, and host actions

A named code surface keeps its language, soft-wrap, and copy controls; the title and quiet caption share the header, and host actions sit before the built-in ones.

packages/meowtail/stories/code-block.stories.tsxline 39tsx

render: () => (
  <Stack>
    <CodeBlock
      language="typescript"
      title="connection.ts"
      caption="examples/authoring · TypeScript"
      actions={[
        <Button variant="quiet" size="small">
          Open in workbench
        </Button>,
        <Button variant="quiet" size="small">
          View source
        </Button>,
      ]}
      code={`import { signal } from "meowjsx";

const connection = signal<"idle" | "connecting" | "ready">("idle");

export async function connect(endpoint: string) {
connection.value = "connecting";
await fetch(endpoint, { method: "HEAD" });
connection.value = "ready";
}`}
    />
    <CodeBlock
      language="shell"
      title="Install the package"
      caption="Run once in the workspace root."
      actions={
        <Button variant="quiet" size="small">
          Package reference
        </Button>
      }
      code="bun add meowtail"
    />
  </Stack>
)

API reference

Props

Prop	Type	Default
`code`Required	`MaybeSignal<string>`	–
`language`	`MaybeSignal<string \| undefined>`	–
`title`The code surface's name, such as a file name or an example title, at the start of the header. A plain value is fixed for the mount; a Signal keeps the name live. Omit it for the language-only header.	`MaybeSignal<Child>`	–
`caption`A quiet supporting line for the name, such as a path or a short note. A plain value is fixed for the mount; a Signal keeps it live. Omit it to hide the caption.	`MaybeSignal<Child>`	–
`actions`Host buttons or links that extend the built-in wrap and copy controls; they render before those controls and do not replace them. A plain value is fixed for the mount; a Signal keeps the actions live.	`MaybeSignal<Child>`	–
`defaultWrap`	`boolean`	`false`
`onCopy`Hosts may supply a clipboard implementation; the default uses the browser clipboard.	`(code: string) => Promise<void>`	–

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

DOM parts

rootheadertitlecaptionlanguageactionscontentcodefeedback

Registry

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