# Text

```ts
import { Text } from "@pibbl/core";
```

`Text` uses [`TextProps`](/reference/types/elements-components/#textprops) and [`TextStyle`](/reference/types/styles/#textstyle), and accepts recursive [`PibblTextChild`](/reference/types/elements-components/#pibbltextchild)
content rather than visual child elements. It supports paint, wrapping, fitting,
and measurement under its local style. Font rasterization and measurement are
browser behavior. Ellipsis fitting preserves complete grapheme clusters, including
combining marks and joined emoji, using the browser’s `Intl.Segmenter`. It does not
truncate inside a cluster. Font loading and any update needed after a font arrives
remain application responsibilities.

```tsx
<Text
  style={{ left: 20, top: 44, fill: "#0f172a", font: "600 24px sans-serif" }}
>
  Hello, {42}
</Text>
```

Try the [Text live example](/playground/#/examples/drawing/text).

## API details from source

<span id="api-Text"></span>

Draws Canvas text from textual children using the resolved font, wrapping, fitting, and paint
style.

```ts
Text: PibblPrimitiveComponent<TextProps, PrimitiveInput<TextProps, TextStyle>>
```

Related API: [Text](/reference/components/text/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [TextProps](/reference/types/elements-components/#textprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [TextStyle](/reference/types/styles/#textstyle).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[TextProps](/reference/types/elements-components/#textprops)

[TextStyle](/reference/types/styles/#textstyle)

[View source — packages/core/src/lib/components/text.ts:150](/source/packages/core/src/lib/components/text-ts/#L150)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Drawing composition](/minimal-examples/drawing/composition/): Group, cache, and clip a drawing, then add text and an embedded thumbnail. [Plain source](/minimal/drawing/composition.tsx)
## Interactive examples

- [Text](/examples/text/) · [Full page](/experience/text/)
- [Filters](/examples/filters/) · [Full page](/experience/filters/)
- [Underwater scene](/examples/underwater/) · [Full page](/experience/underwater/)
- [Optional filters](/examples/optional-filters/) · [Full page](/experience/optional-filters/)
- [Text envelope playground](/examples/text-envelope/) · [Full page](/experience/text-envelope/)
## Documentation version

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