Every developer has a list of tools they open daily. Password generators, JSON formatters, Base64 encoders. Most of them are fine — until you realize they're sending your data to a server you don't control.
So I built ToolKit: a collection of free utilities that run entirely in your browser.
What's in it
- Password Generator — Web Crypto API, never transmitted anywhere
- Word Counter — words, characters, reading time, keyword density
- JSON Formatter — prettify, minify, validate with error highlighting
- Base64 Encoder/Decoder — encode and decode with a swap button
- Case Converter — camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, Title Case, Sentence case, and more
- Color Palette Generator — 7 harmony modes: analogous, complementary, triadic, split-complementary, tetradic, monochromatic, random
- Lorem Ipsum Generator — by words, sentences, or paragraphs
- UUID Generator — v4, cryptographically random, generate up to 50 at once
- Hash Generator — SHA-1, SHA-256, SHA-384, SHA-512 via Web Crypto API
- URL Encoder/Decoder — percent encoding with a swap button
- Markdown Editor — split view, live HTML preview, copy as HTML
- Username Generator — fun, professional, gamer, and minimal styles
The one rule: nothing leaves your browser
Every tool uses browser-native APIs. The password generator uses window.crypto.getRandomValues(). The hash generator uses crypto.subtle.digest(). The case converter is pure string manipulation. No fetch calls, no logging, no telemetry on the tool computations themselves.
Tech stack
- Next.js with static site generation — every tool page is pre-rendered
- TypeScript throughout
- Zero runtime dependencies for tool logic — no lodash, no crypto libraries, just browser APIs
- Each tool lives in its own folder: tools/password-generator/component.tsx, use-password-generator.ts, index.tsx (FAQ + metadata). Adding a new tool is one entry in the registry + one folder.
What I learned
The hardest part wasn't building the tools — it was the architecture. I wanted to make it trivial to add tool #50 without touching existing code. The registry pattern (lib/registry.ts as the single source of truth) solved this — sitemap, catalog, navigation all auto-generate from one array.
Check it out: https://www.webtoolkit.tech/
What tools are you missing in your daily workflow? Planning to add more based on feedback.
Top comments (0)