Creating a Pixi Application

PixiCanvas

The PixiCanvas component is the primary way to set up a PixiJS application in pixi-solid. It handles creating and managing the HTML canvas element, the Pixi Application instance, and provides context to child components.

Simple Standalone Usage

The simplest way to get started is to use PixiCanvas directly:

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

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

With HTML Components

For use cases where you need HTML components outside the canvas to access pixi-solid hooks, wrap with PixiApplicationProvider:

import { PixiApplicationProvider, PixiCanvas, usePixiScreen, Text } from "pixi-solid";

export const DemoApp = () => {
  return (
    <PixiApplicationProvider background="#1099bb">
      <HtmlComponent />
      <PixiCanvas style={{ width: "100%", height: "500px" }}>
        <Text text="Hello from Pixi!" style={{ fill: "white", fontSize: 24 }} />
      </PixiCanvas>
    </PixiApplicationProvider>
  );
};

const HtmlComponent = () => {
  const screen = usePixiScreen();
  return (
    <div style={{ padding: "20px" }}>
      Canvas: {screen.width}x{screen.height}
    </div>
  );
};

Tip

When using PixiApplicationProvider, HTML components placed between the provider and canvas can access pixi-solid hooks and the Pixi application context.

For complete API documentation and more examples, see the PixiCanvas component reference.

Caution

The pixi-solid library only supports client side rendering. So you may need to use the lazy function to dynamically import only on the client or use the clientOnly function if using Solid Start.