Kiwi Engine

TypeScript 2D Web Game Engine

Kiwi Engine features a center-origin coordinate system, responsive canvas, layered rendering, and both Canvas and DOM-based nodes — designed for the modern web.

Get Started Browse Examples

Center-Origin Coordinates

The canvas center is always (0, 0). Perfect for fluid, responsive layouts on the web.

Responsive Canvas

Automatically matches the parent element’s size and updates on resize.

Layers & Camera

Named layers control draw order. Camera pan/zoom and screen-to-world conversion.

Time-based Updates

rAF-driven Ticker with dt in seconds. Debug mode caps unfocused tabs at 6 FPS.

Quick Example

import { Renderer, GameObject } from 'kiwiengine'

const renderer = new Renderer(document.body, {
  layers: [
    { name: 'background', drawOrder: 0 },
    { name: 'game',       drawOrder: 1 },
    { name: 'ui',         drawOrder: 2 },
  ]
})

const player = new GameObject({ x: 0, y: 0, layer: 'game' })
renderer.add(player)

See Docs and Examples in the top navigation for more.