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 '@ilovevideoeditor/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 />,
}} />

TIP

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