React Video Editor

The RVE Editor is a composable, drop-in editor shell that wires together the core building blocks of a video editing UI: a Remotion-powered player, a modular sidebar with overlay panels, timeline configuration, autosave hooks, theme management, and a renderer abstraction. You stay in control of data and backends via explicit props and adaptors.

Under the hood, RVE uses Remotion for rendering and playback, and exposes a renderer interface (e.g. HTTP/SSR or Lambda) so you can plug in your own backend. Media sourcing is handled by a flexible adaptor layer (e.g. Pexels), while overlays and timeline config remain app-controlled.

Key Features

• Renderer abstraction: Bring your own backend via a simple VideoRenderer interface; ships with HttpRenderer.
• Player-only mode: Fullscreen, responsive player without the editor UI for lightweight embeds.
• Modular sidebar: Default sidebar with pluggable overlay panels; disable or replace with your own.
• Autosave hooks: onSave callback delivers the full serialized EditorState on every save, plus visible autosave status.
• Theming: Custom theme registry, default themes toggle, and external theme switching.
• Media adaptors: Plug-in sources for video, images, audio, text, templates, Lottie, animations, and transcription.
• Timeline config: Control zoom constraints, snapping behavior, and push-on-drag.
• Shapes, keyframes, and templates: See Shapes, Keyframes, and Templates.
• Responsive video sizing: Aspect ratio and explicit dimension controls for predictable layout.
• Mobile-conscious: Player-only mode includes mobile viewport height handling.

Usage Example

Basic (Client-Side Rendering — Default)

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

export default function VideoEditorPage() {
  return (
    <div className="w-full h-screen">
      <ReactVideoEditor
        projectId="MyComposition"
        fps={30}
        disabledPanels={[]}
        defaultTheme="dark"
        showDefaultThemes={true}
      />
    </div>
  );
}

With Server Rendering (Optional)

import React from 'react';
import { HttpRenderer } from '@reactvideoeditor/react-video-editor/utils/http-renderer';
import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';
import { createPexelsVideoAdaptor } from '@reactvideoeditor/react-video-editor/adaptors/pexels-video-adaptor';
import { createPexelsImageAdaptor } from '@reactvideoeditor/react-video-editor/adaptors/pexels-image-adaptor';
import '@reactvideoeditor/react-video-editor/styles.css';

export default function VideoEditorPage() {
  const PROJECT_ID = 'MyComposition';

  const availableThemes = [
    { id: 'rve', name: 'RVE', className: 'rve', color: '#3E8AF5' },
  ];

  const ssrRenderer = React.useMemo(
    () =>
      new HttpRenderer('/api/latest/ssr', {
        type: 'ssr',
        entryPoint: '/api/latest/ssr',
      }),
    []
  );

  return (
    <div className="w-full h-screen">
      <ReactVideoEditor
        projectId={PROJECT_ID}
        fps={30}
        customRenderer={ssrRenderer}
        enableWebRender={true}

        disabledPanels={[]}
        availableThemes={availableThemes}
        defaultTheme="dark"
        sidebarWidth="400px"
        sidebarIconWidth="57.6px"
        showIconTitles={false}
        adaptors={{
          video: [createPexelsVideoAdaptor('YOUR_PEXELS_API_KEY')],
          images: [createPexelsImageAdaptor('YOUR_PEXELS_API_KEY')],
        }}
        onThemeChange={(themeId) => console.log('Theme changed:', themeId)}
      />
    </div>
  );
}

Package Entry Points

You can import only from the entry points that the package exports. Internal source files are not part of the public API.

Props

The ReactVideoEditor component extends the editor provider props and adds UI-level controls. Required props are marked with *.

Notes

• The SDK ships with client-side rendering enabled by default. You do not need to provide a renderer to get video export working.
• The component internally manages a playerRef and wires it into the VideoPlayer. If you need direct player access, read it from the editor context or adapt the provider usage directly.
• Pass a previously-saved EditorState via the editorState prop to seed the editor with initial content.
• The HttpRenderer is a convenience implementation of VideoRenderer that expects REST endpoints at /render and /progress. It is only needed if you want server-side rendering.
• The timeline opens with 4 track rows or fewer. If a project has more tracks, the tracks scroll inside the timeline panel. You can drag the panel taller.

Timeline Thumbnails

Configure generated thumbnails

