What Is PixiJS? A Guide to the 2D Rendering Engine

PixiJS draws 2D graphics in the browser on the GPU, through either a WebGL or a WebGPU renderer. The maintainers say it’s a creation engine and not a game engine. It handles drawing and asset loading, and it reads pointer input too. Physics, audio and game rules are left to other code.

The library is open source under the MIT license. People use it for browser games and interactive ads, and also for educational content and data visualizations.

WebGL is the default renderer, not WebGPU. The first v8 releases did prefer WebGPU, but the v8.1.0 release notes reversed that after reports of inconsistent behavior across browsers. WebGPU is opt-in now, through the preference option.

What Is PixiJS?

Scenes are written in JavaScript or TypeScript, and the library installs from npm as pixi.js.

The project FAQ calls it a creation engine, not a game engine, and describes the core job as pushing visual elements around a screen with as little overhead as possible.

You won’t find game rules, physics, sound or a UI kit in the package. What you do get is drawing and asset loading, with pointer input on top.

It’s a 2D rendering engine for the web, free and open source under the MIT license (GitHub repository). Three part-time core developers maintain it: creator Mat Groves (a Goodboy Digital co-founder), Sean Burns (Zyie) and Matt Karl, with community contributors helping out. The codebase is written in TypeScript (v8 launch post and GitHub repository).

The introduction guide names a mix of audiences. Developers focused on browser game development come first, then people building interactive web apps or cross-platform apps through Tauri and Electron, then data visualization work, and finally creators adding visual effects to web content.

Interactive ads and educational content appear in the same official definition.

Which Renderers Does PixiJS Use, and What Changed in Version 8?

autoDetectRenderer chooses between WebGL (WebGL2 included) and WebGPU when the app starts, and since v8.1.0 WebGL wins by default.

The WebGL renderer is the one the official docs label recommended and stable. WebGPU gets an experimental label, along with a warning that browser implementations behave inconsistently.

How the renderer gets chosen

Both app.init() and autoDetectRenderer() are asynchronous, so you await them. The preference option takes ‘webgpu’ or ‘webgl’ to set the order. As of the June 12, 2026 update (v8.18.0 and v8.19.0), it also accepts an array such as [‘webgl’, ‘canvas’] if you want to restrict the fallback chain.

The init is async because WebGPU needs asynchronous setup. It also lets bundlers load only the renderer code a project needs, per the v8 launch post.

What version 8 changed

PixiJS v8 launched on March 5, 2024, after a beta that opened in October 2023.

The team built WebGPU into the core as a first-class renderer instead of bolting it onto the WebGL code. The library also collapsed into one package with one import root, and the speedups apply to both renderers.

That WebGPU default didn’t last. The early v8 releases preferred it, and v8.1.0 reversed course after reports of inconsistent behavior across browsers. The release notes say browser support still has to mature.

Does PixiJS have a Canvas renderer?

Depends on which source you read. The official renderers guide still lists a CanvasRenderer as an upcoming fallback, but the release notes say otherwise. Version 8.16.0 (February 2026) added an experimental Canvas renderer that you select with preference: ‘canvas’. The June 12, 2026 update then lists Canvas renderer fixes in v8.18.0 and v8.19.0 and shows ‘canvas’ as a valid preference value.

The guide’s status column lags the changelog. Check the release notes for the exact version you install before relying on either source.

The figures people tend to look up most:

• The v8 launch date was March 5, 2024 (PixiJS blog archive).
• WebGL has been the default renderer since v8.1.0 (GitHub release notes).
• The official June 12, 2026 update covers up to v8.19.0.
• The latest GitHub release as of October 1, 2026 is v8.22.0.
• Weekly npm downloads crossed 500,000 by June 2026 (PixiJS update, June 2026).
• The license is MIT (GitHub repository).

What Are the Main Building Blocks of a PixiJS Scene?

