Reframe is a browser-based video editor — everything happens on your device. Your videos are never sent to any server. No account needed. No fees. Just open and edit.
Built for everyone — whether you're a creator resizing videos for social media, or just someone who wants to quickly trim and convert without installing bulky software.
- Instant Resizing — 11 preset formats (Reels, TikTok, YouTube, Instagram, etc.) + custom dimensions
- Flexible Framing — Fit (letterbox) or Fill (crop) to your target aspect ratio
- Precise Trimming — Cut start and end times with real-time duration validation
- Rotation — 0°, 90°, 180°, 270° rotation support
- Audio Control — Keep or mute audio independently
- Speed Control — 0.25x to 4x playback speed with smooth audio adjustment
- Quality Settings — CRF slider for quality vs. file size trade-offs
- Smooth UX — Lottie animations, live export progress, instant download
Everything stays on your device. No servers. No tracking. No login.
- Bun (recommended) or Node.js 18+
git clone https://github.com/magic-peach/reframe.git
cd reframe
bun installbun run devOpen http://localhost:3000 — component changes reflect instantly with Next.js Fast Refresh, so you usually do not need to restart the dev server. For FFmpeg reload notes and debugging tools, see the Development Tips.
bun run buildOutputs a static site to out/ — deploy to Vercel, Netlify, GitHub Pages, or any static host.
Reframe is a fully static app. Deploy the out/ folder anywhere:
| Platform | Command |
|---|---|
| Vercel | Connect your fork at vercel.com/new |
| Netlify | Connect your fork at netlify.com |
| GitHub Pages | Push out/ to gh-pages branch |
| Cloudflare Pages | Connect your fork in the Cloudflare dashboard |
- Push your fork to GitHub
- Open Netlify and import the repository
- Configure:
- Build command:
bun run build - Publish directory:
out
- Build command:
- Deploy the site
Note: FFmpeg browser features may require proper CORS headers depending on hosting setup.
Build the static export:
bun run buildThe production files will be generated in the out/ directory.
You can deploy the out/ folder using:
- GitHub Pages
gh-pagesbranch- GitHub Actions workflow
- Load Video → User selects a file → App detects resolution and duration
- Build Recipe → User adjusts presets, framing, trim, speed → Creates
EditRecipe - Export → Click Export → FFmpeg WASM loads from CDN (~30 MB, cached after first use) → Filtergraph runs locally → File downloads
- Done → Your edited video is ready. Nothing was uploaded anywhere.
graph TD
A["UI Layer · Next.js Components"] --> B["VideoEditor · FileUpload · PresetSelector · FramingControl · TrimControl"]
A --> C["AudioSpeedControl · RotateControl · ExportSettings"]
B --> D["useVideoEditor Hook · State Management"]
C --> D
D --> E["ffmpeg.ts · Lazy-loads WASM, builds filter chains"]
E --> F["FFmpeg.wasm · Single-threaded core via CDN · ~30MB"]
F --> G["Video Pipeline: trim → rotate → scale/crop → speed"]
G --> I["Output: MP4 or WebM · Blob URL → Download"]
| File | Purpose |
|---|---|
src/components/VideoEditor.tsx |
Root component; layout, state orchestration |
src/hooks/useVideoEditor.ts |
State management (file, recipe, export status) |
src/lib/ffmpeg.ts |
FFmpeg wrapper; lazy-loads WASM, builds filter chains |
src/lib/presets.ts |
11 preset definitions (9:16, 16:9, 4:5, etc.) |
src/lib/types.ts |
TypeScript types for EditRecipe, ExportResult, etc. |
src/components/*.tsx |
Individual control panels (Trim, Rotate, Speed, Quality) |
| Layer | Tech |
|---|---|
| Framework | Next.js 15 (App Router, static export) |
| Language | TypeScript 5 |
| Styling | Tailwind CSS v3 |
| Icons | Lucide React |
| Animations | Lottie Web |
| Video Processing | FFmpeg.wasm (single-threaded) |
| Fonts | Bebas Neue · Syne · DM Sans |
| Browser | Support | Notes |
|---|---|---|
| Chrome 90+ | ✅ Full | Recommended |
| Firefox 89+ | ✅ Full | |
| Safari 15+ | ✅ Full | |
| Edge 90+ | ✅ Full | |
| Mobile Chrome | ✅ Full | |
| Mobile Safari | Large files may be slow |
Reframe requires WebAssembly (WASM) support to process videos in the browser.
Reframe is an open-source project and we welcome contributions of all kinds — from fixing a typo in the README to implementing a brand new feature. Every contribution matters.
Reframe is an official project in GirlScript Summer of Code (GSSoC) 2026! We have 300+ open issues across all difficulty levels — from beginner-friendly tasks to advanced features.
If you're a GSSoC participant, add the
gssoc'26label to any issue you want to work on, and mention your GitHub username in a comment to claim it.
| Level | Label | Description |
|---|---|---|
| 🟢 Beginner | good first issue |
Small, well-defined tasks — perfect if this is your first open source contribution |
| 🟡 Intermediate | enhancement |
Feature improvements and UX enhancements |
| 🔴 Advanced | feature |
New features requiring deeper understanding of FFmpeg/WASM |
| 🔵 Any Level | documentation |
Docs, guides, and README improvements |
| ♿ Any Level | accessibility |
Making Reframe usable for everyone |
- Find an issue — Browse open issues or pick one from the table above
- Comment on the issue — Say you'd like to work on it so we don't duplicate effort
- Fork the repo — Click the Fork button at the top right
- Create a branch —
git checkout -b feat/your-feature-name - Make your changes — Code, test, and commit
- Open a Pull Request — Reference the issue number in your PR description
- Get reviewed — We'll review and merge your contribution!
See CONTRIBUTING.md for the full guide including development setup, code style, and PR checklist.
Thank you to everyone who has contributed to Reframe! 🎉
Reframe processes all videos 100% client-side. Your video files are never uploaded to any server. You can even use Reframe offline (after first load). The source code is fully open for inspection.
MIT License — See LICENSE for details.
If Reframe saved you time, please ⭐ star the repo — it helps others discover it!
Made with ❤️ for everyone who just wants to edit a video without the hassle.