DEV Community

Goosekit profile image Arthur
Arthur for Goosekit

Posted on

I built 31 free developer tools in a weekend — here's what I learned

#showdev #javascript #webdev #productivity

Not an april fool!

Every developer has that moment: you need to quickly format some JSON, test a regex, or decode a JWT. You Google it, click the first result, and get hit with cookie banners, newsletter popups, and the nagging feeling that your data is being shipped to some server.

I decided to fix this. Over a weekend, I built 31 developer tools — all running 100% in your browser. No signup. No tracking. No data ever leaves your machine.

The Collection

Here's what's in DevTools Hub so far:

🔧 Data & Text Tools

  • DevFormat — Format, beautify, validate & minify JSON
  • Base64 Tool — Encode & decode Base64 for text and images
  • URL Encode/Decode — Percent-encoding with component & full URL modes
  • Lorem Ipsum Generator — Placeholder text in paragraphs, sentences, or words
  • Markdown Preview — Live editor with GFM, tables, code blocks, task lists

🔐 Security & Auth

  • HashGen — Generate MD5, SHA-256 & SHA-512 hashes
  • JWT Decoder — Inspect headers, payloads, claims & expiration
  • Password Generator — Crypto-strength random passwords

🎨 Design & Visual

  • ScreenSnap — Beautify screenshots with gradients, shadows, device frames
  • OG Preview — See how your URL renders on Twitter, LinkedIn, Discord
  • CSS Gradient Generator — Visual editor for linear, radial & conic gradients
  • Color Picker — HEX/RGB/HSL converter with harmony & contrast checking
  • Placeholder Image Generator — Custom size, colors, text — PNG/JPEG/WebP

🔍 Testing & Comparison

  • RegexLab — Live regex tester with highlighting & capture groups
  • DiffView — Side-by-side text diff with change highlighting

🔄 Data Conversion

  • JSON ↔ YAML — Instant format conversion with syntax highlighting
  • JSON ↔ CSV — Convert arrays to CSV and back with delimiter options

⏱️ Utilities

  • Timestamp Converter — Unix ↔ date conversion with live clock, ISO 8601
  • Cron Parser — Parse cron expressions into plain English with next 10 run times
  • UUID Generator — Generate v1/v4 UUIDs with bulk generation

📚 Reference

  • HTTP Status Codes — Complete, searchable HTTP status code reference

🖼️ Image & Visual

  • SVG to PNG Converter — Convert SVG to high-quality PNG with retina scaling
  • Box Shadow Generator — Visual CSS box-shadow editor with layers & presets
  • Favicon Generator — Create favicons from emoji, text, or images

📲 QR & Sharing

  • QR Code Generator — Generate QR codes for URLs, text, WiFi, email, phone

🔐 Security & Encoding

  • HTML Entity Encoder/Decoder — Encode/decode HTML entities
  • Chmod Calculator — Interactive Unix file permissions calculator

🧹 Optimization

  • CSS Minifier — Minify CSS with compression stats
  • Meta Tag Generator — Generate SEO meta tags, OG tags, Twitter cards

The Architecture: Radical Simplicity

Every tool follows the same pattern:

\
one-tool/
└── index.html ← That's it. One file.
\\

No package.json\. No node_modules\. No build step. No React, Vue, or Svelte. Just HTML, CSS, and vanilla JavaScript in a single file.

Why?

  1. Zero deployment friction — Push to GitHub, deploy on Vercel. Done.
  2. Zero maintenance — No dependencies = nothing to update
  3. Instant loading — No JS bundles, no hydration, no loading spinners
  4. Privacy by architecture — No server means no data collection, period

Each tool is typically 400-800 lines. The CSS is embedded with CSS custom properties for theming. The JS uses modern browser APIs (Web Crypto, Canvas, Clipboard API).

Design Principles

1. Dark theme, always

Developers live in dark mode. Every tool has a consistent dark palette with subtle gradients and glassmorphism effects.

2. Keyboard-first

Press /\ to search on the hub. Most tools support Ctrl+Enter\ to run, Ctrl+C\ to copy output.

3. Real-time feedback

No "Submit" buttons. Everything updates as you type. The regex tester highlights matches live. The JSON formatter validates on every keystroke.

4. Copy-friendly

One-click copy buttons everywhere. Output is pre-formatted for pasting into code, terminals, or docs.

What I learned

  1. Simple ships faster. No framework means no framework-related bugs.
  2. Vanilla JS is incredibly capable. Web Crypto API, Canvas API, Clipboard API — browsers are powerful.
  3. Consistency compounds. A shared design language makes each new tool feel like part of a suite.
  4. Privacy is a feature. "Runs in your browser" is a genuine differentiator.
  5. SEO loves static HTML. Single-file apps with proper meta tags rank well.

What's next

  • More tools (targeting 40+)
  • ScreenSnap Chrome extension launching on the Chrome Web Store
  • Exploring monetization through ads and a premium SaaS template

Try it

🔗 DevTools Hub: goosekit.dev
📦 All tools on GitHub: github.com/goosekit

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

Top comments (0)