skills.rest
pixijs
pixijsOFFICIAL
Explore all skills by this author →
Website𝕏@PixiJSGitHub

pixijs-html-source

Render live DOM elements or snapshots as PixiJS v8 textures via HTML-in-Canvas APIs.

48.2k|5.1k|Updated Jan 21, 2013
Search Tags:#webgl#webgpu#pixijs#texture#html-in-canvas#htmlsource#dom-to-texture
One-click install
npx skills add https://github.com/pixijs/pixijs --skill pixijs-html-source-pixijs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-html-source
Source: https://github.com/pixijs/pixijs/tree/main/skills/pixijs-html-source
Command: npx skills add https://github.com/pixijs/pixijs --skill pixijs-html-source-pixijs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pixi.js.

What problem does it solve? Rendering HTML/DOM content inside a PixiJS WebGL or WebGPU scene normally requires manual rasterization hacks. This Skill explains how to use the experimental HTML-in-Canvas browser APIs through PixiJS v8's HTMLSource and ElementImageSource classes to turn live or frozen DOM elements into GPU textures. ## Core Features & Use Cases - Live element textures: HTMLSource mirrors a repainting, still-interactive DOM element (direct child of the canvas) into a TextureSource usable on Sprites, Textures, or Meshes. - Immutable snapshots: ElementImageSource wraps canvas.captureElementImage() output for frozen copies used in transitions, shatter, or trail effects. - Feature detection and lifecycle: Covers canvas.requestPaint detection, autoLayout/autoUpdate/autoRequestPaint options, uploader error messages, and destroy/cleanup semantics. - Use Case: Build an in-canvas settings form that stays clickable in the browser while being rendered as a sprite inside a PixiJS game UI. ## Quick Start Show me how to render a live HTML form as a PixiJS sprite using HTMLSource from pixi.js/html-source.

Frequently Asked Questions about pixijs-html-source

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

FAQPage Schema
How do I render an HTML element as a PixiJS texture?▼

Import HTMLSource from pixi.js/html-source, append the element as a direct child of app.canvas, then construct new HTMLSource({ resource: element }) and wrap it with Sprite.from(source). The element stays live and interactive in the browser.

What is the difference between HTMLSource and ElementImageSource in PixiJS?▼

HTMLSource mirrors a live DOM element that repaints and stays interactive, while ElementImageSource wraps an immutable snapshot from canvas.captureElementImage() that never repaints. Use ElementImageSource for frozen copies like transitions or shatter effects.

Does PixiJS HTMLSource work in all browsers?▼

No. HTMLSource relies on the experimental HTML-in-Canvas proposal, which is gated behind a browser flag. Feature-detect with canvas.requestPaint before use; otherwise the texture uploader throws on first render.

Why does HTMLSource throw when I create it?▼

The constructor throws when the element is not a direct child of the owning canvas. Append the element with app.canvas.appendChild(element) before constructing the source, or pass the canvas option explicitly.

How do I update an HTMLSource texture every frame?▼

Set autoRequestPaint: false and call source.requestPaint() inside your app.ticker callback after changing the element's content. The browser only repaints canvas children on demand, so continuous animation needs manual paint requests.

Can I use HTMLSource in a Web Worker?▼

No. HTMLSource and ElementImageSource are not available in Web Workers because a worker has no DOM to capture. They require a browser document with the canvas and its child elements.

Related Skills

Explore More Software Engineering Skills→
fyunusafyunusa

pixijs-2d

Render 2D graphics with PixiJS using WebGL and WebGPU.

Community
Intermediate
NebulavenusNebulavenus
36

forge-textures-and-samplers

Upload textures to the GPU and render UV-mapped geometry with samplers in SDL3.

Community
Intermediate
alexkaferalexkafer

pixijs-scene-dom-container

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

Community
Intermediate
godmakerethgodmakereth
48

snapdom

Convert HTML DOM elements into SVG or raster images with preserved styles.

Community
Advanced