Using the SDK in a Vite App

Overview

The RVE SDK works with Vite and React. 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.
The SDK Vite example uses Vite 7.3 with React 19.2.

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. Create a Vite App

Skip this step if you already have a Vite React application.

npm create vite@latest my-video-app -- --template react-ts
cd my-video-app
npm install

2. Install the SDK

Follow the SDK installation guide to configure npm authentication and install the package. Use your registry token. Do not put the token in source control.

3. Import the SDK Styles

Import the stylesheet once in your application entry file:

src/main.tsx

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

4. Add the Editor

src/App.tsx

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

export default function App() {
  return (
    <main 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}
      />
    </main>
  );
}

Run the application:

npm run dev

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/App.tsx

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

const saved = localStorage.getItem('my-project');
const savedState: EditorState | undefined = saved ? JSON.parse(saved) : undefined;

export default function App() {
  return (
    <main style={{ height: '100vh' }}>
      <ReactVideoEditor
        projectId="my-first-project"
        editorState={savedState}
        onSave={(state) => localStorage.setItem('my-project', JSON.stringify(state))}
      />
    </main>
  );
}

This example uses localStorage to keep it short. In production, send the state to your server. 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. Your Vite client must call your own server route. Do not expose the Cloud Rendering API key through a VITE_ variable.

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.
Keep registry tokens in environment variables. Do not use a VITE_ prefix for a secret token because Vite exposes those values to the browser.

Using the SDK in a Vite App

On this page