Custom panels
The editor is built from four top-level panels: Titlebar, Preview, Sidebar, Timeline. Pass a components prop to replace any of them. Your component receives the editor context via hooks — see Hooks & commands.
import { VideoEditor, useEditor } from '@videoflow/react-video-editor';
function MyTitlebar() {
const video = useEditor((s) => s.video);
return (
<header>
<h1>{video.name}</h1>
<button>Export</button>
</header>
);
}
<VideoEditor
video={v}
components={{ Titlebar: MyTitlebar }}
/>Panel defaults
| Panel | Responsibilities |
|---|---|
Titlebar | Project name, undo/redo, Save / Export buttons. |
Preview | The DomRenderer host + transport bar. |
Sidebar | Inspector: selection props, media library, effects. |
Timeline | Tracks, playhead, ruler, drag-and-drop. |
Partial replacement
Pass only the panels you want to replace — the editor keeps its defaults for the rest.
<VideoEditor video={v} components={{
Titlebar: MyTitlebar,
Sidebar: ({ selection }) => selection ? <MyInspector /> : <MyMediaLibrary />,
}} />Don't swap Preview unless you have to. It hosts the DomRenderer instance every other panel assumes exists. If you just want to add overlays, wrap the default preview inside your replacement.
Titlebar slot props
The Titlebar slot is special — when you replace it, the editor forwards the same handlers it would have given the default titlebar.
| Prop | Type | Notes |
|---|---|---|
onExport | () => void | Pre-bound — calls your onExport if set, otherwise opens the built-in export modal. |
onSave | () => void | Pre-bound — calls your onSave with the current video. |
branding | `ReactNode | null |