DEV Community

tony huang
tony huang

Posted on

Building browser-only tools that never upload your files (the local-first web stack)

#productivity

Most online tools quietly ship your files to a server: your photos, your invoices, your subtitle files, your client documents. There is a different way — build the whole tool client-side, so nothing ever leaves the device. I've been shipping a family of free tools built on this principle, and this post is the practical stack behind them.

The core pattern

  1. Static site export. The app is a Next.js static export on Cloudflare Pages — there is no backend to receive your files in the first place. Privacy is structural, not a policy promise.
  2. Canvas API for anything pixel-shaped: downscaling, palette quantisation, crops.
  3. WebAssembly for codecs that never shipped in browsers: HEIC decoding, WebP/AVIF encoding, GIF optimisation.
  4. WebCodecs + seeking for video work without ffmpeg.
  5. Plain text processing where "format" just means text with rules.
  6. Web Workers so the main thread keeps breathing during heavy transforms.

What this looks like in practice

  • Image format conversion — wasm builds of libheif/libwebp mean you can convert HEIC or WebP entirely locally, with batch support and no file-size ceiling. Live example: ImageConverter.
  • GIF compression — scale, colour-reduce and drop frames in a worker. Live example: GifCompressor.
  • Video frames — the browser can decode and seek video natively now: pull evenly spaced frames with timestamps, grab one exact frame, or scan a long clip for motion. No ffmpeg install, nothing uploaded. Live example: FrameExtractor.
  • Pixel art conversion — canvas downscale + palette quantisation turns photos into game-ready sprites. Live example: PixelArt.
  • Subtitle repair — SRT/VTT/ASS are just text with rules, so parsing, resyncing and merging run instantly client-side. Live example: SubToolbox.
  • Calculators — pure JavaScript, zero I/O: aspect ratios (https://aspectratio.site), marketplace seller fees (https://sellerfees.org), construction materials (https://buildcalcs.best), electrical/HVAC tables (https://tradecalcs.best), even baby wake windows (https://wakewindows.best).

The honest trade-offs

Client-side is not free of constraints. Large files on low-RAM phones will hurt; you're bounded by the device instead of a server farm. Heavy AI inference is still mostly a server story (though small models in WASM are getting real). And some features — accounts, sync, sharing — reintroduce a backend by definition.

But for a huge category of "give me a file, give me a different file back" problems, the browser is now enough. The user gets instant results, offline capability, and privacy that isn't just a checkbox. If you're building tools in 2026, it's worth asking first: could this run entirely on the client? For us, the answer is usually yes — and it makes the product better, not just cheaper.

All the tools linked above are free, require no sign-up, and run 100% in your browser. Feedback welcome in the comments.

Top comments (0)