Skip to main content

Client-side rendering

warning

This feature is not available yet, but we are already writing docs.
Track progress on GitHub and discuss in the #web-renderer channel on Discord.

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

It is currently in development and will be released as a new package called @remotion/web-renderer.

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

APIs​

The package will provide APIs called renderStillOnWeb() and renderMediaOnWeb().

Here is an example of how to use it:

Tentative API example
tsx
import {renderStillOnWeb} 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 blob = await renderStillOnWeb({
  component: Component,
  durationInFrames: 100,
  fps: 30,
  width: 100,
  height: 100,
  frame: 0,
  inputProps: {},
});

Status​

Client-side rendering is currently in active development.

View the current status and progress →

See also​