ke jia

Posted on Aug 18 Originally published at github.com

I Built 14 Developer Tools That Run 100% In Your Browser — No Install, No Tracking

#webdev #javascript #opensource #productivity

As developers, we constantly need quick utilities: hash a string, encode Base64, generate a UUID, parse a YAML file, create a QR code. Every time you search for one, you land on a different website, each with its own ads, tracking scripts, and privacy concerns.

So I did what any self-respecting developer would do: I built them all myself.

Introducing DevTools — a collection of 14 pure client-side developer tools that run entirely in your browser. Zero dependencies. Zero servers. Zero tracking. Copy a single HTML file or clone the repo, and every tool just works.

The Problem With Online Tools

Let me be honest about the state of free online developer tools:

Privacy nightmares — You paste your API key, JWT token, or sensitive data into someone else's server
Bloatware — A simple "text case converter" loaded with 500KB of JavaScript and 20 ad scripts
Fragile — Tools break when the underlying CDN goes down or the domain expires
Offline unusable — No internet? No tool

The Solution: Pure HTML/JS, Zero Dependencies

Every tool in this collection is a single HTML file with inline CSS and JavaScript. No frameworks, no build tools, no npm packages, no external libraries.

Here's what you get:

🔑 UUID Generator — 270M weekly npm downloads

Generate RFC 4122 UUIDs with batch support and format options (default, uppercase, without-dash, braced). Uses the Web Crypto API for cryptographically secure randomness.

👉 Try it: https://wuchunjie00.github.io/devtools/uuid-generator/

⏱ Cron Expression Parser — 17.8M weekly npm downloads

Visualize and parse cron expressions with second/minute/hour/day/month/day-of-week configuration.

👉 Try it: https://wuchunjie00.github.io/devtools/cron-parser/

📱 QR Code Generator — 18.9M weekly npm downloads

Generate custom QR codes for URLs, text, contacts, and more. No external libraries — pure Canvas rendering.

👉 Try it: https://wuchunjie00.github.io/devtools/qr-code-generator/

🔗 URL Slug Generator — 14.6M weekly npm downloads

Convert any title to URL-friendly slugs with multi-language transliteration support (Chinese, Japanese, etc.).

👉 Try it: https://wuchunjie00.github.io/devtools/slug-generator/

📄 HTML to Text — 12.8M weekly npm downloads

Convert HTML markup to clean plain text. Options for preserving newlines, collapsing spaces, and stripping tags.

👉 Try it: https://wuchunjie00.github.io/devtools/html-to-text/

<> HTML Entities Encoder/Decoder — 37.6M weekly npm downloads

Encode/decode HTML special characters (&, <, >, ", ') to/from entity forms.

👉 Try it: https://wuchunjie00.github.io/devtools/html-entities/

🔐 Password Generator — 51K weekly npm downloads

Generate strong passwords with customizable length, character sets (uppercase, lowercase, numbers, symbols), and visual strength indicator.

👉 Try it: https://wuchunjie00.github.io/devtools/password-generator/

📝 Lorem Ipsum Generator — 563K weekly npm downloads

Generate classic Latin placeholder text in paragraph, sentence, or word mode. Perfect for wireframes and mockups.

👉 Try it: https://wuchunjie00.github.io/devtools/lorem-ipsum/

#️⃣ Hash Generator — 1.4K weekly npm downloads

SHA-1, SHA-256, SHA-384, SHA-512 hashing for both text input and files. Uses Web Crypto API.

👉 Try it: https://wuchunjie00.github.io/devtools/hash-generator/

📦 Base64 Encoder/Decoder — 1.3K weekly npm downloads

Text-to-Base64 and file-to-Base64 conversion with URL-safe mode support.

👉 Try it: https://wuchunjie00.github.io/devtools/base64-tool/

📋 YAML to JSON — 1.3M weekly npm downloads

Convert between YAML and JSON formats with real-time preview.

👉 Try it: https://wuchunjie00.github.io/devtools/yaml-to-json/

🔍 Diff Checker — 131M weekly npm downloads

Text diff comparison tool with syntax highlighting for added, removed, and modified lines.

👉 Try it: https://wuchunjie00.github.io/devtools/diff-checker/

📊 CSV to JSON — 432 weekly npm downloads

Convert CSV data to JSON format with real-time preview.

👉 Try it: https://wuchunjie00.github.io/devtools/csv-to-json/

🎫 JWT Decoder — 416 weekly npm downloads

Decode JSON Web Tokens and display their payload in readable format. Base64 decoding, no server processing.

👉 Try it: https://wuchunjie00.github.io/devtools/jwt-decoder/

Why This Matters

🔒 Privacy First

Your data never leaves your browser. Paste your JWT token, API key, or sensitive config — it stays local. No network requests, no logging, no tracking.

⚡ Zero Dependencies

Each tool is a single HTML file (4KB-16KB). No build process, no npm install, no dependencies. Works on any device with a browser.

📴 Offline-Ready

Save the files locally, open them in a browser. Works perfectly without internet connection. Great for travel, conferences, or when your internet dies mid-deploy.

🎨 Clean UI

Dark theme designed for developers. Responsive design works on desktop, tablet, and phone. Search functionality across all tools.

Tech Details

Every tool follows the same architecture:

Single HTML file — HTML + CSS + JS all inline
Zero external libraries — Uses only native browser APIs
Web Crypto API — For secure hashing and UUID generation
Responsive design — Works on any screen size
Dark mode — Developer-friendly dark theme

Quick Start

Option 1: Use Online

Just visit: https://wuchunjie00.github.io/devtools/

Option 2: Clone and Use Locally

git clone https://github.com/wuchunjie00/devtools.git
cd devtools
# Open index.html in your browser
# Or deploy to GitHub Pages, Netlify, Vercel, etc.

Option 3: Embed in Your Project

<iframe src="https://wuchunjie00.github.io/devtools/hash-generator/" width="800" height="600"></iframe>

Why Did I Build This?

I got tired of:

Finding a tool for each specific need
Dealing with popup ads and cookie consent forms
Wondering if my data was being logged
Waiting for pages to load with 2MB of JavaScript

This is what developer tools should be: fast, private, and simple.

What's Next?

More tools are coming. Want something added? Open an issue or PR on GitHub.

If you also want command-line versions for your terminal workflow, check out my other open-source npm packages:

ScaffoldX — project scaffolder with 12 templates: npx scaffoldx-cli
DotGuard — scan .env files for hardcoded secrets: npx @wuchunjie/dotguard
GitPulse — git analytics without leaving the terminal: npx @wuchunjie/gitpulse
SnippetX — code snippet manager for the CLI: npx @wuchunjie/snippetx

GitHub: https://github.com/wuchunjie00/devtools

☕ If This Saved You Time

All 14 tools are and will always be 100% free. If they make your day a little easier, consider fueling the next batch of tools:

Buy me a coffee on Ko-fi

Built with ❤️ and pure HTML/CSS/JS. Zero dependencies, zero tracking, zero bloat.

DEV Community