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

BussardRamjet — Tue, 17 Feb 2026 06:27:27 +0000

Every developer has a handful of online tools bookmarked — JSON formatters, Base64 encoders, regex testers. I used them daily, but something always bugged me: why is my data being sent to a server just to format some JSON?

So I built Toolphin — a collection of developer utilities that run entirely in your browser. No server calls, no accounts, no tracking. Your data never leaves the page.

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

For anyone curious about how it's built:

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

A few 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 <head> 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. There's an auto-generated sitemap that 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. Sounds like overhead, but it's 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.