Every few months I end up on some random website trying to decode a JWT or hash a string, and it's the same experience every time. Cookie banners, ads covering half the page, and that nagging feeling that my data just got sent to someone's server.
So I built my own versions. Seven of them, actually.
The problem with most online dev tools
Most of these tools are simple operations. Base64 encoding is a one-liner in any language. Hashing a string takes three lines of JavaScript with the Web Crypto API. But when you're debugging at midnight and just need a quick answer, you reach for a browser tool.
And almost every one of them sends your input to a server. I checked. Paste a JWT into most "JWT decoders" online and watch your network tab. That token, which might contain user IDs, emails, permissions, is getting shipped off somewhere. For a decode operation that requires zero server involvement.
What I built
All of these run entirely in your browser. No backend calls, no data leaving your machine. They're part of OGPix, which started as an OG image generator but turned into a collection of developer utilities.
Hash generator - SHA-256, SHA-512, SHA-1, MD5. Paste text, get hashes. I use this mostly for verifying file integrity and generating test data. Uses the Web Crypto API so everything stays local.
JWT decoder - Splits the token into header, payload, and signature. Shows expiration status, issued-at time, all the claims. Color coded so you can spot expired tokens fast. No server touch.
Diff checker - Side by side text comparison with line-level highlighting. I was using an old bookmarked tool for this that started requiring a login last month. So I made my own.
Base64 encoder/decoder - Handles text and files. Detects if your input is already encoded. Simple, but I use it more than I'd like to admit.
CSV to JSON converter - Drop in a CSV, get JSON out. Supports custom delimiters. I built this after manually converting CSV exports from Stripe for the third time in a week.
Meta tag generator - Fills in og:title, og:description, twitter:card, and all the other tags you forget exist until your link preview looks broken on LinkedIn. Generates the HTML you can copy paste.
Screenshot tool - Enter a URL, get a screenshot. Useful for preview images, documentation, or checking how a page looks without opening it.
Why browser-only matters
I keep coming back to this because it actually matters for developer tools specifically. We paste API keys into JWT decoders. We hash passwords to test authentication flows. We diff config files with credentials in them.
When a tool runs client side, none of that leaves your machine. When it runs server side, you're trusting a stranger's infrastructure with your data. For something that takes 10 milliseconds to compute locally.
The Web Crypto API handles all the hashing. TextEncoder and atob/btoa handle Base64. JWT decoding is just splitting on dots and parsing Base64. None of this needs a server.
The technical bits
Everything is Next.js, statically rendered. No API routes for any of these tools. The hash generator uses SubtleCrypto.digest(), the diff checker uses a longest common subsequence algorithm, the CSV parser handles quoted fields and custom delimiters.
The whole thing loads fast because there's nothing to load. No analytics scripts, no third party dependencies for the tool logic. Your browser does the work.
Try them
All the tools are at ogpix-pi.vercel.app/tools. Free, no account, no tracking. If something is broken or you want a tool I haven't built yet, tell me in the comments.
Top comments (0)