DefaultSidebar
Configure the standard sidebar included with the RVE SDK editor
The RVE SDK includes DefaultSidebar inside ReactVideoEditor. It provides the icon rail and the panels for video, text, audio, captions, images, stickers, uploads, templates, and settings.
You normally configure the sidebar through ReactVideoEditor. You do not copy or import an internal sidebar source file.
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';
import { OverlayType } from '@reactvideoeditor/react-video-editor/types';
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={[OverlayType.STICKER, OverlayType.TEMPLATE]}
showIconTitles={false}
/>
);
}Sidebar Props
| Prop | Type | Default | Description |
|---|---|---|---|
showSidebar | boolean | true | Show or hide the standard sidebar |
sidebarLogo | React.ReactNode | RVE logo | Set the logo in the sidebar header |
sidebarFooterText | string | - | Set the text in the sidebar footer |
sidebarWidth | string | "16rem" | Set the width of the content panel |
sidebarIconWidth | string | "3rem" | Set the width of the icon rail |
disabledPanels | OverlayType[] | [] | Hide selected panels |
showIconTitles | boolean | true | Show or hide labels under sidebar icons |
customSidebar | React.ReactNode | - | Replace the standard sidebar |
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
disableMobileLayoutonReactVideoEditorif your application must keep the desktop layout.
See the full ReactVideoEditor props reference for other layout and editor settings.