Abu Sufyan

Posted on May 13

How I Built and Deployed WebToolkit Pro — 40+ Free Developer Tools, All Client-Side

#showdev #webdev #buildinpublic #javascript

A few months ago I got frustrated. Every time I needed a quick developer tool — format some JSON, generate a UUID, check a redirect chain — I'd end up on some sketchy site that was slow, plastered with ads, and (worst of all) sending my data to a server I knew nothing about.

So I did what any developer would do: I built my own. Today, WebToolkit Pro is live at wtkpro.site with 40+ free tools — and everything runs 100% in your browser. Zero data leaves your machine.

The problem I was solving

Most online developer tools share the same sins:

They process your data server-side (sending your JWT tokens, passwords, and code snippets to a random server)
They require sign-up to use basic utilities
They're slow, cluttered, and ad-heavy

My goal was simple: build a fast, privacy-first toolkit where every tool runs locally in the browser. No account. No tracking. No friction.

What's in the toolkit

After launch, WebToolkit Pro now covers 6 main categories:

Developer tools — JSON formatter, Base64 encoder/decoder, diff checker, JWT decoder
SEO tools — Sitemap validator, robots.txt checker, JSON-LD schema generator, redirect tracer
Security tools — Password generator, hash generator, UUID generator
Design tools — Favicon generator, CSS gradient animator, text case converter
Network & performance — Redirect chain analyzer, AdSense revenue estimator
Content utilities — Number base converter, cron expression builder

The tech stack and why

Since everything needed to run client-side, my choices were driven by one constraint: no round trips to a server for tool logic.

Frontend

React          — component reuse across 40+ tools
Vanilla JS     — for performance-critical parsing (multi-MB JSON)
CSS custom properties — theming + dark mode

I chose React because building 40+ tools as isolated components meant I could ship new tools fast without touching existing ones. Each tool is its own self-contained module.

The "no server" constraint

Every tool that touches sensitive data (passwords, tokens, code) uses the Web Crypto API or pure JS. Nothing phones home. I added a note to every page stating local processing — and I mean it architecturally, not just as a marketing claim.

Deployment

# Static build → CDN
npm run build
# Deployed to edge CDN for <100ms TTFB globally

Since there's no backend, deployment is just a static build pushed to a CDN. Fast to ship, cheap to run, easy to scale.

The hardest bug I had to fix

The JSON formatter was corrupting large payloads above ~2MB. It wasn't a logic bug — it was a browser rendering bottleneck.

My initial implementation used JSON.stringify(parsed, null, 2) and dumped the result into a textarea. Works fine for small payloads. But for large API responses (think full database exports), the DOM would freeze and sometimes crash the tab entirely.

The fix? I switched to streaming the output in chunks using a chunked render loop, painting 500 lines at a time with requestAnimationFrame. The UI stays responsive, the user sees output appearing progressively, and it never blocks the main thread.

function renderChunked(lines, container) {
  let i = 0;
  function step() {
    const batch = lines.slice(i, i + 500).join('\n');
    container.textContent += batch;
    i += 500;
    if (i < lines.length) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

Simple in hindsight. Took me an embarrassingly long afternoon to figure out.

What I learned building this

Client-side architecture is a genuine product differentiator, not just a tech detail — users notice and care
Building 40 tools sounds overwhelming, but if each one is a self-contained component, it's really just repetition with variation
The Web Crypto API is underused — it's powerful, well-supported, and means you never need a server for common security operations
Ship early. The first version had 12 tools. Adding more after real user feedback was 10x more useful than trying to plan them upfront

Try it

WebToolkit Pro is completely free, no sign-up needed: wtkpro.site

If you find a bug, need a tool that's missing, or just want to say the JSON formatter saved your afternoon — drop a comment below. I read everything.

What's next: I'm currently building TradeConvert.pro — a currency and unit conversion tool built with the same privacy-first philosophy. No API calls for exchange rates that expose your query patterns. Early version dropping soon. Follow me here on DEV to catch it when it lands.

DEV Community