Using RVE in a Pure React App

Overview

This guide shows how to add React Video Editor (RVE) to any React application, regardless of your bundler or toolchain. Whether you're using Create React App, Parcel, esbuild, Rspack, or a custom Webpack setup — RVE works anywhere React runs.

You will:

• Confirm your bundler can handle CSS imports
• Set up Tailwind CSS
• Configure TypeScript path aliases
• Add RVE dependencies and migrate code
• Get the editor running with client-side rendering (enabled by default)

Prerequisites: Node.js 18+, npm or pnpm, a working React 18+ or 19+ app with a module bundler.

Quick checklist

• React 18+ or 19+ app with a module bundler
• Tailwind CSS configured and imported
• @ alias points to ./src
• RVE deps installed and editor component wired
• Client-side rendering works out of the box (optional: add server rendering backend)

1) Confirm your bundler handles CSS imports

RVE ships a pre-built styles.css. Your bundler needs to handle CSS imports — all modern bundlers do this out of the box:

• Webpack (CRA, custom): Built-in via css-loader + style-loader
• Parcel: Built-in, zero config
• esbuild: Built-in with --bundle
• Rspack: Built-in

No special plugin is needed.

2) Install Tailwind CSS

If your project doesn't already use Tailwind, install it with PostCSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

In tailwind.config.js, include your source paths:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{ts,tsx,js,jsx}",
  ],
  theme: { extend: {} },
  plugins: [],
};

In your main CSS file (e.g. src/index.css), import Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

3) Configure TypeScript path alias

In your tsconfig.json, add the @ alias:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

You also need to configure your bundler to resolve the same alias. Here are examples for common setups:

// craco.config.js
const path = require("path");

module.exports = {
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
};

// webpack.config.js
const path = require("path");

module.exports = {
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
};

// build.js
require("esbuild").build({
  // ...
  alias: {
    "@": "./src",
  },
});

Also install Node types:

npm install -D @types/node

pnpm add -D @types/node

yarn add -D @types/node

4) Initialize shadcn/ui (optional)

npx shadcn@latest init

Choose any color/theme you prefer.

5) Add dependencies

Copy the dependencies from your RVE Pro project's package.json into your app's package.json.

{
  "dependencies": {
    "@radix-ui/react-alert-dialog": "^1.1.2",
    "@remotion/bundler": "4.0.465",
    "@remotion/cli": "4.0.465",
    "@remotion/google-fonts": "4.0.465",
    "@remotion/lambda": "4.0.465",
    "@remotion/player": "4.0.465",
    "@remotion/renderer": "4.0.465",
    "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.465",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^10.0.0",
    "zustand": "^4.4.6"
  }
}

Then install:

npm i

6) Copy RVE source

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

7) Wire up the editor

Create your editor component (e.g. src/Editor.tsx):

import React from "react";

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 "@/reactvideoeditor/pro/styles.css";
import logo from "./assets/logo.png";

export default function Editor() {
  const PROJECT_ID = "TestComponent";

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

Then render it from your app entry point (e.g. src/App.tsx or src/index.tsx):

import Editor from "./Editor";

function App() {
  return <Editor />;
}

export default App;

8) Optional: Set up server rendering

The SDK ships with client-side rendering enabled by default — no server endpoints are required. If you need server rendering for production workloads, add the customRenderer prop:

import { HttpRenderer } from "@/reactvideoeditor/pro/utils/http-renderer";

const ssrRenderer = React.useMemo(
  () =>
    new HttpRenderer("http://localhost:3001/api/render", {
      type: "ssr",
      entryPoint: "http://localhost:3001/api/render",
    }),
  []
);

// Add to your ReactVideoEditor:
// customRenderer={ssrRenderer}
// enableWebRender={true}

You'll need an HTTP endpoint to handle rendering. Options:

• A separate Express/Fastify/Hono server
• A serverless function (AWS Lambda, Cloudflare Workers, etc.)

See the Setting Up Server Rendering guide for the full API contract.

9) Environment variables

RVE Pro was originally built on Next.js, which uses process.env.NEXT_PUBLIC_*. In a pure React app, you need to use whatever convention your bundler supports:

When migrating RVE Pro code, find and replace all occurrences of process.env.NEXT_PUBLIC_ with your bundler's convention.

10) Add your logo

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

11) Run the app

npm start

The port depends on your setup (CRA defaults to http://localhost:3000).

Notes and troubleshooting

• No 'use client' needed: Unlike Next.js, you don't need "use client" directives — everything is client-side in a pure React app. The 'use client' strings in RVE's output are harmless and ignored by non-Next.js bundlers.

• Server rendering is optional: The SDK renders video client-side by default. Server rendering via customRenderer is only needed for production-scale workloads or to support browsers without WebCodecs.

• Path alias issues: If imports using @/ fail, confirm both your tsconfig.json and your bundler's alias config match.

• Styles not applying: Ensure your main CSS file includes Tailwind directives and that styles.css from RVE is imported in your editor component.

• ESM vs CJS: RVE ships both formats. If your bundler has trouble with one, check its module resolution settings. Most modern bundlers prefer ESM (.mjs) automatically.