React Video Editor

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

export default function VideoEditorPage() {
  return (
    <div className="w-full h-screen">
      <ReactVideoEditor
        projectId="MyComposition"
        fps={30}
        disabledPanels={[]}
        defaultTheme="dark"
        showDefaultThemes={true}
      />
    </div>
  );
}

import React from 'react';
import { HttpRenderer } from '@reactvideoeditor/react-video-editor/utils/http-renderer';
import { ReactVideoEditor } from '@reactvideoeditor/react-video-editor/react-video-editor';
import { createPexelsVideoAdaptor } from '@reactvideoeditor/react-video-editor/adaptors/pexels-video-adaptor';
import { createPexelsImageAdaptor } from '@reactvideoeditor/react-video-editor/adaptors/pexels-image-adaptor';
import '@reactvideoeditor/react-video-editor/styles.css';

export default function VideoEditorPage() {
  const PROJECT_ID = 'MyComposition';

  const availableThemes = [
    { id: 'rve', name: 'RVE', className: 'rve', color: '#3E8AF5' },
  ];

  const ssrRenderer = React.useMemo(
    () =>
      new HttpRenderer('/api/latest/ssr', {
        type: 'ssr',
        entryPoint: '/api/latest/ssr',
      }),
    []
  );

  return (
    <div className="w-full h-screen">
      <ReactVideoEditor
        projectId={PROJECT_ID}
        fps={30}
        customRenderer={ssrRenderer}
        enableWebRender={true}
        showRenderSettings={true}
        disabledPanels={[]}
        availableThemes={availableThemes}
        defaultTheme="dark"
        sidebarWidth="400px"
        sidebarIconWidth="57.6px"
        showIconTitles={false}
        adaptors={{
          video: [createPexelsVideoAdaptor('YOUR_PEXELS_API_KEY')],
          images: [createPexelsImageAdaptor('YOUR_PEXELS_API_KEY')],
        }}
        onThemeChange={(themeId) => console.log('Theme changed:', themeId)}
      />
    </div>
  );
}

ReactVideoEditor/
├── components/
│   ├── core/
│   │   ├── editor.tsx              # Main editor surface
│   │   └── video-player.tsx        # Remotion-based player
│   ├── shared/
│   │   └── default-sidebar.tsx     # Default sidebar with overlay panels
│   ├── autosave/
│   │   └── autosave-status.tsx     # Autosave UI indicator
│   ├── providers/
│   │   ├── react-video-editor-provider.tsx  # Top-level provider composition
│   │   └── editor-provider.tsx              # Core editor context wiring
│   └── ui/                     # Sidebar/tooltip/button primitives
├── contexts/
│   ├── editor-context.tsx
│   ├── renderer-context.tsx
│   ├── media-adaptor-context.tsx
│   └── sidebar-context.tsx
├── hooks/
│   ├── use-overlays.tsx
│   ├── use-rendering.tsx
│   └── use-extended-theme-switcher.ts
├── utils/
│   └── http-renderer.ts           # HTTP renderer implementing VideoRenderer
├── types/
│   ├── renderer.ts                # VideoRenderer interface
│   ├── overlay-adaptors.ts        # Overlay adaptor interfaces
│   └── index.ts                   # OverlayType, Overlay, etc.
└── constants.ts                   # DEFAULT_OVERLAYS, colors, etc.

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

function Editor({ savedState }: { savedState?: EditorState }) {
  const handleSave = (state: EditorState) => {
    // Persist to your backend
    fetch('/api/projects/my-project', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(state),
    });
  };

  return (
    <ReactVideoEditor
      projectId="my-project"
      editorState={savedState}
      onSave={handleSave}
    />
  );
}

interface EditorState {
  tracks: Track[];
  aspectRatio: AspectRatio;    // '16:9' | '1:1' | '4:5' | '9:16'
  backgroundColor: string;
  playbackRate: number;
  savedAt?: number;            // Unix-ms timestamp, set automatically on every save
}

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

const { width, height } = getCanvasDimensions('16:9');
// → { width: 1920, height: 1080 }