React Video Editor

Learn the basics of React Video Editor and create your first video editing application

RVE is a browser-based video editor you can fully control. The project started with a pretty simple idea: building a modern video editor shouldn’t be painful. Whether you're prototyping a new idea or shipping production-ready features, RVE makes it easy to work with video inside the browser.

It’s built for teams who want more control over the video editing experience, without needing to reach for native tools or clunky desktop software.

You should be here if you’re:

Building a side project with video as a core feature
Launching a lightweight, browser-first video editor
Expanding an existing product to include video editing tools
Playing with code and curious about what’s possible with video on the web

But what is it?

RVE is a fully working, prebuilt video editor built in React. It’s made of modular components, so you can drop it into your app or shape it into something custom.

What you get out of the box:

Timeline editing – A drag-and-drop timeline to arrange clips, audio, text, and more
Live preview – See changes as you go, frame by frame
Multi-track support – Add layers for video, audio, subtitles, overlays, etc.
Customizable UI – Make it match your product or brand, no rigid templates

It’s the perfect foundation that you can shape however you like.

Quick Example

Here’s a minimal example to get started:

page.tsx

"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}
      />
  );
}

How does it work?

RVE Pro is a Next.js app template. When you buy RVE Pro, you get a fully working Next.js application that runs locally and deploys like any other Next.js project. Inside that app, the editor itself is composed of modular React components (Timeline, tracks, overlays, renderers, etc.), so you can drop them into your own flows or customize them heavily.

Why Next.js?

App-template ready: clone, install, run
SSR/ISR friendly: great DX and production performance
API routes: perfect for render jobs, webhooks, and uploads
Easy deploys: Vercel, AWS, or your platform of choice

While RVE Pro ships as a Next.js app, many of our customers also run RVE inside Vite, CRA, Remix, and other React setups. The core editor components aren’t locked to Next.js - you can pull them into whatever build system you prefer.

Check out the integration guides for examples of using RVE with different frameworks and bundlers.

How some people have been using RVE

✅ Indie devs building AI tools for YouTube Shorts and Reels
✅ Startups adding browser-based editors to existing products
✅ Enterprises replacing old downloadable editors with modern web tools
✅ Agencies building white-label editors for clients
✅ Teams prototyping internal video tools without starting from scratch

Next Steps

Install RVE – Start with the installation guide
Explore Components – Get familiar with the building blocks
Understand Rendering – Explore the different rendering options
Explore our AI Agents – Easily add ai agents to your video editing workflow

Getting Started