Pixi-Solid

A custom renderer for PixiJS that lets you build your scene with SolidJS JSX components and its fine-grained signal-based reactivity.

• 📦 Full component coverage — Every major PixiJS display object has a corresponding component.
• ⚡ Signals-driven reactivity — State changes automatically update your scene.
• 🧹 Automatic cleanup — Components clean up after themselves on unmount (display objects, event listeners, ticker subscriptions, textures).
• 🧪 Testable without a browser — Context, hooks, and ticker are built for simulation. pixi-solid/testing provides mountScene, scene graph queries, and manual ticker helpers.
• ✨ All PixiJS events supported — Every federated event from PixiJS works as a component prop.
• 🛠️ Utilities included — Animation helpers (spring, smooth damp), layout (object-fit), and async timing. Available via pixi-solid/utils.
• 🤩 Full TypeScript support — Strict type safety and auto completion throughout the API.

Install

npm i pixi-solid

Peer dependencies of

{
  "pixi.js": ">=8.14.3 <9",
  "solid-js": ">=1.9.10 <2"
}

Basic usage

import { PixiCanvas, Sprite } from "pixi-solid";
import { createSignal } from "solid-js";
import { Texture } from "pixi.js";

export const DemoApp = () => {
  const [scale, setScale] = createSignal(10);

  const handleSpriteTap = () => {
    setScale((currentScale) => currentScale + 1);
  };

  return (
    <PixiCanvas style={{ width: "100%", height: "100vh" }} background="#1099bb">
      <Sprite
        texture={Texture.WHITE}
        scale={scale()}
        onpointerdown={handleSpriteTap}
        tint="#ff0000"
      />
    </PixiCanvas>
  );
};

More information

• 📖 Documentation — Getting started, components, hooks, utilities, and live examples.
• 🎮 Live Demo — Interactive example on the docs homepage.
• 🐛 GitHub Issues — Report bugs or request features.

Why combine SolidJS with PixiJS?

Declarative scene graphs. Compose PixiJS objects with JSX instead of imperative addChild/removeChild calls. The tree is your scene.

Automatic lifecycle. Components clean up after themselves on unmount — display objects, event listeners, ticker subscriptions, textures. No manual disposal tracking.

Shared reactivity. Signals and stores drive both canvas content and HTML UI from the same state. No bridging layer or two-way sync required.

Unified timing. Animations, frame callbacks, and sprite updates all synchronise to the same ticker context. No timing drift between onTick, useSpring, or AnimatedSprite.

HTML + canvas side by side. Use HTML elements alongside or on top of your PixiJS canvas to create rich user interfaces that combine the strengths of both technologies.

Full PixiJS coverage. Every PixiJS property, event, and ref is accessible. Break out of the abstraction any time and interact directly with PixiJS objects.

Testable by design. Context providers, hooks, and the ticker are structured for simulation in tests. No browser or canvas required for unit tests.

AI-Assisted Development

This project provides skill-based documentation for AI code assistants, containing the library's API and patterns. When using an LLM to generate pixi-solid code, you can reference:

• SKILL.md — main entry point for the skill docs
• Skill API references — detailed docs on components, hooks, lifecycle, testing, and utils
• AGENTS.md — contribution and architecture guide
• 📖 Docs site — live examples and interactive documentation

Contributing

Contributions are welcome! Feel free to open an issue to report a bug, suggest a feature, or submit a pull request.

License

This project is licensed under the MIT License.