pixijs-environments

Configure PixiJS v8 adapters for non-browser environments with OffscreenCanvas.

1|Updated Apr 26, 2026
One-click install
npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-environments-matthewharwood
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pixijs-environments
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/pixijs-environments
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-environments-matthewharwood

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Running PixiJS v8 outside standard browser contexts (e.g., in workers, headless environments, SSR, or CSP-restricted runtimes) requires careful adapter selection and environment setup in order to preserve rendering capability and input handling.

Core Features & Use Cases

  • Adapter swapping for DOM, web workers, and SSR contexts to enable canvas rendering without a DOM.
  • CSP-safe renders with the pixi.js/unsafe-eval polyfill for environments that prohibit eval-like code generation.
  • Environment setup guidance covering OffscreenCanvas, Node, and headless scenarios to enable automated testing and server-side rendering.

Quick Start

Configure an adapter (DOMAdapter, WebWorkerAdapter, or BrowserAdapter) for your target environment and initialize the PixiJS Application accordingly.

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?

Run PixiJS v8 in a Web Worker by swapping the default environment adapter with WebWorkerAdapter and OffscreenCanvas. You must configure this adapter and initialize the application before calling app.init() to ensure safe rendering outside the main thread.

Why does PixiJS v8 fail to render in a CSP-restricted environment?

PixiJS v8 fails in a CSP-restricted environment because it relies on eval-like code generation. Apply the pixi.js/unsafe-eval polyfill to enable CSP-safe renders, allowing the canvas to operate without violating strict Content Security Policy rules.

Can I use PixiJS v8 for Node SSR and headless testing?

Yes, you can use PixiJS v8 for Node SSR and headless testing by swapping in environment-specific adapters. The DOMAdapter and BrowserAdapter enable canvas rendering without a DOM, supporting automated testing and server-side rendering workflows.

What is the correct initialization order for PixiJS v8 adapters?

The correct initialization order requires configuring the environment adapter, such as DOMAdapter or WebWorkerAdapter, before calling app.init(). This sequence ensures the application safely initializes across non-browser contexts and CSP-restricted runtimes.

Does PixiJS v8 support OffscreenCanvas?

Yes, PixiJS v8 supports OffscreenCanvas by leveraging WebWorkerAdapter for non-browser contexts. This adapter swaps the default DOM rendering setup, enabling canvas rendering inside Web Workers and other environments lacking a standard DOM.

What's the best way to handle PixiJS v8 environment setup outside the browser?

The best way to handle PixiJS v8 setup outside the browser is explicitly selecting the correct adapter, such as DOMAdapter for SSR. This environment setup ensures rendering capability and input handling are preserved in non-standard contexts.