# PixiJS — The HTML5 Creation Engine with Fast 2D WebGL

> PixiJS is the fastest, most flexible 2D WebGL/WebGPU renderer for the web. Powers interactive ads, games, data viz, and rich media experiences. Used by Google, IKEA, Disney, and countless HTML5 games on Poki and CrazyGames.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i pixi.js
```

```ts
import { Application, Assets, Sprite } from "pixi.js";

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((ticker) => {
  bunny.rotation += 0.05 * ticker.deltaTime;
});
```

## Intro

PixiJS is the fastest, most flexible 2D WebGL/WebGPU renderer for the web. Started in 2013 by Goodboy Digital, it powers interactive ads, HTML5 games, rich data visualizations, and creative coding experiments. Now on v8 with first-class WebGPU support.

- **Repo**: https://github.com/pixijs/pixijs
- **Stars**: 46K+
- **License**: MIT

## 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

| Library | Scope | Renderer | Framework |
|---|---|---|---|
| PixiJS | 2D renderer | WebGL/WebGPU | No |
| Phaser | 2D game framework | Canvas/WebGL | Yes |
| Three.js | 3D | WebGL/WebGPU | No |
| Konva | 2D on canvas | Canvas 2D | No |

## 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

---
Source: https://tokrepo.com/en/workflows/pixijs-html5-creation-engine-fast-2d-webgl-3ae8ffec
Author: Script Depot