Using the SDK in a React App

Overview

The RVE SDK works in React applications that can load npm packages and CSS. Install it from the private npm registry.

Requirements

React and React DOM ^18.0.0 or ^19.0.0.
All remotion and @remotion/* packages at one identical version. The SDK uses 4.0.481.
A bundler that can import a CSS file from a package and resolve the package exports subpaths.

Your app does not need Tailwind CSS. The SDK stylesheet is precompiled.

Before you start

Complete the SDK installation guide. It explains how to create a registry token and install the private package and its peer dependencies.

1. Import the SDK Styles

Import the stylesheet once in your application entry file:

src/main.tsx

import '@reactvideoeditor/react-video-editor/styles.css';

2. Create the Editor Component

src/Editor.tsx

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

export default function Editor() {
  return (
    <div style={{ height: '100vh' }}>
      <ReactVideoEditor
        projectId="my-first-project"
        fps={30}
        disabledPanels={[]}
        defaultTheme="dark"
        showDefaultThemes={true}
        sidebarWidth="clamp(350px, 25vw, 500px)"
        sidebarIconWidth="57.6px"
        showIconTitles={false}
      />
    </div>
  );
}

3. Render the Component

Add the component to your application:

src/App.tsx

import Editor from './Editor';

export default function App() {
  return <Editor />;
}

Start your normal development command. The editor uses browser rendering by default. You do not need a rendering server for the first test.

Save and Load Projects

Use editorState to load a saved project. Use onSave to store the latest state. The editor calls onSave at each autosave (every 10 seconds by default).

src/Editor.tsx

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

export default function Editor({
  savedState,
  onSaveProject,
}: {
  savedState?: EditorState;
  onSaveProject: (state: EditorState) => void;
}) {
  return (
    <div style={{ height: '100vh' }}>
      <ReactVideoEditor
        projectId="my-first-project"
        editorState={savedState}
        onSave={onSaveProject}
      />
    </div>
  );
}

The editor reads editorState only when it mounts. See Integration Guides.

Production Rendering

For production-scale rendering, connect the SDK to RVE Cloud Rendering with a secure server proxy and customRenderer:

import { HttpRenderer } from '@reactvideoeditor/react-video-editor/utils/http-renderer';

Follow the Cloud Rendering quick start. See the rendering overview if your team must use self-managed infrastructure.

Troubleshooting

If npm returns an authentication error, check your registry token and .npmrc settings in the installation guide.
If Remotion reports a version mismatch, make all @remotion/* package versions identical.
If the editor has no styles, confirm that you imported the SDK stylesheet once.

Using the SDK in a React App

On this page