PixiJS

~150kb min / ~45kb gzipped

The fastest 2D WebGL renderer for the web.

01

See It in Action

Colorful shapes bouncing around the canvas — shows basic PixiJS graphics, containers, and the animation ticker.

Preview
02

What is PixiJS?

PixiJS is the fastest 2D rendering engine for the web. It uses WebGL to hardware-accelerate 2D graphics, delivering performance that raw Canvas 2D can't match — while providing a clean, expressive API for sprites, text, graphics, and filters.

Used by companies like Google, Disney, and BBC, PixiJS powers everything from games to data visualizations to interactive ads. It handles sprite batching, texture management, and WebGL state automatically, so you focus on what to draw rather than how to draw it efficiently. V8 is the latest major version with a modernized API.

⚡
WebGL-Accelerated 2D
Renders 2D graphics using WebGL for hardware-accelerated performance, with automatic Canvas 2D fallback for compatibility.
🖼️
Sprite Batching
Efficiently batches thousands of sprites into minimal draw calls. Render 100,000+ sprites at 60fps.
🎭
Filters & Effects
Built-in WebGL filter system — blur, glow, displacement, color matrix, and custom shader filters.
📐
Rich Display Objects
Sprites, animated sprites, tiling sprites, text, graphics primitives, meshes, and containers with a scene-graph hierarchy.
🔄
Asset Loader
Built-in asset management with spritesheet parsing, bitmap font loading, and texture atlas support.
03

When to Use PixiJS

Use when
✓ 2D browser games with sprites and tilemaps
✓ Interactive data visualizations with thousands of elements
✓ Rich animated UI elements and micro-interactions
✓ Digital signage and kiosk displays
✓ Creative coding and generative 2D art
✓ Advertising and interactive banner experiences
Avoid when
✕ 3D scenes — use Three.js or Babylon.js for anything 3D
✕ Simple DOM animations — CSS Animations or GSAP are lighter and easier
✕ Text-heavy UIs — standard HTML/CSS is more accessible and SEO-friendly
✕ Server-side rendering — PixiJS is browser-only (needs a canvas)
04

How PixiJS Compares

PixiJS vs Three.js

PixiJS is for 2D, Three.js is for 3D. PixiJS renders 2D sprites much faster than Three.js can. Choose based on dimension.

PixiJS wins at
Faster 2D rendering, sprite batching, smaller bundle, simpler API
Three.js wins at
Full 3D engine, WebGL2 features, PBR materials, 3D model loading
PixiJS vs Canvas 2D API

PixiJS uses WebGL for hardware acceleration, making it orders of magnitude faster for complex scenes. Use raw Canvas 2D only for simple drawing.

PixiJS wins at
WebGL acceleration, sprite batching, filters, asset management
Canvas 2D API wins at
Zero dependencies, simpler API, works without WebGL, smaller payload
PixiJS vs Phaser

Phaser is a game framework built on PixiJS (v2) / its own renderer. PixiJS is just a renderer — lighter and more flexible. Choose Phaser for games with physics/audio needs.

PixiJS wins at
Lighter, more flexible, better for non-game use cases, newer API
Phaser wins at
Full game framework, built-in physics, audio, input, scene management
05

Get Started with PixiJS

Terminal 
npm install pixi.js
Terminal 
yarn add pixi.js
HTML 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
Quick Start 
import { Application, Graphics, Text } from "pixi.js";

const app = new Application();
await app.init({ width: 640, height: 480, background: "#1a1a2e" });
document.body.appendChild(app.canvas);

// Draw a circle
const circle = new Graphics()
  .circle(320, 240, 50)
  .fill({ color: 0x4ecdc4 });
app.stage.addChild(circle);

// Add text
const text = new Text({ text: "Hello PixiJS!", style: { fill: "#ffffff", fontSize: 24 } });
text.anchor.set(0.5);
text.position.set(320, 340);
app.stage.addChild(text);

// Animate
app.ticker.add((delta) => {
  circle.rotation += 0.01 * delta.deltaTime;
});