I Built 28 Developer Tools That Run Entirely in Your Browser — Here's What I Learned

Body

Every developer has a collection of bookmarked tool websites. JSON formatter here, Base64 encoder there, JWT decoder somewhere else. Most of them are bloated with ads, require sign-ups, or — worst of all — send your data to a server.

I decided to build DevTK — a single place for 28 essential developer tools, all running 100% client-side.

What's Inside

Here's the full tool list:

Format & Preview: JSON Formatter, SQL Formatter (8 SQL dialects), Markdown Preview

Encode/Decode: Base64, URL Encoder, JWT Decoder, Base64 Image Encoder

Generators: UUID, Hash (MD5/SHA), Lorem Ipsum, QR Code, Password Generator (Web Crypto API)

Converters: Color (HEX/RGB/HSL), Timestamp, YAML ↔ JSON, CSV ↔ JSON, Number Base, Text Case (10 formats)

Minifiers: HTML, CSS, JavaScript

Validators: JSON Schema (Ajv), Cron Expression Parser, Chmod Calculator

Power Tools: JSON Explorer (handles 100MB+ files), WASM Call Stack Resolver

Utilities: Regex Tester, Diff Checker

Architecture Decisions Worth Sharing

1. Tool Registry Pattern

Adding a new tool is just 4 steps:

1. Write logic    → src/lib/tools/xxx.ts
2. Write component → src/components/tools/XxxTool.tsx
3. Register       → src/lib/registry.ts (one object)
4. Add i18n       → messages/en.json + zh.json

Routes, SEO metadata, sitemap entries, and the homepage grid are all auto-generated from the registry. This pattern has scaled from 8 to 28 tools without any refactoring.

2. Lazy Parsing for Large Files

The JSON Explorer was the most challenging tool. Opening a 100MB JSON file in a browser would normally crash the tab. My approach:

• Use a Web Worker with a custom scanner that indexes the file without fully parsing it
• Only parse nodes when the user expands them in the tree view
• Search uses key:value syntax and navigates via a pre-built chain, so it doesn't need to expand every node

This lets you browse 500MB+ JSON files smoothly. I wrote a detailed blog post about the algorithm.

3. Shareable URLs

Every tool encodes its state into URL parameters. When you format a JSON, test a regex, or generate a hash, you can copy the URL and share it — the recipient sees the exact same state.

The implementation uses a useRegisterShare hook that each tool calls to register its serializable state with the layout.

4. Bilingual from Day One

Using next-intl, every string in the app has English and Chinese translations. The site auto-detects the browser's language and routes accordingly. This was straightforward with Next.js App Router's [locale] segment.

Tech Stack

Layer	Choice
Framework	Next.js 15 (App Router, static export)
Language	TypeScript
Styling	Tailwind CSS 4 + shadcn/ui
i18n	next-intl v4
Hosting	Cloudflare Pages (free tier)

Total hosting cost: $0/month.

What's Next

• More tools every month (aiming for 40+ by mid-year)
• Blog posts that drive organic SEO traffic
• Exploring EthicalAds for sustainable revenue

Try It Out

👉 devtk.dev

All feedback welcome — especially tool requests. What dev tools do you reach for daily that you wish were faster or simpler?