ReactVideoEditor

import React from 'react';
import { HttpRenderer } from '@/app/reactvideoeditor/pro/utils/http-renderer';
import { ReactVideoEditor } from '@/app/reactvideoeditor/pro/components/react-video-editor';
import { createPexelsVideoAdaptor } from '@/app/reactvideoeditor/pro/adaptors/pexels-video-adaptor';
import { createPexelsImageAdaptor } from '@/app/reactvideoeditor/pro/adaptors/pexels-image-adaptor';
import { DEFAULT_OVERLAYS } from '@/app/constants';
import { CustomTheme } from '@/app/reactvideoeditor/pro/hooks/use-extended-theme-switcher';

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

  const availableThemes: CustomTheme[] = [
    { 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}
        defaultOverlays={DEFAULT_OVERLAYS}
        fps={30}
        renderer={ssrRenderer}
        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.