Quick Start

This guide connects the RVE SDK to Cloud Rendering through secure server routes. The API key stays on your server.

1. Get beta access

View RVE Cloud Rendering and apply for beta access. After approval, open Cloud Renders in the RVE Portal and activate the service for your account.

2. Create an API key

Open Manage API keys in the RVE Portal. Create a key and copy it when the portal shows it. Store it in your server environment.

.env.local

RVE_CLOUD_RENDER_API_KEY=your_key
RVE_API_URL=https://api.reactvideoeditor.com

Keep the key on your server

Do not use a NEXT_PUBLIC_ variable. Do not add the key to browser code, logs, analytics, or error messages.

3. Add the render route

The SDK sends the render contract to your application server. Your server adds authentication and forwards the request to RVE.

app/api/cloud-rendering/render/route.ts

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const apiKey = process.env.RVE_CLOUD_RENDER_API_KEY;
  const apiUrl = process.env.RVE_API_URL;

  if (!apiKey || !apiUrl) {
    return NextResponse.json(
      { error: 'Cloud Rendering is not configured.' },
      { status: 500 },
    );
  }

  const response = await fetch(`${apiUrl}/renders/render`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${apiKey}`,
      'Content-Type': 'application/json',
      'Idempotency-Key': request.headers.get('Idempotency-Key') ?? crypto.randomUUID(),
    },
    body: await request.text(),
  });

  return new NextResponse(await response.text(), {
    status: response.status,
    headers: { 'Content-Type': 'application/json' },
  });
}

4. Add the progress route

app/api/cloud-rendering/progress/route.ts

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const apiKey = process.env.RVE_CLOUD_RENDER_API_KEY;
  const apiUrl = process.env.RVE_API_URL;

  if (!apiKey || !apiUrl) {
    return NextResponse.json(
      { error: 'Cloud Rendering is not configured.' },
      { status: 500 },
    );
  }

  const response = await fetch(`${apiUrl}/renders/progress`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${apiKey}`,
      'Content-Type': 'application/json',
    },
    body: await request.text(),
  });

  return new NextResponse(await response.text(), {
    status: response.status,
    headers: { 'Content-Type': 'application/json' },
  });
}

Add your normal session and account checks to both routes. A signed-in customer must not be able to submit work for a different account.

5. Connect the RVE SDK

Create an HttpRenderer that points to the two routes. HttpRenderer adds /render and /progress to the base path.

app/editor/page.tsx

'use client';

import { useMemo } 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 EditorPage() {
  const cloudRenderer = useMemo(
    () =>
      new HttpRenderer('/api/cloud-rendering', {
        type: 'lambda',
        entryPoint: '/api/cloud-rendering',
      }),
    [],
  );

  return (
    <ReactVideoEditor
      projectId="customer-video"
      fps={30}
      customRenderer={cloudRenderer}
      enableWebRender={false}
    />
  );
}

Set enableWebRender={true} if you also want to offer browser rendering. Cloud Rendering remains available through the custom renderer.

Cloud workers cannot read a browser blob: URL or a file that exists only on the user's device. Upload local files before the render starts. Use public HTTPS URLs or signed URLs that stay valid for the full render.

Read the media and rendering guide

7. Test one render

Use a short video with accessible media URLs.

Start the export from the editor.
Confirm that the job appears under Cloud Renders in the RVE Portal.
Watch the job move from progress to done.
Download and play the output.
Confirm that a failed job shows a useful error.

After this test passes, continue with batch rendering and AI agents.