Client-Side Rendering (Browser Export)

Client-side rendering lets users export videos directly in their browser - no server infrastructure required. Under the hood, RVE 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. There are no API routes, no servers, 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 cloud dependencies
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, RVE 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 cloud 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

Next Steps

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

Introduction