Using RVE in a Vite App

Step-by-step guide to set up a Vite + React + TypeScript app and integrate React Video Editor (RVE).

Overview

This guide walks you through creating a new Vite app and integrating React Video Editor (RVE). You will:

Create a Vite + React + TypeScript project
Set up Tailwind CSS
Configure TypeScript path aliases and Vite
Add RVE dependencies and migrate code

Prerequisites: Node.js 18+, npm or pnpm, basic familiarity with React and Vite.

Vite starter (invite-only)

You can find a Vite starter for RVE here: react-video-editor-vite. It is invite-only for now since we don't actively maintain it as regularly. Please request access via hello@reactvideoeditor.com. We also welcome your feedback!

Nudge for a Video Tutorial

Tired of reading long wordy docs? Same. Email hello@reactvideoeditor.com and tell Sam (our founder) to make some video tutorials.

Quick checklist

Vite + React + TS app created
Tailwind imported in src/index.css
@ alias points to ./src
RVE deps installed and App.tsx wired

1) Create a Vite app

npm create vite@latest

pnpm create vite

yarn create vite

When prompted:

Select React
Select TypeScript
Choose defaults for the rest

2) Install Tailwind CSS (and plugin)

npm install -D tailwindcss @tailwindcss/vite

npm install -D tailwindcss @tailwindcss/vite

pnpm add -D tailwindcss @tailwindcss/vite

yarn add -D tailwindcss @tailwindcss/vite

In src/index.css, import Tailwind (remove other CSS if present):

@import "tailwindcss";

3) Configure TypeScript base URL and alias

Update your root tsconfig.json to reference the app and node configs and add an @ alias to src:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Also install Node types:

npm install -D @types/node

pnpm add -D @types/node

yarn add -D @types/node

4) Update Vite config

In vite.config.ts:

import path from "path";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

5) Initialize shadcn/ui

npx shadcn@latest init

Choose any color/theme you prefer.

6) Migrate React Video Editor code

a) Add dependencies

Note

Note: Many of these power shadcn/ui components. If you build custom UI components, you may not need all of them.

Merge the following into your package.json dependencies, then install:

{
  "dependencies": {
    "@radix-ui/react-alert-dialog": "^1.1.2",
    "@radix-ui/react-avatar": "^1.1.1",
    "@radix-ui/react-collapsible": "^1.1.1",
    "@radix-ui/react-context-menu": "^2.2.1",
    "@radix-ui/react-dialog": "^1.1.6",
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-popover": "^1.1.2",
    "@radix-ui/react-scroll-area": "^1.1.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slider": "^1.2.0",
    "@radix-ui/react-slot": "^1.2.3",
    "@radix-ui/react-switch": "^1.1.1",
    "@radix-ui/react-tabs": "^1.1.3",
    "@radix-ui/react-toast": "^1.2.1",
    "@radix-ui/react-toggle": "^1.1.0",
    "@radix-ui/react-toggle-group": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.3",
    "@remotion/bundler": "4.0.356",
    "@remotion/cli": "4.0.356",
    "@remotion/google-fonts": "4.0.356",
    "@remotion/lambda": "4.0.356",
    "@remotion/player": "4.0.356",
    "@remotion/renderer": "4.0.356",
    "date-fns": "^4.1.0",
    "mediabunny": "^1.11.2",
    "posthog-js": "^1.268.6",
    "react-best-gradient-color-picker": "^3.0.14",
    "react-hotkeys-hook": "^4.6.1",
    "remotion": "4.0.356",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^10.0.0",
    "zustand": "^4.4.6"
  }
}

Then install:

npm i

b) Adjust TypeScript app config

Note

This may not be needed and may even be some issues we need to fix in RVE Pro but the Vite compiler can be pretty script. Something we need to improve on.

In tsconfig.app.json, ensure these options are set:

{
  "compilerOptions": {
    "verbatimModuleSyntax": false,
    "erasableSyntaxOnly": false
  }
}

