Using the SDK in a Next.js App

Overview

The RVE SDK works with the Next.js App Router. 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 Next.js example uses Next.js 16.2.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. Import the SDK Styles

Import the stylesheet once in your root layout:

app/layout.tsx

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

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

2. Create a Client Page

The editor uses browser APIs, so its page must be a Client Component.

app/editor/page.tsx

'use client';

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

export default function EditorPage() {
  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 your application and open /editor. The editor uses browser rendering by default. You do not need an API route 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).

app/editor/project-editor.tsx

'use client';

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

// Load savedState in a Server Component and pass it to this Client Component.
export function ProjectEditor({ savedState }: { savedState?: EditorState }) {
  return (
    <main style={{ height: '100vh' }}>
      <ReactVideoEditor
        projectId="my-first-project"
        editorState={savedState}
        onSave={(state) => {
          // Send the state to your API and store it in your database.
          void fetch('/api/projects/my-first-project', {
            method: 'PUT',
            body: JSON.stringify(state),
          });
        }}
      />
    </main>
  );
}

The editor reads editorState only when it mounts. If the browser has a newer autosave than editorState.savedAt, the editor restores the browser autosave. 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. See the rendering overview if your team must use self-managed infrastructure.

Troubleshooting

If you see a Server Component error, confirm that the editor page starts with 'use client';.
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 the SDK stylesheet is in the root layout.