Tags: webdev, javascript, opensource, productivity
The Problem
Every developer uses online tools daily. Format some JSON. Test a regex. Decode a JWT. Compare a diff.
But most online tool sites have a dirty secret: they upload your data to their servers. That JWT token you just pasted? It's been logged. That JSON with API keys? Stored somewhere.
On top of that, they're slow, covered in pop-ups, and half of them require sign-ups to do basic things.
What I Built
DevToolBox — 16 developer tools that run entirely in your browser. No backend server. No uploads. No sign-up. No tracking.
Live site: devtoolboxes.net
Open source: github.com/tanumuki/dev_tool_box
The Full Tool List
| Category | Tools |
|---|---|
| Developer | JSON Explorer, Diff Checker, Regex Playground, Cron Visualizer, JWT Decoder, Markdown Preview |
| Encoding | Base64 Encoder/Decoder, URL Encoder/Decoder, Hash Generator |
| Files | PDF Tools (merge/split/compress/rotate/watermark), Image Compressor |
| Design | CSS Generators, Color Palette, OG Preview, QR Generator |
| Utility | Timestamp Converter |
The "Zero Upload" Guarantee
Don't take my word for it. Open any tool, open your browser's Network tab, and use it. You'll see zero outbound requests. Everything processes in JavaScript on your machine.
Technical Decisions
Framework: Next.js with static export. Every page is prerendered at build time and served via Vercel's CDN. No server-side rendering needed since there's no dynamic data.
PDF Tools: Uses pdf-lib which runs entirely in the browser. Merge, split, compress, rotate, and watermark — all client-side.
Hash Generator: SHA-1, SHA-256, SHA-384, SHA-512 use the Web Crypto API (crypto.subtle.digest). MD5 required a custom JavaScript implementation since the Web Crypto API doesn't support it.
JWT Decoder: Just atob() and JSON.parse(). No jsonwebtoken dependency needed for decoding (verification requires the secret key, which is a server-side concern).
Markdown Preview: Built a custom parser using regex. No marked, no remark, no react-markdown. Handles headings, bold, italic, code blocks, lists, links, images, blockquotes, and horizontal rules.
Styling: Tailwind CSS with a dark theme. Glass-card components with backdrop blur. Gradient accents.
SEO Strategy
Each tool page has:
- JSON-LD structured data (WebApplication + FAQPage + BreadcrumbList schemas)
- 4-5 FAQ entries targeting real search queries (e.g., "How do I decode a JWT token?")
- Related tools section for internal linking
- Optimized meta descriptions with canonical URLs
The homepage has Organization and WebSite schemas with a SearchAction for Google's sitelinks searchbox.
Total: 20 pages in the sitemap, all statically generated.
What's Next
- Adding a blog with SEO articles targeting high-volume developer queries
- More tools based on community feedback
- Possibly Carbon Ads as an AdSense alternative (better CPM for developer audiences)
Try It
Site: devtoolboxes.net
Source: github.com/tanumuki/dev_tool_box
What tools would you want added? Let me know in the comments.
