more creativity, less setup.
An open-source toolkit for 2D browser games. It handles the boring bits so you can get to the fun part sooner.
Skip to content
Empowering best-in-class 2D web games
Your idea deserves the first hour
Every game starts as a spark: a world to poke at, a jump that feels just right, a joke only you would make. Then the plumbing shows up. Game loop, crisp pixels, controls, sound, levels, assets, and figuring out why it broke. The spark can fizzle before it ever gets to play.
debuff does the plumbing. You get to tinker, wobble things, break them on purpose and keep the bits that make you grin.
From doodle to done
- StartA running game in under a minute, with a starter or a platformer.
- BuildSprites, levels from Tiled and LDtk, and an asset pipeline that ships only what you use.
- TuneFeel values become live sliders in the dev panel, with undo.
- VerifyDeterministic scenarios drive your game in a real browser and compare screenshots.
- ShipA size report that fails if dev code leaks. Web anywhere, or desktop with Tauri.
Five tiny snippets, one bouncy game
No spelunking through game.world.systems.physics.step(). A game is a scene with update and render, and the fun stuff is one call away.
ts
const game = new Game({ canvas, width: 320, height: 180 });
const input = new Input(game, {
bindings: { pop: ["Space", "PadA", "Pointer"] },
});
game.add(play).go("play");
game.start();ts
// Too floaty? Drag the slider in the dev panel until it feels right.
const tuning = game.params.define("player", {
speed: { type: "number", default: 140, min: 0, max: 600, units: "px/s" },
});
player.vx = approach(player.vx, dir * tuning.values.speed, accel * dt);ts
if (input.pressed("pop")) {
// squish, sparkle, rumble, boop
squash(tweens, player, 0.35);
particles.emit({ x: player.x, y: player.y, count: 16, gravity: 200 });
game.camera.shake(0.3);
audio.synth({ freq: 660, freqEnd: 220, decay: 0.15 });
}ts
import { expect, play, test } from "keiko";
test("never leaves the screen", async () => {
const game = await play<State>();
game.press("ArrowLeft");
game.during("3s", (s) => s.player.x >= 8, "buff stays on screen");
});json
{
"steps": [
{ "press": "ArrowRight" },
{ "wait": 30 },
{ "release": "ArrowRight" },
{ "expect": { "state.player.x": { "gt": 200 } } },
{ "capture": "moved" }
]
}The boring bits, handled
Room to growBatched WebGL2 with a Canvas 2D fallback. About 200,000 sprites at 60 fps on our benchmark machine; the starter ships at about 13 kB brotli.Errors that explain themselvesA crash stops the game cleanly and says whose bug it is (your code, a rejected call, or debuff), with the exact source line and a hint.Dev panel that answers "why?"Pause, step, slow motion, live game state, and dropped frames attributed to your code or to something outside it.Tests you can trustSame inputs, same game: scenarios replay exactly, so a bug comes with a reproduction instead of "works on my machine".Web standards onlyES modules, a canvas, Web Audio and Gamepad. No proprietary editor or project format. It even runs from a CDN with no build step.
Play first, read later
The examples include a tilemap platformer, mossfell, a top-down adventure, squish, a match-3, and Overbuffed, a swarm survival game. They're all playable right in the browser, each with its source and the docs behind it.
Bring a coding agent along, if you like
Agents are welcome and never required. With the debuff MCP server, an agent like Claude Code can play the game you have open, read its state and explained errors, tune params and verify its changes with scenarios. Every action it takes shows in your dev panel, where you can undo it.
New projects ship an AGENTS.md with the commands and rules, so agents start with the right context. Creative calls stay with you: the tools are built for agents to propose and people to decide.
Made by people who make things
Built on the shoulders of Vite, Vitest, happy-dom, TypeScript, Tiled, LDtk and more open-source work. Thank you.