Quick Start
Get a working video editor on screen in under 5 minutes
This guide assumes you've already installed the SDK. By the end, you'll have a fully functional video editor rendering in your browser.
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 { useMemo } from 'react';
import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';
import { HttpRenderer } from '@reactvideoeditor/react-video-editor/utils/http-renderer';
export default function EditorPage() {
const renderer = useMemo(
() => new HttpRenderer('/api/render/ssr', {
type: 'ssr',
entryPoint: '/api/render/ssr',
}),
[]
);
return (
<ReactVideoEditor
projectId="my-first-project"
renderer={renderer}
/>
);
}That's it for the frontend. The editor will appear with:
- A video player in the centre
- A sidebar with panels for video, images, text, audio, stickers, and captions
- A multi-track timeline at the bottom
- Dark theme by default
- Autosave to IndexedDB
3. What Happens Next
At this point, the editor is fully functional for editing — users can add overlays, arrange them on the timeline, and preview their video.
To enable exporting (rendering the final MP4), you need to set up two API endpoints on your server. The HttpRenderer you configured above will call:
POST /api/render/ssr/render— to start a render jobPOST /api/render/ssr/progress— to poll for progress
Head to Setting Up Rendering to implement these endpoints.
Common Options
Here are the most common props you'll want to configure:
<ReactVideoEditor
projectId="my-project"
renderer={renderer}
// Start with pre-built content
defaultOverlays={[...]}
// Video settings
fps={30}
defaultAspectRatio="16:9"
// Appearance
defaultTheme="dark"
showDefaultThemes={true}
// Sidebar
disabledPanels={['sticker']}
// Callbacks
onSaving={(isSaving) => console.log('Saving:', isSaving)}
onSaved={(timestamp) => console.log('Saved at:', timestamp)}
/>See the full ReactVideoEditor props reference for all available options.