c) Copy RVE source

From your RVE Pro project, copy the reactvideoeditor directory into your Vite app under src/reactvideoeditor.
Copy contestants.ts into your Vite app's src directory.

d) Update `src/App.tsx`

Replace your App.tsx with:

import React from "react";

import { HttpRenderer } from "./reactvideoeditor/pro/utils/http-renderer";
import { ReactVideoEditor } from "./reactvideoeditor/pro/components/react-video-editor";
import { createPexelsVideoAdaptor } from "./reactvideoeditor/pro/adaptors/pexels-video-adaptor";
import { createPexelsImageAdaptor } from "./reactvideoeditor/pro/adaptors/pexels-image-adaptor";
import { DEFAULT_OVERLAYS } from "./constants";
import "./reactvideoeditor/pro/styles.css";
import logo from "./assets/logo.png";

export default function SimplePage() {
  // A project ID represents a unique editing session/workspace and
  // must match the composition ID defined in the Remotion bundle.
  const PROJECT_ID = "TestComponent";

  const handleThemeChange = (themeId: string) => {
    console.log("Theme changed to:", themeId);
  };

  // Default renderer points to an SSR endpoint.
  // If you are not using Next.js, point this to your own server endpoint.
  const ssrRenderer = React.useMemo(
    () =>
      new HttpRenderer("/api/latest/ssr", {
        type: "ssr",
        entryPoint: "/api/latest/ssr",
      }),
    []
  );

  return (
    <div className="w-full h-full fixed inset-0">
      <ReactVideoEditor
        projectId={PROJECT_ID}
        defaultOverlays={DEFAULT_OVERLAYS as any}
        fps={30}
        renderer={ssrRenderer}
        disabledPanels={[]}
        defaultTheme="dark"
        sidebarLogo={<img src={logo} alt="Logo" className="w-6 h-6" />}
        adaptors={{
          video: [createPexelsVideoAdaptor("keys")],
          images: [createPexelsImageAdaptor("keys")],
        }}
        onThemeChange={handleThemeChange}
        showDefaultThemes
        sidebarWidth="clamp(350px, 25vw, 500px)"
        sidebarIconWidth="57.6px"
        showIconTitles={false}
      />
    </div>
  );
}

e) Add your logo

Place a logo at src/assets/logo.png (or update the import path) and ensure the sidebarLogo prop in App.tsx points to it.

Here’s a cleaner and better-formatted Markdown version:

7. Environment Variables for Vite

RVE Pro is built on Next.js, which accesses environment variables using the pattern:

process.env.NEXT_PUBLIC_*

In Vite, environment variables use a different convention:

import.meta.env.VITE_*

For example, in render-controls.tsx:

process.env.NEXT_PUBLIC_RENDERING_ENABLED

becomes:

import.meta.env.VITE_RENDERING_ENABLED

Setting Up Environment Variables

Create a file named .env.local (or simply .env) in your Vite project root and define your client-side variables using the VITE_ prefix:

VITE_PEXELS_API_KEY=your_pexels_api_key
VITE_POSTHOG_ENABLED=false
VITE_RENDERING_ENABLED=true

Updating the Codebase

When migrating or copying RVE Pro code, find and replace all occurrences of:

process.env.NEXT_PUBLIC_

with:

import.meta.env.VITE_

throughout your components to ensure compatibility with Vite.

8) Run the app

npm run dev

Open http://localhost:5173.

Notes and troubleshooting

SSR endpoint: The HttpRenderer example references a Next.js API route. In a Vite app, point it to your own server endpoint or choose a different renderer if applicable.
Path alias issues: If imports using @/ fail, confirm your tsconfig.json and vite.config.ts alias setup matches this guide.
Styles not applying: Ensure src/index.css includes @import "tailwindcss"; and that styles.css from RVE is imported in App.tsx.

Using RVE in a Vite App

On this page