DEV Community

Zihang Dong 董子航
Zihang Dong 董子航

Posted on

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

Every "free online tool" site I've ever used follows the same playbook: upload your file to their server, wait, download the result — usually after a signup wall, a file-size cap, or a watermark slapped on your output. Your data sits on someone else's machine, and you just have to trust that they delete it.

I didn't love that. So I built ToolKnit58 free online tools that run entirely in your browser. No backend server. No file uploads. No accounts. No database. Just static HTML, CSS, JavaScript, and a pile of WebAssembly.

Here's how it all works under the hood.


The Architecture: There Is No Server

ToolKnit is a static site. Every page is plain HTML served from a single origin. There is no Express server, no Lambda function, no S3 bucket receiving your files. When you compress a PDF on ToolKnit, the compression happens on your device. When you convert a PNG to WebP, your browser's Canvas API does the pixel work. Nothing leaves your machine.

This isn't a philosophical choice — it's a technical one. Browser APIs in 2026 are powerful enough to handle 90% of what people use online tools for. The remaining 10% (think: server-side AI, heavy video transcoding at scale) doesn't justify compromising on privacy for the other 90%.

The Tech Stack

Layer Technology
PDF pdf-lib (WebAssembly) — compress, merge, split, convert
Video FFmpeg.wasm — compress, convert to GIF, extract audio
Image Canvas API + OffscreenCanvas — format conversion, crop, resize, compress, pixel art
Audio Web Audio API + AudioContext — MP3 ↔ WAV conversion, video audio extraction
OCR Tesseract.js — extract text from images
Crypto Web Crypto API — password generation with true randomness
Export Canvas 2D API — pixel-perfect PNG/PDF export for the Daily Planner
Styling Tailwind CSS + Space Grotesk — consistent B&W theme across all 58 tools
Offline Service Worker — full PWA, works without internet after first visit

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();
Enter fullscreen mode Exit fullscreen mode

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

toolknit.com — 58 free tools, zero uploads, works offline.

If ToolKnit has ever saved you five minutes, or helped you avoid installing yet another sketchy desktop app — share it with someone. Drop it in a Reddit thread. Mention it to a colleague. Every recommendation means the world to a solo developer shipping code at midnight.


Built by Zihang Dong. Follow the journey on GitHub.

Top comments (0)