Skip to content

tsrs in the browser: a 2D game playground ​

The debuff playground is an editor with your game running beside it. tsrs, the Rust port of TypeScript 7, type-checks and compiles it in a web worker, about 150 ms per edit. Nothing to install, no server.

Re-check per edit, example games123 to 174 ms
Same check, TypeScript 5.9 (the JavaScript compiler)282 to 443 ms
First visit (brotli)2.2 MB, 1.9 MB of it the compiler
Examplessquish, platformer, mossfell, basic

Both in Node 24, a fresh full check each time, median of 7 warm runs, AMD Ryzen 7 260; tsrs 0.18 as WebAssembly. From measurements.json.

Open the playground, or remix platformer, mossfell or squish.

What you can do ​

  • Edit and run. Type errors are underlined, but never stop the game.
  • Start from an example, with every file and its map.
  • Share a link: the project is in the URL itself.
  • Download a project: npm install, npm run dev.
  • Tune params live in debuff's dev panel.

Docs examples have a "Run in playground" button too, like the one on Input, and the site build type-checks every one. Coding agents can make links with playground_link on the debuff.jp MCP server.

How it works ​

  1. A worker runs @tsrs/wasm over your files and debuff's types. One call returns errors and JavaScript.
  2. The game runs in a sandboxed iframe, so shared code can't touch the page. The debuff runtime goes in as data: modules.
  3. Remixed examples load their maps from their builds on the site.

Why tsrs ​

Browsers could always run the JavaScript TypeScript compiler; that's what the TypeScript playground uses. On these games tsrs does the same full check 2.3 to 2.7 times faster, checks with TypeScript 7's rules, and also emits JavaScript, so the playground needs one tool. It's a bigger download, though: 1.9 MB against about 1.4 MB for TypeScript 5.9 and its library types.

On your own machine, from debuff 0.11, debuff dev shows type errors in the dev overlay as you save (typecheck: true). That uses your project's tsc, since tsrs has no Windows build yet.

Caveats ​

  • Timings are from Node. The playground shows yours in its status line.
  • Editors like the TypeScript playground reuse work between edits, so in practice the gap to TypeScript 5.9 is smaller than a fresh check shows.
  • tsrs is experimental. Its errors can differ from tsc, in order for one.
  • Text files only. The examples draw their art in code.

Open the playground and make buff jump higher.