Solidion

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.

MyGame.tsx

import { Game, Scene } from "solidion";
import { createSignal, createRoot } 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>
  );
}

createRoot(() => {
  document.getElementById("game")?.appendChild(MyGame());
});

Examples

Game demos built with Solidion

🧱

Breakout

Classic block-breaking arcade game

🐠

Aquarium

Interactive aquarium with animated fish

🐤

Floppy Heads

Flappy Bird-style game with a twist

🏰

Nadion Defense

Tower defense game

👻

Null Pow

Pac-Man inspired maze game