Client-side rendering

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 released as an experimental alpha under the @remotion/web-renderer package.

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 provides APIs called renderStillOnWeb() and renderMediaOnWeb().

Here is an example of how to use it:

Tentative API example
tsx
import {renderMediaOnWeb} from'@remotion/web-renderer';
constComponent:React.FC= () => {
return (
 <svgviewBox="0 0 100 100"width="100"height="100"style={{transform: 'rotate(45deg)'}}>
 <polygonpoints="50,10 90,90 10,90"fill="orange" />
 </svg>
 );
};
const {getBlob} =awaitrenderMediaOnWeb({
 composition: {
 component: Component,
 durationInFrames: 100,
 fps: 30,
 width: 100,
 height: 100,
 calculateMetadata: null,
 id: 'my-composition',
 },
 inputProps: {},
});

Enable in the Studio​

To enable client-side rendering in the Studio, you need to call Config.setExperimentalClientSideRenderingEnabled(true) in your remotion.config.ts file.

remotion.config.ts
ts
Config.setExperimentalClientSideRenderingEnabled(true);

Status​

Client-side rendering is currently in heavy iteration.

View the current status and progress →

See also​

• How it works
• Limitations
• Server-side rendering