RVE LogoReact Video EditorDOCS
RVE Pro/Integration Guides/Vite.js/Using RVE in a Vite App

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!

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
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.272",
    "@remotion/cli": "4.0.272",
    "@remotion/google-fonts": "4.0.272",
    "@remotion/lambda": "4.0.272",
    "@remotion/player": "4.0.272",
    "@remotion/renderer": "4.0.272",
    "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.272",
    "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>
  );
}

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

7) 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.

Introduction

Introduction to React Video Editor examples and migration guides