DefaultSidebar

The RVE SDK includes DefaultSidebar inside ReactVideoEditor. It provides the icon rail and the panels for video, camera, text, audio, captions, images, shapes, Lottie, zoom, background, templates, and settings.

You normally configure the sidebar through ReactVideoEditor. You do not copy or import an internal sidebar source file.

Set screenRecordingTools to add a focused Home panel for screen recordings. See Screen Recorder mode for the minimal setup and optional camera and cursor data.

Basic Use

The default sidebar is visible when you render ReactVideoEditor:

import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';
import '@reactvideoeditor/react-video-editor/styles.css';

export default function VideoEditor() {
  return (
    <ReactVideoEditor
      projectId="my-project"
      fps={30}
    />
  );
}

Configure the Sidebar

Use the sidebar props on ReactVideoEditor:

import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';

export default function VideoEditor() {
  const logo = (
    <img src="/my-logo.svg" alt="My Editor" width={32} height={32} />
  );

  return (
    <ReactVideoEditor
      projectId="my-project"
      fps={30}
      sidebarLogo={logo}
      sidebarFooterText="My Video Editor"
      sidebarWidth="400px"
      sidebarIconWidth="57.6px"
      disabledPanels={['shape', 'template']}
      showIconTitles={false}
    />
  );
}

Sidebar Props

Panel IDs

Use these ids in disabledPanels. The icon rail shows the panels in this order.

The Settings panel is always available.

Replace the Sidebar

Pass your own component with customSidebar:

<ReactVideoEditor
  projectId="my-project"
  customSidebar={<MyCustomSidebar />}
/>

When you set customSidebar, the SDK does not show DefaultSidebar.

Responsive Behavior

• Desktop layouts use the icon rail and content panel.
• Mobile layouts use the SDK mobile navigation.
• Set disableMobileLayout on ReactVideoEditor if your application must keep the desktop layout.

See the full ReactVideoEditor props reference for other layout and editor settings.