Get the Editor Running
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 — 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 panels for video, images, text, audio, stickers, and captions
- 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 overlays, 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.
Want server rendering?
For production workloads, you can optionally add a server renderer for higher quality output or to support browsers that don't have WebCodecs (Firefox, Safari). See Setting Up Server Rendering to implement API endpoints.
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={['sticker']}
// Optional: add server rendering
customRenderer={myRenderer}
enableWebRender={true}
showRenderSettings={true}
// Callbacks
onSave={(state) => console.log('Editor state saved:', state)}
/>See the full ReactVideoEditor props reference for all available options.