DevToolkit Update: 31 Free Developer Tools + New CSS Generator, Meta Tag Builder, and More

#webdev #tools #showdev #css

I just pushed a major update to DevToolkit: 31 free browser-based developer tools (up from 22).

What's new in this update

I added 6 new tools that I kept missing:

🔤 Text Case Converter

Convert text between camelCase, PascalCase, snake_case, kebab-case, SCREAMING_SNAKE, dot.case and more. All 12 cases at once, with one-click copy.

→ Try Text Case Converter

📊 Word & Character Counter

Count words, characters, sentences, paragraphs. Get reading time estimate (200 wpm) and speaking time (130 wpm). See the top 10 most frequent words.

Useful when you're writing blog posts, documentation, or anything with a target length.

→ Try Word Counter

📐 PX ↔ REM Converter

Convert between pixels and REM units with a custom base font size. Includes a reference table for common values (8px → 128px).

No more mental math when writing responsive CSS.

→ Try PX-REM Converter

🌑 CSS Box Shadow Generator

Visual generator for box-shadow CSS. Adjust offset X/Y, blur, spread, color, opacity, and inset — see the live preview update in real time. Comes with 6 presets (small, medium, large, glow, inset).

→ Try Box Shadow Generator

🏷️ Meta Tag Generator

Generate SEO, Open Graph, and Twitter Card meta tags for any webpage. Includes:

Character counter for title (60) and description (160)
Google preview rendering
One-click copy of all generated tags

→ Try Meta Tag Generator

🖼️ Image to Base64

Drop an image → get the Base64 output in multiple formats: Data URL, raw Base64, CSS background-image, or HTML <img> tag.

Everything runs locally — your image never gets uploaded anywhere. Supports PNG, JPG, GIF, WebP, SVG up to 5MB.

→ Try Image to Base64

The full list: 31 tools

DevToolkit now covers:

Formatters: JSON, CSS, SQL, Markdown Preview

Encoders: Base64, URL, HTML, JWT, Image to Base64

Converters: Timestamp, Color, Number Base, CSV↔JSON, JSON→TypeScript, Text Case, PX↔REM

Generators: UUID, Password, QR Code, Lorem Ipsum, Cron, .gitignore, README, Meta Tags, Box Shadow

Testers: Regex, Diff Viewer, HTTP Status, Word Counter

All free, all local, no signup required.

Bonus: Free developer ebook

I also put together a free guide: The Complete Developer Toolkit 2026 — 200+ resources, Git commands, CSS patterns, JavaScript tips, security checklist, and more.

Free download (no signup): lucasmdevdev.github.io/ebook-developer-toolkit-2026

Feedback welcome — what tools are you missing? I'll add them.