Creating a Pixi Application

Instantiating the Pixi Application

To start rending in PixiJS, you’ll need to create a PixiApplication component that will instantiate the PIXI.Application instance and provide it to all child components via context.

import { PixiApplication, PixiCanvas, PixiStage } from "pixi-solid";

/**
 * The DemoApp component sets up the Pixi Application
 * and can be mounted anywhere in your SolidJS app.
 * It will render a Canvas element with a Pixi Stage inside it.
 */
export const DemoApp = () => {
  return (
    <PixiApplication>
      <PixiCanvas>
        <PixiStage>{/* Your Pixi Solid components go here */}</PixiStage>
      </PixiCanvas>
    </PixiApplication>
  );
};

Note

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.