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
Decision gist · record as of 2026-06-04
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.
Use it when
- pixijs-environments provides DOMAdapter as the core abstraction for environment-specific behavior.
- pixijs-environments supports CSP-compliant setup by avoiding unsafe-eval during initialization.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
pixijs/pixijs-skills/pixijs-environments
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/pixijs-environments/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Run PixiJS in non-browser environments like Web Workers, Node.js, or SSR”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill equips agents with deep knowledge of PixiJS v8's rendering pipeline and core architectural patterns. Learn how the library's renderer abstractions enable efficient 2D graphics across WebGL, WebGPU, and Canvas, plus best practices for scene graph management and performance optimization.
This skill teaches agents how to layer standard HTML elements—such as form inputs, embedded iframes, and video players—directly atop a PixiJS canvas rendering surface. It covers DOM container setup, positioning synchronization, and event handling to ensure interactive web components work smoothly alongside 2D graphics. Perfect for building hybrid interfaces that blend canvas-based visuals with traditional web controls.
This skill equips developers to build inclusive PixiJS applications by implementing screen reader compatibility and keyboard-driven interaction patterns. Master the accessibility layer for PixiJS v8's 2D rendering engine, ensuring your interactive graphics reach users with assistive technologies.
This skill guides developers through upgrading PixiJS projects from version 7 to version 8, covering all breaking changes and API shifts. It provides a structured migration checklist and explains modern patterns for the fast WebGL-based 2D rendering engine. Perfect for teams maintaining graphics-heavy web applications.
PixiJS is a high-performance 2D rendering engine built for the web. This skill collection guides agents through core PixiJS v8 concepts—from application initialization and scene management to advanced rendering techniques, custom shaders, and optimization strategies. Whether building interactive graphics or migrating from earlier versions, these skills provide structured pathways to solve rendering challenges efficiently.
This skill guides you through initializing a new PixiJS v8 project using the create-pixi command-line tool. You'll discover how to scaffold your rendering application, configure the scene graph, and integrate core PixiJS components like sprites, graphics layers, and text rendering. Master the foundational setup patterns that enable smooth 2D WebGL, WebGPU, and Canvas rendering workflows.
More skills pixijs-application (MIT) · pixijs-custom-rendering (MIT) · pixijs-blend-modes (MIT) · pixijs-html-source (MIT)