{"enrichment":{"faq":[{"a":"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.","q":"How do I add HTML elements to a PixiJS canvas using DOMContainer?"},{"a":"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.","q":"What is pixijs dom container overlay html and how does it work?"},{"a":"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.","q":"How do I position and transform DOM elements in PixiJS scenes?"},{"a":"Yes\u2014pixijs-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.","q":"Can I overlay input fields and video on a PixiJS canvas?"},{"a":"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.","q":"How do I troubleshoot missing pixi.js/dom imports in custom builds?"},{"a":"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.","q":"What pointer event handling does pixijs-scene-dom-container provide?"}],"shadow_tags":["html-overlay","css-transforms","scene-graph-sync","dom-integration","ui-positioning","canvas-layering","pointer-event-handling","experimental-api","dom-cleanup","viewport-alignment"],"summary_rewrite":"This skill teaches agents how to layer standard HTML elements\u2014such as form inputs, embedded iframes, and video players\u2014directly 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."},"files":[{"bytes":8752,"path":"skills/pixijs-scene-dom-container/SKILL.md","sha256":"6c65323e40999ca97ad752758148193e55185706a44b8656e278a237d88c2a22","url":"https://skillfed.io/files/pixijs/pixijs-skills/pixijs-scene-dom-container/ae71dd40/SKILL.md"}],"id":"pixijs/pixijs-skills/pixijs-scene-dom-container","links":{"html":"https://skillfed.io/pixijs/pixijs-skills/pixijs-scene-dom-container","md":"https://skillfed.io/pixijs/pixijs-skills/pixijs-scene-dom-container.md","repo":"https://github.com/pixijs/pixijs-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":16,"language":null,"last_updated":"2026-06-04","license":"MIT","name":"pixijs-scene-dom-container","publisher":"pixijs","stars":293},"relations":{"similar":[{"id":"pixijs/pixijs-skills/pixijs-environments"},{"id":"pixijs/pixijs-skills/pixijs"},{"id":"pixijs/pixijs-skills/pixijs-html-source"},{"id":"pixijs/pixijs-skills/pixijs-application"},{"id":"pixijs/pixijs-skills/pixijs-scene-core-concepts"},{"id":"pixijs/pixijs-skills/pixijs-scene-gif"},{"id":"pixijs/pixijs-skills/pixijs-core-concepts"},{"id":"pixijs/pixijs-skills/pixijs-scene-text"},{"id":"pixijs/pixijs-skills/pixijs-create"},{"id":"freshtechbro/claudedesignskills/pixijs-2d"}]},"slug":{"owner":"pixijs","repo":"pixijs-skills","skill":"pixijs-scene-dom-container"},"version":"ae71dd40"}