Everything on screen hangs off a tree of display objects. An Application owns the stage and a Container groups children, while Sprite, Graphics, Text and Mesh draw the visible content.

The architecture guide says the Application wraps the renderer and ticker plus the loader into one object, which suits prototypes and small projects.

Containers and the scene graph

Container is the main scene object. It draws nothing itself. It groups children and passes transforms down to them, so moving a parent moves every child, and alpha, scale and rotation cascade the same way. Children render in the order they were added.

Sprites, Graphics and Meshes

Sprite draws one texture and is the standard object for characters, tiles and icons. Graphics handles vector shapes drawn from code, including rectangles, circles, polygons, bezier paths, strokes and gradients. Mesh is the odd one out, since it draws custom geometry with your own shader.

Graphics reads SVG path data, and since v8.18.0 the graphicsContextToSvg() function can export a Graphics object as an SVG string.

Small shapes batch like sprites. Hundreds of complex, constantly redrawn Graphics objects do not, so bake those into a texture.

Text rendering modes

A single unified Text class was tried during the v8 release candidates and reverted in v8.0.0-rc.9, because the render modes needed different variables.

Text rasterizes with the browser’s text engine and uploads the result as a texture. BitmapText reads glyphs from a bitmap font, either pre-baked or generated on the fly. HTMLText renders HTML markup inside the scene.

Use BitmapText for anything that changes every frame, like a score counter. Text is fine for titles and labels that rarely change, and HTMLText fits when the layout needs to behave like a document.

Ticker, input and effects

The Ticker fires callbacks once per frame, so update logic runs there. It is PixiJS’s take on the JavaScript game loop, with listener priorities and minFPS and maxFPS caps.

Pointer events cover clicks, hovers and touch, multi-touch included. Masks, filters and blend modes handle visual effects, and there are accessibility tools for keyboard and screen-reader support.

How Does PixiJS Load Textures, Spritesheets and Other Assets?

The Assets singleton loads and caches resources through Promises. await Assets.load(url) resolves to the texture, font or data file at that address, with the loader chosen from the file extension.

Repeated requests for the same URL or alias return the same cached object, so a second load adds no network request.

The v8 Assets guide lists the built-in loaders below.

Short aliases such as ‘bunny’ stand in for long URLs in load(), get() and unload(). Bundles group assets through a manifest, and the guide recommends them for larger projects. Background loading fetches assets while the user is already doing something else.

Spritesheets are JSON files that map frame names to regions of one packed image, usually exported from a packer such as TexturePacker.

Compressed texture support (KTX, DDS, Basis) was added in v8.0.0-beta.6. AssetPack, the official tool for preparing asset files, reached 1.0.0 on July 18, 2024.

The usual ways this goes wrong are calling Assets.load before app.init has finished and destroying many textures in one frame. For the second one, the Performance Tips guide advises a random delay when destroying several textures at once to avoid freezes.

Why Is PixiJS Fast? Batching, Texture Atlases and ParticleContainer

Most of the speed comes from batching sprites and small Graphics objects into few draw calls, and from packing textures into shared atlases. Since v8 it also redoes work only for objects that changed. ParticleContainer carries the same idea to counts beyond what sprites handle.

Batching and texture atlases

Sprites share a batch even when they use up to 16 different textures, depending on hardware, according to the Performance Tips guide.

Spritesheets keep the texture count low, so batches rarely break. Draw order matters too, and sprite, sprite, graphic, graphic beats sprite, graphic, sprite, graphic.

Blend modes break batches the same way. Alternating screen and normal sprites costs 4 draw calls, while grouping them costs 2.

What version 8 changed in the render loop

In the October 2023 beta post, the PixiJS team measured 100,000 static sprites at about 21 ms of CPU time per frame in v7 and about 0.12 ms in v8.

The gap comes from doing less. v8 updates transforms only for objects that changed, builds render instructions from the scene graph and reuses them while the graph stays the same, and sends scene data to the GPU in one upload that gets skipped when nothing moved.

