Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/sanchedev/tiny-engine/llms.txt

Use this file to discover all available pages before exploring further.

tiny-engine lets you build 2D browser games using JSX syntax with a custom runtime — no React, no DOM overhead, no bundle bloat. Write reactive game entities with the same hooks and component patterns frontend developers already know, backed by a high-performance canvas renderer running at 60 FPS.

Introduction

Learn what tiny-engine is and why it exists

Quickstart

Install the engine and ship your first game scene in minutes

Nodes Reference

Explore every built-in JSX node: transform, sprite, collider, and more

Hooks API

useSignal, useEffect, useEvent, useSpawn — full hooks reference

​
What you can build

tiny-engine comes with everything needed for a complete 2D game: a reactive scene graph, a collision system with spatial hash broadphase, sprite sheet animation, keyboard and pointer input, and a filter pipeline for visual effects.

Core Concepts

Scenes, nodes, reactivity, and the JSX runtime

Collision System

Rectangle and circle shapes, raycasting, and collision events

Animation

Sprite sheets, keyframes, and reactive animation switching

Input

Pointer tracking and keyboard events

Scripts

TinyScript for separating game logic from rendering

Filters

Brightness, grayscale, modulate, and more sprite filters

​
Get started in 3 steps

1

Install tiny-engine

pnpm add tiny-engine
2

Configure the JSX runtime

Add the custom JSX import source to your tsconfig.json:
tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "tiny-engine"
  }
}
3

Create your first scene

main.tsx
import { Game, Scene } from 'tiny-engine'
import { useSignal } from 'tiny-engine/hooks'
import { renderGame } from 'tiny-engine/jsx'

function Player() {
  const [health, setHealth] = useSignal(100)

  return (
    <sprite
      textureId={PLAYER_TEX}
      brightness={() => 0.5 + health() / 200}>
      <clickable size={[32, 32]} onClick={() => setHealth(health() - 10)} />
    </sprite>
  )
}

const root = document.querySelector<HTMLElement>('#root')!

Game.setup({ width: 320, height: 180, root })
await Game.sceneManager.addScene('main', new Scene(() => renderGame(<Player />)), true)
Game.play()
tiny-engine is TypeScript-first and built with verbatimModuleSyntax. All public APIs ship with full type definitions.

Build docs developers (and LLMs) love

Get started for freeTalk to us