Managing Projects and Templates in React Video Editor

This is one possible way to structure project and template management in React Video Editor (RVE) version 7. It lets each project load its own isolated state and template from an external source using a PROJECT_ID.

That said, there’s no single "correct" approach. How you implement this depends on your stack and preferences. Some teams might favour a fully client-side setup using local storage, while others will prefer a tightly integrated backend or API-driven approach.

Step-by-Step Implementation

---

Your entry point will likely be app/page.tsx. It should look something like this.

// app/page.tsx
import ReactVideoEditor from "@/components/editor/version-7.0.0/react-video-editor";
import { SidebarProvider } from "@/components/ui/sidebar";

export default function Version7() {
  const PROJECT_ID = "DEFAULT_RVE_PROJECT";

  return (
    <SidebarProvider
      style={
        {
          "--sidebar-width": "350px",
        } as React.CSSProperties
      }
    >
      <ReactVideoEditor projectId={PROJECT_ID} />
    </SidebarProvider>
  );
}

---

1. Determine the PROJECT_ID

Now we need to decide how your app will know which project to load. Some common approaches:

• From the URL (search params) Good for sharing or bookmarking a specific project.

  const PROJECT_ID = searchParams.projectId ?? "DEFAULT_RVE_PROJECT";

• From the logged-in user Handy if users have a default project or saved sessions.

  const PROJECT_ID = user?.defaultProjectId ?? "DEFAULT_RVE_PROJECT";

• From a route param Useful in Next.js when using dynamic routes like /projects/[projectId].

  const PROJECT_ID = params.projectId;

---

2. Fetch the Project Template

Each project ID should map to a template stored on your backend.

const projectTemplate = await fetchProjectTemplate(PROJECT_ID);

Example API call:

GET /api/projects/{PROJECT_ID}/template

This should then return a projectTemplate object containing various information about your project (including the list of overlays from the template).

3. Pass the Template to the Editor

Once you’ve fetched the template, pass it into the editor component:

<ReactVideoEditor projectId={PROJECT_ID} projectTemplate={projectTemplate} />

---

4. Initialise State Inside the Editor

In ReactVideoEditor, hydrate your state using the incoming template:

const { overlays, setOverlays } = useOverlays({
  initialOverlays: projectTemplate.overlays,
});

Once you update the overlays in the project everything will be powered off your projects template.

Its important to remember that its this overlay list that power the majority of RVE. For a deep dive into how overlays power the timeline and editing logic, read Understanding Overlays in RVE.

---

5. Save Changes with Autosave

To persist user edits automatically, use an autosave mechanism that syncs with your backend. Most of the autosave functionality is already implemented in RVE using localStorage and InfluxDB. All you need to do is connect the updates from localStorage to your own storage layer. For example:

PATCH /api/projects/{PROJECT_ID}/template

This keeps the template in sync as users adjust text, timing, media, or layout.

---

Full Example: app/page.tsx

Here’s what the full page.tsx might look like with everything wired up:

// app/page.tsx

import ReactVideoEditor from "@/components/editor/version-7.0.0/react-video-editor";
import { SidebarProvider } from "@/components/ui/sidebar";
import { fetchProjectTemplate } from "@/lib/api";

// Optional: Type definitions
type Overlay = {
  id: string;
  start: number;
  duration: number;
  type: "text" | "image" | "video";
};

type ProjectTemplate = {
  id: string;
  overlays: Overlay[];
  // ...other fields
};

export default async function Page({
  searchParams,
}: {
  searchParams: { projectId?: string };
}) {
  const PROJECT_ID = searchParams.projectId ?? "DEFAULT_RVE_PROJECT";

  const projectTemplate: ProjectTemplate = await fetchProjectTemplate(
    PROJECT_ID
  );

  return (
    <SidebarProvider
      style={
        {
          "--sidebar-width": "350px",
        } as React.CSSProperties
      }
    >
      <ReactVideoEditor
        projectId={PROJECT_ID}
        projectTemplate={projectTemplate}
      />
    </SidebarProvider>
  );
}

---

Summary

This setup offers a clean and scalable way to manage project state in RVE:

• Each PROJECT_ID maps to a specific template
• Data is fetched and stored via an external API
• Overlay state is hydrated using React hooks
• Changes are auto-saved

It’s just one approach, but it lays the groundwork for a modular, persistent editor setup.