DEV Community

Cover image for I built a free online toolbox with 80+ dev and productivity tools — here's what's inside
wells tang
wells tang

Posted on

I built a free online toolbox with 80+ dev and productivity tools — here's what's inside

#webdev #productivity #nextjs #tools

The Problem

I had 15+ browser bookmarks for small dev tools. JSON formatter here, Base64
encoder there, regex tester on some random site with 5 popups. Every time I
needed to convert a timestamp or decode a JWT, I was either searching Google
again or navigating to a site I half-remembered.

So I built WorkTool — a single, clean toolbox with 80+ tools. Here's what's inside.

Developer Tools (15 tools)

These are the ones I use most. All run client-side with zero file uploads:

JSON Tools

  • JSON Formatter: Format, compress, validate JSON with syntax highlighting (Monaco editor)
  • JSON Diff: Compare two JSON objects and highlight differences — great for API debugging

Encoding / Decoding

  • Base64: Encode/decode text and files
  • URL Encoder: encodeURIComponent / decodeURIComponent in a clean UI
  • JWT Decoder: Parse header and payload, check expiration at a glance

Regex & Patterns

  • Regex Tester: Real-time match highlighting with flag support (g, i, m, s)
  • Cron Parser: Explain cron expressions in plain English — e.g. 0 9 * * 1-5 → "At 09:00 AM, Monday through Friday"

Conversion

  • Timestamp Converter: Unix ↔ human-readable, with timezone support
  • Color Converter: HEX ↔ RGB ↔ HSL with live preview
  • Number Base Converter: Binary, octal, decimal, hex

Generators

  • UUID Generator: v1/v4, single or batch
  • Hash Generator: MD5, SHA1, SHA256, SHA512

Reference

  • HTTP Status Codes: Full reference with descriptions
  • SQL Formatter: Format SQL with dialect support
  • Markdown Preview: Live render with GFM support

Image Tools (12 tools)

Privacy-first: client-side tools never upload files.

  • Compress: Uses browser-image-compression — no server upload
  • Format Convert: JPG/PNG ↔ WebP via Canvas API
  • Crop: Interactive crop with aspect ratio lock
  • Resize: Set exact dimensions or percentage
  • Remove Background: AI-powered (server-side, deleted after 1h)
  • Watermark: Text or image watermark via Canvas
  • Image to Base64: FileReader API, instant
  • EXIF Viewer: Read camera metadata with exifr
  • Color Picker: Extract dominant colors from image
  • GIF Maker: Combine images into animated GIF
  • Image Diff: Visual comparison of two images
  • SVG Optimizer: SVGO via WebAssembly

AI Tools (10 tools, DeepSeek API)

All use streaming output (SSE), so results start appearing immediately:

  • Text rewriter
  • Article summarizer
  • Grammar checker
  • AI translator
  • Weekly report generator (give bullet points → get formatted report)
  • Code explainer (paste code → get line-by-line explanation)
  • Title generator
  • Resume polisher
  • Prompt builder
  • Mind map generator (outputs Markdown outline)

Free users: 3 AI requests/day. Pro: 200/day.

Data Conversion (10 tools)

  • CSV ↔ JSON (PapaParse)
  • JSON ↔ Excel (SheetJS)
  • XML ↔ JSON (fast-xml-parser)
  • Markdown → HTML (marked.js)
  • Unit converter (static conversion tables)
  • Live currency converter (rates updated daily, cached in Redis)
  • Byte converter
  • Random data generator (faker-js, lazy-loaded)
  • HTML table generator
  • SQL → JSON

Productivity Tools (12 tools)

  • QR code generator (custom colors, download PNG/SVG)
  • Password generator (configurable length and charset)
  • Word counter
  • Pomodoro timer (Web Worker, works in background tab)
  • Lorem Ipsum generator
  • Remove duplicate lines
  • Chinese Pinyin converter (pinyin-pro)
  • Barcode generator (JsBarcode)
  • Meeting countdown timer
  • Invoice builder (HTML → PDF export)
  • Color contrast checker (WCAG algorithm)
  • Whiteboard (simple Canvas)

Document Tools (10 tools)

  • PDF merge (pdf-lib, client-side)
  • PDF compress (server-side API)
  • PDF → Word (server-side API)
  • Word → PDF (server-side API)
  • PDF → Image (PDF.js)
  • Image → PDF (pdf-lib)
  • PDF split (pdf-lib)
  • PDF OCR (server-side)
  • PDF protect (pdf-lib)
  • Excel → CSV (SheetJS)

Tech Stack 

Framework:    Next.js 14 (App Router) + TypeScript
Styling:      Tailwind CSS + shadcn/ui
Database:     Neon (Postgres) + Drizzle ORM
Cache:        Upstash Redis (rate limiting, quota counting)
AI:           DeepSeek API (streaming via SSE)
Auth:         Auth.js v5 (email magic link)
Payment:      XorPay (CNY) + Creem (international)
Deploy:       Vercel
Enter fullscreen mode Exit fullscreen mode

Privacy Design

This was important to me:

  • Client-side tools (JSON formatter, Base64, image compress, etc.): nothing ever leaves the browser
  • Server-side tools (PDF conversion, AI, remove background): files auto-deleted 1 hour after processing
  • No file history: we don't store what you processed

What's Free vs Pro

Free: all tools available, 50 tool uses/day, 3 AI requests/day, 5MB file limit

Pro ($2.50/month): unlimited tool use, 200 AI requests/day, 100MB file limit,
batch processing, 30-day usage history

Check It Out

→ worktool.app: https://worktool.app?utm_source=devto&utm_medium=article&utm_campaign=launch

Would love to hear what tools are missing from your workflow. What's the one
browser-bookmark dev tool you use every week?

Built this as a side project. Happy to answer questions about any part of the implementation.

Top comments (2)

Collapse
 
bhavin-allinonetools profile image
Bhavin Sheth •

Nice work. I like that you kept most tools client-side instead of sending everything to a server—privacy plus convenience is a combo that's surprisingly rare.

Collapse
 
vic_xie_9bed0062d5fd73d12 profile image
vic xie •

Nice write-up! For devs who deal with messy copied text, TextStow might help — it's a Mac menu bar tool combining clipboard history with prompt templates and text cleanup. Free: textstow.com