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 lightning-fast JSX runtime for building 2D games that run entirely in the browser. It solves a specific problem: frontend developers already know JSX, hooks, and component composition — but React was never designed for 60 FPS canvas rendering. Fraxel gives you the familiar declarative syntax and reactivity model you know, wired directly to the HTML5 Canvas API with a custom runtime that has zero React dependency, no Virtual DOM, and no DOM overhead. The result is a game engine that feels like writing a React app but performs like a native canvas renderer.

​
Key Features

JSX Without React

Build scene graphs natively with <transform>, <sprite>, <collider>, and more. The custom jsxImportSource wires JSX elements directly to engine node constructors — no React, no ReactDOM, no bundle bloat.

Fine-Grained Reactivity

useSignal provides isolated state management that updates the canvas at 60 FPS without Virtual DOM diffing. Only the specific canvas property that depends on a changed signal is re-evaluated.

Auto-Computed Props

Pass a signal getter or any inline arrow function directly to a JSX attribute. Fraxel automatically tracks dependencies and re-evaluates the prop whenever its signals change.

Collision System

Built-in rectangle and circle collision shapes with a spatial hash broadphase for performance. Full Raycast support for line-of-sight, projectiles, and proximity queries.

Physics Simulation

Gravity, rigid bodies, forces, impulses, and collision response — all built in. Attach a <rigid-body> to any collider to opt into physics simulation.

Camera System

Viewport control with zoom, smooth scrolling, and target-following. Attach the <camera> node to any scene and it takes over the coordinate system automatically.

Audio Playback

Load sounds with loadSound and play them through the <audio-player> node. Fully reactive — trigger playback from any signal change or event handler.

Tweening & Easing

Interpolate any property with 12 easing functions. Compose tweens in sequence or in parallel using the tween API from fraxel/animation.

Asset Pipeline

Batch-load textures, sounds, and other assets with progress tracking via loadBatch. Assets are identified by symbol IDs for zero-collision namespacing.

Sprite Filters

Hardware-accelerated filters applied directly to sprite nodes: brightness, grayscale, modulate, contrast, and opacity — all reactive via signal-driven props.

Text Rendering

Render styled text on the canvas with the <text> node. Configure font, size, color, and alignment declaratively via JSX props.

TypeScript-First

Built from the ground up for strict type safety with verbatimModuleSyntax. Every node, hook, event, and prop is fully typed — including reactive prop variants.

​
The Developer Experience

Fraxel removes the boilerplate that usually comes with canvas game development. Here is a complete reactive, interactable game entity written in under 15 lines: 
import { useSignal } from 'fraxel/hooks'
import { PLAYER_TEX } from './assets'

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

  return (
    <sprite
      textureId={PLAYER_TEX}
      grayscale={() => (health() <= 0 ? 1 : 0)} // Auto-computed prop!
      brightness={() => 0.5 + health() / 200}
    >
      <clickable size={[32, 32]} onClick={() => setHealth(health() - 10)} />
    </sprite>
  )
}
  • useSignal(100) creates a reactive signal. health is a getter function — call health() to read the value.
  • The grayscale and brightness props receive inline arrow functions. Fraxel auto-tracks the health signal as a dependency and re-evaluates only those two canvas properties when health changes.
  • <clickable> adds pointer event detection at the specified size. No DOM event listeners, no canvas hit-testing boilerplate.
  • There is no update loop to write. No setState, no reconciler. Just reactive state flowing directly to canvas draw calls.
Signal getters are plain functions. Call health() to read the value inside computed props, event handlers, and useEffect. This means TypeScript can fully type the return value without any special syntax.

​
Monorepo Structure

Fraxel is developed as a pnpm monorepo with two packages:
PackageDescriptionBuild Command
packages/fraxelThe core engine librarypnpm engine:build
packages/demoInteractive Plants vs Zombies-style demopnpm demo:build
The demo package is a fully featured example game that exercises every system in the engine — collision, physics, camera, audio, animation, tweening, and the asset pipeline. It is the best place to see how all the pieces fit together in a real project.

​
Development Commands

pnpm dev              # Run engine + demo in watch mode
pnpm engine:build     # Compile the engine (tsc)
pnpm demo:dev         # Serve the demo (esbuild)
pnpm lint             # Run ESLint checks
pnpm format           # Format code with Prettier

​
Package Info

Fraxel is currently in alpha (0.1.0-alpha.1). The API is stabilizing but breaking changes may occur between alpha releases. Pin your version if you need stability.
  • npm package: fraxel
  • Current version: 0.1.0-alpha.1
  • License: MIT
  • TypeScript: Built with TypeScript 5.9, requires strict: true and verbatimModuleSyntax: true

​
Next Steps

Quickstart

Install Fraxel, configure the JSX runtime, and build your first reactive game scene in minutes.

Core Concepts

Learn how the node tree, signals, and the custom JSX runtime work together to power games at 60 FPS.

Build docs developers (and LLMs) love

Get started for freeTalk to us