pixijs-scene-dom-container
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.
pixijs-scene-dom-container teaches you to overlay native HTML elements like inputs, iframes, and videos directly on a PixiJS canvas. Set up DOMPipe and configure DOMContainer with anchor and element options to position DOM elements using scene graph coordinates. This lets you blend traditional web controls seamlessly with canvas-based 2D graphics.
AI-generated summary based on this skill's SKILL.md
Install
pixijs/pixijs-skills/pixijs-scene-dom-container
git clone https://github.com/pixijs/pixijs-skills
cp -r pixijs-skills/skills/pixijs-scene-dom-container ~/.claude/skills/pixijs-scene-dom-containerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I add HTML elements to a PixiJS canvas using DOMContainer?
pixijs-scene-dom-container teaches you to overlay native HTML elements like inputs, iframes, and videos directly on a PixiJS canvas. Set up DOMPipe and configure DOMContainer with anchor and element options to position DOM elements using scene graph coordinates. This lets you blend traditional web controls seamlessly with canvas-based 2D graphics.
What is pixijs dom container overlay html and how does it work?
pixijs-scene-dom-container covers overlaying native HTML elements on PixiJS canvases. The DOMContainer system synchronizes DOM element positioning with your scene graph, allowing inputs, iframes, and videos to transform alongside canvas objects. Configure anchors and element options to control visibility, cleanup, and pointer event handling for smooth hybrid interfaces.
How do I position and transform DOM elements in PixiJS scenes?
pixijs-scene-dom-container enables positioning DOM elements using scene graph coordinates. Register DOMPipe, set up DOMContainer with appropriate anchor points, and configure element options to synchronize transforms. This approach ensures HTML overlays move and scale with your PixiJS graphics while maintaining proper event handling and visibility.
Can I overlay input fields and video on a PixiJS canvas?
Yes—pixijs-scene-dom-container supports overlaying native input fields, video elements, and iframes directly on PixiJS canvases. Configure DOMContainer with the appropriate anchor and element settings, then manage visibility and pointer events to ensure interactive components work smoothly alongside your 2D graphics rendering.
How do I troubleshoot missing pixi.js/dom imports in custom builds?
pixijs-scene-dom-container addresses custom build issues where pixi.js/dom imports fail. Ensure DOMPipe is properly registered and that your build includes the necessary DOM modules. The skill covers import configuration and setup steps to resolve missing dependencies in v8 and later versions.
What pointer event handling does pixijs-scene-dom-container provide?
pixijs-scene-dom-container manages pointer events for DOM overlays on PixiJS canvases, ensuring clicks and interactions reach the correct HTML elements. It covers visibility synchronization, cleanup procedures, and event routing so that form inputs, videos, and other interactive components respond properly while layered over canvas graphics.
SKILL.md
rendered from the published skill — quoted content, verbatim
DOMContainer positions an HTML element over the PixiJS canvas and drives its CSS transform from the scene graph. Use it for native inputs, iframes, videos, or rich HTML that needs to follow a display object's position. The default pixi.js browser bundle registers the DOMPipe automatically; custom builds add a side-effect import 'pixi.js/dom'.
> DOMContainer is marked EXPERIMENTAL in PixiJS v8. The API may change between minor releases.
Assumes familiarity with pixijs-scene-core-concepts. DOMContainer extends ViewContainer, so it's a leaf: do not nest PixiJS children inside it. Nest DOM content inside the HTML element itself, or wrap multiple DOMContainer instances in a Container. Not
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/pixijs-scene-dom-container/SKILL.md