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
Decision gist · record as of 2026-06-04
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.
Use it when
- pixijs-html-source's HTMLSource component lets you display interactive HTML elements as sprites while keeping them editable.
- pixijs-html-source provides ElementImage for capturing immutable snapshots of DOM elements.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
pixijs/pixijs-skills/pixijs-html-source
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/pixijs-html-source/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Render live DOM elements or frozen snapshots as GPU textures in PixiJS”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
PixiJS is a high-performance 2D rendering engine built for the web. This skill collection guides agents through core PixiJS v8 concepts—from application initialization and scene management to advanced rendering techniques, custom shaders, and optimization strategies. Whether building interactive graphics or migrating from earlier versions, these skills provide structured pathways to solve rendering challenges efficiently.
This skill teaches agents how to layer standard HTML elements—such as form inputs, embedded iframes, and video players—directly atop a PixiJS canvas rendering surface. It covers DOM container setup, positioning synchronization, and event handling to ensure interactive web components work smoothly alongside 2D graphics. Perfect for building hybrid interfaces that blend canvas-based visuals with traditional web controls.
Pixi.js is a lightweight 2D rendering engine that leverages WebGL for blazing-fast graphics performance. Perfect for creating games, data visualizations, and interactive experiences, it provides a straightforward API for sprites, animations, and effects without the overhead of heavier frameworks.
This skill teaches agents how to load and render animated GIF files as sprites within PixiJS v8 scenes. It covers the setup process, sprite creation from GIF sources, and integration with PixiJS's rendering pipeline for WebGL and Canvas environments. Perfect for developers building interactive 2D applications that need smooth GIF animation support.
This skill equips you to bootstrap PixiJS v8 projects with modern async patterns, handling application setup and renderer initialization. Perfect for developers building 2D web games or interactive graphics who need a structured foundation for their rendering pipeline.
Master PixiJS Application initialization and renderer configuration for fast 2D graphics across WebGL, WebGPU, and Canvas. This skill covers foundational setup, scene graph structure, sprite and graphics rendering, text display, filter effects, and performance tuning techniques. Ideal for developers building interactive web experiences with PixiJS v8.
More skills pixijs-migration-v8 (MIT) · pixijs-blend-modes (MIT)