# Text
[Full-page experience](/experience/text/) · [Open playground](/playground/#/examples/drawing/text)

Set type directly on Canvas with wrapping, alignment, clipping, and overflow choices.

## Try it

Click the headline to cycle its accent.

## What to learn

- Control font, alignment, baseline, and paint.
- Provide literal, numeric-zero, and state-interpolated Text children, then constrain copy with width, height, wrapping, and overflow style.

## Integration boundaries

- Text concatenates synchronous child content while fonts follow the Canvas `font` shorthand.
- Wrapped text uses `lineHeight`; constrained overflow can be visible, squished, ellipsized, or clipped.

This is a Pibbl Canvas example. Its mount owns its runtime resources; call its controller's dispose method when removing it. The preview starts automatically unless reduced motion is enabled; Stop disposes the mount. Preserve the source's logical canvas size and aspect ratio. Native HTML is not captured by Canvas filters.

## Related APIs

- [Text](/reference/components/text/)

## Complete source

Host setup for this source: use a canvas with width 720 and height 420, compile with `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`, import its default `mount`, and call `const controller = mount(canvas)` after attaching the canvas. Call `controller.dispose()` before removing it.

### text.example.tsx

```tsx
import { pibbl, useSignal, Rectangle, Text, type PibblController } from "@pibbl/core";
function TypeStudy() {
  const accent = useSignal("#1f4bd8");
  return [
    <Rectangle
      style={{
        left: 0,
        top: 0,
        width: 720,
        height: 420,
        fill: "#f7f0df",
      }}
    />,
    <Rectangle
      style={{
        left: 48,
        top: 46,
        width: 624,
        height: 328,
        fill: "#fffdf6",
        stroke: "#17211d",
        strokeWidth: 5,
      }}
    />,
    <Text
      style={{
        left: 360,
        top: 82,
        fill: accent.get(),
        font: "900 52px sans-serif",
        textAlign: "center",
        cursor: "pointer",
      }}
      onClick={() =>
        accent.update((value) => (value === "#1f4bd8" ? "#ff6b57" : "#1f4bd8"))
      }
    >
      {"TYPE / CANVAS"}
    </Text>,
    <Text
      style={{
        left: 96,
        top: 184,
        width: 528,
        height: 92,
        lineHeight: 30,
        wrap: true,
        fit: "ellipsis",
        fill: "#17211d",
        font: "500 21px sans-serif",
      }}
    >
      {
        "Pibbl keeps drawing text direct: choose a font, alignment, wrapping width, and an overflow strategy."
      }
    </Text>,
    <Text
      style={{
        left: 360,
        top: 326,
        fill: "#5f665f",
        font: "700 13px monospace",
        textAlign: "center",
      }}
    >
      {"CLICK THE HEADLINE · ZERO "}
      {0}
      {" · "}
      {accent.get()}
    </Text>,
  ];
}
export default function mount(canvas: HTMLCanvasElement): PibblController {
  return pibbl(canvas, <TypeStudy />);
}

```

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.