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 — changes reflect instantly with Next.js Fast Refresh.
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.