pixijs-environments

Configure PixiJS v8 adapters for Web Workers, OffscreenCanvas, Node/SSR, and CSP-restricted runtimes.

16|8|Updated May 20, 2020
One-click install
npx skills add https://github.com/encounterplus/web-client --skill pixijs-environments-encounterplus
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pixijs-environments
Source: https://github.com/encounterplus/web-client/tree/main/.agents/skills/pixijs-environments
Command: npx skills add https://github.com/encounterplus/web-client --skill pixijs-environments-encounterplus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

PixiJS can fail to initialize or behave incorrectly when it runs outside a standard browser, such as in Web Workers, Node/SSR, OffscreenCanvas setups, or CSP-restricted pages that block eval-like code generation.

Core Features & Use Cases

  • Adapter-driven non-browser execution: Use DOMAdapter.set to route all PixiJS DOM and network-style operations through an environment-appropriate adapter.
  • Web Worker + OffscreenCanvas initialization: Initialize a PixiJS Application inside a worker using WebWorkerAdapter and an OffscreenCanvas passed from the main thread.
  • CSP-compatible rendering: Import pixi.js/unsafe-eval before any renderer initialization to avoid CSP unsafe-eval failures, and use environment subpath imports to avoid DOM-only modules.

Quick Start

Use the pixijs-environments skill to set DOMAdapter to WebWorkerAdapter before calling app.init in a Web Worker that receives an OffscreenCanvas from the main thread.

Frequently Asked Questions about pixijs-environments

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run PixiJS v8 in a Web Worker using OffscreenCanvas?

To run PixiJS v8 in a Web Worker, you must pass an OffscreenCanvas from the main thread and call DOMAdapter.set with WebWorkerAdapter before initializing your Application. This routes DOM and network operations through the worker environment safely.

Why does PixiJS v8 fail to initialize under a strict Content Security Policy?

PixiJS v8 fails under strict CSP because it relies on unsafe-eval for code generation. You can fix this by importing the pixi.js/unsafe-eval module before initializing the renderer, which provides a CSP-safe fallback for shader compilation.

Can I use PixiJS v8 for server-side rendering in Node?

Yes, PixiJS v8 can run in Node and SSR environments by using the adapter pattern. You must set DOMAdapter to an appropriate custom adapter before app.init to avoid dependencies on live DOM nodes and browser-only systems.

What is the DOMAdapter pattern in PixiJS v8 for non-browser environments?

The DOMAdapter pattern in PixiJS v8 routes DOM and network operations through environment-specific adapters like BrowserAdapter or WebWorkerAdapter. You must call DOMAdapter.set before app.init to wire the correct adapter for your target runtime.

How do I avoid loading DOM-only modules when using PixiJS v8 in workers?

To avoid loading DOM-only modules in non-standard environments, use environment subpath imports provided by PixiJS v8. This ensures that only modules safe for Web Workers or SSR are loaded, preventing runtime errors from missing document dependencies.

What are the limitations of running PixiJS v8 in a Web Worker?

When running PixiJS v8 in a Web Worker, you must avoid DOM-only systems that depend on real document focus or live DOM nodes. The environment relies entirely on the WebWorkerAdapter and an OffscreenCanvas passed from the main thread for rendering.