@remotion/web-renderer
This package allows you to render videos and stills directly in the browser, without requiring server-side infrastructure.
The API 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 instead of Node.js
- Encodes with WebCodecs using Mediabunny instead of FFmpeg
- Limited to a subset of tags and CSS properties - see limitations
- No bundling step - takes components and video config directly
Installation
- Remotion CLI
- npm
- bun
- pnpm
- yarn
npx remotion add @remotion/web-renderer
This assumes you are currently using v4.0.491 of Remotion.npm i --save-exact @remotion/web-renderer@4.0.491
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.491 of Remotion.pnpm i @remotion/web-renderer@4.0.491
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.491 of Remotion.bun i @remotion/web-renderer@4.0.491
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.491 of Remotion.yarn --exact add @remotion/web-renderer@4.0.491
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.API
renderMediaOnWeb()
Render a video in the browser
renderStillOnWeb()
Render a still image in the browser
canRenderMediaOnWeb()
Check if a render can be performed
getEncodableVideoCodecs()
Get video codecs the browser can encode
getEncodableAudioCodecs()
Get audio codecs the browser can encode
Types
TypeScript types reference