Pixi Devtools

Attach to the window

The PixiJS Devtools are very useful for debugging and inspecting your PixiJS applications. For the tools to find your application all you need to do it attach it to the window.

import { PixiCanvas, getPixiApp, Container } from "pixi-solid";
import { onCleanup } from "solid-js";

const DemoComponent = () => {
  // We have access to the Pixi Application instance using the `getPixiApp` function.
  const pixiApp = getPixiApp();
  // @ts-expect-error
  globalThis.__PIXI_DEVTOOLS__ = {
    app: pixiApp,
  };
  onCleanup(() => {
    // @ts-expect-error
    globalThis.__PIXI_DEVTOOLS__ = undefined;
  });

  return <Container>{/* Your pixi-solid content goes here */}</Container>;
};

/**
 * 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 (
    <PixiCanvas>
      <DemoComponent />
    </PixiCanvas>
  );
};