library/pixi.js
A Pixi.js Online Editor and Playground with Live WebGL
Draw sprites, text and particles on Pixi's fast WebGL canvas and watch them render live as you edit, with npm and nothing to install.
import { Application, Graphics } from 'pixi.js';
const app = new Application();
await app.init({ width: 400, height: 300 });
const dot = new Graphics().circle(0, 0, 20).fill(0xf45d92);
app.stage.addChild(dot);
app.ticker.add((t) => { dot.x += t.deltaTime; });01 platform
What Pixi.js is for, and why it is fast
Pixi.js is a 2D renderer, not a game engine — its whole job is to put a lot of sprites on the screen quickly using the GPU. The editor is a good place to feel that speed and learn the small API that drives it.
-
A renderer, not an engine
Pixi draws; it does not impose a game loop, physics or scenes. That focus is why it is small to learn and why it slots under game engines and interactive graphics alike.
-
The GPU does the work
Sprites, text and shapes are drawn through WebGL, so thousands of moving objects stay smooth in a way a 2D canvas redrawn by hand would not.
-
Real Pixi, real WebGL
pixi.jsresolves from npm through esm.sh and renders to a real WebGL context, so performance and behavior match a deployed page. -
A project, not a snippet
Split a scene across modules, keep textures in the tree, add TypeScript, and commit with Git — the shape of an actual Pixi project.
02 deep dive
A stage, sprites and a ticker
Pixi's model is a small one, and once the stage, the display objects and the ticker click, the rest is detail.
The stage is the scene graph. You addChild sprites, graphics, text and containers to the stage, nest them, and Pixi renders the tree. Moving a container moves its children — the structure most 2D scenes want.
Display objects are what you draw. A Sprite from a texture, a Graphics you draw shapes into, a Text — each is a display object with position, scale, rotation and alpha you set directly.
The ticker is the loop. app.ticker.add(fn) runs your function each frame with a delta, so animation and particle updates happen on Pixi's render loop rather than a timer you manage.
- scene
- app.stage
- add
- addChild(sprite)
- draw
- Sprite / Graphics / Text
- loop
- app.ticker.add
import { Assets, Sprite } from 'pixi.js';
const texture = await Assets.load('bunny.png');
const bunny = new Sprite(texture);
bunny.anchor.set(0.5);
app.stage.addChild(bunny);03 features
What ships with a Pixi.js project
Everything below is on the moment you open the Pixi.js editor, which starts with a burst of GPU particles you can click to spray more.
-
npm without a wait
pixi.jsand plugins like the particle emitter resolve through esm.sh into a native import map, ready on the next run with no node_modules. -
A live WebGL canvas
The scene renders in the preview and animates on the ticker, so a change to a sprite or a particle count shows up immediately.
-
Textures in the tree
Keep images and spritesheets in the project and load them with
Assets.load, the same way a local Pixi app would. -
TypeScript included
Pixi ships types; write
.tsfor autocomplete on the display objects, stripped on the fast path. -
Device frames
Render the canvas in phone and tablet frames to check performance and scaling on smaller screens.
-
Git and export
Commit through isomorphic-git and export the project as a zip that runs anywhere.
04 deep dive
Where the speed comes from, and its limits
Pixi is chosen for performance, which is worth understanding — including the point where the browser tab is the boundary.
Batching keeps it fast. Pixi batches draw calls so many sprites sharing a texture render together, which is how a particle burst of thousands stays smooth on the GPU.
Sprite sheets matter. Packing textures into a sheet means fewer uploads and better batching; the editor lets you load one and see the difference in a busy scene.
The GPU is your device's. Rendering runs on the machine you are on, so a huge scene is bounded by that GPU and by WebGL — the same ceiling a deployed page has, no higher and no lower here.
- batching
- shared textures
- sheets
- fewer uploads
- gpu
- your device
- ceiling
- WebGL limits
for (let i = 0; i < 2000; i++) {
const p = new Sprite(texture);
p.position.set(Math.random() * 400, Math.random() * 300);
app.stage.addChild(p); // batched by shared texture
}05 workflow
From a blank stage to thousands of sprites
No install, no bundler, no dev server — the whole loop from an empty stage to a GPU scene full of moving sprites.
- new project → Pixi Particles
- created app.js · pixi.js via esm.sh
- add ticker: drift particles down
- canvas: 2000 sprites, smooth on the GPU
- click to spray more from the pointer
- pointer events wired · burst on click
- git commit -m "pointer particle bursts"
- [main 5c8e2b1] pointer particle bursts · 2 files
-
See the frame rate
The scene runs in the preview, so whether two thousand sprites stay smooth is something you watch, not estimate.
-
The same loop on a tablet
WebGL runs on the device GPU, so a tablet renders the scene the same way a laptop does.
-
Share by link
Send a live preview URL and the recipient sees the particles running and can interact with them.
06 ecosystem
Pixi.js among the graphics runtimes
Pixi is one of several things the editor renders on a canvas — the same tab runs 2D WebGL, a 3D scene or a game, per file.
07 languages
What the editor runs beside Pixi.js
A Pixi.js scene sits beside everything else the editor compiles in the browser, renders natively, or runs on demand.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
08 questions
Pixi.js in the browser — common questions
Do I need to install anything to use Pixi.js?
No. The pixi.js package resolves from npm through esm.sh into a native import map, so importing Application, Sprite and the rest works with no webpack, no dev server and no node_modules. Opening the editor is the whole setup.
Does it use real WebGL?
Yes. Pixi renders to a real WebGL context on your device's GPU, so batching, sprite performance and behavior match a deployed page rather than a slowed-down preview.
How do I load textures and sprite sheets?
Keep the images in the project tree and load them with Assets.load, then make a Sprite from the texture. Packing textures into a sheet improves batching, which the editor lets you see in a busy scene.
Is Pixi.js a game engine?
No — it is a 2D renderer. It draws sprites, text and graphics fast, but leaves the game loop, physics and scenes to you or to an engine on top. For a full game framework, Phaser uses a renderer like this underneath.
Can I write Pixi in TypeScript?
Yes. Pixi ships type definitions, so .ts gives autocomplete on display objects and the application API, with the types stripped on the fast pass that compiles the code.
Can I split a Pixi scene across files?
Yes. Projects are multi-file, so the application setup, sprites and update logic can live in separate modules with a file tree and tabs, and the whole thing commits with Git.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the Pixi.js editor now
A GPU particle scene on screen in under a minute — live WebGL, npm, with no account wall and nothing to install.