Client-Side Rendering Setup

This guide explains how to enable client-side (browser) rendering with the RVE SDK.

Install Dependencies

Client-side rendering requires two additional Remotion packages as peer dependencies:

npm install @remotion/web-renderer @remotion/media

These are peer dependencies of @reactvideoeditor/react-video-editor - they're not bundled with the SDK, so you need to install them in your project.

Enable Web Rendering

To enable client-side rendering, pass the enableWebRender prop to your ReactVideoEditor component:

Browser-Only Export (No Server)

If you just want browser export with no server rendering at all:

page.tsx

"use client";

import React from 'react';
import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';
import '@reactvideoeditor/react-video-editor/styles.css';

export default function Page() {
  return (
    <ReactVideoEditor
      projectId="example-project"
      fps={30}
      enableWebRender={true}
    />
  );
}

That's it - no HttpRenderer, no API routes, no server setup. Users click "Export Video" and the MP4 downloads directly to their device.

Hybrid Mode (Browser + Server)

You can offer both client-side and server rendering. When a customRenderer is provided alongside enableWebRender, users can toggle between the two modes in the settings panel:

page.tsx

"use client";

import React from 'react';
import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';
import { HttpRenderer } from '@reactvideoeditor/react-video-editor/utils/http-renderer';
import '@reactvideoeditor/react-video-editor/styles.css';

export default function Page() {
  const ssrRenderer = React.useMemo(() =>
    new HttpRenderer('/api/render/ssr', {
      type: 'ssr',
      entryPoint: '/api/render/ssr'
    }), []
  );

  return (
    <ReactVideoEditor
      projectId="example-project"
      fps={30}
      customRenderer={ssrRenderer}
      enableWebRender={true}
      showRenderSettings={true}
    />
  );
}

With this setup:

Users see a render mode toggle in the settings panel
Browser export: renders locally, auto-downloads the MP4
Cloud rendering: sends the job to your server, shows a notification when complete

Prop	Type	Default	Description
`enableWebRender`	`boolean`	`false` (if `customRenderer` provided), `true` (if no renderer)	Enable client-side video export
`customRenderer`	`VideoRenderer`	-	Optional cloud/server renderer (SSR, Lambda, or custom)
`showRenderSettings`	`boolean`	`true`	Show the render mode toggle in the settings panel

`customRenderer`	`enableWebRender`	Result
Not provided	`true`	Browser export only
Not provided	`false`	Export button disabled
Provided	`true`	Hybrid mode - user can toggle
Provided	`false`	Cloud rendering only
Provided	Not set	Cloud rendering only (default)
Not provided	Not set	Browser export enabled (default fallback)

Unlike SSR and Lambda rendering, client-side rendering doesn't use the HttpRenderer or require you to implement any API endpoints. The entire export pipeline runs in the browser using @remotion/web-renderer.

UI Differences in Web Render Mode

When exporting via the browser, the UI adapts automatically:

The export button label changes from "Render Video" to "Export Video"
Completed exports trigger an automatic download (instead of a notification bell)
The render mode preference is persisted in localStorage so it's remembered across sessions

Troubleshooting

"Your browser doesn't support video export"

This means the browser lacks WebCodecs support (VideoEncoder / AudioEncoder APIs). The user needs Chrome 94+ or Edge 94+.

Export is slow

Browser rendering speed depends on the user's hardware. Tips:

Shorter videos render faster
Lower resolutions (720p vs 1080p) are significantly faster
Hardware acceleration is enabled by default (prefer-hardware) but falls back to software encoding if unavailable

Memory issues on long videos

The browser creates a blob in memory for the entire video. For very long videos (10+ minutes), users may run into memory limits. For heavy workloads, consider directing users to server rendering instead.

Setup