PixiJS — The HTML5 Creation Engine with Fast 2D WebGL

What PixiJS Does

• Rendering — Sprites, Graphics, Meshes, Text, NineSlice
• Ticker — frame loop with delta time
• Scene graph — Container hierarchy with transforms
• Filters — blur, glow, noise, color-matrix post effects
• Textures — spritesheets, atlas, base textures
• Interaction — events (pointer, tap, drag) via FederatedEvents
• Assets — smart loader for images, fonts, JSON, spritesheets
• WebGPU — v8 experimental backend

Architecture

A renderer paints the stage (root Container) each tick. Sprites hold a texture + transform. Graphics draws vector shapes. v8 introduced a new renderer architecture that unifies WebGL and WebGPU paths and removed the mandatory global registration.

Self-Hosting

Client library, ships in bundle.

Key Features

• 2D WebGL + WebGPU renderer
• Sprites, graphics, meshes, text
• Post-processing filters
• Spritesheet and texture atlas
• Custom shaders
• Asset loader
• Event-based interaction
• Tree-shakeable imports (v8)

Comparison

FAQ

Q: PixiJS vs Phaser — what's the difference? A: PixiJS only handles rendering (more flexible — you assemble your own game loop); Phaser is a full game framework (scenes, physics, input, audio). Pick Phaser to ship a game quickly; pick PixiJS when you need heavy customization.

Q: What's new in v8? A: A rewritten rendering core, WebGPU support, better tree-shaking, removal of global registration, ESM-first. Upgrading involves breaking changes.

Q: Can it do 3D? A: PixiJS is a 2D engine. For 3D, pick Three.js or Babylon.js.

Sources & Credits

• Docs: https://pixijs.com
• GitHub: https://github.com/pixijs/pixijs
• License: MIT