Those figures come from the team’s own Bunnymark on a pre-release build, not from an independent benchmark.

Read next to the Performance Tips guide, which says Graphics objects run fastest when they are not modified constantly, the pattern is consistent. PixiJS is cheapest when little changes between frames.

ParticleContainer for very large counts

ParticleContainer drops sprites in favor of lightweight particles.

On a MacBook Pro M3, PixiJS creator Mat Groves measured 200,000 sprites in a Container at 60 fps against 1,000,000 particles in a ParticleContainer (PixiJS blog, October 2024).

Particles keep the common properties (texture, position, anchor, scale, rotation, alpha and color) and skip the extra overhead sprites carry. By default only position is dynamic, and every dynamic property is recalculated and uploaded each frame.

Where speed drops

• Masks vary a lot. Axis-aligned rectangle masks are fastest, Graphics masks come second, and sprite masks are slowest because they run through filters.
• Every filter is expensive, and stacking many slows the scene.
• Redrawing Text every frame re-rasterizes and re-uploads it, so switch to BitmapText.
• Culling is off by default. It helps when the GPU is the bottleneck and hurts when the CPU is.

Measure first. The docs themselves say PixiJS handles a fair amount of content without tuning.

Which Tools and Packages Extend PixiJS?

The core stays a renderer. UI components, audio, filters, layout, React bindings and debugging tools all come as separate official packages, and each installs on its own, so a project only pulls in what it uses.

Layout is opt-in per object and borrows its rules from CSS, with web-style additions such as objectFit, objectPosition and overflow scrolling.

Animation and debugging

The Spine-Pixi integration plays skeletal animations made in the Spine editor, and PixiJS announced Spine 4.2 support on June 14, 2024. DevTools is a browser extension that shows performance, the rendering hierarchy and texture management in real time.

DevTools earns its place once a project outgrows the prototype stage. Reading the hierarchy beats guessing which Container holds the object that costs frames.

React bindings

PixiJS React v8 shipped on March 26, 2025 as a ground-up rewrite built exclusively for React 19 and PixiJS v8. The maintainers call the jump a hurdle for React 18 users.

Components appear as JSX elements with a pixi prefix, such as pixiSprite and pixiGraphics, with no wrapper components in between.

New projects can start from the PixiJS Create template: npm create pixi.js@latest –template framework-react.

Community packages and version lag

The v8 migration guide’s package checklist is older than several later releases. It lists Filters, Sound, Gif, Storybook, UI and Open Games as migrated, with React and Spine (the Esoteric version) still migrating. Later announcements overtook it, since Spine 4.2 support arrived on June 14, 2024 and PixiJS React v8 on March 26, 2025.

Treat the checklist as a snapshot and check each repository for its current v8 status. Community repositories under PixiJS Userland carry a similar warning in the ecosystem guide: they may lag behind the latest PixiJS release.

What Is PixiJS Used For?

PixiJS appears wherever a team wants fast 2D drawing without adopting a full engine, and the official showcase puts studio games, creation tools and public-interest projects side by side.

• Cartoon Network EMEA lists GameBox, Toon Cup and Adventure Time Elemental.
• GDevelop, a game creation tool, sits in the same showcase.
• Google Research’s Semantris and UNICEF’s Right Runner cover the research and public-interest side.
• Bubbo Bubbo and Puzzling Potions come from PixiJS Open Games, and the ecosystem guide also recommends the open-games repository for inspiration.

The listing is the PixiJS team’s own curation, so read it as proof of use, not a market-share figure.

Interactive ads and data visualization appear in the official definition, but the showcase names no ad or chart project. For those two, the evidence is the project’s own description, not a named case.

Platform embeds

The December 6, 2024 PixiJS Create post announced creation templates for Discord multiplayer apps, Facebook Instant Games and YouTube Playables.

All three were listed as coming soon at that date, with only the general web template available. The PixiJS Create docs still list them as coming soon, so check the current CLI before planning around them.

