I Built 58 Free Browser Tools With Zero Backend — Here's the Full Stack

No React. No Vue. No build step. Every tool is a self-contained HTML page with inline <script> tags. Sounds old-school? It is. It also means zero bundle size overhead, instant page loads, and the ability to cache every tool independently via the Service Worker.

58 Tools, 8 Categories

Here's what you can do without uploading a single byte to any server:

📄 PDF Tools (6)

Compress PDF, Merge PDF, PDF to Image, Image to PDF, PDF to Word, Word to PDF.

All powered by pdf-lib running in WebAssembly. The compression works by downsampling embedded images and stripping unused metadata — no quality loss on text, significant size reduction on image-heavy documents.

🖼️ Image Tools (12)

Compress, crop, resize, grid split, pixel art converter, flip & rotate, plus six format converters (JPG ↔ PNG ↔ WebP).

The pixel art converter is one of my favorites. It quantizes colors using median-cut, applies optional dithering (Floyd-Steinberg, ordered, Atkinson), and ships with presets for Game Boy, NES, and SNES palettes. All in ~400 lines of vanilla JS.

🎬 Video Tools (3)

Compress Video, Video to GIF, Video to Audio.

FFmpeg.wasm is a beast. It's a full FFmpeg compiled to WebAssembly — we're talking H.264 encoding/decoding, GIF muxing, and audio extraction, all in a browser tab. The trade-off is a ~25MB WASM download on first use, but it's cached by the Service Worker after that.

🎵 Audio Tools (2)

MP3 to WAV, WAV to MP3.

Web Audio API handles decoding. For MP3 encoding, we use a WASM-based LAME encoder. Bitrate is user-selectable from 128–320 kbps.

📝 Text Tools (6)

Character Counter, Lorem Ipsum Generator, Extract Text (OCR), QR Code Generator, Password Generator, Text Diff.

The Password Generator uses crypto.getRandomValues() — not Math.random(). Customizable length (4–128 chars), character type toggles, real-time strength analysis, and bulk generation up to 50 passwords at once.

Text Diff does line-by-line comparison with additions, deletions, and unchanged lines highlighted — unified or side-by-side view. Built from scratch, no difflib dependency.

🧮 Calculator Tools (4)

Age Calculator, Unit Converter, Percentage Calculator, BMI Calculator.

⏱️ Time & Productivity (6)

Stopwatch, Countdown Timer, World Clock, Pomodoro Timer, Invoice Generator, Timestamp Converter, Daily Planner.

The Daily Planner deserves its own section (see below).

🎮 Creative & Fun (13)

Whiteboard, Random Spinner Wheel, What to Eat?, Ask Fate (Magic 8-Ball), Keyboard Tester, Reaction Time Test, Aim Trainer, CPS Test, Coin Flip, Dice Roller, Color Picker, Gradient Generator, Daily Planner.

The Canvas 2D Rewrite: Why I Ditched html2canvas

The Daily Planner lets you design a weekly schedule and export it as a pixel-perfect PNG or PDF. Version 1 used html2canvas for the export. It worked — mostly. But html2canvas doesn't actually use your browser's rendering engine. It re-implements CSS in JavaScript, reads your DOM, and paints an approximation onto a canvas.

The result? Fonts were slightly off. Border-radius clips were wrong. Gradients didn't match. Every CSS property I added required checking whether html2canvas supported it.

So I ripped it out and wrote raw Canvas 2D API calls:

// Instead of html2canvas re-interpreting my CSS...

ctx.fillStyle = '#0a0a0a';

ctx.fillRect(0, 0, width, height);



ctx.font = '700 28px "Space Grotesk"';

ctx.fillStyle = '#ffffff';

ctx.fillText(title, x, y);



// Rounded rectangles for time slots

ctx.beginPath();

ctx.roundRect(slotX, slotY, slotW, slotH, 12);

ctx.fillStyle = 'rgba(255,255,255,0.04)';

ctx.fill();

ctx.strokeStyle = 'rgba(255,255,255,0.08)';

ctx.stroke();

Pixel-perfect. Zero offset. The export now matches the browser preview exactly. Sometimes the simplest solution is the one you should have picked first.

Privacy by Architecture

This isn't a privacy policy — it's a privacy architecture. There's no server to leak data because there's no server processing data. Your files are read by the browser's File API, processed in local memory, and the output is generated client-side. The only network requests ToolKnit makes are:

1. 
   Google Analytics — page views only, no file data


2. 
   Ahrefs Analytics — same, page views only


3. 
   Google Fonts — loading Space Grotesk

That's it. No telemetry on what files you process, how large they are, or what tools you use. No cookies for tracking individual users. The only local storage is a daily usage counter (500 uses/day fair-use limit) and optional personal bests for gaming tools.

Offline-First: It's a PWA

ToolKnit registers a Service Worker that caches all tool pages and core assets on first visit. After that, you can:

• Disconnect from the internet


• Open any cached tool


• Process files normally

On mobile, you can add ToolKnit to your home screen and it launches like a native app — full-screen, no browser chrome, instant load.

What I Learned Building This

1. Browser APIs are underrated. Canvas, Web Audio, File API, Crypto, Service Workers — you can build a lot before you need a server.




2. WebAssembly is production-ready. pdf-lib and FFmpeg.wasm handle real workloads. The WASM download is the only downside, and caching solves it.




3. Static sites scale infinitely. No server means no server costs, no server crashes, no server maintenance. The only cost is the domain and CDN.




4. Privacy sells itself. I never marketed ToolKnit as a "privacy tool." But when users realize their files never leave their device, they tell other people. Word of mouth from trust is the best marketing channel.




5. One tool at a time. I built and shipped one tool per session, tested it live, then moved on. 58 tools later, the compound effect is real.

Try It

. Follow the journey on GitHub.