Skip to main content

Client-side rendering

Client-side rendering is a Remotion capability that allows you to render videos, images, and audio directly in the browser, without requiring server-side infrastructure.

It is available through the @remotion/web-renderer package and is stable from v4.0.491.

Key differences from server-side rendering​

Unlike server-side rendering with @remotion/renderer, client-side rendering:

  • Runs in the browser - No need to setup Node servers or Remotion Lambda
  • Encodes with WebCodecs using Mediabunny instead of FFmpeg
  • Limited to a subset of HTML elements - see limitations
  • No bundling step - takes components and video config directly

Browser support​

Client-side rendering requires the WebCodecs API, which limits browser support to:

BrowserMinimum version
Chrome94+
Firefox130+
Safari26+

APIs​

The package provides APIs called renderStillOnWeb() and renderMediaOnWeb().

Here is an example of how to use it:

Example
import {renderMediaOnWeb} from '@remotion/web-renderer';

const Component: React.FC = () => {
  return (
    <svg viewBox="0 0 100 100" width="100" height="100" style={{transform: 'rotate(45deg)'}}>
      <polygon points="50,10 90,90 10,90" fill="orange" />
    </svg>
  );
};

const {getBlob} = await renderMediaOnWeb({
  composition: {
    component: Component,
    durationInFrames: 100,
    fps: 30,
    width: 100,
    height: 100,
    calculateMetadata: null,
    id: 'my-composition',
  },
  inputProps: {},
});

Remotion Studio​

Client-side rendering is always enabled in the Remotion Studio from v4.0.491. Use the "Render on web" button to render in the browser.

See also​