pixijs-html-source

SKILL.md

HTMLSource and ElementImageSource turn a DOM element into a TextureSource you can use anywhere a normal texture works: on a Sprite, as a Texture frame, or mapped onto a Mesh. HTMLSource mirrors a live element's pixels into the GPU (the element stays editable and clickable in the browser); ElementImageSource wraps an immutable snapshot that never repaints. Both live in pixi.js/html-source; importing from that path registers their extensions.

These sources rely on the experimental HTML-in-Canvas browser proposal and are marked EXPERIMENTAL in PixiJS v8. The browser API must be enabled or the texture uploader throws on first render; feature-detect with canvas.requestPaint before relying on it. The API may change between minor releases.

Assumes familiarity with pixijs-scene-sprite and textures. These are texture sources, not display objects: wrap them in a Sprite (or Texture/Mesh) to put them on screen. Not available in Web Workers; a worker has no DOM to capture.

Quick Start

import { Application, Sprite } from "pixi.js";
import { HTMLSource } from "pixi.js/html-source";

const app = new Application();
await app.init({ resizeTo: window });
document.body.appendChild(app.canvas);