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.

On macOS, use Cmd instead of Ctrl for keyboard shortcuts.

• Bun (recommended) or Node.js 18+

git clone https://github.com/magic-peach/reframe.git
cd reframe
bun install

bun run dev

Open 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 build

Reframe supports a theme toggle in the header that switches between light, dark, and a high-contrast mode. The app remembers your choice in localStorage and will respect your system preference when no explicit choice is saved.

• Use the theme button in the top-right to switch modes.
• The selected theme is persisted across sessions.
• You can override the theme manually in the browser console by setting localStorage.setItem('theme', 'dark') (values: light, dark, high-contrast) and reloading the page.

Outputs a static site to out/ — deploy to Vercel, Netlify, GitHub Pages, or any static host.

Reframe uses static export (output: 'export'), so it can be deployed to any static hosting provider.

Reframe uses static export (output: 'export') and can be deployed easily on Vercel.

1. Fork this repository
2. Go to https://vercel.com/new
3. Import your forked repository
4. Configure:
   • Framework Preset: Next.js
   • Build Command: bun run build
   • Output Directory: leave blank (Vercel auto-detects out for static exports)
5. Click Deploy

Vercel will automatically build and host the static output.

# Install Vercel CLI globally
npm i -g vercel

# Login to Vercel
vercel login

# Deploy from project root
vercel --prod

FFmpeg.wasm requires COOP/COEP headers for SharedArrayBuffer support.

Add the following to vercel.json:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin"
        },
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "require-corp"
        }
      ]
    }
  ]
}

You can also deploy Reframe on other static hosting providers:

The quickest way to get Reframe live:

Option 1 — Vercel Dashboard (Recommended)

1. Fork this repository on GitHub
2. Go to vercel.com/new and import your fork
3. Vercel auto-detects Next.js settings:
   • Framework Preset: Next.js
   • Build Command: bun run build
   • Output Directory: leave blank (Vercel auto-detects out for static exports)
4. Click Deploy — your site will be live in ~2 minutes

Option 2 — Vercel CLI

# Install Vercel CLI globally
npm i -g vercel

# Login to Vercel
vercel login

# Deploy from project root
vercel --prod

Note: FFmpeg.wasm requires COOP/COEP headers for SharedArrayBuffer support. On Vercel, add a vercel.json in your project root:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
      ]
    }
  ]
}

1. Push your fork to GitHub
2. Open Netlify and import the repository
3. Configure:
   • Build command: bun run build
   • Publish directory: out
4. Deploy the site

Note: FFmpeg browser features may require proper CORS headers depending on hosting setup.

Build the static export:

bun run build

The production files will be generated in the out/ directory.

You can deploy the out/ folder using:

• GitHub Pages
• gh-pages branch
• GitHub Actions workflow

For detailed technical information about Reframe's architecture, design choices, and implementation details, see the Architecture Documentation.

Reframe requires WebAssembly (WASM) support to process videos in the browser.

This project uses Next.js Fast Refresh in development mode. Most changes to React components, hooks, and styles are reflected instantly in the browser without restarting the dev server.

• Component updates appear immediately
• State is often preserved during edits
• Restarting npm run dev is usually unnecessary for UI changes

Learn more: https://nextjs.org/docs/architecture/fast-refresh

Changes to ffmpeg.ts may not hot-reload correctly because FFmpeg initialization and WebAssembly modules can persist in memory.

If updates are not reflected:

• Perform a full browser page reload
• Clear cached worker instances if necessary
• Restart the development server only when required

FFmpeg WASM reference: https://ffmpegwasm.netlify.app/docs/overview

FFmpeg WebAssembly assets can be large and may take time to download during development.

Use the browser DevTools Network tab to:

• Verify FFmpeg assets are loading correctly
• Inspect caching behavior
• Detect failed .wasm or worker requests
• Measure initialization performance

Chrome DevTools: https://developer.chrome.com/docs/devtools/network

Install React DevTools for easier component inspection and debugging.

Helpful for:

• Inspecting component props and state
• Tracing re-renders
• Debugging hooks
• Monitoring React component trees

React DevTools: https://react.dev/learn/react-developer-tools

The browser console provides important runtime diagnostics for:

• FFmpeg initialization issues
• Hydration warnings
• API request failures
• WebAssembly loading errors

Filtering logs by warnings/errors can speed up debugging significantly.

Development builds include source maps, allowing you to debug original TypeScript/React source files directly from DevTools.

Tips:

• Set breakpoints in source files
• Use async stack traces
• Inspect runtime variables during rendering

JavaScript debugging guide: https://developer.chrome.com/docs/devtools/javascript

FFmpeg WebAssembly processing can consume significant browser memory during video operations.

Recommendations:

• Close unused tabs while testing
• Refresh the page after heavy processing tasks
• Monitor memory usage in browser performance tools

Performance tools: https://developer.chrome.com/docs/devtools/performance

After modifying .env.local, restart the Next.js development server because environment variables are loaded only during server startup.

Example:

npm run dev

Environment variables guide: https://nextjs.org/docs/app/guides/environment-variables

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'26 label to any issue you want to work on, and mention your GitHub username in a comment to claim it.

→ Browse all GSSoC'26 issues

1. Find an issue — Browse open issues or pick one from the table above
2. Comment on the issue — Say you'd like to work on it so we don't duplicate effort
3. Fork the repo — Click the Fork button at the top right
4. Create a branch — git checkout -b feat/your-feature-name
5. Make your changes — Code, test, and commit
6. Open a Pull Request — Reference the issue number in your PR description
7. Get reviewed — We'll review and merge your contribution!

See CONTRIBUTING.md for the full guide including development setup, code style, and PR checklist.

Thanks to all the amazing people who have contributed to Reframe!

We welcome contributions of all kinds — code, documentation, design, and feedback. Check out our Contributing Guide to get started.

MIT License — See LICENSE for details.