# Render HTML as PixiJS Textures

Rendering live HTML inside GPU scenes requires experimental browser APIs and careful texture lifecycle management. This skill guides PixiJS v8 integrations using live DOM sources or immutable element snapshots.

## Install

```bash
npx skillstore add pixijs/pixijs-html-source
```

## Metadata

- Status: approved
- Slug: pixijs-pixijs-html-source
- Skillstore revision: r1
- Version status: missing
- Tree hash: d22ba6ecc4090af1149c851760d4e821e2a9ac567cb825656f4b30d05e3d13a0
- Author: pixijs
- GitHub username: pixijs
- License: MIT
- Repository: https://github.com/pixijs/pixijs-skills/tree/83760c6f53462ca9cecd68055041f5a8c94758ce/skills/pixijs-html-source
- Ref: 12f3d8d7050431cd941106781d57d5084b3342a4
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: scripts, external\_commands, network
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/pixijs-pixijs-html-source
- Manifest: https://skillstore.pages.dev/api/skills/pixijs-pixijs-html-source/manifest

## Capabilities

- Explain pixi.js/html-source imports and registration of WebGL and WebGPU texture uploaders.
- Guide live HTMLSource setup with canvas ownership, layoutsubtree, paint events, and readiness checks.
- Demonstrate requestPaint scheduling for continuously changing DOM content.
- Explain immutable ElementImageSource snapshots, autoClose ownership, and explicit cleanup.
- Show texture framing, sprite conversion, mesh mapping, and fallback source detection at priority -10.
- Identify missing browser API errors and suggest static image or DOM overlay fallbacks.

## Use Cases

- Integrate Editable Forms: Render a live form as a PixiJS sprite while retaining browser interaction and managing canvas ownership.
- Create Snapshot Transitions: Capture an element once and use its immutable texture for transitions or mesh effects with explicit snapshot ownership.
- Diagnose Missing HTML Textures: Check module registration, browser API availability, paint scheduling, and resource cleanup when HTML textures fail to render.

## Prompt Templates

### Start With a Live Element

```
Show a minimal PixiJS v8 HTMLSource example for an editable input. Include feature detection, canvas child placement, and the correct imports.
```

### Capture a Frozen Snapshot

```
Create an ElementImageSource from my existing canvas child. Explain readiness, exclusive snapshot ownership, and cleanup when the sprite is removed.
```

### Debug Repaint Scheduling

```
My HTMLSource clock texture stops updating. Review autoUpdate, autoRequestPaint, paint events, and ticker scheduling, then recommend a repaint lifecycle with cleanup.
```

### Design a Shared Snapshot Effect

```
Design a PixiJS v8 effect using one ElementImage across multiple sources and mesh textures. Address ownership, framing, unsupported-browser fallbacks, and final cleanup.
```

## Limitations

- Requires experimental HTML-in-Canvas browser APIs that may need a browser flag and may change between minor releases.
- DOM capture is unavailable in Web Workers.
- Live HTMLSource elements require the owning canvas layout subtree and direct-child placement.
- Provides documentation and examples, not a bundled renderer, compatibility polyfill, or automated test suite.

## Best Practices

- Feature-detect experimental browser APIs and provide a fallback before relying on HTML textures.
- Import from pixi.js/html-source and attach live elements to the owning canvas before source construction.
- Assign snapshot ownership explicitly, remove application ticker callbacks, and destroy sources after their final use.

## Anti Patterns

- Importing HTMLSource from the core pixi.js entry instead of pixi.js/html-source.
- Expecting continuously changing DOM content to repaint without explicit requestPaint scheduling.
- Enabling autoClose on a snapshot that remains shared with other sources.

## Security Audit

- Audited at: 2026-11-04T15:55:31.98\+00:00
- Summary: All 66 static findings are false positives in this documentation-only skill. Markdown backticks are not shell execution, fixed HTML introduces no untrusted input, and reference links do not transmit captured content. No evidence found of prompt injection, credential access, or data exfiltration; texture uploads target the local GPU.

## Stats

- Views: 0
- Downloads: 1
- Favorites: 0
- Popularity score: 0