Client-Side Rendering Setup

Client-side rendering is enabled by default in the RVE SDK. This guide covers the setup details and configuration options.

Install Dependencies

Client-side rendering requires two additional 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.

Default Behavior

Client-side rendering is enabled automatically when no customRenderer is provided. The simplest setup is:

Browser-Only Export (Default)

"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={true}, the SDK uses browser rendering by default while the server renderer is available as a fallback:

"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}
    />
  );
}

With this setup:

• Browser export: renders locally, auto-downloads the MP4
• Cloud rendering: available as a fallback if browser export is not supported

Configuration Props

Export Resolution Presets

When the user clicks "Export", a dialog lets them choose a resolution before rendering begins. Use the exportOptions prop to control which presets are available:

<ReactVideoEditor
  projectId="example-project"
  fps={30}
  exportOptions={{
    availableResolutions: ['720p', '1080p'],
    defaultResolution: '720p',
  }}
/>

The pixel dimensions shown in the dialog are calculated from the current aspect ratio — 1080p always refers to the short edge (e.g. 1920×1080 for 16:9, 608×1080 for 9:16).

Behavior Matrix

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)

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.