CanvasTileEngine
A renderer-agnostic TypeScript engine for building zoomable 2D maps, game boards, editors, and grid-based UIs, with camera controls and coordinate math handled for you.
Agent skill included
$ npx skills add enesyukselx/canvas-tile-engineClaude Code, Cursor & friends learn the entire API from one skill — no guessed method names.
Get Started
Pick your stack — the terminal writes itself.
$ npm install @canvas-tile-engine/react @canvas-tile-engine/renderer-canvas
+ @canvas-tile-engine/react
+ @canvas-tile-engine/renderer-canvas
✓ 2 packages ready — start building
Features
Everything you need to build performant, interactive grid-based applications.
High performance
Render thousands of tiles at a smooth 60fps, even on large maps and dense grids.
Pan, zoom & camera
Built-in camera controls with pan, zoom, and gesture handling out of the box.
Layered rendering
Organize drawing into layers for maps, UI overlays, and editors.
Renderer-agnostic
Swap between Canvas2D, WebGL, Skia, or server rendering without changing your logic.
TypeScript first
Fully typed API with great autocomplete and inline documentation.
Viewport culling
Spatial indexing and static caching mean only visible tiles get rendered.
What you can build
A few of the surfaces Canvas Tile Engine is built for.
Example 01
Maps & game boards
Pan across huge worlds and zoom from overview to tile detail while viewport culling keeps frame rates flat. Strategy games, board games, interactive map editors — the camera math is done for you.
Example 02
Pixel & sprite editors
Snap every pointer event to the grid, paint into layers, and redraw only what changed. The coordinate conversions that make editors fiddly to build are handled by the engine.
Example 03
Dashboards & minimaps
Render thousands of live cells without breaking a sweat. Drive tile colors straight from your data, and add a minimap with a second synced camera in a few lines.
Example 04
Animated sprites & living worlds
Slice frames straight out of a spritesheet and let fps-gated animators flip them while your own loop mutates positions — wings flap at 8 fps, movement runs at 60. Click anywhere on the map and the nearest dragon flies there.
Example 05
Server-rendered snapshots
The same draw API runs headless in Node.js — no browser, no DOM. This PNG is generated live by this site's own API route with renderToBuffer: hit regenerate and watch the server redraw a fresh map in milliseconds. Perfect for OG images, thumbnails, and CDN pre-rendering.
Try it without installing
Edit TypeScript or React with real type hints, hit run, and watch the canvas react — right in your browser.
Open the playground