library/phaser
A Phaser Online Editor and Sandbox for HTML5 Games
Write a Phaser scene — preload, create and update — and play the HTML5 game in a live canvas as you edit it, with npm and nothing to install.
import Phaser from 'phaser';
new Phaser.Game({
width: 400, height: 300,
physics: { default: 'arcade' },
scene: {
preload() { this.load.image('ball', 'ball.png'); },
create() { this.ball = this.physics.add.image(200, 0, 'ball'); },
update() { /* runs every frame */ },
},
});01 platform
What you need to make a browser game, in one place
A game needs more than a canvas — a loop, a renderer, physics, input, sprites and sound. Phaser bundles all of it, and this editor and playground gives you the whole set running without a build tool in front of it.
-
The game loop, handled
Phaser runs the render-and-update loop for you, so you write what happens each frame in
update()rather than wiring uprequestAnimationFrameand timing by hand. -
Physics and input included
Arcade physics for collisions and gravity, and keyboard, mouse and pointer input, come with the framework — the parts a game needs first and would otherwise be a project of their own.
-
Real Phaser, real canvas
phaserresolves from npm through esm.sh and renders to a real canvas (WebGL where available), so what plays here is what would play on a deployed page. -
A project, not a snippet
Split scenes across files, keep assets in the tree, add TypeScript, and commit with Git — the shape of an actual Phaser game.
02 deep dive
preload, create and update — the game loop
Almost every Phaser game is organized around a scene with three phases, and understanding them is understanding Phaser.
preload loads assets. Images, spritesheets, audio and fonts are queued here and are ready by the time the scene starts, so create never races a half-loaded texture.
create builds the scene. Sprites, groups, physics bodies, input handlers and text are set up once — the initial state of the game world.
update runs every frame. Movement, collision checks, scoring and win conditions live here, called about sixty times a second, which is where a static scene becomes a playable game.
- preload
- queue assets
- create
- build the world
- update
- per-frame logic
- physics
- arcade, matter
update() {
if (this.cursors.left.isDown) this.basket.x -= 6;
if (this.cursors.right.isDown) this.basket.x += 6;
this.physics.overlap(this.basket, this.fruit, this.catch, null, this);
}03 features
What ships with a Phaser project
Everything below is on the moment you open the Phaser editor, which starts as a playable catch-the-fruit arcade game you can retune.
-
npm without a wait
phaserand plugins resolve through esm.sh into a native import map, ready on the next run with no node_modules. -
A live, playable canvas
The game runs in the preview and responds to input, so you play the change you just made rather than imagining it.
-
Assets in the tree
Keep sprites, spritesheets and audio in the project and load them in
preload, the same way a local Phaser game would. -
TypeScript included
Phaser ships types; write
.tsfor autocomplete on the huge API surface, stripped on the fast path. -
Device frames
Play the game in phone and tablet frames to check touch input and scaling — useful when the target is mobile web.
-
Git and export
Commit through isomorphic-git and export the game as a zip that runs anywhere.
04 deep dive
Physics, input and sprites that already work
The reason Phaser is reached for is that the tedious parts of a game are already built, and the editor lets you use them immediately.
Arcade physics for most games. Velocity, gravity, colliders and overlaps come from the arcade engine, enough for platformers, shooters and catch-the-thing games without a physics library of your own.
Input is one line. this.input.keyboard.createCursorKeys() gives arrow keys; pointer and touch events are just as direct, so controls are wired in a line rather than a subsystem.
Sprites and animation. Load a spritesheet, define animations from frames, and play them on a sprite — the moving-picture part of a game, handled by the framework.
- physics
- arcade overlaps
- keyboard
- createCursorKeys
- pointer
- touch + mouse
- sprites
- spritesheet anims
create() {
this.cursors = this.input.keyboard.createCursorKeys();
this.basket = this.physics.add.image(200, 260, 'basket');
this.basket.setCollideWorldBounds(true);
}05 workflow
From an empty scene to a playable game
No install, no bundler, no dev server — the whole loop from a blank scene to a game you can play in the canvas.
- new project → Phaser Catcher
- created game.js · phaser via esm.sh
- add arcade overlap: basket × fruit
- canvas: catching now scores a point
- speed up fruit each 10 points
- playtested in the preview · harder now
- git commit -m "scoring + difficulty"
- [main d71c0a4] scoring + difficulty · 2 files
-
Play the change
The game runs in the preview, so a tweak to speed or scoring is something you play, not something you guess at.
-
The same loop on a tablet
Phaser renders client-side, so a tablet plays the game — and tests touch input — the same way a laptop does.
-
Share by link
Send a live preview URL and the recipient plays the game, then forks it to change something.
06 ecosystem
Phaser among the graphics runtimes
Phaser is one of several things the editor runs on a canvas — the same tab renders a 2D game, a WebGL scene or a data visualization, per file.
07 languages
What the editor runs beside Phaser
A Phaser game 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
Phaser in the browser — common questions
Do I need to install anything to use Phaser?
No. The phaser package resolves from npm through esm.sh into a native import map, so import Phaser from 'phaser' works with no webpack, no dev server and no node_modules. Opening the editor is the whole setup.
Can I actually play the game in the editor?
Yes. The game runs in the live preview and responds to keyboard, mouse and touch input, so you play each change as you make it rather than only reading the code.
Does Phaser physics work here?
Yes. Arcade physics — velocity, gravity, colliders and overlaps — runs client-side, which is enough for platformers, shooters and arcade games. The Matter physics plugin is available from npm when you need rigid bodies.
How do I load sprites and audio?
Keep the assets in the project tree and queue them in the scene's preload with this.load.image or this.load.spritesheet, exactly as a local Phaser game would, so they are ready by the time create runs.
Can I write a Phaser game in TypeScript?
Yes. Phaser ships type definitions, so .ts gives autocomplete on its large API and type-checking in the editor, with the types stripped on the fast pass that compiles the code.
Can I split a game across multiple scenes and files?
Yes. Projects are multi-file, so each scene, plus helpers and config, can live in its own module with a file tree and tabs, and the whole game 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 Phaser editor now
A playable 2D game on screen in under a minute — physics, input and a live canvas, with no account wall and nothing to install.