I Built 15 Free Browser-Based Developer Tools — Here's What I Learned

#javascript #webdev #productivity

Every developer has that moment: you need to quickly format some JSON, generate a UUID, or encode a string to Base64. You google it, click the first result, and get hit with cookie banners, newsletter popups, and a loading spinner while 3MB of JavaScript downloads to do something that takes 5 lines of code.

I decided to fix this by building ToolPry — a collection of 15 developer tools that are fast, private, and free.

The Rules I Set for Myself

Every tool must run 100% in the browser. No server calls. No APIs. Your data never leaves your machine.
No frameworks. Each tool is a single HTML file with inline CSS and JS. No React, no Tailwind, no build step.
No tracking. No Google Analytics, no Hotjar, no cookies (except for ads).
No sign-up. Every tool is fully functional for everyone, immediately.
Must work offline. Service worker caches everything after first visit.

The 15 Tools

Data & Encoding

JSON Formatter & Validator — Format, validate, minify with tree view, CSV/YAML conversion, and drag-drop file support. Uses native JSON.parse().
Base64 Encoder/Decoder — Full UTF-8 support plus file-to-data-URI conversion with image preview.
URL Encoder/Decoder — Both encodeURI and encodeURIComponent modes.
HTML Entity Encoder — Prevents XSS by encoding <, >, &, ", '.

Security

Password Generator — Uses crypto.getRandomValues(). Includes passphrase mode, time-to-crack estimate, and entropy display.
Hash Generator — MD5, SHA-1, SHA-256, SHA-512. File hashing via drag-drop. Hash comparison tool.

Generators

UUID Generator — RFC 4122 v4 UUIDs. Bulk generate up to 100.
Lorem Ipsum Generator — Paragraphs, sentences, or word count.
QR Code Generator — Presets for WiFi, vCard, Email, and SMS. Download as PNG.

Text & Writing

Word & Character Counter — Reading time, Flesch readability score, grade level, keyword density.
Markdown Preview — Live rendering with DOMPurify XSS protection.

Developer Utilities

Regex Tester — Real-time highlighting, pattern explanation, code generator for JS/Python/PHP. Unlike regex101, your data never leaves the browser.
Color Converter — Hex/RGB/HSL with WCAG contrast checker and palette generator.
Timestamp Converter — Unix epoch to dates. Auto-detects seconds vs milliseconds.
CSS Gradient Generator — Linear/radial, 3 color stops, one-click CSS copy.

The Privacy Angle

Here's something most developers don't think about: when you paste JSON into an online formatter, regex patterns into a tester, or passwords into a strength checker — where does that data go?

Most popular tools process on their servers. Regex101 sends every keystroke to their backend (check their privacy policy). Many JSON formatters upload your data for server-side processing.

With ToolPry, everything runs in your browser. I can make this claim because there are literally zero fetch() or XMLHttpRequest calls in any tool's JavaScript. You can verify this yourself — open DevTools, paste sensitive data, and watch the Network tab. Nothing leaves your machine.

Technical Decisions

Why no framework? Each tool is self-contained — a JSON formatter doesn't need React's virtual DOM. Keeping things vanilla means each page is 6-15KB, loads instantly, and has zero dependencies.

Why Web Crypto API? For passwords and hashes, crypto.getRandomValues() provides the same quality of randomness used in TLS. crypto.subtle.digest() is faster and more secure than JS hash implementations.

Why DOMPurify on Markdown? The Markdown preview renders user input as HTML. Without sanitization, XSS is trivial. DOMPurify strips vectors before they reach the DOM.