PixiJS vs Phaser, Three.js and the Canvas 2D API

PixiJS fits when you want a fast 2D renderer to build around. Phaser makes more sense as a complete 2D game framework, Three.js is the one for 3D scenes, and the Canvas 2D API only works when the drawing is small enough to manage by hand.

PixiJS or Phaser

Phaser bundles what PixiJS leaves out, and the official sources agree on that split.

With PixiJS you get control over structure and no opinion on physics or audio, plus a core you can trim through subpath imports. Phaser goes the other way and ships physics, audio, tilemaps, cameras and a particle system in one package, per the Phaser site.

Early releases of Phaser incorporated Pixi.js for rendering (Wikipedia, citing the release history). Phaser 3 shipped its own WebGL renderer, and Phaser 4, released April 10, 2026, rebuilt that renderer from scratch, as Phaser’s April 2026 post describes.

Some comparison pages still claim Phaser 3 renders through PixiJS. The sources above contradict that, so discount those pages.

The same pages quote conflicting bundle sizes for both libraries. Measure your own build instead, and in v8 set manageImports to false and import only the pixi.js subpaths you need (v8 migration guide).

PixiJS or Three.js

Three.js is for 3D, and the PixiJS docs say as much.

The guide sends 3D projects to a Three.js or Babylon.js scene and offers a separate guide for running both libraries together, with PixiJS as the 2D layer on top.

• Create the Three.js renderer with stencil set to true so PixiJS masks work.
• Pass the Three.js WebGL context to PixiJS during init.
• Set clearBeforeRender to false, or PixiJS wipes the 3D frame.
• Call resetState on each renderer before it draws.
• Resize both renderers together.

Textures are not shared. A PixiJS texture cannot serve as a Three.js texture, or the reverse (PixiJS mixing guide).

PixiJS or the Canvas 2D API

The raw canvas API is enough for a chart or a handful of shapes.

Once you track hundreds of moving objects and handle pointer input per object, you are rebuilding the scene graph and event system PixiJS already has.

When PixiJS Is the Wrong Choice

Skip PixiJS for 3D scenes, and for projects that want a complete game framework. Apps that need native device features without a wrapper are a poor fit too.

3D scenes and full frameworks

The official “What PixiJS Is Not” guide, which now lives in the v7 docs, is blunt about it. PixiJS is built for 2D, and it is not a framework like Unity or Phaser. Scripting, user settings, music playback and art pipeline management sit outside its scope.

For 3D, the guide points to Babylon.js and Three.js.

The mixing approach is not limited to Three.js. The guide notes that any engine able to reset its renderer state, including PlayCanvas, can sit under a PixiJS layer.

Native device features

Camera, location services and notifications need a wrapper such as Cordova, Tauri or Electron. Scores and settings go to Web Storage, cookies or a server, and sprite packing, image processing and mipmaps come from standalone tools.

Server and worker environments

The environments guide describes browsers, Web Workers and custom adapters for contexts such as Node.js and headless testing. Some third-party summaries still call PixiJS browser-only.

Both statements hold in practice. The default adapter targets the browser, a Web Worker needs WebWorkerAdapter set before anything is created, and anything else needs a custom adapter that supplies canvas creation, fetch and XML parsing.

Plan for that adapter work before promising server-side rendering.

Upgrading between major versions

The v8 migration guide advises upgrading in general, but holding off while a library you depend on lacks a v8 build. Beyond the async init, it lists these breaking changes.

• Textures no longer load their own resources, and BaseTexture is replaced by texture sources such as ImageSource and CanvasSource.
• Graphics builds the shape first, then fills or strokes it, so rect(…).fill(…) replaces beginFill and drawRect.
• Advanced blend modes, KTX, DDS, Basis and math-extras are not imported by default.
• Pixi layers had no v8 counterpart when the guide was written, and the team planned to fold it into the core. Render Layers arrived in v8.7.0 in January 2025.

