Remotion adds HTML-in-canvas as a first-class video primitive

• Remotion made HTML-in-canvas a first-class primitive, and Remotion's launch post framed it as a way to unlock effects that were previously out of reach in code-based video work.
• The new HTML-in-canvas docs describe the API as drawing a live DOM node into a canvas, then post-processing it with Canvas 2D, WebGL, or WebGPU.
• Preview still has a browser caveat: Remotion's Hello World demo says you need Chrome Canary with one flag enabled, and the docs specify Chrome Canary v149 plus chrome://flags/#canvas-draw-element.
• Rendering support is already broader than the preview story, because the docs say HTML-in-canvas works locally via npx remotion render and Studio, on Lambda, and in Remotion Cloudrun, while Remotion's Hello World demo says rendering works out of the box.

You can read the new docs, inspect the shader-based transition helper, and even trace the feature through Remotion's changelog, where Chrome 149 support and HTML-in-canvas transitions landed as separate entries.

Remotion's pitch is simple: keep building scenes with HTML and CSS, then run the result through canvas and shader pipelines. The official docs define the primitive as drawing a live DOM node into a canvas, which opens post-processing with Canvas 2D, WebGL, or WebGPU instead of staying inside CSS-only effects.

That lines up with Everlier's reply, which notes that many of these effects are not possible with SVG filters.

The first demo is a tiny workflow: npx create-video@latest --blank -y glitch, install dependencies, then prompt Claude to build a sample composition and glitch effect. Glitch demo from Remotion's Hello World post

The catch is preview. Remotion's post says Studio preview needs Chrome Canary plus a flag, and the docs narrow that to Chrome Canary v149 with chrome://flags/#canvas-draw-element enabled. Rendering is less picky: the docs say you do not need extra setup for render, and the feature is supported from v4.0.455 in local render, Studio, Lambda, and Cloudrun.

Remotion did not ship this as a one-off effect. The docs include a transition helper for shader-driven scene changes, and the web renderer docs describe using the browser's native HTML-in-canvas path instead of Remotion's built-in DOM composer when Chromium exposes the required APIs.

A linked GitHub pull request shows what that means in practice:

• renderMediaOnWeb() and renderStillOnWeb() got an allowHtmlInCanvas option, defaulting to true
• Studio added a checkbox toggle for the native path
• the renderer uses requestPaint() plus the paint event to capture fresh frames

The Hacker News discussion around the underlying browser API made the same case from a different angle: creators want canvas shading freedom without rebuilding text and layout engines from scratch.