pixijs-html-source
This skill enables PixiJS developers to capture and render HTML content directly as GPU textures, bridging the gap between DOM-based UI and high-performance 2D graphics. Whether you need live-updating HTML elements or frozen snapshots, the skill provides the integration layer to convert web content into WebGL or WebGPU-backed textures for seamless composition within PixiJS scenes.
pixijs-html-source bridges DOM content and GPU rendering by converting HTML elements into WebGL or WebGPU-backed textures. You can render live DOM elements that stay interactive via HTMLSource, or capture frozen snapshots as ElementImage objects and convert them to textures. The skill handles the experimental HTML-in-Canvas browser API, letting you compose web content seamlessly within PixiJS scenes without manual canvas drawing.
AI-generated summary based on this skill's SKILL.md
Install
pixijs/pixijs-skills/pixijs-html-source
git clone https://github.com/pixijs/pixijs-skills
cp -r pixijs-skills/skills/pixijs-html-source ~/.claude/skills/pixijs-html-sourceFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does pixijs-html-source render HTML to texture in PixiJS?
pixijs-html-source bridges DOM content and GPU rendering by converting HTML elements into WebGL or WebGPU-backed textures. You can render live DOM elements that stay interactive via HTMLSource, or capture frozen snapshots as ElementImage objects and convert them to textures. The skill handles the experimental HTML-in-Canvas browser API, letting you compose web content seamlessly within PixiJS scenes without manual canvas drawing.
What is HTMLSource and how do I keep interactive HTML elements editable?
pixijs-html-source's HTMLSource component lets you display interactive HTML elements as sprites while keeping them editable. Unlike frozen snapshots, HTMLSource maintains the DOM's interactivity—forms, buttons, and inputs remain functional. You can call requestPaint() to update the texture when content changes, and configure autoUpdate to refresh automatically. This approach is ideal when you need live HTML interaction within a PixiJS scene.
How do I capture element image snapshots and convert to textures?
pixijs-html-source provides ElementImage for capturing immutable snapshots of DOM elements. Once captured, you convert the snapshot to a texture for use in PixiJS sprites and meshes. This frozen approach is lighter than live HTMLSource when you don't need interactivity, and it's useful for caching static UI or rendering forms to canvas without ongoing updates.
Does pixijs-html-source support the experimental HTML-in-Canvas API?
Yes, pixijs-html-source includes feature detection and handling for the experimental HTML-in-Canvas browser API. The skill automatically detects browser support and gracefully manages the API's availability. This allows you to leverage cutting-edge rendering capabilities when available while maintaining compatibility across different environments.
Can I map rendered HTML onto meshes and apply transformations?
pixijs-html-source supports mapping HTML textures onto PixiJS meshes, enabling advanced transformations and effects. Once you've converted your HTML content to a texture—whether via HTMLSource or ElementImage—you can apply it to mesh geometries and use PixiJS's full transformation pipeline, including scaling, rotation, and distortion effects.
What license does pixijs-html-source use?
pixijs-html-source is released under the MIT license, allowing free use, modification, and distribution in both open-source and commercial projects with minimal restrictions.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/pixijs-html-source/SKILL.md