Every developer has a collection of bookmarked tool websites. One for JWT decoding, another for JSON formatting, another for generating UUIDs,another for regex testing.
Most of them have three problems:
- They upload your data to a server. You paste an internal API response, a JWT containing user IDs, or a private config file — and it silently goes to someone else's backend.
- Ads are injected directly into the tool area, breaking concentration right when you're debugging something.
- They're slow. A 200 KB React bundle to render a textarea and a button.
So I built DevToolbox — 51 tools that run entirely in your browser. Nothing is ever transmitted to a server.
What's included
The tools cover the most common daily tasks:
- JSON Formatter & Validator — beautify, minify, error detection with line numbers
- JWT Decoder — inspect header/payload/expiry without exposing your token
- Regex Tester — real-time matching with capture group highlights
- Base64 Encoder/Decoder — text, images, and file drag-and-drop
- Hash Generator — MD5, SHA-1, SHA-256, SHA-512 via Web Crypto API
- UUID Generator — v1/v4/v7, bulk generate up to 10,000, export CSV
- Cron Expression Builder — visual scheduler + next 5 run times
- SQL Formatter — MySQL, PostgreSQL, SQLite dialect support
- DNS Lookup & SSL Checker — via Cloudflare DoH and CT logs
- ...and 42 more
The architecture decision: Astro over Next.js
The hard requirement was Lighthouse Performance > 95 on mobile. That ruled out any framework that ships a full SPA runtime by default.
With Next.js static export, even a page with zero interactivity ships ~200 KB of JavaScript. That's the React runtime, the router, and the hydration scaffolding — none of which a formatting tool needs.
Astro's island architecture solved this cleanly. The page shell —header, layout, SEO content, FAQ, related tools — is pure static HTML with zero JavaScript. The interactive tool component hydrates as a React island only when it scrolls into view (client:visible).
Result: tool pages ship ~40 KB of JS instead of 200+ KB. LCP on mobile 4G is under 1.5 seconds.
Keeping data client-side: the tricky cases
Most tools are straightforward — JSON parsing, Base64 encoding, regex matching all have native browser APIs. But two tools needed a server:
SSL Checker
uses certificate transparency logs (crt.sh). That API has no CORS headers, so a browser fetch fails. Solution: a Cloudflare Pages Function acts as a thin proxy. The query goes browser → CF Worker → crt.sh, so your domain query never comes directly from your IP.
DNS Lookup
uses Cloudflare's DNS-over-HTTPS API (cloudflare-dns.com/dns-query), which does support CORS. This one works directly from the browser with no proxy needed.
Things I learned building 51 tools
Keyboard shortcuts matter more than I expected.
Adding Ctrl+Enter to run and Ctrl+K to clear on every tool changed the feel completely. Tools become faster to use than a terminal command.
"Load Example" removes the blank-slate problem.
Before I added example buttons, new users would land on a tool, see an empty textarea,and leave. One click to load sample data drops that friction entirely.
History is underrated.
Storing the last 8 inputs in localStorage means you can close a tab and come back to where you were. Implemented with a small useHistory hook and a dropdown — about 60 lines of code,but disproportionately useful.
Static sites + edge functions is a surprisingly good stack for
tool sites.
You get the SEO and performance benefits of static HTML for everything that doesn't need a server, and edge functions for the few things that do. No backend to maintain, no database,scales infinitely on Cloudflare's free tier.
What's next
- Shareable URLs for all tools (hash-based state, already works in JSON Formatter and Base64)
- More tools: TOML↔JSON, HTTP Header Analyzer, OpenAPI validator
- Offline PWA support
If there's a tool you reach for daily that's missing, I'd genuinely like to know — either in the comments here or on the site.
Top comments (0)