Getting Started with PixiJS v8: Quick Start Guide

Gustavo Toledo — Fri, 19 Dec 2025 15:47:33 +0000

PixiJS is an efficient library for 2D rendering in the browser, leveraging WebGL with a fallback to Canvas. It is widely used for games, interactive animations, and data visualizations. The v8.x release includes performance improvements and a modernized API.

This article follows the official Quick Start guide for PixiJS v8, available at https://pixijs.com/8.x/guides/getting-started/quick-start. It covers project setup and a practical example that creates a grid of rotating sprites.

Trying PixiJS Online

To experiment with PixiJS without local setup, use the PixiJS Playground.

Prerequisites

Familiarity with the command line and basic JavaScript knowledge.
Node.js version 20.0 or higher installed (available at nodejs.org).

Creating a New Project

The recommended approach is to use the official PixiJS CLI.

Run the following command in your terminal:

npm create pixi.js@latest

This will launch the scaffolding tool and prompt you to configure the project. There are two main template categories:

Creation Templates (Recommended)

These are platform-specific, with additional configurations and dependencies. They are opinionated and suitable for beginners or those seeking a pre-configured setup.

Bundler Templates

These provide a general setup with a chosen bundler, offering flexibility in project structure. They are ideal for experienced developers.

For bundler templates, the Vite + PixiJS option is recommended due to its modern and fast configuration.

After selection, navigate to the project directory and install dependencies:

cd <your-project-name>
npm install
npm run dev

To add PixiJS to an existing project:

npm install pixi.js

Example: Grid of Sprites Using a Container

The following example demonstrates grouping multiple sprites in a Container for centralized manipulation. It loads a texture and arranges 25 instances in a 5x5 grid.

Main code (typically in src/main.js or equivalent):

// Description: This example demonstrates how to use a Container to group and manipulate multiple sprites

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

(async () => {
  // Create a new application
  const app = new Application();

  // Initialize the application
  await app.init({ background: '#1099bb', resizeTo: window });

  // Append the application canvas to the document body
  document.body.appendChild(app.canvas);

  // Create and add a container to the stage
  const container = new Container();
  app.stage.addChild(container);

  // Load the bunny texture
  const texture = await Assets.load('https://pixijs.com/assets/bunny.png');

  // Create a 5x5 grid of bunnies in the container
  for (let i = 0; i < 25; i++) {
    const bunny = new Sprite(texture);
    bunny.x = (i % 5) * 40;
    bunny.y = Math.floor(i / 5) * 40;
    container.addChild(bunny);
  }

  // Center the container
  container.x = app.screen.width / 2;
  container.y = app.screen.height / 2;

  // Center the container's origin
  container.pivot.x = container.width / 2;
  container.pivot.y = container.height / 2;

  // Animate rotation using the ticker
  app.ticker.add((time) => {
    container.rotation -= 0.01 * time.deltaTime;
  });
})();

This example highlights key concepts: application initialization, asset loading, container usage for grouping, and frame-rate-independent animation via the ticker.

For further exploration, refer to the official documentation on advanced features such as filters, particles, and framework integrations.