Getting Started

The RVE SDK is a production-ready React component library for building video editors. The idea is simple: you shouldn't have to build a video editor from scratch. Drop in our components, wire up rendering, and you've got a fully working editor inside your own app.

It's built for teams who want full control over the editing experience without starting from zero.

You should be here if you're:

• Adding a video editor to an existing product
• Building a standalone editing tool with your own branding
• Prototyping a video-first feature and want to move fast
• Looking for a component library, not a full app template

What You Get

The SDK provides the entire editor interface as composable React components:

• ReactVideoEditor - the main editor shell with player, sidebar, and timeline
• Timeline - multi-track timeline with drag-drop, splitting, keyboard shortcuts
• DefaultSidebar - media panels for video, images, audio, text, stickers, captions
• EditorHeader - top navigation with playback controls and export
• HttpRenderer - client-side utility that connects your editor to your rendering backend
• Media Adaptors - built-in Pexels integration for stock video and images
• Theming - light/dark modes and full whitelabelling support

What You Provide

The SDK is a React component library, not a full application. You're responsible for:

1. A React application - Next.js, Vite, or any React setup
2. Rendering API endpoints - two routes on your server that the SDK calls to export video (we provide example implementations)

How It Works

Your React App
├── <ReactVideoEditor />     ← SDK component (handles all editing UI)
│   └── HttpRenderer          ← calls your backend when user clicks "Export"
│
└── Your Server
    ├── POST /api/render      ← starts a render job
    └── POST /api/progress    ← returns render progress/completion

The user edits in the browser. When they export, the SDK sends the overlay data to your render endpoint. Your server renders the MP4 and returns a download URL.

Quick Example

'use client';

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';

const renderer = new HttpRenderer('/api/render', {
  type: 'ssr',
  entryPoint: '/api/render',
});

export default function Editor() {
  return (
    <ReactVideoEditor
      projectId="my-first-project"
      renderer={renderer}
    />
  );
}

That's it for the frontend. The editor will render with all default panels, a dark theme, and autosave to IndexedDB. The only missing piece is the /api/render and /api/progress endpoints on your server.

Next Steps

• Installation - purchase a plan and install the SDK via npm
• Quick Start - get a working editor on screen
• Setting Up Rendering - build the API endpoints to export video