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, stickers, templates, and animations.
• Timeline config: Control rows, zoom constraints, snapping behavior, and push-on-drag.
• 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>
  );
}

Component Structure

ReactVideoEditor/
├── components/
│   ├── core/
│   │   ├── editor.tsx              # Main editor surface
│   │   └── video-player.tsx        # Remotion-based player
│   ├── shared/
│   │   └── default-sidebar.tsx     # Default sidebar with overlay panels
│   ├── autosave/
│   │   └── autosave-status.tsx     # Autosave UI indicator
│   ├── providers/
│   │   ├── react-video-editor-provider.tsx  # Top-level provider composition
│   │   └── editor-provider.tsx              # Core editor context wiring
│   └── ui/                     # Sidebar/tooltip/button primitives
├── contexts/
│   ├── editor-context.tsx
│   ├── renderer-context.tsx
│   ├── media-adaptor-context.tsx
│   └── sidebar-context.tsx
├── hooks/
│   ├── use-overlays.tsx
│   ├── use-render.ts
│   └── use-extended-theme-switcher.ts
├── utils/
│   └── http-renderer.ts           # HTTP renderer implementing VideoRenderer
├── types/
│   ├── renderer.ts                # VideoRenderer interface
│   ├── overlay-adaptors.ts        # Overlay adaptor interfaces
│   └── index.ts                   # OverlayType, Overlay, etc.
└── constants.ts                   # DEFAULT_OVERLAYS, colors, etc.

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.

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.

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

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.

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, defaultExportScale={2.88} → ~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[];
  dimensions?: { width: number; height: number }; // Canvas size at any ratio. Omit → 16:9 default. See Composition Dimensions
  aspectRatio?: AspectRatio;   // Deprecated — prefer `dimensions`. '16:9' | '1:1' | '4:5' | '9:16' | 'custom'
  backgroundColor: string;
  playbackRate: number;
  savedAt?: number;            // Unix-ms timestamp, set automatically on every save
}

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');
// → { width: 1920, height: 1080 }

Next Steps

• Get started with the default sidebar panels and overlays — client-side export works out of the box.
• Optionally wire up a server renderer (SSR or Lambda) via customRenderer for production workloads.
• Add media sources via adaptors (e.g. Pexels for images/videos).
• Customize themes and integrate your app's theme switching UX.