Game development in the browser has always been possible, but the ecosystem has been fragmented — raw Canvas APIs are verbose, existing frameworks are either too opinionated or too heavy for small projects. Craters was born out of wanting something different: a lightweight, modular framework that gets out of your way.
Craters is a reimplementation of a modular JavaScript game framework, rebuilt from the ground up in TypeScript. The goal is simple: give HTML5 game developers a clean, composable foundation they can build on without fighting the framework.
“Make it easy to start, easy to extend, and hard to paint yourself into a corner.”
At its core, Craters is built around three concepts:
| Concept | Role |
|---|---|
| Entity | A unique ID — the “thing” in your game world |
| Component | Reusable data/behaviour attached to an entity |
| Scene | The container managing which entities are live |
This is the classic Entity-Component-System (ECS) pattern, and it works extremely well for games because it keeps logic separated and easy to reason about.
Install Craters from npm:
npm install craters
Then bootstrap your first scene:
import { Scene, Entity, PositionComponent } from 'craters';
const scene = new Scene();
const player = scene.createEntity();
scene.addComponent(player, new PositionComponent({ x: 0, y: 0 }));
scene.start();
That’s a live game loop. No boilerplate config, no mandatory build pipeline — just a scene and entities.
The original framework was written in plain JavaScript. While that works, you lose:
The strict typing also made refactoring much safer. Game frameworks tend to accumulate hidden dependencies and implicit contracts over time; TypeScript surfaces those early.
Here’s what Craters ships with out of the box:
In the next post I’ll walk through the ECS pattern in depth — how entities, components, and systems fit together, and why this design handles the weird edge cases that deep inheritance trees choke on.
Source: github.com/john-swana/craters