101 Free Developer Tools. One Portal. Zero Dependencies.

#javascript #webdev #opensource #productivity

I built 101 browser-based developer tools. Every single one is a standalone HTML file — no npm, no build step, no signup, no tracking.

Dev Toolkit → 440+ tools in one portal

Why?

I kept switching between 15 different websites for basic tasks — formatting JSON, testing regex, generating hashes, converting colors. Each one had cookie banners, signup walls, or ads covering half the screen.

So I built my own. One tool at a time. All with the same rules:

Single HTML file — view source, it's all there
Runs in your browser — nothing leaves your machine
No dependencies — works offline after first load
Dark theme — because it's 2026

The Numbers

Category	Count	Highlights
Code	40	JSON format/diff/path/schema, regex test/replace, SQL format, JWT, UUID
Design	37	CSS generators (shadow, grid, flex, animation, glass, neumorphism), color tools, font pairing
Data & APIs	13	npm compare/health, GitHub stats/repo compare, DNS/SSL/headers check, API tester
Writing	7	Word count, markdown preview, title scorer, lorem gen, char count
AI / LLM	4	Model pricing comparison, prompt cost calculator, AI model picker, ROI calculator

Staff Picks

Tools I actually use every day:

Tool	What it does
LLM Price	Compare API pricing across 28+ AI models from 7 providers
JSON Format	Paste messy JSON, get it formatted with tree view
Regex Test	Test patterns with live highlighting and 12 presets
Tailwind Converter	CSS ↔ Tailwind bidirectional converter
Color Blind Sim	Test any image for 8 types of color blindness
Subnet Calc	Network/broadcast/host range with CIDR bit visualization
Dep Changelog	See what changed in your npm dependencies before upgrading

How They're Built

Each tool is one HTML file. Typically 200-600 lines. No framework. No bundler. Just:

<!DOCTYPE html>
<html>
<head>
  <style>/* everything */</style>
</head>
<body>
  <script>/* everything */</script>
</body>
</html>

Copy the file. Double-click it. It works.

All Open Source

Every tool is on GitHub under yurukusa. Fork any of them, self-host, modify — they're just HTML files.

The portal: yurukusa.github.io/dev-toolkit

Source code: github.com/yurukusa/dev-toolkit

Which category do you use most? What tool is missing from this list?

Is your Claude Code setup actually safe? Run npx cc-health-check — a free 20-point diagnostic. Score below 80? The Claude Code Ops Kit fixes everything in one command.