Remotion adds support for HTML-in-canvas effects
By Steven Van ·
The experimental Chromium API lets real HTML elements get canvas-style shaders and distortion, previewable in Chrome 149+ and rendering out of the box
Remotion has added support for HTML-in-canvas, an experimental Chromium browser API that draws a live DOM node into a <canvas> element so it can be post-processed with the Canvas 2D API, WebGL, or WebGPU. In practice, this means real HTML elements, text, buttons, full layouts, can now get canvas-style effects like warping, distortion, shaders, and particles that plain CSS couldn't produce.
Remotion exposes this through a new HtmlInCanvas component, which wraps children in a canvas and gives access to an onPaint callback for manipulating the rendered content.
- Previewing effects in Remotion Studio requires Google Chrome v149 or later with the chrome://flags/#canvas-draw-element flag enabled.
- From v4.0.455, rendering works out of the box, locally via npx remotion render and Studio, on Lambda, on Vercel, and through server-side rendering APIs, using a bundled Chrome build with the flag already enabled.
- WebGL shader effects need the --gl=angle flag when rendering (or --gl=swangle on machines without a GPU).
- HtmlInCanvas components can't be nested; multiple effects need to be merged into a single onPaint callback instead.
- @remotion/transitions can use HTML-in-canvas too, for example in its zoomBlur() presentation for blending scenes.
Remotion also publishes Agent Skills that teach AI coding agents like Claude Code, Codex, and Cursor how to use HtmlInCanvas correctly, installable with npx skills add remotion-dev/skills. The API itself is unstable, and Chrome may change or remove it in the future. Full details are in the original announcement.
