RVE LogoReact Video EditorDOCS
React Video Editor Documentation

React Video Editor

Learn about all the components available in React Video Editor

Components

React Video Editor provides a comprehensive set of components that work together to create a full-featured video editing experience.

Core Components

VideoEditor

The main component that wraps the entire video editing interface.

import { VideoEditor } from 'react-video-editor';

<VideoEditor
  width={1200}
  height={800}
  onExport={handleExport}
  onSave={handleSave}
/>

Props:

  • width (number): Width of the editor
  • height (number): Height of the editor
  • theme (string): "light" or "dark"
  • onExport (function): Callback when video is exported
  • onSave (function): Callback when project is saved

Timeline

The timeline component displays your video clips and allows for precise editing.

import { Timeline } from 'react-video-editor';

<Timeline
  tracks={videoTracks}
  duration={totalDuration}
  onClipMove={handleClipMove}
/>

Preview

The preview component shows a real-time preview of your video.

import { Preview } from 'react-video-editor';

<Preview
  currentTime={currentTime}
  videoData={videoData}
  onTimeUpdate={handleTimeUpdate}
/>

UI Components

Toolbar

The toolbar provides quick access to common editing tools.

import { Toolbar } from 'react-video-editor';

<Toolbar
  tools={['cut', 'copy', 'paste', 'delete']}
  onToolSelect={handleToolSelect}
/>

TrackHeader

Displays track information and controls.

import { TrackHeader } from 'react-video-editor';

<TrackHeader
  trackName="Video Track 1"
  isMuted={false}
  onMuteToggle={handleMuteToggle}
/>

Media Components

VideoClip

Represents a video clip on the timeline.

import { VideoClip } from 'react-video-editor';

<VideoClip
  id="clip-1"
  startTime={0}
  duration={10}
  source="video.mp4"
  onResize={handleResize}
/>

AudioClip

Represents an audio clip on the timeline.

import { AudioClip } from 'react-video-editor';

<AudioClip
  id="audio-1"
  startTime={5}
  duration={15}
  source="audio.mp3"
  volume={0.8}
/>

Effect Components

Transition

Applies transitions between video clips.

import { Transition } from 'react-video-editor';

<Transition
  type="fade"
  duration={1}
  startTime={10}
/>

Filter

Applies visual filters to video clips.

import { Filter } from 'react-video-editor';

<Filter
  type="brightness"
  value={1.2}
  startTime={0}
  duration={5}
/>

Layout Components

SplitPane

Divides the interface into resizable sections.

import { SplitPane } from 'react-video-editor';

<SplitPane
  left={<Timeline />}
  right={<Preview />}
  defaultSize={300}
/>

Panel

A collapsible panel for organizing tools and settings.

import { Panel } from 'react-video-editor';

<Panel
  title="Effects"
  isOpen={true}
  onToggle={handlePanelToggle}
>
  <EffectsList />
</Panel>

Custom Components

You can also create custom components that integrate with React Video Editor:

import { useVideoEditor } from 'react-video-editor';

function CustomTool() {
  const { addClip, removeClip, currentTime } = useVideoEditor();
  
  return (
    <button onClick={() => addClip(newClip)}>
      Add Custom Clip
    </button>
  );
}

Component Hierarchy

Here's how the components are typically organized:

VideoEditor
├── Toolbar
├── SplitPane
│   ├── Timeline
│   │   ├── TrackHeader[]
│   │   ├── VideoClip[]
│   │   └── AudioClip[]
│   └── Preview
└── Panel[]
    ├── Effects
    ├── Transitions
    └── Settings

Styling Components

All components support custom styling through CSS classes:

.video-editor-timeline {
  background: #1a1a1a;
  border-radius: 8px;
}

.video-editor-preview {
  border: 2px solid #333;
}

Next Steps