Client-Side Rendering (Browser Export)

Client-side rendering lets users export videos directly in their browser - no server infrastructure required. Under the hood, the SDK uses Remotion's @remotion/web-renderer to encode video using the browser's built-in WebCodecs API.

This is the simplest way to get video export working with the SDK. There are no API routes to implement, no servers to manage, and no cloud configuration. The video is rendered frame-by-frame in the browser and downloaded as an MP4 when complete.

When to Use Client-Side Rendering

Getting started quickly - zero backend setup
Local-first apps - no server costs or infrastructure to maintain
Prototyping and demos - ship a working export without implementing API routes
Lightweight use cases - short videos, simple compositions

Still confused?

Think of client-side rendering like editing a photo in your browser and hitting "Save As" - the processing happens right on your device. No uploads, no servers, no waiting for a cloud job. The tradeoff is that rendering speed depends on the user's hardware, and some advanced features aren't available in this mode.

Browser Requirements

Client-side rendering requires a browser that supports the WebCodecs API. If a user's browser doesn't support it, the editor will show a dialog recommending they switch to a supported browser.

Browser	Supported
Chrome 94+	Yes
Edge 94+	Yes
Firefox	No
Safari	No

Browser compatibility

WebCodecs is not yet supported in all browsers. If your users primarily use Firefox or Safari, consider using SSR or Lambda rendering instead, or offer client-side rendering as an option alongside a server renderer.

Feature Limitations

When client-side rendering is active, certain features are automatically disabled because the web rasterizer doesn't support them:

Stickers - sticker panel is hidden and sticker items are filtered from tracks
Animations - animation settings are hidden on video, image, and text panels
3D layouts - 3D layout selector is hidden on image panels
Greenscreen - greenscreen toggle is hidden (canvas-based fallback is used internally)
Caption word highlighting - captions display statically without per-word highlighting

These limitations are handled automatically - the UI adapts so users only see features that work with browser export.

How It Works

User clicks "Export Video"
       │
       ▼
Browser checks WebCodecs support
  → Unsupported? Shows browser dialog
  → Supported? Continues...
       │
       ▼
renderMediaOnWeb() renders each frame
  → Uses hardware acceleration when available
  → Progress bar shown to user
       │
       ▼
Render complete → MP4 blob created
  → Automatic download to user's device

CSR vs Server Rendering

With client-side rendering, you don't need to implement the HttpRenderer API contract or set up any server endpoints. The entire export pipeline runs in the browser.

	CSR (Browser)	SSR	Lambda
Where it runs	User's browser	Your server	AWS Lambda
Server setup	None	API routes required	AWS + API routes
Best for	Quick start, light use	Development, full control	Production, high volume
Dependencies	`@remotion/web-renderer`, `@remotion/media`	`@remotion/bundler`, `@remotion/renderer`	`@remotion/lambda`
Browser support	Chrome/Edge only	Any	Any

Next Steps

Set up client-side rendering in your project
Compare with SSR or Lambda rendering

Introduction