Introduction

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
• Client-side export - browser-based video rendering via WebCodecs, no server needed
• HttpRenderer - optional utility that connects your editor to a server 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

That's it. The SDK ships with client-side rendering by default — users can export videos directly in their browser without any server setup. If you need higher quality or production-scale rendering, you can optionally add server rendering via API endpoints.

How It Works

Your React App
├── <ReactVideoEditor />     ← SDK component (handles all editing UI)
│   └── Built-in WebCodecs    ← renders video in the browser when user clicks "Export"
│
└── Optional: Your Server     ← only needed for production-scale rendering
    ├── POST /api/render      ← starts a render job
    └── POST /api/progress    ← returns render progress/completion

The user edits in the browser. When they export, the video is rendered client-side and downloaded as an MP4 — no server required. For production workloads, you can optionally add a server renderer.

Quick Example

'use client';

import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';
import '@reactvideoeditor/react-video-editor/styles.css';

export default function Home() {
  return (
    <ReactVideoEditor
      projectId="my-first-project"
      fps={30}
      disabledPanels={[]}
      defaultTheme="dark"
      showDefaultThemes={true}
      sidebarWidth="clamp(350px, 25vw, 500px)"
      sidebarIconWidth="57.6px"
      showIconTitles={false}
    />
  );
}

That's it. The editor will render with all default panels, a dark theme, autosave to IndexedDB, and client-side video export out of the box. No server endpoints needed.

Next Steps

• Installation - purchase a plan and install the SDK via npm
• Quick Start - get a working editor on screen
• Client-Side Rendering - how browser export works (enabled by default)
• Setting Up Server Rendering - optional server rendering for production scale