cssQuake: Quake runs in the browser as HTML and CSS, with no canvas

cssQuake, a project by Layoutit Studio, runs id Software's 1996 shooter Quake in the browser — but not the way such ports usually do. There is no WebGL context and no canvas element. The game's BSP world geometry is expressed as real HTML elements positioned with CSS matrix3d transforms, using the PolyCSS 3D engine. The project was shared on Hacker News, where it collected 548 points.

Real DOM instead of a canvas

In cssQuake, world faces become DOM nodes: each surface is positioned with a CSS matrix3d transform, textured with pixelated CSS backgrounds and grouped into meshes rather than drawn onto a canvas. The result can be inspected in browser developer tools like any other page. The repository describes the project as a port of Quake that renders BSP worlds as genuine HTML/CSS 3D geometry and runs in TypeScript.

Preprocessing Quake's data

Because CSS does the rendering, the game ships prepared assets. A preprocessor converts original Quake data into browser-ready JSON, image assets and PolyCSS render bundles. Textures are decoded through the Quake palette into PNG files, animated texture sequences become CSS animation inputs, and episode maps get prebuilt render bundles so the browser can attach a prepared world DOM instead of rebuilding every surface at startup. The repository's prepare step reads shareware or locally supplied PAK files; the original Quake game data is not included.

Playing and debugging

The game supports standard keyboard and mouse controls — WASD to move, the mouse to look, click to fire, space to jump, shift to run, ctrl to crouch — plus a menu navigated with the arrow keys. A debug section exposes outlines, a statistics panel and an FPS counter, while toggles cover dynamic lighting, particles, enemies, crosshair, damage and movement, which makes the port as useful for demonstration as for play. There is also a multiplayer screen for creating rooms with a chosen map, fraglimit and player limit, and a recording mode.

Embedding and licensing

cssQuake can run inside an iframe; adding relayKeys=1 makes the game post filtered gameplay key events as cssquake:key messages to the parent page, which should validate event.origin before reading them. The source is licensed GPL-2.0-only and lives on GitHub, where the repository has drawn 182 stars and 292 commits. Because the renderer is the browser's own layout engine, the project is also a test of how far CSS transforms can be pushed: a 1996 first-person shooter running as styled DOM nodes.