Help us improve
Share bugs, ideas, or general feedback.
From pixijs-skills
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.
npx claudepluginhub pixijs/pixijs-skills --plugin pixijs-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/pixijs-skills:pixijs-scene-textThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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-chara...
Use this skill first for ANY PixiJS v8 task; it routes to the right specialized skill for the job. Covers the full PixiJS surface: Application setup, the scene graph (Container, Sprite, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite), rendering (WebGL/WebGPU/Canvas, render loop, custom shaders, filters, blend modes), assets, events, color, math, ticker, accessibility, performance, environments, migration from v7, and project scaffolding. Triggers on: pixi, pixi.js, pixijs, PixiJS, v8, Application, app.init, Sprite, Container, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite, Assets, Ticker, renderer, WebGL, WebGPU, scene graph, filter, shader, blend mode, texture, BitmapText, create-pixi, how do I draw, how do I render, how do I animate in pixi.
Renders high-performance 2D graphics, particle effects, sprite animations, and interactive canvases using PixiJS with WebGL/WebGPU acceleration for games and UI overlays.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Share bugs, ideas, or general feedback.
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.
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).
| 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 |
BitmapText | Scores, timers, gameplay labels, anything that changes every frame | Limited styling; fixed glyph atlas; requires MSDF for crisp scaling | references/bitmap-text.md |
HTMLText | Rich formatted text, mixed styles, real HTML tags | Async rendering (one frame delay); similar update cost to Text | references/html-text.md |
SplitText | Per-character animation with rich styling | Each char is a full Text; expensive for long strings | references/split-text.md |
SplitBitmapText | Per-character animation on long strings or dynamic content | Inherits BitmapText limitations (glyph atlas, no MSDF-free crispness) | references/split-bitmap-text.md |
Text. Use for titles, menus, dialog, error messages. See references/text.md.BitmapText. Updates only reposition quads; no canvas re-draw. See references/bitmap-text.md.<b>, <i>, <br>" → HTMLText. Real HTML/CSS rendering via SVG. See references/html-text.md.<red>Warning:</red>" → Text or HTMLText with tagStyles. Both support it.SplitText for short strings, SplitBitmapText for long strings or many instances. See references/split-text.md / references/split-bitmap-text.md.Text or HTMLText. BitmapText fails because the glyph set is too large for a single atlas.Assets.load({ src: 'font.woff2', data: { family: 'MyFont' } }) first, then set style.fontFamily: 'MyFont'. Works for Text and HTMLText.| Update trigger | Text | BitmapText | HTMLText | SplitText | SplitBitmapText |
|---|---|---|---|---|---|
Changing .text | High | Very low | High | Very high (N text re-renders) | Low (N quad repositions) |
Changing .style | High | Medium | High | Very high | Medium |
Moving (.x, .y) | Free | Free | Free | Free | Free |
| Rotating / scaling | Free | Free | Free | Free | Free |
"Free" = normal Container transform cost. "High" = new canvas draw + GPU upload. "Very low" = quad reposition only. Update strings that change per-frame only on BitmapText or SplitBitmapText.
new Text({ text, style, ... }). The v7 (string, style) form is removed.tagStyles. Text and HTMLText support per-tag styling via style.tagStyles. Tags are only parsed when tagStyles has entries; otherwise < is treated literally.BitmapFont.install. Pre-generates an atlas before you create any BitmapText. Without install, the first BitmapText with a new fontFamily generates the atlas lazily.Assets.load('font.fnt'). Requires import 'pixi.js/text-bitmap' in custom builds.Text.text every frameWrong:
app.ticker.add(() => {
scoreText.text = `Score: ${score}`;
});
Correct:
const scoreText = new BitmapText({ text: "Score: 0", style });
app.ticker.add(() => {
scoreText.text = `Score: ${score}`;
});
Every Text update re-rasterizes the whole string. Use BitmapText for any value that changes per-frame.
Wrong:
const text = new Text("Hello", { fontSize: 24 });
Correct:
const text = new Text({ text: "Hello", style: { fontSize: 24 } });
v8 removed the (string, style) form. All text classes use options objects.
pixi.js/text-bitmap in custom buildsUnder skipExtensionImports: true or aggressive tree-shaking, Assets.load('font.fnt') silently returns raw data unless you add import 'pixi.js/text-bitmap'. The standard import { ... } from 'pixi.js' bundle includes the extension.
Every text class sets allowChildren = false. Wrap in a Container to group text with other content.