@graet/react-video-editor

A React video editor component built on top of diffusion-studio.

Installation

pnpm add @graet/react-video-editor

Usage

import { VideoEditor } from '@graet/react-video-editor';
import '@graet/react-video-editor/styles';

function App() {
  return (
    <VideoEditor
      importedClips={[
        {
          id: '1',
          name: 'Sample Video',
          url: 'https://example.com/video.mp4',
          duration: 30,
          type: 'video',
        },
      ]}
      introductionScreen={{
        name: 'Matej Matejcek',
        dateOfBirth: new Date('2005-03-15'),
        team: {
          id: 'team1',
          name: 'HC Bili Tygri Liberec U15',
        },
      }}
      onStateChange={(state) => console.log('State changed:', state)}
      onExport={(config) => console.log('Export config:', config)}
    />
  );
}

Props

VideoEditorProps

| Prop | Type | Description | |------|------|-------------| | importedClips | VideoClip[] | Array of predefined video clips to import | | introductionScreen | IntroductionScreen | Introduction screen configuration with name, date of birth, and team | | initialState | Partial<EditorState> | Initial editor state for loading saved state | | onStateChange | (state: EditorState) => void | Callback when editor state changes | | onExport | (config: ExportConfig) => void | Callback when export is requested | | onClipAdd | (clip: VideoClip, trackId: string, time: number) => void | Callback when a clip is added | | onClipRemove | (clipId: string, trackId: string) => void | Callback when a clip is removed | | onTimelineChange | (tracks: TimelineTrack[]) => void | Callback when timeline is modified | | className | string | Additional CSS class | | width | string \| number | Editor width | | height | string \| number | Editor height |

Features

• 🎬 Video timeline with multiple tracks
• 📝 Text overlays for introduction screens
• 🎨 Drag and drop clip management
• 🔍 Timeline zoom and navigation
• ⏯️ Playback controls
• 📤 Export functionality
• 💾 State management for saving/loading projects

Development

# Install dependencies
pnpm install

# Build package
pnpm build

# Watch mode
pnpm dev

# Type check
pnpm typecheck

License

UNLICENSED