Screen Recorder Mode

Screen Recorder mode changes the editor for recorded-screen workflows. It adds one focused Home panel for backgrounds, screen framing, camera layouts, borders, cursor styling, and cursor-follow zoom.

You can start with one prop and one screen video. Add camera and cursor data only when your recorder supplies them.

What the SDK does

When screenRecordingTools is true, the SDK:

• Adds a Home panel and opens it when the editor loads.
• Gives the screen video controls for padding, roundness, shadow, and borders.
• Adds colour, gradient, image, and built-in wallpaper backgrounds.
• Shows camera layout and framing controls when a camera item exists.
• Shows cursor style and automatic zoom controls when the screen item has pointer data.
• Hides the aspect-ratio and playback-speed controls by default. You can show them again with timelineHeaderConfig.

The SDK does not capture the screen. Your web app, Electron app, or native app records the media and then passes it to RVE as editorState.

Quick start

1. Capture or load a screen video

Use the capture system that fits your product:

• In a browser, use navigator.mediaDevices.getDisplayMedia() and MediaRecorder.
• In Electron, use the Electron desktop capture APIs or a native capture process.
• In a native app, record the screen and give the React view a browser-playable media URL.

Read the recorded file's width, height, and duration before you create the editor state.

2. Create the first editor state

This helper creates one screen item. It is enough to use backgrounds, framing, borders, shadows, and standard timeline edits.

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

type ScreenRecording = {
  src: string;
  width: number;
  height: number;
  durationInSeconds: number;
};

export function createScreenRecordingState(
  recording: ScreenRecording,
  fps = 30,
): EditorState {
  const dimensions = { width: 1920, height: 1080 };
  const screen: VideoItem = {
    id: crypto.randomUUID(),
    type: ItemType.VIDEO,
    content: recording.src,
    src: recording.src,
    from: 0,
    durationInFrames: Math.max(1, Math.ceil(recording.durationInSeconds * fps)),
    mediaSrcDuration: recording.durationInSeconds,
    sourceAspectRatio: recording.width / recording.height,
    left: 160,
    top: 90,
    width: 1600,
    height: 900,
    rotation: 0,
    styles: {
      objectFit: 'contain',
      borderRadius: '1%',
      volume: 1,
    },
  };

  return {
    tracks: [
      {
        id: crypto.randomUUID(),
        name: 'Screen',
        items: [screen],
        magnetic: false,
        muted: false,
        visible: true,
      },
    ],
    dimensions,
    background: { type: 'color', value: '#111827' },
    playbackRate: 1,
    savedAt: Date.now(),
  };
}

3. Turn on Screen Recorder mode

'use client';

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

export function ScreenRecordingEditor({ state }: { state: EditorState }) {
  return (
    <main style={{ height: '100vh' }}>
      <ReactVideoEditor
        projectId="screen-recording"
        editorState={state}
        screenRecordingTools
        fps={30}
        onSave={(nextState) => {
          // Save nextState to your project store.
          console.log(nextState);
        }}
      />
    </main>
  );
}

This is the full basic setup. Do not add the optional data below until your capture layer produces it.

Add a camera recording

Add the camera as a second VideoItem and set mediaRole: 'camera'. This value tells RVE to show camera shapes, framing, shadow, and layout presets.

import {
  ItemType,
  type CameraVideoItem,
} from '@reactvideoeditor/react-video-editor/types';

const camera: CameraVideoItem = {
  id: crypto.randomUUID(),
  type: ItemType.VIDEO,
  mediaRole: 'camera',
  camera: {
    shape: 'square',
    sourceAspectRatio: cameraWidth / cameraHeight,
    shrinkOnCursorZoom: true,
  },
  content: cameraUrl,
  src: cameraUrl,
  from: cameraStartFrame,
  durationInFrames: screenDurationInFrames - cameraStartFrame,
  mediaStartTime: cameraMediaStartTime,
  mediaSrcDuration: cameraDurationInSeconds,
  left: 1530,
  top: 770,
  width: 270,
  height: 270,
  rotation: 0,
  styles: { objectFit: 'cover', volume: 1, zIndex: 100 },
};

Record the screen and camera against the same clock. Use from when the camera starts after the screen. Use mediaStartTime when the camera file starts before the screen file.

Add an editable cursor and automatic zoom

Attach a PointerTrack to the screen VideoItem. RVE uses the samples for cursor playback. It uses the click events to create the first automatic zoom range.

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

const pointer: PointerTrack = {
  version: 1,
  sourceWidth: recording.width,
  sourceHeight: recording.height,
  samples: [
    { timeMs: 0, x: 0.25, y: 0.40, visible: true },
    { timeMs: 100, x: 0.28, y: 0.42, visible: true },
  ],
  events: [
    {
      id: crypto.randomUUID(),
      timeMs: 100,
      type: 'down',
      button: 'primary',
      x: 0.28,
      y: 0.42,
    },
  ],
  settings: {
    visible: true,
    style: 'black',
    size: 1.5,
    clickEffect: true,
  },
};

screen.pointer = pointer;

The x and y values must be in the range from 0 to 1. Times are milliseconds from the start of the screen source file. Keep samples in time order.

After the data is present, the Home panel lets the user change cursor size, show click effects, turn on automatic zoom, set the zoom level, and set the zoom speed.

Mode props

These props control the recorder experience:

For example, show the aspect-ratio selector but keep the playback-speed selector hidden:

<ReactVideoEditor
  projectId="screen-recording"
  editorState={state}
  screenRecordingTools
  timelineHeaderConfig={{
    showAspectRatioControls: true,
    showPlaybackSpeedControls: false,
  }}
/>

Reference product pattern

Screen Recorder uses this same boundary:

1. A native capture process records the screen and audio.
2. The app records the camera separately and keeps both start times.
3. The capture process saves timed pointer samples and click events.
4. The app creates screen, camera, and cursor-zoom tracks in EditorState.
5. The app opens ReactVideoEditor with screenRecordingTools.

This design keeps capture code outside the SDK. It also lets the editor work with browser, Electron, or native capture systems.

Production checklist

• Save permanent media URLs before you save the editor state.
• Keep the screen and camera start times so the tracks stay synchronized.
• Keep source width and height with pointer data.
• Set CORS headers on remote media for browser export.
• Use even output dimensions for H.264 export.
• Test one real recording through capture, edit, save, reload, and export.

For a working product reference, see Screen Recorder and the screen-recorder use case.