Use thumbnailInterval to set the number of seconds between generated timeline thumbnails. A smaller value gives a more detailed timeline and uses more processing and cache space. If you omit the prop, the editor chooses an adaptive interval based on the timeline zoom and clip length.

<ReactVideoEditor projectId="my-project" thumbnailInterval={10} />

Changing the prop causes the editor to generate and cache a sprite for the new interval. An invalid value, 0, or NaN restores adaptive interval selection.

Use external preview thumbnails

Set previewThumbnails on a video item—not on ReactVideoEditor—when your video service supplies a thumbnail sprite and a WebVTT file. VTT cues must use #xywh=x,y,width,height Media Fragment rectangles.

const videoItem: VideoItem = {
  src: 'https://video.gumlet.io/.../video.mp4',
  previewThumbnails: {
    sprite: 'https://video.gumlet.io/.../preview_thumbnails.png',
    vtt: 'https://video.gumlet.io/.../preview_thumbnails.vtt',
  },
};

The timeline fits the supplied sprite thumbnails to its cells and ignores cues outside the sprite image. It uses the supplied files without downloading the video to generate thumbnails.

Export Lifecycle

Use the export callbacks to show status in your host application or to monitor an export.

<ReactVideoEditor
  projectId="my-project"
  onExportProgress={({ phase, progress, heartbeat, renderedFrames, encodedFrames }) => {
    console.log({ phase, progress, heartbeat, renderedFrames, encodedFrames });
  }}
  onExportCancel={({ compositionId }) => {
    console.log('Export cancelled', compositionId);
  }}
  onExportFail={({ error }) => {
    console.error('Export failed', error);
  }}
/>

onExportProgress receives these fields:

Browser exports have progress and finalization watchdogs. The progress watchdog restarts when the renderer moves forward. Each of the muxing and storing phases gets a separate finalization deadline. The watchdog deadlines pause when the document is hidden.

Export Options

The exportOptions prop controls the resolution presets shown in the export dialog. When a user clicks "Export", they see a dialog to choose a resolution before rendering begins. The pixel dimensions are calculated automatically based on the current aspect ratio. The same prop also sets the quality of browser exports.

<ReactVideoEditor
  projectId="my-project"
  exportOptions={{
    availableResolutions: ['720p', '1080p', '4k'],
    defaultResolution: '1080p',
    quality: 'high',
  }}
/>

The resolutions map to the short edge of the output — for a 16:9 aspect ratio, 1080p produces 1920×1080, while for 9:16 it produces 608×1080. The dialog shows the calculated pixel dimensions for each option.

Export Quality and File Size

The quality, videoBitrate, and audioBitrate options apply to browser exports only. Cloud renders (SSR, Lambda, or RVE Cloud Rendering) use their own bitrate.

The default preset is 'high'. It encodes 1080p video at 6 Mbps. Earlier versions always used 'very-high' (12 Mbps), so the files were twice as large. To keep the earlier file size, set quality: 'very-high'.

For an exact bitrate, set videoBitrate and audioBitrate in bits per second:

<ReactVideoEditor
  projectId="my-project"
  exportOptions={{ videoBitrate: 2_500_000, audioBitrate: 128_000 }}
/>

The export dialog footer shows the estimated file size for the selected resolution. onExportStart gives the estimate as estimatedSizeInBytes, and onExportComplete gives the real sizeInBytes. The encoder uses a variable bitrate. Thus simple content, such as slides or screen recordings, is usually smaller than the estimate.

If the quality value is not valid, or a bitrate is not a positive number, the export fails before it starts.

To show the estimate in your own UI, use estimateExportSize. Give it the encoded size of the export, not the canvas size:

import {
  estimateExportSize,
  getEncodedExportDimensions,
} from '@reactvideoeditor/react-video-editor/types';

const { width, height } = getEncodedExportDimensions({ width: 1280, height: 720 }, '1080p');
const bytes = estimateExportSize({ width, height, durationInSeconds: 60, quality: 'medium' });

The /types entry point also exports these helpers and types:

• resolveExportBitrates(width, height, options) returns the { videoBitrate, audioBitrate } that a browser export of that size uses.
• DEFAULT_EXPORT_QUALITY is 'high'.
• The types are ExportOptions, ExportResolution, ExportQuality, ExportBitrateOptions, ExportBitrates, and EstimateExportSizeParams.

Composition Dimensions

