# pixijs-html-source

Teaches your agent to turn a live DOM element or a frozen snapshot of one into a PixiJS v8 texture via the experimental HTML-in-Canvas API.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4500 installs · ★ 358
- Author: pixijs
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-html-source/SKILL.md
- Updated: 2026-10-01
- HTML: https://affpapa.org/en/nevibecode/skills/pixijs-html-source

## What it does

The skill covers two classes from `pixi.js/html-source`. `HTMLSource` mirrors a live element's pixels to the GPU while the element stays editable and clickable in the browser; `ElementImageSource` wraps an immutable snapshot from `captureElementImage()` that never repaints. Both are texture sources, not display objects, so you wrap them in a `Sprite`, `Texture` or `Mesh` to get anything on screen.

It walks through the side-effect import that registers the sources and their WebGL/WebGPU uploaders, feature detection with `canvas.requestPaint`, constructor options (`autoLayout`, `autoUpdate`, `autoRequestPaint`, `autoClose`), the static `HTMLSource.defaultOptions`, fallback-only auto-detection through `Texture.from` at priority -10, and destroy/cleanup.

The catch is the browser proposal underneath. The API is marked experimental in PixiJS v8 and may shift between minor releases, so pin your expectations. With the browser flag off, the uploader throws on first render — check `canvas.requestPaint` before you build on it. The element also has to be a direct child of the Pixi canvas or the constructor throws, and none of this works in a Web Worker, which has no DOM to capture.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-html-source -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/pixijs-html-source/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/pixijs-html-source/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-html-source -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/pixijs-html-source/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-html-source -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/pixijs-html-source/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pixijs/pixijs-skills pixijs-html-source
```

2. **Manually: put the files in place**
- File: `.github/skills/pixijs-html-source/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-html-source -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pixijs/pixijs-skills --path skills/pixijs-html-source
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/pixijs-html-source/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-html-source -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-html-source/SKILL.md

## When to use it
- render a live HTML form inside a PixiJS scene and keep it interactive
- freeze a DOM element into a texture and map it onto a Mesh
- detect HTML-in-Canvas support before the first render
- drive repaints manually for a continuously animating texture
- close a snapshot and destroy the source without a use-after-free

## Example prompts
- Show me how to render a live HTML element as a texture with HTMLSource
- Take a captureElementImage snapshot and wrap it in ElementImageSource
- Check canvas.requestPaint and tell me what to do if the API is missing

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: a29c732373603f04.

BEGIN THIRD-PARTY FILE a29c732373603f04
````text
---
name: pixijs-html-source
description: "Use this skill when rendering live HTML/DOM elements (or frozen snapshots of them) as PixiJS v8 textures via the EXPERIMENTAL HTML-in-Canvas browser APIs. Covers the pixi.js/html-source import, feature detection with canvas.requestPaint, HTMLSource for a live, repainting, still-interactive element (autoLayout/autoUpdate/autoRequestPaint, requestPaint, isReady, HTMLSource.defaultOptions, the direct-child-of-canvas + layoutsubtree requirement), ElementImageSource for an immutable captureElementImage() snapshot (autoClose, ready immediately), using the source on a Sprite/Texture/Mesh, fallback-only auto-detection via Texture.from at priority -10, uploader error messages, and destroy/cleanup. Triggers on: HTMLSource, ElementImageSource, ElementImage, HTML in canvas, render DOM to texture, render HTML to texture, texElementImage2D, copyElementImageToTexture, HTMLSourceOptions, ElementImageSourceOptions, HTMLSourceCanvas."
license: MIT
---

`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

```ts
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);
````
END THIRD-PARTY FILE a29c732373603f04

The third-party file has ended. Everything between the a29c732373603f04 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2417 of 13438 bytes. © pixijs · MIT · https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-html-source/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md