Building a privacy-first image editor with FFmpeg + AI in the browser

I built a browser-based image editing app that uses FFmpeg + AI, and the best part is: everything runs locally on your device.

No uploads. No servers. No data leaving the browser.

Why this matters

• Privacy-first — your images never leave your machine
• Faster processing — no network latency
• Works entirely in the browser — thanks to WebAssembly + FFmpeg
• AI-powered enhancements for smarter editing

How it works

1. Load FFmpeg compiled to WebAssembly (@ffmpeg/ffmpeg).
2. Process images in a worker so the UI stays smooth.
3. Apply AI enhancements (upscaling, background cleanup) with on-device or edge models where possible.
4. Export directly via canvas / Blob URLs — nothing hits a server.

// pseudo-flow
const ffmpeg = createFFmpeg({ log: false });
await ffmpeg.load();
ffmpeg.FS('writeFile', 'input.png', await fetchFile(file));
await ffmpeg.run('-i', 'input.png', '-vf', 'scale=1280:-1', 'output.png');
const data = ffmpeg.FS('readFile', 'output.png');

Lessons learned

• Keep heavy work off the main thread — workers are non-negotiable.
• Cache the FFmpeg core with service workers; first load is the expensive part.
• Show progress honestly — WASM processing feels instant until it doesn’t.
• Privacy is a feature: say it, show it, and architect for it.

Want to try it? Ping me on LinkedIn and I’ll share the demo link.