skills.rest
matthewharwood
matthewharwoodCOMMUNITY
Explore all skills by this author →
GitHub

pixijs-scene-dom-container

Overlay HTML elements on a PixiJS canvas using DOMContainer with CSS transforms.

1|Updated Apr 26, 2026
Search Tags:#webgl#overlay#pixijs#scene-graph#dom-container#css-transform#html-overlay
One-click install
npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-scene-dom-container-matthewharwood
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-scene-dom-container
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/pixijs-scene-dom-container
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-scene-dom-container-matthewharwood

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

  • Overlay HTML content that tracks PixiJS scene elements with CSS transforms.
  • Drive synchronization between HTML overlays and PixiJS objects such as sprites, containers, and viewports.
  • Supports the DOMPipe integration by ensuring the DOM root is updated and positioned correctly.

Quick Start

Create a DOMContainer with an HTML element and an anchor, then attach it to the stage to overlay HTML on the PixiJS canvas.

Frequently Asked Questions about pixijs-scene-dom-container

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I overlay HTML elements on a PixiJS canvas?▼

To overlay HTML on a PixiJS canvas, use DOMContainer to drive CSS transforms from the scene graph. This ensures native inputs, iframes, and rich HTML track display objects' positions accurately.

Can I make an HTML input follow a PixiJS sprite's position?▼

Yes, DOMContainer synchronizes HTML overlays with PixiJS sprites by driving CSS transforms from the scene graph. This ensures the HTML input maintains accurate relative positioning during viewport updates.

What is the best way to integrate DOM overlays with a WebGL scene graph?▼

Integrating DOM overlays with a WebGL scene graph is best handled by DOMContainer, which manages the DOM root via DOMPipe. It applies CSS transforms to ensure HTML elements anchor and track scene objects correctly.

Does the DOMContainer approach handle visibility for HTML overlays in PixiJS?▼

Yes, the DOMContainer approach includes proper element anchoring and visibility handling. It manages the DOM root through DOMPipe to ensure overlays remain stable and correctly positioned over the PixiJS canvas.

When should I use DOMContainer instead of standard PixiJS rendering for UI?▼

Use DOMContainer instead of standard PixiJS rendering when you need native inputs, iframes, videos, or rich HTML. It drives CSS transforms from the scene graph to position complex DOM elements over the canvas.

Related Skills

Explore More Software Engineering Skills→
alexkaferalexkafer

pixijs-scene-dom-container

Align DOM HTML elements with PixiJS v8 canvas content using DOMContainer and CSS transforms.

Community
Intermediate
adamhjkadamhjk
2

pixijs-scene-dom-container

Overlay HTML elements onto PixiJS scenes with synchronized CSS transforms.

Community
Intermediate
pixijspixijs
302

pixijs-scene-container

Group and transform PixiJS v8 display objects with Container scene graphs.

Official
Advanced
encounterplusencounterplus
16

pixijs-scene-dom-container

Synchronize HTML element overlays with PixiJS scene graph transforms via DOMPipe.

Official
Intermediate