Set the canvas to an exact pixel size at any ratio via editorState.dimensions. The same size is used in both preview and export.

<ReactVideoEditor
  projectId="my-project"
  editorState={{ tracks, dimensions: { width: 593, height: 4395 } }}
  disableExportModal
/>

How it works:

• Size is the source of truth. You pass dimensions; the aspect-ratio label is derived from it. The ratio dropdown shows a matching preset (16:9, 1:1, …) when one fits, otherwise the raw dimensions (e.g. 594 × 4396). Picking a preset just sets a new size and reframes items.
• Omit dimensions and the canvas defaults to 16:9.
• Export at the exact size. With a custom size, the export dialog adds an "Original" option (the composition size) and selects it by default. It's hidden when a preset already produces that size, so standard sizes like 1920×1080 don't show a duplicate row.
• disableExportModal skips the dialog entirely — the Render button exports immediately at "Original" (the composition size), no scaling. Use it when the canvas size is the output size.
• defaultExportScale lets that immediate-render path export larger than the canvas. The Render button renders at composition size × the scale, so you can edit on a small logical canvas but export at native resolution (e.g. preview 1332×720 with defaultExportScale={2.88} gives ~3840×2076). It only applies together with disableExportModal — the resolution dialog has its own presets and ignores it, so setting the prop without disableExportModal is a no-op.
• Persistence. dimensions is saved in EditorState, so custom sizes survive reload. Pass the object back to restore.

<ReactVideoEditor
  projectId="my-project"
  editorState={{ tracks, dimensions: { width: 1332, height: 720 } }}
  disableExportModal
  defaultExportScale={2.88}
/>

EditorState In, EditorState Out

The onSave callback emits an EditorState on every autosave tick and manual save. Pass that same object back via the editorState prop to restore a session — no destructuring or field mapping required.

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

function Editor({ savedState }: { savedState?: EditorState }) {
  const handleSave = (state: EditorState) => {
    // Persist to your backend
    fetch('/api/projects/my-project', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(state),
    });
  };

  return (
    <ReactVideoEditor
      projectId="my-project"
      editorState={savedState}
      onSave={handleSave}
    />
  );
}

The editor uses timestamp-based conflict resolution to decide whether to restore from local IndexedDB or use the provided editorState:

• editorState with savedAt — compared against the local autosave timestamp. Whichever is newer wins. Local changes made after the last server save are preserved; fresh server data takes priority over stale local state.
• editorState without savedAt — IndexedDB is always restored if a local save exists. The prop is treated as a fallback for when no local state is available.
• editorState omitted — falls back to IndexedDB or internal defaults.

The savedAt field is stamped automatically on every save and included in the onSave payload — persist it alongside the rest of the state and pass it back.

The EditorState type contains source-of-truth fields only (no derived values):

interface EditorState {
  tracks: Track[];             // See Tracks and Items
  dimensions?: { width: number; height: number }; // Canvas size at any ratio. Omit for the 16:9 default (1280×720). See Composition Dimensions
  aspectRatio?: AspectRatio;   // Deprecated — prefer `dimensions`. '16:9' | '1:1' | '4:5' | '9:16' | 'custom'
  background?: CanvasBackground; // Composition background. It is not a timeline item
  backgroundColor?: string;    // Deprecated — prefer `background`. Saved output still includes it
  playbackRate: number;
  savedAt?: number;            // Unix-ms timestamp, set automatically on every save
}

type CanvasBackground =
  | { type: 'color'; value: string }
  | { type: 'gradient'; value: string }
  | { type: 'image'; src: string; fit: 'cover' | 'contain'; position: string; blur: number; wallpaperId?: string }
  | { type: 'css'; value: string }; // Keeps legacy CSS backgrounds

For the structure of tracks, see Tracks and Items.

Need pixel dimensions for an aspect ratio? Use the exported getCanvasDimensions utility:

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

const { width, height } = getCanvasDimensions('16:9');
// Result: { width: 1920, height: 1080 }

Next Steps

• Get started with the default sidebar panels and overlays — client-side export works out of the box.
• Connect RVE Cloud Rendering through customRenderer for production workloads.
• Use self-managed SSR or Lambda only when your team must own the rendering infrastructure.
• Add media sources via adaptors (e.g. Pexels for images/videos).
• Learn the editing tools and shortcuts in Editing and Shortcuts.
• Customize themes and integrate your app's theme switching UX.