DEV Community

Cover image for How I built a browser-based video editor with FFmpeg.wasm (no backend, no server costs)
gvmaplicaciones
gvmaplicaciones

Posted on

How I built a browser-based video editor with FFmpeg.wasm (no backend, no server costs)

I got tired of opening CapCut every time I needed to quickly join 2-3 clips. Too many menus, too many features I'll never use. So I built my own.
2minclip.com — a free online video editor that runs entirely in the browser. No install, no signup, no watermark.
Here's how I built it and what I learned.

The core idea

The concept is simple: ilovepdf but for video. You open the browser, upload your clips, edit, export. That's it. No account, no server processing, no storage costs.
The key technical decision was using FFmpeg.wasm — a WebAssembly port of FFmpeg that runs entirely in the browser. This means:

  • Zero server costs (users process video on their own device)
  • Complete privacy (videos never leave the user's device)
  • No backend to maintain ## Tech stack
  • React + Vite — fast dev experience, easy deployment
  • FFmpeg.wasm — video processing in the browser
  • Tailwind CSS — styling
  • dnd-kit — drag and drop for the timeline
  • i18next — ES/EN internationalization
  • Vercel — deployment (free tier covers everything) Total infrastructure cost: ~12€/year for the domain. That's it. ## The biggest challenge: audio streams The hardest bug I ran into was this FFmpeg error: Stream specifier ':a' matches no streams It happened when a clip had no audio track. FFmpeg was trying to extract [0:a] from a silent video and failing. The fix was to detect whether each clip has audio before building the filtergraph, and generate silence (aevalsrc=0) for clips without audio.

What it does

  • Upload multiple clips at once (MP4, MOV, WebM)
  • Choose canvas: 9:16 / 16:9 / 1:1
  • Trim with playhead + split button
  • Reorder by dragging
  • Adjust speed (0.5x, 1x, 2x)
  • Flip and rotate clips
  • Add audio tracks with volume control and fade out
  • Add text with fonts and colors
  • Overlay images and videos
  • Export to MP4 H.264 — no watermark, no limits

Lessons learned

FFmpeg.wasm is powerful but slow on mobile. For clips under 60 seconds it works fine. For longer videos on low-end devices it can struggle.
The canvas-first approach is better UX. Choosing the output format before editing eliminates confusion and produces predictable results.
SEO matters from day one. Since this is a tool people search for when they need it, organic search is the main acquisition channel.

Try it

2minclip.com — free, no account, works on mobile and desktop.
Would love feedback — especially if you've worked with FFmpeg.wasm and have tips on improving export performance on mobile.

Top comments (0)