Using the SDK in a Vite App

Overview

The RVE SDK works with Vite and React. Install it from the private npm registry.

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:

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

4. Add the Editor

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.

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.

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.