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, elementImage}) => {
  const ctx = canvas.getContext('2d');
  if (!ctx) {
    throw new Error('Failed to acquire 2D context');
  }

  ctx.reset();
  ctx.filter = 'blur(8px)';
  ctx.drawElementImage(elementImage, 0, 0);
};

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:

Example prompts​

Agent Skill
/remotion-createCreate a sample composition and apply an HTML-in-canvas glitch effect to it.
Agent Skill
/remotion-createMake a new composition with a subtle CRT convex-shape shader over an HTML element. Use a terminal and Remotion theme. Animate the command and output of "npx create-video@latest --yes --blank my-video", followed by invoking "claude" and entering the prompt "Add a CRT effect using HTML-in-canvas".

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> components requires Chrome 157 or newer with HTML-in-canvas enabled. See Nested HTML-in-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.

Nested <HtmlInCanvas> components are currently intended for preview and client-side rendering. Remotion's server-side browser is Chrome 149, so server-side rendering does not support nesting yet.

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 nesting support.

Install them with:

npx skills add remotion-dev/skills

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

Not directly related, but @remotion/web-renderer can also use this technology to capture frames.

This is opt-in. In Chrome versions earlier than 157, compositions containing <HtmlInCanvas> use the built-in DOM composer because native capture would create a nested HTML-in-canvas subtree.

Nested HTML-in-canvas​

Nesting <HtmlInCanvas> components is supported for preview and client-side rendering in Chrome 157 or newer with HTML-in-canvas enabled. Use HtmlInCanvas.isNestingSupported() to check at runtime. Older versions throw an error. Server-side rendering does not support nesting yet.

See also​