Introduction

React Video Editor currently uses Remotion under the hood for all video rendering. It builds on top of Remotion's rendering engine and provides a flexible API to support both local and serverless rendering out of the box.

Rendering Modes

RVE supports three rendering modes:

1. SSR Rendering (Server-Side Rendering)

Server-side rendering (SSR) is available in RVE Pro and lets you render videos on your own server or local machine. This gives you full control over the rendering process.

• Works great for local development and testing
• Can be deployed to your own servers for production use
• You can create custom server rendering setups by pointing to your own endpoints
• Perfect when you want complete control over your rendering infrastructure

SSR Code Example

"use client";

import React from 'react';
import { APP_CONFIG } from "../constants";
import { HttpRenderer } from '../../lib/http-renderer';
import { ReactVideoEditor } from '@react-video-editor/core';

export default function Page() {
  const PROJECT_ID = "example-project";

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

  return (
    <ReactVideoEditor
      projectId={PROJECT_ID}
      defaultOverlays={DEFAULT_PROJECT_OVERLAYS}
      fps={APP_CONFIG.fps}
      renderer={ssrRenderer}
      showDefaultThemes={true}
    />
  );
}

2. Lambda Rendering (AWS Lambda)

RVE also supports cloud rendering via AWS Lambda, which is recommended for production.

• Scales well with large workloads
• Highly reliable and consistent across environments
• Requires setup with Remotion Lambda

Lambda Code Example

"use client";

import React from 'react';
import { APP_CONFIG } from "../constants";
import { HttpRenderer } from '../../lib/http-renderer';
import { ReactVideoEditor } from '@react-video-editor/core';

export default function Page() {
  const PROJECT_ID = "example-project";

  const lambdaRenderer = React.useMemo(() => 
    new HttpRenderer('/api/render/lambda', {
      type: 'lambda',
      entryPoint: '/api/render/lambda'
    }), []
  );

  return (
    <ReactVideoEditor
      projectId={PROJECT_ID}
      defaultOverlays={DEFAULT_PROJECT_OVERLAYS}
      fps={APP_CONFIG.fps}
      renderer={lambdaRenderer}
      showDefaultThemes={true}
    />
  );
}

3. Client-Side Rendering (Browser Export)

Client-side rendering is the simplest way to get export working - no server setup required. Videos are rendered directly in the user's browser using the WebCodecs API via @remotion/web-renderer.

• Zero backend infrastructure needed
• Automatic MP4 download to the user's device
• Requires Chrome or Edge (WebCodecs support)
• Some features are unavailable in this mode (stickers, animations, 3D layouts)

Client-Side Code Example

"use client";

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

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

Our Recommendation

For getting started, use client-side rendering - it requires zero setup and works immediately.

For production, we recommend Lambda rendering. It scales automatically, handles infrastructure complexity for you, and works in all browsers.

SSR gives you complete control over your rendering infrastructure, which some teams prefer for predictability and cost management.

You can also run hybrid mode - offer both browser export and cloud rendering, letting users toggle between them.

Learn More

• Client-Side Rendering Guide
• Lambda Rendering Guide
• SSR Rendering Guide