pixijs-scene-dom-container

Name: pixijs-scene-dom-container
Author: pixijs

2.8kinstalls15forks

How to install pixijs-scene-dom-container?

pixijs/pixijs-skills/pixijs-scene-dom-container

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-dom-container

Installs into the current project.

Summary

Use this skill when overlaying HTML elements on the PixiJS v8 canvas. Covers DOMContainer with element, anchor, and scene-graph-driven CSS transforms, the pixi.js/dom side-effect import, DOMPipe registration, visibility sync, pointer-events handling. Triggers on: DOMContainer, pi

Files · 1

View on GitHub

SKILL.md

1	`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'`.
2
3	> `DOMContainer` is marked EXPERIMENTAL in PixiJS v8. The API may change between minor releases.
4
5	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.
6
7	## Quick Start
8
9	```ts
10	import "pixi.js/dom";
11
12	const input = document.createElement("input");
13	input.type = "text";
14	input.placeholder = "Enter name...";
15
16	const dom = new DOMContainer({
17	element: input,
18	anchor: 0.5,
19	});
20	dom.position.set(app.screen.width / 2, app.screen.height / 2);
21
22	app.stage.addChild(dom);
23	```
24
25	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).
26
27	## Constructor options
28
29	All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`.
30
31	Leaf-specific options added by `DOMContainerOptions`:
32
33	\| Option \| Type \| Default \| Description \|
34	\| --------- \| --------------------- \| ------------------------------- \| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ \|
35	\| `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. \|
36	\| `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. \|
37
38	`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.
39
40	## Core Patterns
41
42	### Setup and the side-effect import
43
44	```ts
45	import "pixi.js/dom";
46	import { DOMContainer } from "pixi.js";
47	```
48
49	Or use the combined import that registers the pipe and re-exports the class:
50
51	```ts
52	import { DOMContainer } from "pixi.js/dom";
53	```
54
55	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.
56
57	### Transforms, anchor, and alpha
58
59	```ts
60	const dom = new DOMContainer({
61	element: document.createElement("div"),
62	anchor: 0.5,
63	});
64	dom.position.set(400, 300);
65	dom.scale.set(1.5);
66	dom.rotation = Math.PI / 8;
67	dom.alpha = 0.5;
68	```
69
70	Transforms on the `DOMContainer` propagate to the element as CSS `transform`. `anchor` shifts the element's origin relative to its own dimensions: `0` is top-left, `0.5` centers, `1` is bottom-right. A single number sets both axes; an object `{ x, y }` sets each independently. `alpha` (including inherited parent alpha) is written to the element's `style.opacity` every frame.
71
72	If no `element` is provided, a `<div>` is created by default.
73
74	### Styling the element directly
75
76	```ts
77	const panel = document.createElement("div");
78	panel.innerHTML = "<h2>Score</h2><p>1500</p>";
79	panel.style.color = "white";
80	panel.style.fontFamily = "Arial";
81	panel.style.pointerEvents = "none";
82
83	const dom = new DOMContainer({ element: panel });
84	dom.position.set(50, 50);
85	app.stage.addChild(dom);
86	```
87
88	PixiJS does not interfere with CSS styling on the element. The shared root `<div>` is set to `pointer-events: none`, and each attached eleme

People who liked this also viewed

6 picks

Type

pixijs-scene-dom-container

2.8kinstalls15forks

View on GitHub

How to install pixijs-scene-dom-container?

pixijs/pixijs-skills/pixijs-scene-dom-container

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-dom-container

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	`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'`.
2
3	> `DOMContainer` is marked EXPERIMENTAL in PixiJS v8. The API may change between minor releases.
4
5	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.
6
7	## Quick Start
8
9	```ts
10	import "pixi.js/dom";
11
12	const input = document.createElement("input");
13	input.type = "text";
14	input.placeholder = "Enter name...";
15
16	const dom = new DOMContainer({
17	element: input,
18	anchor: 0.5,
19	});
20	dom.position.set(app.screen.width / 2, app.screen.height / 2);
21
22	app.stage.addChild(dom);
23	```
24
25	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).
26
27	## Constructor options
28
29	All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`.
30
31	Leaf-specific options added by `DOMContainerOptions`:
32
33	\| Option \| Type \| Default \| Description \|
34	\| --------- \| --------------------- \| ------------------------------- \| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ \|
35	\| `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. \|
36	\| `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. \|
37
38	`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.
39
40	## Core Patterns
41
42	### Setup and the side-effect import
43
44	```ts
45	import "pixi.js/dom";
46	import { DOMContainer } from "pixi.js";
47	```
48
49	Or use the combined import that registers the pipe and re-exports the class:
50
51	```ts
52	import { DOMContainer } from "pixi.js/dom";
53	```
54
55	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.
56
57	### Transforms, anchor, and alpha
58
59	```ts
60	const dom = new DOMContainer({
61	element: document.createElement("div"),
62	anchor: 0.5,
63	});
64	dom.position.set(400, 300);
65	dom.scale.set(1.5);
66	dom.rotation = Math.PI / 8;
67	dom.alpha = 0.5;
68	```
69
70	Transforms on the `DOMContainer` propagate to the element as CSS `transform`. `anchor` shifts the element's origin relative to its own dimensions: `0` is top-left, `0.5` centers, `1` is bottom-right. A single number sets both axes; an object `{ x, y }` sets each independently. `alpha` (including inherited parent alpha) is written to the element's `style.opacity` every frame.
71
72	If no `element` is provided, a `<div>` is created by default.
73
74	### Styling the element directly
75
76	```ts
77	const panel = document.createElement("div");
78	panel.innerHTML = "<h2>Score</h2><p>1500</p>";
79	panel.style.color = "white";
80	panel.style.fontFamily = "Arial";
81	panel.style.pointerEvents = "none";
82
83	const dom = new DOMContainer({ element: panel });
84	dom.position.set(50, 50);
85	app.stage.addChild(dom);
86	```
87
88	PixiJS does not interfere with CSS styling on the element. The shared root `<div>` is set to `pointer-events: none`, and each attached eleme

People who liked this also viewed

6 picks

Type