I Built a Privacy-First Collection of Browser-Based Dev Tools

Source: Dev.to

What’s included

There are 10 tools so far:

• JSON Formatter – format, minify, and validate with syntax highlighting
• Base64 Codec – encode/decode with full Unicode support
• URL Encoder/Decoder – for query strings and URI components
• Hash Generator – SHA‑1, SHA‑256, SHA‑384, SHA‑512 via Web Crypto API
• Timestamp Converter – Unix timestamps to human‑readable dates and back
• Color Picker – convert between HEX, RGB, and HSL
• Markdown Preview – real‑time rendering with GitHub Flavored Markdown
• Regex Tester – live matching with capture group highlighting and flag toggles
• JWT Decoder – decode headers and payloads without sending your token anywhere
• Text Diff – inline and side‑by‑side views with file upload support

Why client‑side matters

Think about the tools you use daily. Your JWT tokens contain user data. Your JSON payloads might have API keys. Your Base64 strings could be encoding anything sensitive.

With Toolphin, the processing happens in JavaScript in your browser tab. There’s literally no backend to leak data to. You can verify this — open the Network tab and watch. Nothing gets sent.

The tech stack

• Next.js 16 with App Router and static site generation
• TypeScript for type safety
• Tailwind CSS + shadcn/ui for the UI
• Vitest + React Testing Library for unit tests
• Playwright for E2E tests (desktop + mobile)
• Vercel for hosting

Technical decisions I’m happy with

• Web Crypto API for hashing – no need for a crypto library. The browser’s native crypto.subtle.digest() handles SHA hashing and it’s fast.
• Regex‑based syntax highlighting – for the JSON formatter, I wrote a simple regex‑based highlighter instead of pulling in a heavy library like Prism or Highlight.js. For a single language, it’s all you need.
• Local fonts – I use the geist npm package instead of Google Fonts, eliminating external network requests on every page load.
• Dark mode without flash – an inline script in “ reads localStorage and sets the theme class before React hydrates, so there’s no white flash when you have dark mode enabled.

What I learned

• SEO matters from day one. Every tool page has its own title, meta description, Open Graph tags, and JSON‑LD structured data. An auto‑generated sitemap pulls from the tool registry. I should have done this from the start rather than retrofitting it.
• "use client" should be a scalpel, not a sledgehammer. In Next.js, only the interactive leaf components need to be client components. Keeping wrappers and layouts as server components lets everything else stay server‑rendered.
• Testing saves time. Every tool has unit tests and E2E tests. It sounds like overhead, but it caught multiple regressions when I refactored shared components.

What’s next

I’m actively adding more tools. Some ideas on my list:

• Lorem ipsum generator
• CSS unit converter
• Cron expression parser
• UUID generator
• HTML entity encoder

If there’s a tool you’d find useful, I’d love to hear about it in the comments.

Check it out: toolphin.dev