The guide calls Graphics probably the most changed part of v8. Budget review time there first.

How to Start a PixiJS Project

1. Install Node.js v20.0 or higher (PixiJS Quick Start guide).
2. Run npm create pixi.js@latest and choose a template. The docs recommend a creation template for beginners and the Vite plus PixiJS bundler template for more control. To add PixiJS to an existing project, run npm install pixi.js instead.
3. Inside the new folder, run npm install, then npm run dev.
4. Create an Application, await app.init(), and append app.canvas to the page.
5. Load a texture with Assets.load(), wrap it in a Sprite, set its anchor and position, and add it to app.stage.
6. Register a callback on app.ticker and scale movement by time.deltaTime so speed stays constant at any frame rate.

What goes wrong

Top-level await trips up Vite builds. The Quick Start guide warns that production builds break on Vite 6.0.6 and earlier, so wrap startup code in an async function.

Older tutorials are another source of trouble, because new Application({…}) and beginFill() are v7 code that no longer matches v8. The same goes for AI-generated code. The June 12, 2026 update says coding agents tend to produce v7 patterns, and it ships 25 official PixiJS skills for tools such as Claude Code, Cursor, Codex, Copilot and Windsurf.

To try code before installing anything, the official docs link a PixiJS Playground that runs in the browser.

PixiJS FAQ

Why is PixiJS also written Pixi.js and PIXI?

Three spellings point to one library. PixiJS is the project name, pixi.js is the npm package, and PIXI is the global namespace in the official Three.js mixing guide’s examples. Third-party pages often write Pixi.js.

Does PixiJS run on mobile devices?

Yes, in mobile browsers. For older devices, the Performance Tips guide suggests passing useContextAlpha: false and antialias: false to the Application, and shipping a half-scale spritesheet named with an @0.5x suffix so PixiJS doubles it visually.

Does PixiJS support TypeScript?

Yes. The library is written in TypeScript, so its type definitions come from the source itself.

PixiJS React v8 was also rebuilt in TypeScript, which gives autocompletion and type checking even to projects written in plain JavaScript (PixiJS blog, March 2025).

How large is the PixiJS bundle?

It depends on which extensions the build includes. By default, v8 imports accessibility, events, filters, text, bitmap text, HTML text, graphics, mesh and tiling or nine-slice sprites, and manageImports: false in app.init() switches that off.

Your own bundler report gives the reliable number.

Do v7 methods still work in v8?

Some do. At the October 2023 beta, the team said changed v7 methods keep working and print a deprecation warning pointing to the new approach.

Removed pieces are different. The migration guide lists BaseTexture as gone, replaced by texture sources.

Keeping a PixiJS Project Current

A PixiJS project should move to a new major version only after every library it depends on ships a build for that version. Until then, the older release stays in place.

A React 18 project faces two migrations in one. PixiJS React v8 requires React 19, so the PixiJS upgrade and the React upgrade ship together.

The order that limits risk starts with auditing dependencies for a v8 build. Graphics calls get rewritten next, and rendered output gets compared after each minor release.

That last step is not optional. As of the June 12, 2026 update, v8.19.0 changed FillPattern output and particle blend modes, and the team warns that existing scenes can render differently after upgrading.

Later releases kept adding behavior changes. v8.20.0 made ParticleContainer inherit the tint and alpha of ancestor render groups, and v8.21.0 changed the rotation, skew and scale values that Matrix.decompose() returns for mirrored matrices. The latest release at the time of writing is v8.22.0, from October 1, 2026.

Pinning the minor version trades new fixes for stable rendering.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web and graphic design, focusing on creating user-friendly websites, innovative UI kits, and unique fonts.

Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.

Latest posts by Bogdan Sandu (see all)

• What is Backend in Web Development? - September 13, 2026
• What is Frontend Development? - September 11, 2026
• How to Make a Button in Figma: Design Best Practices - September 10, 2026