Get the Editor Running

This guide assumes you've already installed the SDK. By the end, you'll have a fully functional video editor rendering in your browser — with client-side video export working out of the box.

1. Import the Stylesheet

Add the SDK's CSS to your app's root layout or entry point:

import '@reactvideoeditor/react-video-editor/styles.css';

2. Create the Editor Page

'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 appear with:

• A video player in the centre
• A sidebar with these panels: Video, Camera, Text, Sound, Captions, Images, Shapes, Lottie, Zoom, Background, Templates, and Settings
• A multi-track timeline at the bottom
• Dark theme by default
• Autosave to IndexedDB
• Client-side video export enabled by default

3. What Happens Next

At this point, the editor is fully functional for editing and exporting. Users can add items, arrange them on the timeline, preview their video, and export an MP4 directly from their browser using WebCodecs.

No server endpoints are required for basic usage.

Common Options

Here are the most common props you'll want to configure:

<ReactVideoEditor
  projectId="my-project"

  // Restore a previous session (pass the object from onSave)
  editorState={savedState}

  // Video settings
  fps={30}

  // Appearance
  defaultTheme="dark"
  showDefaultThemes={true}

  // Sidebar
  disabledPanels={['shape', 'zoom']}

  // Optional: add RVE Cloud Rendering or a self-managed renderer
  customRenderer={myRenderer}
  enableWebRender={true}

  // Callbacks
  onSave={(state) => console.log('Editor state saved:', state)}
/>

Panel ids for disabledPanels

disabledPanels takes an array of panel ids. The editor removes these panels from the desktop sidebar.

You cannot remove the Settings panel with disabledPanels.

See the full ReactVideoEditor props reference for all available options.