Guide · Open source

How to use PixiJS: install, render sprites and get started

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

PixiJS is an open-source JavaScript and TypeScript library for drawing 2D graphics, sprites, text and interactive content in a web browser. It uses WebGL and WebGPU so the browser's graphics hardware does most of the work. This guide shows you how to install it, render a sprite, animate it and set up TypeScript, so you can start building your own 2D browser visuals or games.

PixiJSpixijs/pixijs · ★ 48.6k · MIT Install options & downloads

Quick start

1Create or open a project. Make sure Node.js is installed, then start a new project with the PixiJS CLI or open an existing one.
2Install the library. Run npm create pixi.js@latest for a new project, or npm install pixi.js for an existing one.
3Create an Application. Create a new Application and initialize it with options such as background and resizeTo.
4Add the canvas to the page. Append app.canvas to document.body so the rendered output is visible.
5Load a texture and add a Sprite. Use Assets.load to get a texture, wrap it in a Sprite and add the sprite to app.stage.
6Animate with the ticker. Use app.ticker.add and multiply changes by time.deltaTime so motion stays frame-independent.
7Configure TypeScript if needed. If you use TypeScript 6 or 7, install @types/web and update your tsconfig types as described in the README.

What PixiJS is good for

PixiJS is a 2D rendering library. The project describes it as a fast, lightweight way to create interactive graphics and cross-platform applications for the web. Its feature list includes sprites, a asset loader, text rendering, primitive and SVG drawing, dynamic textures, masking, filters and blend modes.

It is a library you write code against, not a finished app or game editor. The README describes it as a 2D renderer, so it is not the right tool for 3D scenes.

Interactive 2D graphics and animations
Browser-based 2D games
Sprite, text, masking and filter effects on the web

Install PixiJS with npm

The quickest route is the PixiJS CLI, which sets up a new project in one command. If you already have a project, add the library with npm. The README lists Node.js as the prerequisite but does not state a minimum version.

New project: run the create command below.
Existing project: run the install command below from your project folder.

npm create pixi.js@latest

npm install pixi.js

Render and animate your first sprite

The README example creates an Application, initializes it with a background colour and makes it fill the window. It then appends the app canvas to the page, loads a bunny image as a texture, and places a Sprite in the centre of the screen.

The animation runs on the application ticker. The rotation is multiplied by time.deltaTime, so the speed stays consistent across frame rates. The example loads the image from a remote URL, so you can swap in your own image path.

Application: creates the renderer and stage.
Assets.load: loads a texture from a URL.
Sprite: displays a texture on the stage.
app.ticker.add: runs a function on every animation frame.

import { Application, Assets, Sprite } from 'pixi.js';

(async () =>
{
    const app = new Application();
    await app.init({ background: '#1099bb', resizeTo: window });
    document.body.appendChild(app.canvas);

    const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
    const bunny = new Sprite(texture);
    bunny.anchor.set(0.5);
    bunny.x = app.screen.width / 2;
    bunny.y = app.screen.height / 2;
    app.stage.addChild(bunny);

    app.ticker.add((time) =>
    {
        bunny.rotation += 0.1 * time.deltaTime;
    });
})();

Set up TypeScript for WebGPU types

PixiJS supports WebGPU, so its type declarations depend on WebGPU types, and where they come from depends on your TypeScript version. With TypeScript 5, PixiJS adds @webgpu/types for you and no extra setup is needed.

With TypeScript 6 or 7, the README recommends @types/web in place of the "dom" library, because some releases leave out parts such as GPUTextureUsage. Remove @webgpu/types from your types list if it is there, since it conflicts with the built-in types.

TypeScript 5: no extra setup required.
TypeScript 6 and 7: install @types/web as a dev dependency and use it in the types list.

npm install --save-dev @types/web

{
  "compilerOptions": {
    "lib": ["esnext"],
    "types": ["@types/web"]
  }
}

Where to learn more and get help

The project links to guides, tutorials, examples and API docs on its official site. A Discord community is also listed in the README. The code is released under the MIT License, so you can use it in commercial and personal projects under its terms.

If you want to contribute, the README asks you to read the Contributing Guide in the repository before submitting changes.

Guides, tutorials and examples at pixijs.com
API documentation linked from the README
Contributing Guide in the repository

What people use it for

Animating sprites and interactive visuals in the browser
Building 2D browser games
Adding text, masks and filters to web graphics
Drawing primitives and SVG-based shapes on a web page

Frequently asked questions

Is PixiJS free to use?

Yes. The README states that the content is released under the MIT License, which permits use in personal and commercial projects under its terms. Check the LICENSE file in the repository for the full text.

What do I need to install PixiJS?

The README lists Node.js as the prerequisite and does not state a minimum version. You install the library with npm, either through the create command for a new project or npm install pixi.js for an existing one.

Is PixiJS a game engine?

Not exactly. PixiJS is a 2D rendering library that you write code against. The README does not describe it as a finished game editor, so you build your game logic yourself.

What is the difference between PixiJS and Phaser?

Phaser is listed as a comparable project in this directory, and both target 2D work in the browser. This guide does not compare their features or performance, so check each project's documentation for details that matter to your build.

Does PixiJS support 3D?

No. The README describes PixiJS as a 2D renderer, so for 3D scenes you should look at a project such as Three.js, which is listed as a comparable project here.

Why do I get TypeScript errors about WebGPU types?

It depends on your TypeScript version. With TypeScript 5, PixiJS adds the WebGPU types for you. With TypeScript 6 or 7, the README advises installing @types/web and using it in place of the dom library, and removing @webgpu/types from your types list.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

PixiJS suits web developers and browser game makers who want a fast, flexible 2D library and are comfortable writing code. If you need a finished game with no coding, 3D rendering, or guaranteed WebGPU behaviour across all browsers, pick a different tool such as a game editor or Three.js.

Install options & downloads