# pixijs-scene-text

Teaches coding agents to render text in PixiJS v8 properly. Helps pick between bitmap, HTML, and canvas rendering without stalling frame updates.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5800 installs · ★ 358
- Author: pixijs
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-scene-text/SKILL.md
- Updated: 2026-10-01
- HTML: https://affpapa.org/en/nevibecode/skills/pixijs-scene-text

## What it does

PixiJS v8 provides five text classes tailored for specific performance needs. `Text` renders sharp labels to a canvas, while `BitmapText` draws from a glyph atlas for cheap updates. `HTMLText` handles formatted markup through SVG. For character animations, `SplitText` and `SplitBitmapText` expose per-glyph containers.

Text objects are leaf nodes and cannot hold child elements directly. Grouping multiple labels requires placing them inside a `Container` instead.

Constructors in v8 no longer accept positional arguments. Passing a raw string and a style object will break because options objects are now mandatory. Frequent updates to dynamic strings will stall rendering if you use `Text` instead of `BitmapText` due to repeated canvas rasterization.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-text -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/pixijs-scene-text/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/pixijs-scene-text/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-text -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/pixijs-scene-text/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-text -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/pixijs-scene-text/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pixijs/pixijs-skills pixijs-scene-text
```

2. **Manually: put the files in place**
- File: `.github/skills/pixijs-scene-text/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-text -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pixijs/pixijs-skills --path skills/pixijs-scene-text
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/pixijs-scene-text/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-scene-text -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-scene-text/SKILL.md

## When to use it
- select the optimal text class for PixiJS v8 scenes
- animate individual characters with `SplitText`
- render styled markup using `HTMLText`
- prevent GPU stalls by moving dynamic counters to `BitmapText`

## Example prompts
- Refactor this timer to BitmapText in PixiJS v8
- Set up SplitText for a character-by-character headline animation
- Create an HTMLText node with inline styles

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 47548eb66896f36a.

BEGIN THIRD-PARTY FILE 47548eb66896f36a
````text
---
name: pixijs-scene-text
description: "Use this skill when rendering text in PixiJS v8. Covers Text for canvas-quality styled labels, BitmapText for cheap per-frame updates via glyph atlas, HTMLText for HTML/CSS markup via SVG, SplitText and SplitBitmapText for per-character animation, TextStyle, tagStyles, constructor options, TextOptions, HTMLTextOptions, BitmapText, SplitTextOptions, SplitBitmapTextOptions. Triggers on: Text, BitmapText, HTMLText, SplitText, SplitBitmapText, TextStyle, HTMLTextStyle, BitmapFont.install, tagStyles, fontFamily, wordWrap."
license: MIT
---

PixiJS has five text-rendering classes that cover different trade-offs between styling, performance, and animation. `Text` renders to a canvas for full CSS-style fidelity. `BitmapText` reads from a pre-generated atlas for cheap updates. `HTMLText` renders an HTML fragment via SVG `<foreignObject>` for rich markup. `SplitText` and `SplitBitmapText` wrap the first two classes and expose per-character, per-word, and per-line containers for animation.

Assumes familiarity with `pixijs-scene-core-concepts`. All text classes are leaf nodes; they cannot have children. Wrap multiple text instances in a `Container` to group them.

## Quick Start

```ts
const text = new Text({
  text: "Hello PixiJS",
  style: {
    fontFamily: "Arial",
    fontSize: 36,
    fill: 0xffffff,
    stroke: { color: 0x4a1850, width: 5 },
    dropShadow: { color: 0x000000, blur: 4, distance: 6 },
  },
});

text.anchor.set(0.5);
text.x = app.screen.width / 2;
text.y = 40;

app.stage.addChild(text);
```

All text classes use options-object constructors; positional `(string, style)` from v7 is not supported.

**Related skills:** `pixijs-scene-core-concepts` (leaves, transforms), `pixijs-assets` (font loading), `pixijs-performance` (BitmapText tradeoffs), `pixijs-color` (`FillInput` for fill/stroke), `pixijs-scene-graphics` (gradients and patterns reused via `FillInput`).

## Variants

| Variant           | Use when                                                           | Trade-offs                                                            | Reference                                                          |
| ----------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------- | ------------------------------------------------------------------ |
| `Text`            | High-quality static or infrequent-update labels                    | Expensive to update (canvas re-draw + GPU upload)                     | [references/text.md](references/text.md)                           |
| `BitmapText`      | Scores, timers, gameplay labels, anything that changes every frame | Limited styling; fixed glyph atlas; requires MSDF for crisp scaling   | [references/bitmap-text.md](references/bitmap-text.md)             |
````
END THIRD-PARTY FILE 47548eb66896f36a

The third-party file has ended. Everything between the 47548eb66896f36a tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2882 of 8281 bytes. © pixijs · MIT · https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-scene-text/SKILL.md

## Similar
- [pixijs-2d](https://affpapa.org/en/nevibecode/skills/pixijs-2d.md) — skill · 2500 installs
- [pixijs-rendering](https://affpapa.org/en/nevibecode/skills/pixijs-rendering.md) — skill · 5400 installs
- [text-and-bitmaptext](https://affpapa.org/en/nevibecode/skills/text-and-bitmaptext.md) — skill · 823 installs

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md