DEV Community

Mikalai Amusin
Mikalai Amusin

Posted on

I Built 13 Free Developer Tools With Zero Dependencies

#javascript #webdev #opensource #productivity

I got frustrated. Every time I needed to format JSON, generate a password, or test a regex, I'd end up on some bloated website filled with popups, cookie banners, and suspiciously slow load times.

So I built ToolPilot — a collection of 13 free browser tools that are fast, beautiful, and completely free. No signup. No paywalls. No tracking.

🛠ī¸ The Tools

  • JSON Formatter — Beautify, minify & validate with syntax highlighting
  • Regex Tester — Live match highlighting + common patterns library
  • Password Generator — Cryptographically secure via crypto.getRandomValues()
  • QR Code Generator — URL, text, WiFi, email, phone — PNG/SVG download
  • CSS Gradient Generator — Linear, radial, conic — 10 presets + CSS export
  • Box Shadow Generator — Multi-layer visual editor with 8 presets
  • Hash Generator — MD5, SHA-1, SHA-256, SHA-512 via Web Crypto API
  • Color Palette — 5 harmony modes + CSS export
  • Markdown Preview — Live side-by-side editor
  • Word Counter — Stats + keyword density analysis
  • Unit Converter — Length, weight, temp, speed, data
  • Base64 Codec — Encode/decode with Unicode support
  • Lorem Ipsum — Paragraphs, sentences, or words

⚡ The Stack (Zero Dependencies)

This is where it gets interesting. ToolPilot has zero runtime dependencies.

  • Vanilla JS — no React, no Vue, no Angular
  • Vanilla CSS — no Tailwind, no Bootstrap
  • Vite — for dev server and build only
  • Total bundle: ~30KB gzipped

Why? Because utility tools shouldn't need a 2MB JavaScript bundle to format a string. Every tool loads instantly and responds in under 50ms.

🎨 The Design

I didn't want this to look like "just another utility site." ToolPilot features:

  • Animated aurora background — floating gradient orbs that drift continuously
  • Star particle field — 40 twinkling dots across the viewport
  • Micro-animations — spring physics on buttons, smooth card entrances
  • Dark/Light mode — with persistent preference via localStorage
  • Keyboard shortcuts — ⌘K to focus input, ⌘/ to toggle theme

🔒 Privacy First

Every single tool processes data locally in your browser. Nothing is ever sent to a server. Your JSON, your passwords, your regex patterns — they never leave your machine.

🔧 How I Built It

The key architectural decision was using Vite's multi-page app (MPA) mode. Each tool gets its own HTML entry point:

tools/
├── json-formatter/
│   ├── index.html
│   └── main.js
├── regex-tester/
│   ├── index.html
│   └── main.js
└── ... (13 tools)
Enter fullscreen mode Exit fullscreen mode

This means:

  1. Each tool can rank independently on Google
  2. Users only load the code they need
  3. Adding a new tool is just creating a folder with 2 files

Shared code lives in src/shared.js — navigation, footer, theme management, clipboard utilities, aurora background renderer, and keyboard shortcuts.

📈 What's Next

I'm planning to add more tools based on user feedback. Some ideas:

  • Image compressor (client-side)
  • CSS Flexbox playground
  • JWT decoder
  • Cron expression builder
  • Timestamp converter

Try It Out

👉 toolpilot-mu.vercel.app

It's also open source — contributions welcome!
👉 GitHub

Found a bug or want a new tool? Open an issue — I ship fast.

What tools do you wish existed online? Drop a comment — I might build it next!

Top comments (0)