Solidion
Build Phaser 3 games with the power of SolidJS reactive primitives. Declarative JSX, fine-grained reactivity, zero virtual DOM overhead.
Declarative JSX
Write Phaser GameObjects directly in JSX. Manipulate Phaser objects without a virtual DOM.
Fine-Grained Reactivity
Manage game state with SolidJS Signals. Only update what's needed — zero unnecessary re-renders.
Progressive Disclosure
L0(JSX) → L1(hooks) → L2(resources) → L3(frame) → L4(raw Phaser). Gradually drop to lower-level APIs as needed.
Rich Hooks & Behaviors
Hooks like useTween, useSpring, useStateMachine and declarative behaviors like Spring and Oscillate.
Scene Management
Manage Phaser's scene stack as components. Includes dedicated Preload, Overlay, and more.
TypeScript First
Full type definitions with type-safe access to every Phaser GameObject property.
import { render } from "solidion";import { createSignal } from "solid-js";
function MyGame() { const [x, setX] = createSignal(400); const [y, setY] = createSignal(300);
return ( <Game width={800} height={600}> <Scene name="main"> <sprite texture="player" x={x()} y={y()} onPointerdown={() => { setX(Math.random() * 800); setY(Math.random() * 600); }} /> </Scene> </Game> );}Examples
Game demos built with Solidion