Client-Side Rendering Setup

This guide explains how to enable client-side (browser) rendering in React Video Editor Pro.

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 @react-video-editor/core - they're not bundled with the editor, 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 cloud rendering at all:

page.tsx

"use client";

import React from 'react';
import { ReactVideoEditor } from '@react-video-editor/core';

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

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

Hybrid Mode (Browser + Cloud)

You can offer both client-side and cloud 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 '@react-video-editor/core';
import { HttpRenderer } from '../../lib/http-renderer';

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

Configuration Props

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

Behavior Matrix

`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)

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

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 cloud rendering instead.

Setup