pixijs-environments
This skill equips agents to deploy PixiJS v8 rendering outside traditional browser contexts—including Web Workers, Node.js servers, and server-side rendering pipelines. It covers environment detection, fallback strategies, and configuration patterns needed to initialize and manage the 2D graphics engine across diverse runtime targets.
pixijs-environments enables PixiJS to run in non-browser contexts like Web Workers, Node.js, and SSR by using environment-specific adapters. Before initializing your app, call `DOMAdapter.set()` with the appropriate adapter—BrowserAdapter for standard DOM, WebWorkerAdapter for OffscreenCanvas in workers, or a custom adapter for headless/testing. This decouples PixiJS from browser APIs and lets you render in any JavaScript runtime.
AI-generated summary based on this skill's SKILL.md
Install
pixijs/pixijs-skills/pixijs-environments
git clone https://github.com/pixijs/pixijs-skills
cp -r pixijs-skills/skills/pixijs-environments ~/.claude/skills/pixijs-environmentsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you run PixiJS outside the browser?
pixijs-environments enables PixiJS to run in non-browser contexts like Web Workers, Node.js, and SSR by using environment-specific adapters. Before initializing your app, call `DOMAdapter.set()` with the appropriate adapter—BrowserAdapter for standard DOM, WebWorkerAdapter for OffscreenCanvas in workers, or a custom adapter for headless/testing. This decouples PixiJS from browser APIs and lets you render in any JavaScript runtime.
What is DOMAdapter and how do you set it up?
pixijs-environments provides DOMAdapter as the core abstraction for environment-specific behavior. Before calling `app.init()`, use `DOMAdapter.set(adapter)` to register your chosen adapter—built-in options include BrowserAdapter, WebWorkerAdapter, and custom implementations. The adapter handles DOM queries, canvas creation, and event binding, allowing PixiJS to work seamlessly across browsers, workers, and headless environments.
How can PixiJS work with strict Content Security Policy without unsafe-eval?
pixijs-environments supports CSP-compliant setup by avoiding unsafe-eval during initialization. Configure your adapter before app creation and ensure your build includes pre-compiled shaders or CSP-safe shader compilation. The adapter pattern isolates environment-specific code, letting you enforce strict CSP headers without compromising PixiJS functionality in production deployments.
How to use PixiJS in web workers with OffscreenCanvas?
pixijs-environments includes WebWorkerAdapter for OffscreenCanvas rendering in Web Workers. In your worker thread, import the adapter, call `DOMAdapter.set(new WebWorkerAdapter())` before app initialization, then pass an OffscreenCanvas to your app. This enables offscreen rendering with canvas transfer back to the main thread, improving performance by moving graphics work off the UI thread.
What changed in PixiJS v8 adapter configuration?
pixijs-environments replaces the v7 `settings.ADAPTER` pattern with explicit `DOMAdapter.set()` calls. Instead of globally configuring adapters via settings, v8 requires you to set the adapter before app initialization. This provides clearer control flow and supports multiple adapter instances, making environment-specific configuration more explicit and testable.
How do you create a custom adapter for headless testing?
pixijs-environments defines a standard Adapter interface for custom implementations. Implement methods for canvas creation, DOM queries, and event handling tailored to your testing framework. Pass your custom adapter to `DOMAdapter.set()` before app init. This approach lets you mock rendering, stub events, and run PixiJS in CI/CD pipelines without a real browser or GPU.
SKILL.md
rendered from the published skill — quoted content, verbatim
DOMAdapter abstracts every piece of DOM access PixiJS does (canvas creation, Image loading, fetch, XML parsing) so the library can run in non-browser contexts. Call DOMAdapter.set(...) before app.init() to swap in a different adapter.
Quick Start
// worker.ts — OffscreenCanvas posted from main thread
DOMAdapter.set(WebWorkerAdapter);
self.onmessage = async (event) => {
const app = new Application();
await app.init({
canvas: event.data.canvas,
width: 800,
height: 600,
});
};
For CSP contexts that block unsafe-eval, import the polyfill before any renderer init:
import "pixi.js/unsafe-eval";
Related skills: pixijs-application (standard browser init), pixijs-migration-v8
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/pixijs-environments/SKILL.md