Skip to main content

HTML-in-canvasv4.0.455

Regular video editors are canvas-based which allows for complex effects and compositing that is not possible with plain CSS.

HTML-in-canvas is an experimental browser API available in Chrome and other Chromium-based browsers behind a flag, which allows you to draw a live DOM node into a <canvas> and post-process it with the Canvas 2D API, WebGL or WebGPU.

Remotion offers a <HtmlInCanvas> component, transitions and HTML-in-canvas-based client-side rendering.

Enabling the flag in Chrome​

To preview HTML-in-canvas effects in the Remotion Studio, use Google Chrome v149 or later and enable a flag:

  1. Install or update Google Chrome.
  2. Open chrome://flags/#canvas-draw-element.
  3. Set the HTML-in-Canvas flag to Enabled and restart.

To check at runtime whether HTML-in-canvas is supported, you can use HtmlInCanvas.isSupported().

For rendering, you don't need to do anything — see Rendering below.

The <HtmlInCanvas> component​

<HtmlInCanvas> is a convenient component which wraps its children in a canvas and allows you to manipulate the content when the canvas is painted.

MyComp.tsx
import {HtmlInCanvas, type HtmlInCanvasOnPaint} from 'remotion';

const onPaint: HtmlInCanvasOnPaint = ({canvas, element, elementImage}) => {
  const ctx = canvas.getContext('2d');
  if (!ctx) {
    throw new Error('Failed to acquire 2D context');
  }

  ctx.reset();
  ctx.filter = 'blur(8px)';
  const transform = ctx.drawElementImage(elementImage, 0, 0);
  element.style.transform = transform.toString();
};

export const MyComp: React.FC = () => {
  return (
    <HtmlInCanvas width={1280} height={720} onPaint={onPaint}>
      <div style={{fontSize: 80}}>Hello</div>
    </HtmlInCanvas>
  );
};

See the <HtmlInCanvas> reference for the full API, including WebGL and WebGPU examples.

Using the browser API directly​

You can also use the browser API directly. Refer to the working draft to do so.
If you do so, you are responsible yourself for calling delayRender() and continueRender() to synchronize paint operations.

Examples​

Find example components in the remotion-dev/html-in-canvas repository.

Also see the following sample prompts in our prompt gallery that you can give your coding agent:

With @remotion/transitions​

@remotion/transitions can take advantage of HTML-in-canvas as well to blend two scenes.
See zoomBlur() presentation for an example.

You can also build your own — see Making a custom HTML-in-canvas presentation.

Limitations​

HTML-in-canvas is only available in Chrome 149 and later with the chrome://flags/#canvas-draw-element flag enabled.
The API is unstable - Chrome may change the API or even remove it in the future.

Nesting <HtmlInCanvas> inside another <HtmlInCanvas> is supported from v4.0.461. Remotion detects the nested canvas automatically and uses an auxiliary canvas outside the viewport, then copies the result into the visible canvas.

Rendering​

From v4.0.455, render is supported locally via npx remotion render and Studio, on Lambda, on Vercel and through server-side rendering APIs.

We compiled a version of Chrome and made it the default, and enabled the flag for you.

If your effect uses a WebGL shader, pass --gl=angle to make the render work:

npx remotion render --gl=angle

Set it as the default in remotion.config.ts so Studio and CLI renders pick it up as a default:

remotion.config.ts
Config.setChromiumOpenGlRenderer('angle');

If your machine has no GPU, we recommend --gl=swangle instead (default on Lambda).

AI agents​

Remotion publishes Agent Skills that teach AI agents like Claude Code, Codex and Cursor how to use <HtmlInCanvas> correctly — including the onInit / onPaint lifecycle, the --gl=angle flag and nested HTML-in-canvas behavior.

Install them with:

npx skills add remotion-dev/skills

Leveraging HTML-in-canvas for client-side rendering​

Not directly related, but also leveraging the same technology is the HTML-in-canvas option in @remotion/web-renderer.

When enabled, the client-side renderer uses HTML-in-canvas to capture full frames in the browser, which can produce more accurate output than the default DOM compositor.

This mode can render compositions that contain <HtmlInCanvas> elements from v4.0.461 because nested HTML-in-canvas captures are handled using an auxiliary canvas.

See also​