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
Decision gist · record as of 2026-06-04
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.
Use it when
- pixijs-scene-dom-container covers overlaying native HTML elements on PixiJS canvases.
- pixijs-scene-dom-container enables positioning DOM elements using scene graph coordinates.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
pixijs/pixijs-skills/pixijs-scene-dom-container
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 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)
File tree — 1 file
skills/pixijs-scene-dom-container/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 › “Overlay native HTML elements (input, iframe, video) on a PixiJS canvas”
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 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 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 enables PixiJS developers to capture and render HTML content directly as GPU textures, bridging the gap between DOM-based UI and high-performance 2D graphics. Whether you need live-updating HTML elements or frozen snapshots, the skill provides the integration layer to convert web content into WebGL or WebGPU-backed textures for seamless composition within PixiJS scenes.
Master PixiJS Application initialization and renderer configuration for fast 2D graphics across WebGL, WebGPU, and Canvas. This skill covers foundational setup, scene graph structure, sprite and graphics rendering, text display, filter effects, and performance tuning techniques. Ideal for developers building interactive web experiences with PixiJS v8.
This skill equips you with foundational knowledge of PixiJS v8's scene graph model, covering how containers organize display objects and transforms propagate through the hierarchy. Learn the distinction between container nodes and leaf objects, and discover how the rendering pipeline traverses your scene structure to produce optimized 2D output.
This skill teaches agents how to load and render animated GIF files as sprites within PixiJS v8 scenes. It covers the setup process, sprite creation from GIF sources, and integration with PixiJS's rendering pipeline for WebGL and Canvas environments. Perfect for developers building interactive 2D applications that need smooth GIF animation support.
More skills pixijs-core-concepts (MIT) · pixijs-create (MIT) · pixijs-2d (MIT) · pixijs-filters (MIT)