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.
Check it out: toolphin.dev
Top comments (0)