Pixijs Scene Dom Container
Overlay native HTML inputs, video, or rich UI on a PixiJS v8 canvas so elements follow scene-graph position and scale.
Overview
pixijs-scene-dom-container is an agent skill for the Build phase that overlays and scene-graph-syncs HTML on a PixiJS v8 canvas using DOMContainer and DOMPipe.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-scene-dom-containerWhat is this skill?
- Positions HTML via DOMContainer with element, anchor, and constructor options synced to the scene graph
- Registers DOMPipe via default browser bundle or side-effect import pixi.js/dom for custom builds
- Leaf ViewContainer: nest HTML inside the element or wrap multiple DOMContainers in a Container
- Syncs visibility and pointer-events with display object state on the main thread only
- Marked EXPERIMENTAL in PixiJS v8—API may change between minor releases
- DOMContainer marked EXPERIMENTAL in PixiJS v8
Adoption & trust: 1.3k installs on skills.sh; 206 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need native HTML, inputs, or media on a Pixi canvas but struggle to keep DOM elements aligned with display objects and custom Pixi bundles.
Who is it for?
Indie game or creative-app builders adding forms, video, or iframes that must follow Pixi objects in v8.
Skip if: Projects on Web Workers only, pure Pixi graphics with no DOM, or teams that refuse experimental v8 APIs.
When should I use this skill?
Overlaying HTML on the PixiJS v8 canvas: DOMContainer, pixi.js/dom, DOMPipe, HTML overlay, inputs on canvas, iframe overlay.
What do I get? / Deliverables
You get a correct DOMContainer pattern with dom import, anchor options, and leaf-container rules so HTML overlays track Pixi transforms reliably.
- DOMContainer setup with element and anchor
- Correct pixi.js/dom side-effect import for custom builds
- Pointer-events and visibility sync pattern
Recommended Skills
Journey fit
How it compares
Use for Pixi-specific DOM overlay wiring instead of ad-hoc absolute-position divs divorced from the scene graph.
Common Questions / FAQ
Who is pixijs-scene-dom-container for?
Solo and indie builders using Claude Code or Cursor to implement PixiJS v8 UIs that mix canvas rendering with HTML overlays.
When should I use pixijs-scene-dom-container?
During Build when you add DOMContainer, pixi.js/dom, DOMPipe, canvas HTML overlays, or pointer-aware inputs on a Pixi stage.
Is pixijs-scene-dom-container safe to install?
Review the Security Audits panel on this Prism page and inspect the skill source in your repo before granting agent file or shell access.
Workflow Chain
Requires first: skill pixijs pixijs skills pixijs scene core con
SKILL.md
READMESKILL.md - Pixijs Scene Dom Container
`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 available in Web Workers; a worker has no DOM to overlay. ## Quick Start ```ts import "pixi.js/dom"; const input = document.createElement("input"); input.type = "text"; input.placeholder = "Enter name..."; const dom = new DOMContainer({ element: input, anchor: 0.5, }); dom.position.set(app.screen.width / 2, app.screen.height / 2); app.stage.addChild(dom); ``` **Related skills:** `pixijs-scene-core-concepts` (scene graph basics), `pixijs-scene-container` (wrap multiple DOM overlays), `pixijs-events` (pointer handling on canvas vs DOM), `pixijs-accessibility` (screen-reader overlays). ## Constructor options All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`. Leaf-specific options added by `DOMContainerOptions`: | Option | Type | Default | Description | | --------- | --------------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `element` | `HTMLElement` | `document.createElement('div')` | The HTML element the container drives. Any element is valid: `input`, `textarea`, `iframe`, `video`, `div`, etc. If omitted, a bare `<div>` is created. | | `anchor` | `PointData \| number` | `0` | Origin of the element relative to its own dimensions. `0` is top-left, `0.5` centers, `1` is bottom-right. A single number sets both axes; `{ x, y }` sets each independently. | `tint`, `filters`, `mask`, and `blendMode` are accepted (inherited from `Container`) but have no visual effect — DOM elements live outside the WebGL/WebGPU pipeline. Style the element via CSS for those effects. ## Core Patterns ### Setup and the side-effect import ```ts import "pixi.js/dom"; import { DOMContainer } from "pixi.js"; ``` Or use the combined import that registers the pipe and re-exports the class: ```ts import { DOMContainer } from "pixi.js/dom"; ``` The default `pixi.js` browser bundle already imports `pixi.js/dom` for you via `browserAll.ts`, so `DOMContainer` works out of the box in a typical browser app. You only need the explicit `import 'pixi.js/dom'` line when you set `skipExtensionImports: true` (custom builds) or when running under a non-browser bundle. ### Transforms, anchor, and alpha ```ts const dom = new DOMContainer({ element: document.createElement("div"), anchor: 0.5, }); dom.position.set(4