pixijs-html-source

pixijs-html-source is a developer reference skill from the official PixiJS skills repository that teaches how to render live HTML/DOM elements—or frozen snapshots of them—as PixiJS v8 textures using the experimental HTML-in-Canvas browser APIs. It solves the problem of bridging the DOM and the GPU render pipeline: HTMLSource mirrors a live element's pixels into a TextureSource while the element stays editable and clickable in the browser, and ElementImageSource wraps an immutable captureElementImage() snapshot that never repaints. Both require the side-effect import 'pixi.js/html-source' to register their extensions and uploaders.

The skill documents the full surface: feature detection via canvas.requestPaint before relying on the gated browser API, the direct-child-of-canvas plus layoutsubtree requirement, and the constructor options for both source types (resource, canvas, autoLayout, autoUpdate, autoRequestPaint for live elements; resource and autoClose for snapshots, including a use-after-free caveat when a snapshot is shared). It shows how to wrap the resulting source in a Sprite, Texture, or Mesh, explains fallback-only auto-detection through Texture.from at priority -10, and covers destroy/cleanup. It clearly flags the API as EXPERIMENTAL, subject to change between minor releases, unavailable in Web Workers (no DOM), and prone to throwing on first render if the browser flag is off.

It targets PixiJS v8 developers building interactive graphics who need to composite real DOM content—forms, styled HTML—into a WebGL/WebGPU scene. It assumes familiarity with related skills like pixijs-scene-sprite and textures, and is most useful for advanced rendering, live UI-to-texture effects, and perspective-mapped HTML on meshes.