React Video Editor

This guide walks you through setting up AWS Lambda for Remotion rendering and connecting it with React Video Editor (RVE). It’s beginner-friendly and keeps things simple. We’re just adding our two pence here - be sure to also check the official Remotion Lambda Setup Guide.

Quick Lambda Setup

This part only needs to be done once. It sets up AWS to handle renders for you.

1. Install Remotion Lambda

npm i --save-exact @remotion/lambda@4.0.329

Also update all @remotion/* packages to the same version (no ^ in front).

2. Create Policy

npx remotion lambda policies role

Go to IAM > Policies > Create policy
Paste the JSON output into the AWS field
Name it: remotion-lambda-policy

What’s a policy?

A policy is just a set of permissions. You’re telling AWS, “Hey, let this Lambda function do what it needs to, like access video files, store things on S3, and run code safely.”

3. Create Role

Go to IAM > Roles > Create role
Choose "Lambda"
Attach remotion-lambda-policy
Name it: remotion-lambda-role

What’s a role?

A role gives Lambda the "identity" it needs to access AWS stuff. Think of it like a security badge that says “This Lambda can do these things.”

4. Create a User

IAM > Users > Add user (name it anything)
Skip console access
Create the user

5. Create Access Keys

Go to the user > Security credentials > Access keys
Create new access key for an "Application on AWS compute"
Save the keys
Add them to your .env:

REMOTION_AWS_ACCESS_KEY_ID=xxx
REMOTION_AWS_SECRET_ACCESS_KEY=xxx

What are these keys for?

These keys let your app securely talk to AWS. They're kind of like a username and password, so never share them or commit them to GitHub.

6. Add User Policy

npx remotion lambda policies user

Go to the user > Add inline policy > JSON
Paste the output and create the policy

7. Optional: Validate Setup

npx remotion lambda policies validate

8. Deploy Lambda Function

npx remotion lambda functions deploy

What is this step doing?

This creates the actual Lambda function on AWS. It’s like uploading your code to the cloud so it’s ready to run whenever a render is triggered.

9. Deploy Your Remotion Site

npx remotion lambda sites create src/index.ts --site-name=my-video

Save the printed Serve URL – this is your project’s access point in the cloud.

Whats the Server URL?

This is the URL Lambda uses to load your video code. Every time you change your compositions or visuals, you’ll redeploy and get an updated Serve URL.

10. Check Limits (Optional but Smart)

npx remotion lambda quotas

New AWS accounts may have low limits (e.g. 10 concurrent renders). Ask AWS to increase this if needed.

You’re now set up for cloud rendering!

Linking Lambda to RVE

Once Lambda is ready, here's how to plug it into your React Video Editor setup.

Overview

Frontend (Next.js + Remotion): Where users pick scenes and hit "Render"
API Routes: Talk to Lambda and track render progress
Lambda + S3: Does the actual rendering, delivers final video

Tip: Every time you update your Remotion code, re-run npx remotion lambda sites create to deploy the latest version.

Wassgoingon?

When a user hits "Export" in RVE, your app sends a request to Lambda. Lambda does the rendering in the cloud and uploads the finished video to S3. Your app just listens and gives the user the download link when it’s ready.

File Structure for Remotion

src/
├─ index.ts      // Remotion entry point
├─ main.tsx      // Compositions (res, fps, etc.)
├─ root.tsx      // Renders all compositions

Example index.ts

import { registerRoot } from 'remotion';
import { RemotionRoot } from './root';

registerRoot(RemotionRoot);

Example main.tsx

import { Composition } from 'remotion';
import MyComposition from './MyComposition';

export const Main = () => (
  <Composition
    id="MainVideo"
    component={MyComposition}
    durationInFrames={300}
    fps={30}
    width={1920}
    height={1080}
  />
);

Example root.tsx

import { Main } from './main';

export const RemotionRoot = () => <Main />;

Deploy your updated site

npx remotion lambda sites create src/index.ts --site-name=my-video

API Route to Trigger Render

Create /api/lambda/render.ts to trigger a render job:

import { renderMediaOnLambda } from '@remotion/lambda/client';

export const POST = async (req) => {
  const { id, inputProps } = await req.json();

  const result = await renderMediaOnLambda({
    codec: 'h264',
    composition: id,
    inputProps,
    functionName: process.env.LAMBDA_FUNCTION_NAME,
    region: process.env.AWS_REGION,
    serveUrl: process.env.REMOTION_SITE_URL,
    framesPerLambda: 100,
    maxRetries: 2,
    downloadBehavior: { type: 'download', fileName: 'video.mp4' },
  });

  return Response.json(result);
};

What this is doing...

This API route is like a button behind the scenes. When someone hits "Export", it kicks off a render job in Lambda and tells it what to render, how long it is, and where to put the finished video.

API Route to Poll Render Progress

Create /api/lambda/progress.ts:

import { getRenderProgress } from '@remotion/lambda/client';

export const POST = async (req) => {
  const { id, bucketName } = await req.json();

  const progress = await getRenderProgress({
    renderId: id,
    bucketName,
    functionName: process.env.LAMBDA_FUNCTION_NAME,
    region: process.env.AWS_REGION,
  });

  return Response.json(progress);
};

You're Done!

You've set up:

AWS Lambda for rendering
Remotion frontend and site deployment
Next.js API to render and track progress

For help, check the Remotion Lambda Docs or join the Remotion Discord.

Happy rendering! 🎥

Getting Setup