DevToolBox — 7 developer utilities, zero network requests
Last month I was debugging an API integration and pasted a response containing auth tokens into a popular online JSON formatter.
Out of habit, I had DevTools open. I watched it fire off a POST request to some analytics endpoint — with my pasted content in the body.
That was my wake-up call. These "free tools" aren't free. You're paying with your data.
So I Built My Own
DevToolBox — 7 developer utilities where the processing is verifiably client-side.
Not "trust us, we don't store it." Actually zero network calls. Open your Network tab while using any tool. Nothing fires.
Live: https://devtoolbox-henna-three.vercel.app
The Tools
| # | Tool | What It Does |
|---|---|---|
| 1 | JSON Formatter | Format, minify, validate. Custom indentation. |
| 2 | Regex Tester | Real-time highlighting. Pattern library. Flag toggles. |
| 3 | Base64 | Encode/decode with proper UTF-8 (most tools break on emojis). |
| 4 | JWT Decoder | Header + payload + expiry check. Color-coded. |
| 5 | Hash Generator | MD5, SHA-1, SHA-256, SHA-512. Uses Web Crypto API. |
| 6 | URL Encoder | encodeURI vs encodeURIComponent modes. |
| 7 | Color Converter | HEX ↔ RGB ↔ HSL with live preview swatch. |
Why "Zero Network Calls" Matters
Think about what you paste into online tools:
- API responses with auth tokens
- JWT tokens from production systems
- Base64-encoded credentials
- Internal URLs and endpoints
Every one of those is a potential security incident if it ends up in someone's analytics pipeline.
The Technical Stack
Framework: Next.js 14 (App Router, static generation)
Language: TypeScript (strict)
Styling: Tailwind CSS
Hosting: Vercel free tier
Monthly cost: $0
Key architectural decisions:
- All tool logic is pure JavaScript — no external API calls for any computation
- Static generation — every page is pre-rendered HTML, served from edge CDN
- Web Crypto API for hashing — browser-native, no third-party crypto libraries
- PWA manifest — installable, works offline after first load
The SEO Strategy (for fellow builders)
Each tool targets a specific search keyword:
| Tool | Target Keyword | Monthly Volume |
|---|---|---|
| JSON Formatter | "json formatter online" | ~90K |
| Regex Tester | "regex tester" | ~60K |
| Base64 | "base64 encode" | ~40K |
| JWT Decoder | "jwt decoder" | ~30K |
| Hash Generator | "sha256 hash generator" | ~20K |
Each page has:
- Unique title + meta description targeting that keyword
- JSON-LD structured data (WebApplication schema)
- Auto-generated Open Graph image
- Canonical URL
- Breadcrumb schema
The thesis: rank for long-tail dev tool queries → free organic traffic → monetize with non-intrusive ads.
What I Learned
Privacy is a feature, not just ethics. People actively search for "json formatter no tracking" and similar queries.
Client-side only = infinite scalability at $0. No matter how much traffic hits this, Vercel's edge network handles it. No Lambda cold starts, no database connections, no scaling concerns.
One tool per page is the correct SEO architecture. Don't build a single-page tool collection. Each page should target one keyword independently.
PWA installability matters. Once someone installs it, they bypass search entirely for repeat usage. Direct traffic is the best traffic.
What's Next
Adding weekly based on community requests:
- Cron Expression Builder
- Unix Timestamp Converter
- JSON Diff Viewer
- Markdown Previewer
Try It
https://devtoolbox-henna-three.vercel.app
Open DevTools → Network tab → use any tool → verify zero requests yourself.
What dev tool do you use where you've wondered "where does my data go?" I'll build a zero-trust version of whatever gets the most engagement here.
Top comments (1)
How did you handle logging and error reporting in DevToolBox without making any network calls? I'd love to swap ideas on this, following you for more content on building secure dev tools.