pixijs-html-source

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 require a side-effect import 'pixi.js/html-source' to register 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 "pixi.js/html-source";
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);

// The element must be a direct child of the Pixi canvas.
const form = document.createElement("form");
form.innerHTML = '<input value="still editable" />';
app.canvas.appendChild(form);

// Render the live form as a sprite. It stays interactive in the browser.
const source = new HTMLSource({ resource: form });
const sprite = Sprite.from(source);

sprite.anchor.set(0.5);
sprite.position.set(app.screen.width / 2, app.screen.height / 2);
app.stage.addChild(sprite);

Related skills: pixijs-scene-sprite (display the texture), pixijs-scene-mesh (map onto geometry, PerspectiveMesh), pixijs-scene-dom-container (the opposite: overlay HTML above the canvas, outside the GPU pipeline), pixijs-assets (texture sources vs the loader/cache), pixijs-environments (no DOM in Web Workers).