pixijs-scene-dom-container

To overlay HTML elements on a PixiJS scene graph, use a DOMContainer to map PixiJS display object transforms into CSS transforms, keeping interactive UI perfectly synced with the canvas as it moves, scales, and rotates.

Keeping a DOM overlay positioned correctly requires syncing HTML elements with PixiJS scene graph transforms via the DOMPipe, which automatically applies the sprite's movement, scaling, and rotation to the overlay's CSS transforms.

Yes, you can use native HTML inputs and iframes inside a PixiJS v8 scene by creating a DOMContainer, adding the HTMLElement to the PixiJS stage, and letting the DOMPipe handle the native input overlay rendering alongside the canvas.

You do not need to manually set pointer-events for DOM overlays in PixiJS, because the DOMContainer integration automatically handles pointer-events behavior to ensure DOM interactions work reliably alongside canvas rendering.

To anchor a UI overlay to a specific point on a PixiJS display object, set the configurable anchor property on the DOMContainer to position the DOM overlay relative to top-left, center, bottom-right, or custom coordinates.

HTML overlays render correctly in PixiJS v8 by ensuring the root environment includes `import "pixi.js/dom"` or equivalent pipe registration, which activates the DOMPipe to sync element visibility and positioning with the scene graph.