Introduction
Introduction to React Video Editor rendering
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 two primary 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
Still confused?
SSR Rendering means your videos get processed on a server (either your local machine during development, or your own server in production) instead of in the cloud.
Think of it like having your own video processing workshop - you have complete control over how and where your videos get made. It's included with RVE Pro and works right out of the box, but you can also customize it to point to your own server setup if needed.
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
Still confused?
Lambda Rendering offloads the rendering process to the cloud using AWS Lambda. Instead of relying on your local machine, everything happens on scalable cloud infrastructure. Faster, more reliable, and production-ready.
It's ideal when you're ready to ship, automate exports, or handle heavier rendering workloads without slowing down your own device.
RVE comes with built-in support for Lambda, just wire it up and you're good to go. More on setup here.
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}
/>
);
}Our Recommendation
We recommend starting with Lambda rendering for most projects. While SSR gives you complete control, it means you're responsible for managing your own server infrastructure, handling scaling, and maintaining the rendering environment. Lambda scales automatically and handles all the infrastructure complexity for you.
That said, it's really about personal preference and your specific needs - some teams prefer the control and predictability of their own servers, while others love the simplicity of serverless.