Skip to main content

PixiJS Update - v8.16.0

· 7 min read
Zyie
Zyie
PixiJS Admin

PixiJS v8.16.0 brings two headline features: an experimental Canvas renderer for environments without WebGL/WebGPU, and tagged text for inline styling without multiple text objects. This release also includes major SplitText stability improvements and broad engine stability updates.

Canvas renderer (experimental)​

PixiJS welcomes back the Canvas 2D renderer in v8. It produces a smaller build, runs well on older hardware, and works in environments where a GPU context isn't available. If a device doesn't support WebGL or WebGPU, PixiJS falls back to Canvas automatically. No configuration needed, your app keeps running.

If you want to always use the Canvas renderer, set the preference explicitly:

await app.init({
    preference: 'canvas',
});

This is an early, experimental release. The Canvas renderer doesn't cover every feature the GPU renderers support, but it handles core use cases: sprites, graphics, text, and basic filters. If you run into issues, please file a bug.


Thanks to @krzys and @Zyie for shipping this.

Tagged text​

Styling parts of a string used to mean splitting text across multiple objects and managing layout yourself. Tagged text removes that friction. Define tag styles once on your TextStyle, then use inline tags in your string:

const text = new Text({
    text: '<bold>Important:</bold> This is <highlight>highlighted</highlight> text',
    style: {
        fontFamily: 'Arial',
        fontSize: 28,
        fill: 'white',
        tagStyles: {
            bold: { fontWeight: 'bold', fill: 'yellow' },
            highlight: { fill: 'cyan', fontSize: 32 },
        },
    },
});

Tags can be nested, and each tag inherits from the base style. This works with Text and HTMLText today; BitmapText support is coming soon.

SplitText stability improvements​

SplitText received a significant overhaul in this release. It now mirrors standard Text behavior more closely and handles a wider range of TextStyle configurations. Key changes:

  • Character positioning is more accurate across different font sizes, weights, and styles.

  • SplitText.from correctly transfers the source anchor by mapping it to pivot coordinates.

  • Style changes propagate automatically when you call styleChanged():

    splitText.style.fontSize = 32;
    splitText.styleChanged();

  • SplitBitmapText now defaults to a white fill, matching BitmapText behavior. If you were passing fill: 'white' manually, you can remove it.

These changes may cause slight positional shifts compared to previous versions. If your text looks off after upgrading, the new positions are more correct.

Text rendering fixes​

Several long-standing text issues are resolved in this release:

  • HTMLText word wrapping: breakWords is now respected, and words exceeding wordWrapWidth are no longer clipped.
  • HTMLText alpha: Fill and stroke alpha values now render correctly.
  • Text alignment: align: 'right' and align: 'center' produce correct positioning.
  • HTML text measurement: Measurement accuracy improved, reducing layout inconsistencies.

More additions​

  • Cube textures: New CubeTexture support for environment maps and skybox-style rendering (@GoodBoyDigital).
  • External texture support: Bring your own GPU textures into PixiJS, useful for sharing resources with other renderers (@astralarya, @GoodBoyDigital).
  • Mip level rendering: Render specific mip levels of a texture directly (@GoodBoyDigital).
  • Render to array layer: Target specific layers of array textures when rendering (@GoodBoyDigital).
  • Spritesheet parseSync: Synchronous spritesheet parsing when textures are already loaded (@jimhigson).
  • Improved Pool typing: pool.get() now returns properly typed instances (@unstoppablecarl).

Bug fixes​

Beyond the text fixes above, this release addresses:

  • container.cullArea is now correctly interpreted in local coordinate space and transformed to global coordinates before culling checks (@jujurocket).
  • graphics.texture(texture, 0x000000) correctly applies a black tint instead of treating 0 as "no tint" (@bigtimebuddy).
  • WebGPU MSDF shader uses vColor instead of localUniforms.uColor, fixing bitmap font color in WebGPU (@Riphal).
  • VAO cache preserved in GlGeometrySystem, preventing geometry corruption (@GoodBoyDigital).
  • GC system now marks render groups as dirty, preventing stale render state (@Zyie).
  • WGSL struct reflection preserves generic type parameters (@stargazer-2697).
  • Video loader now catches load errors instead of silently failing (@stargazer-2697).
  • Tree-shaking improved through optimized module imports (@Zyie).
  • Custom asset parsers can now override src in the Resolver (@GoodBoyDigital).

You can view the full changelog on GitHub.

What's coming: 3D, the PixiJS way​

While not part of this release, we want to give you a look at where PixiJS is headed. We're actively building 3D support into the engine, designed to work alongside the 2D renderer.

Interactive experiences increasingly blend 2D and 3D: UI over 3D scenes, 3D elements embedded in 2D worlds, and large numbers of simple 3D objects rendered at scale. PixiJS is being extended to handle those cases directly, without requiring a separate 3D engine or a fundamentally different workflow.

Here's a recent internal test running 200,000 3D objects with shadows and dynamic lighting, all automatically batched by the engine. There's no manual draw-call management and no scene-graph workarounds. You define your objects, and PixiJS handles the rest:

The same batching architecture that makes PixiJS fast for 2D rendering is now being applied to 3D. Materials, lighting, and shadows all flow through the same automatic batching pipeline, enabling high object counts without sacrificing simplicity or performance.

Our approach is to be intentionally opinionated. Rather than building a general-purpose 3D engine, PixiJS focuses on fast, scalable 3D that integrates tightly with 2D.

Cube textures, mip level rendering, and array layer rendering in this release are early building blocks for that 3D pipeline.

We're posting frequent development updates on Twitter/X and Bluesky. Follow along if you want to see this take shape in real time.

New contributors​

Welcome to our newest contributors:

Thank you for your contributions!

Get the latest PixiJS​

Install via npm:

npm install pixi.js@8.16.0

Or use via CDN:

Development builds:

Production builds:

Documentation: https://pixijs.download/v8.16.0/docs/index.html

Wrapping up​

That covers what's new in v8.16.0. If you hit issues with the Canvas renderer or tagged text, please report them so we can iterate.

Thanks to everyone who contributed fixes and features to this release.


Happy creating!

The PixiJS Team