A video editor running entirely in the browser using FFmpeg WASM. No server uploads, no plugins — just drag, drop, and edit.

• User Manual: Comprehensive guide on how to use VEdit.
• Architecture: System design and technical overview.
• Contributing: Guide for developers.

• Trim & Split — Set in/out points, add split markers, export segments
• Merge Clips — Combine multiple videos with automatic re-encoding
• Transform — Rotate, flip, crop, adjust speed (0.5× to 2×)
• Aspect Ratios — Presets for 16:9, 9:16 (TikTok/Reels), 1:1, 4:5
• Live Preview — See transforms applied in real-time before export
• Frame-Accurate — WebCodecs-based splitting with FFmpeg fallback
• PWA Ready — Install as a desktop app, works offline
• Privacy First — All processing happens locally, nothing uploaded

Production Note: Your server must set COOP/COEP headers to enable SharedArrayBuffer for FFmpeg threading:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

# Clone the repository
git clone https://github.com/kidahatsu/vedit.git
cd vedit

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 and drag a video file to get started.

# Build optimized bundle
npm run build

# Preview the production build locally
npm run preview

The production build outputs to dist/ — deploy this folder to any static hosting service.

src/
├── components/          # React components (CSS Modules)
│   ├── VideoPlayer/     # Playback + crop overlay
│   ├── Timeline/        # Trim handles + split markers
│   ├── ClipsPanel/      # Import + clip management
│   ├── TransformPanel/  # Rotate, flip, speed controls
│   ├── ActionBar/       # Export actions
│   └── ExportModal/     # Progress indicator
├── lib/
│   ├── ffmpeg.ts        # FFmpeg WASM integration
│   ├── webcodecs.ts     # WebCodecs splitting
│   ├── storage.ts       # IndexedDB persistence
│   └── logger.ts        # Conditional debug logging
├── store/               # Zustand state management
├── utils/               # Validation, transforms
└── styles/              # Design tokens + globals

See SECURITY.md for vulnerability reporting and architecture security details.

See CONTRIBUTING.md for development setup and guidelines.

See CHANGELOG.md for version history.

MIT — see LICENSE