HTML-in-Canvas
WICG proposal: render laid-out HTML/DOM into
<canvas>viadrawElementImage()— interactive UI textures in WebGL/3D scenes without rebuilding widgets in raw GL.
Solves the gap where canvas/WebGL apps cannot easily render complex text layouts, accessible HTML, or styled controls inside the GPU path. Source: WICG html-in-canvas explainer, https://github.com/WICG/html-in-canvas, 2026-06-13
Core API (proposal)
| Primitive | Purpose |
|---|---|
layoutsubtree attribute on <canvas> |
Opt-in: canvas children layout + hit-test; paint contained until drawn |
drawElementImage() |
Rasterize a DOM subtree into the 2D/WebGL canvas |
| WebGL/WebGPU equivalents | Same for 3D texture paths |
| Update event | Re-draw when subtree layout changes |
Chromium flag: chrome://flags/#canvas-draw-element (origin trial at bookmark time). Source: WICG README, 2026-06-13
Use cases
- 3D scene UI — dashboards and controls as HTML on surfaces inside R3F/Three.js worlds Source: X/@tokufxug, 2026-04-20
- Shader composition — Shaders MCP demos: glass, ascii, dither, and ripples on HTML surfaces through
<DOMTexture>Source: X/@npm_i_shaders, 2026-04-10 - Media export — Remotion adopted
<HtmlInCanvas>for post-processing live DOM nodes with Canvas 2D, WebGL, or WebGPU effects, including magnifying-glass, progressive blur, vintage/CRT, and glitch examples. Source: X/@Remotion, 2026-05-04; Source: Remotion docs, 2026-06-26 - A11y — canvas fallback content can match rendered HTML (vs hand-maintained duplicate)
Demo bookmark: 6,894 likes, 3,304 bookmarks. Source: X/@tokufxug, 2026-04-20
Tokufxug Demo Artifact
The reviewed video is the clearest product-shape evidence: a live 3D scene contains a large paper/card surface with real-looking HTML controls, a portrait image, sliders for mass/stiff/shine, a theme color swatch, and buttons such as "PET", "POKE", and "TALK TO ME". The contact sheet shows the surface bending and rotating in perspective while those controls remain part of the rendered UI. This is not only "HTML screenshot as texture"; it is DOM UI becoming a manipulable 3D material. Source: local image wiki/assets/x-bookmarks/2046044649677316229/image-01.jpg; local contact sheet /tmp/xreview-frames/2046044649677316229.jpg, reviewed 2026-07-01
Shaders DOMTexture artifact
Shaders' reviewed demo is the design-tool variant of the same primitive. A placeholder HTML panel reading "Your HTML content here" appears inside a Shaders editor, gets paired with preset selection controls, and then renders as a warped/distorted blue surface under ripple/glass-like effects. The thread calls this <DOMTexture> and warns it only works in Chrome Canary with the flag enabled, so it belongs in experimental prototypes and artifact reviews, not production UI. Source: X/@npm_i_shaders and local contact sheet /tmp/xreview-next12-videos/domtexture-sheet.jpg, reviewed 2026-07-02
Stack fit (Kevin)
- Experimental only — flag-gated; do not ship Dedalus UI depending on it until stable.
- Watch for Frontend and Design Skills ecosystem — likely
@react-three/dreior similar wrappers when API stabilizes. - Marketing / 3D portfolio — enables HTML hero copy inside shader-heavy scenes on kevin-wiki
/meor product demos without DOM overlay hacks.
Remotion adoption snapshot
Remotion's 2026 HTML-in-canvas docs expose <HtmlInCanvas> as a first-class component and describe rendering support from v4.0.455: local npx remotion render, Studio, Lambda, Vercel, and server-side rendering APIs use a compiled Chrome build with the flag enabled for renders. Previewing in Studio still needs Chrome 149+ and chrome://flags/#canvas-draw-element; WebGL effects should render with --gl=angle or --gl=swangle on machines without GPU. Source: Remotion HTML-in-canvas docs, 2026-06-26
The reviewed X video shows why this matters visually: a DOM text layer becomes a magnified canvas surface, article text gets progressive blur/highlight treatment, a John Whitney motion-graphics reference is recreated as an effect, and the prompt example explicitly tells Claude to use Remotion HTML-in-canvas best practices. This is an agent-authored video primitive, not just a browser API curiosity. Source: local video contact sheet /tmp/xreview-frames/2051235642424631514.jpg, reviewed 2026-07-01
Version check on 2026-07-01: npm remotion latest 4.0.484, dist-tag alpha 4.1.0-alpha12, canary 4.0.0-alpha.217; @remotion/web-renderer latest 4.0.484. The WICG proposal repo had 3,693 stars, 157 forks, no public release tags, no declared license, and HEAD cb22f4d87782a52ce548f8079d5ad26562331def. The example repo remotion-dev/html-in-canvas had 189 stars, 13 forks, no public release tags, no declared license, and HEAD d06d8b87cb3a376fd9a189fd7a31c39eeba94142. Source: npm registry and GitHub, 2026-07-01
Timeline
- 2026-07-02 | Deep-reviewed the Shaders
<DOMTexture>artifact and added the design-tool variant of html-in-canvas: shader effects applied directly to DOM content surfaces, still Chrome Canary/flag-gated. Source: X/@npm_i_shaders, 2026-04-10 - 2026-04-20 | @tokufxug demo — HTML with 3D material quality in Chrome trial. Source: X/@tokufxug, 2026-04-20
- 2026-06-13 | Wiki page from bookmark absorb. Source: compiled, 2026-06-13
- 2026-06-13 | Quality remediation: WICG spec primitives, Chromium flag, use-case table. Source: GitHub WICG/html-in-canvas, 2026-06-13
- 2026-07-01 | Deep-reviewed the tokufxug 3D demo artifact and added WICG/remotion source snapshots. Source: X/@tokufxug, 2026-04-20
- 2026-07-01 | Deep-reviewed Remotion's HTML-in-canvas launch bookmark and added the Remotion adoption snapshot, current npm versions, and local video observation. Source: X/@Remotion, 2026-05-04; Source: Remotion docs, 2026-06-26