Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/sanchedev/fraxel/llms.txt

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

Fraxel is a modern 2D game engine for the web that uses JSX syntax and a custom runtime to target the HTML5 Canvas API directly. Write reactive game entities with useSignal, compose scenes with familiar component patterns, and ship fast — without React, without a Virtual DOM, and without the overhead.

Quickstart

Install Fraxel and build your first game in minutes

Core Concepts

Understand the node tree, reactivity model, and JSX runtime

Nodes Reference

Every JSX element — transform, sprite, collider, camera and more

Hooks API

useSignal, useEvent, useMount, useSpawn and the full hooks system

​
Why Fraxel?

Fraxel removes the mismatch between frontend development patterns and game development. If you know React hooks, you already understand 80% of the API.

No React

Custom JSX runtime compiled straight to canvas draw calls — zero React overhead

Fine-Grained Reactivity

Signals update only the canvas properties that changed, at 60 FPS

TypeScript-First

Strict type safety throughout, including typed node events and hook signatures

​
Explore the Engine

Physics & Collision

Gravity, rigid bodies, forces, and a spatial-hash broadphase collision system

Animation

Sprite sheets, AnimationPlayer, tweening, and 12 easing functions

Audio

Load and play sounds with AudioContext and the audio-player node

Camera

Viewport control with zoom, pan, and automatic target following

Asset Pipeline

Batch-load textures and sounds with progress tracking

API Reference

Complete reference for every hook, node, and module export
1

Install the package

npm install fraxel
2

Configure your tsconfig.json

Point the JSX import source at Fraxel so TypeScript knows about the custom runtime.
tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "fraxel"
  }
}
3

Write your first scene

main.tsx
import { createGame, Game, Scene } from 'fraxel/jsx'
import { loadTexture } from 'fraxel/assets'

const BG = await loadTexture('/assets/background.png')

const scene = () => (
  <transform>
    <sprite textureId={BG} />
  </transform>
)

const game = createGame(
  <Game width={640} height={360} defaultScene="main">
    <Scene name="main" component={scene} />
  </Game>,
  document.querySelector('#root')!,
)

game.play()
4

Add reactivity

Use useSignal to make your entities reactive — no manual canvas redraws needed. See the Hooks guide for the full API.

Build docs developers (and LLMs) love

Get started for freeTalk to us