A lightweight, browser-based video editor built with React and FFmpeg.wasm
A fast, no-nonsense video editor for quick edits.
No installation. No sign-up. Open and edit.
- Video Preview — Real-time canvas-based preview with playback controls
- Volume Control — Adjust main video volume with precision
- Multi-Track Timeline — Set start and end times for each overlay element
- Image Overlays — Add images with full position, size, and opacity control
- Video Overlays — Layer videos on top of your base video
- Text Overlays — Customizable text with font, size, color, outline, and background options
- Audio Overlays — Add audio tracks with independent volume control
- Fade In — Smooth opacity transition from 0% to 100%
- Fade Out — Smooth opacity transition from 100% to 0%
- Configurable Duration — Set fade duration in seconds for each overlay
- FFmpeg.wasm Processing — Client-side video rendering using WebAssembly
- Progress Tracking — Real-time export progress indicator
- Direct Download — Download the final video as MP4
- Minimalist Design — Clean olive, black, and white color palette
- Theme Support — Green (default), Dark, and Light themes
- Multi-Language — English, Spanish, and Italian translations
- Responsive Layout — Optimized for desktop and mobile devices
- Drag & Drop — Move overlays directly on the canvas
| Layer | Technology |
|---|---|
| Framework | React 19 |
| Language | TypeScript |
| Build Tool | Vite |
| Styling | CSS Variables |
| Video Processing | FFmpeg.wasm |
| Deployment | Vercel |
# Clone the repository
git clone https://github.com/your-username/lareditor.git
cd lareditor
# Install dependencies
pnpm install
# Start development server
pnpm dev# Type check and build
pnpm build
# Preview production build
pnpm previewsrc/
├── components/
│ ├── AudioControls.tsx # Audio file management
│ ├── ExportPanel.tsx # Render and download controls
│ ├── MainVideo.tsx # Volume and video settings
│ ├── OverlayManager.tsx # Overlay creation and editing
│ ├── VideoPreview.tsx # Canvas-based video preview
│ └── VideoUploader.tsx # File upload with drag & drop
├── hooks/
│ └── useFFmpeg.ts # FFmpeg.wasm integration
├── types/
│ └── index.ts # TypeScript interfaces
├── i18n.ts # Multi-language translations
├── App.tsx # Main application component
├── App.css # Application styles
└── index.css # Global styles and themes
- Upload Video — Drag and drop or click to select your base video
- Add Overlays — Use the sidebar to add images, videos, text, or audio
- Edit Properties — Click on any overlay to adjust position, size, timing, and animations
- Preview — Use the playback controls to review your edits
- Export — Click "Render Video" and wait for processing
- Download — Click "Download Result" to save your edited video
| Action | Shortcut |
|---|---|
| Play/Pause | Click play button |
| Seek | Drag timeline slider |
| Move Overlay | Click and drag on canvas |
LarEditor uses modern web APIs including:
- WebAssembly (FFmpeg.wasm)
- Canvas API
- File API
- Blob URLs
Supported browsers:
- Chrome 90+
- Firefox 89+
- Safari 15+
- Edge 90+
Note: Mobile browsers may have limited performance due to FFmpeg.wasm resource requirements.
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the GNU General Public License v3.0 — see the LICENSE file for details.
- FFmpeg.wasm — Client-side video processing
- Vite — Fast build tooling
- React — UI framework
Built with care for people who value their time