Text

Run exampleStopStopped

The complete example source and integration notes are available below.

Read as Markdown

Full-page experience · Open playground

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

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

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.