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.

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.

Optional Server Rendering

For production-scale rendering, add a customRenderer with the SDK HttpRenderer:

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

Then follow the server rendering guide. Do not add a server renderer until you need it.

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.