Skip to content

Library

PixiJS

PixiJS is a fast 2D WebGL renderer for the browser, and pretty much only that — the drawing layer you build a game on top of, not the game.

PixiJS is a 2D rendering library for the browser, written in JavaScript with first-class TypeScript types, released under MIT. It draws sprites to WebGL very quickly and, when the hardware allows, to WebGPU. The thing to understand before anything else: it renders, and that is the whole job description.

There is no physics engine. No gameplay scene graph, no input system, no asset pipeline beyond loading. PixiJS puts pixels on the screen fast and leaves the rest of the game to you. Treat that as the feature it is, not an oversight, and the two of you will get along.

What it is good at

Throwing enormous numbers of sprites at the screen without the frame rate flinching. This is the reason PixiJS exists and the reason people keep reaching for it. Batched draw calls, texture atlases, a rendering path that has clearly been sweated over — if your problem is "I need to move ten thousand things at once in a browser tab," this is a very good answer.

It is a library, so it slots into whatever you already have. React, Vue, a plain build step, an existing web app that suddenly needs an interactive canvas in one corner. You import it, you get a renderer, you own the rest of the architecture. Nothing about PixiJS assumes it is the center of your project.

The display objects — sprites, containers, graphics, text — are lightweight and predictable. Filters and shaders are accessible without a doctorate, so effects like glow, blur and displacement are within reach. And because it lives entirely in the browser with no runtime to ship, the thing you build is just web code, deployable anywhere a static file can go.

Text and vector graphics are handled properly rather than as an afterthought, which matters more than it sounds once you are drawing UI or data-heavy scenes.

What it is not good at

Being an engine. If you want to open a tool, drag entities into a scene, tweak values with sliders and hit play, that is a different piece of software. PixiJS has no editor and no opinion about how your game is structured. Everything you would expect from an engine — a game loop with fixed timesteps, entity management, save systems, scene transitions — is yours to build or bolt on.

Physics is the clearest gap. You want collisions, gravity, joints? Bring your own library and marry it to the renderer yourself. Same story for input: PixiJS gives you pointer events on display objects, but a proper input layer with keyboard bindings, gamepad support and remapping is something you assemble.

3D is not on the menu. It is a 2D renderer and does not pretend otherwise. If your idea has a Z axis, look elsewhere.

And because it is browser-only, native desktop and console builds are not part of the deal. You can wrap a PixiJS project in a browser-based shell to reach other platforms, but that is a decision you make and maintain, not a checkbox in an export menu.

The honest cost of all this: PixiJS asks you to make architectural decisions early, and asks again later. A beginner who wanted to make a game will instead find themselves making a game framework, which is a different and slower hobby.

Who should pick it

The developer who is comfortable in JavaScript or TypeScript, has built things on the web before, and knows roughly how they want their code laid out. Someone who reads "no scene graph for gameplay" and thinks "good, I have opinions about that" rather than "where did the game go."

It suits projects where rendering performance is the hard constraint: particle-heavy visuals, big tile maps, data visualisations that need to feel like a game, generative art, anything with a punishing sprite count. It suits teams already invested in a web stack who want a rendering layer that cooperates instead of taking over.

It also suits the person who tried Phaser and found it was more structure than the job needed. If the framework kept making decisions you wanted to make yourself, PixiJS gives you the fast bit and hands the wheel back.

It is the wrong pick for a solo developer who wants to ship a finished game quickly with the fewest moving parts. That person wants an engine, and choosing PixiJS means volunteering to build one first.

Getting started

Install it from npm into whatever project setup you already trust, or drop in a script tag if you just want to poke at it. The first hour is short and encouraging: create an application, get a canvas, load a texture, make a sprite, add it to the stage, watch it appear. That part feels great and slightly misleading, because it is the easiest hour you will have.

The real learning starts one step later. Wire up the ticker and understand the update loop, because that is where your game logic will live. Learn containers and how transforms nest, since that is your only structural tool and you will lean on it constantly. Get comfortable with the asset loader and texture atlases early — sprite count is the whole point, and packed textures are how you keep the count cheap.

After that, make the decisions PixiJS deliberately left open. Pick a physics library if you need one. Decide how state and entities are organised before the codebase does it for you badly. Choose how input is handled beyond raw pointer events.

The official docs and examples at pixijs.com are the fastest way in, and the examples in particular are worth reading not for the effects but for the patterns. Start with a project small enough that building your own structure is fun rather than a tax. The renderer will keep up. It always does.

Best for

JavaScript and TypeScript developers who want raw rendering speed and are happy to wire up gameplay, input and physics themselves.

Not the right pick for

Anyone who wants an engine with scenes, an editor and batteries included. You'll spend your first week rebuilding things Phaser or Godot hand you for free.

Frequently asked questions

Should I use PixiJS or Phaser?
Phaser is a full 2D game framework built on top of a renderer, with scenes, input, physics and more decided for you. PixiJS is just the renderer and leaves those choices open. Pick Phaser if you want structure and a faster path to a finished game; pick PixiJS if that structure feels like something fighting the way you want to build.
Can I ship a PixiJS game outside the browser?
Not through PixiJS directly — its official export target is the browser. You can wrap a PixiJS project in a browser-based desktop or mobile shell to reach other platforms, but that packaging is something you set up and maintain yourself rather than a built-in export option.
Does PixiJS handle physics and collisions?
No. It renders and nothing more. If your game needs gravity, collisions or joints you bring a separate physics library and connect it to your PixiJS display objects yourself. For simple overlap checks you can write your own math against object bounds.
Is PixiJS free to use commercially?
It is released under the MIT licence, which is permissive and commercial-friendly. Check the current terms on the official site before you ship, but MIT generally lets you use, modify and distribute it without royalties or per-title fees.
Does it support WebGPU or just WebGL?
PixiJS renders through WebGL and can use WebGPU where the browser and hardware support it, falling back gracefully otherwise. For most projects the renderer choice is handled for you, so you get the faster path when it is available without rewriting your code.