The "Oh No" Moment ๐ฑ
We have all been there.
You are debugging a production issue at 2 AM. You grab a massive blob of minified JSON from the logs, look for a "JSON Prettifier" on Google, and paste the data into the first result that pops up.
It formats perfectly. You find the bug. Great.
But then, 5 seconds later, the realization hits you:
"Wait... did I just send a customer's PII (Personally Identifiable Information) or a production API key to some random server in the middle of nowhere?"
Most free online tools are black boxes. You don't know if they are logging your input, storing it in a database, or training an AI model on it.
The Solution: Go Local (or Client-Side) ๐ก๏ธ
I decided I was done with "trusting" random servers. I wanted a tool that:
Works 100% Offline (so I know data never leaves my machine).
Has a "Diff Checker" (because comparing 2,000 lines of JSON by eye is impossible).
Decodes JWTs safely (without sending my Auth Tokens to the cloud).
So, I built it myself using React + Vite.
Introducing JSON AIO (All-In-One) ๐
I call it JSON AIO. It is a lightweight, privacy-first developer workspace that runs entirely in your browser.
๐ Try it here: https://d21vtojgd3id3.cloudfront.net
(It's hosted on AWS CloudFront, but once the page loads, you can disconnect your internet and it still works perfectly).
Under the Hood ๐ ๏ธ
I didn't want just another text area. I wanted a VS Code-like experience.
Engine: I used @monaco-editor/react to get that familiar VS Code feel (minimap, syntax highlighting, error detection).
Architecture: Zero backend. Everything uses standard Web APIs (JSON.parse, navigator.clipboard, localStorage).
Styling: Tailwind CSS (with a fully functional Dark/Light mode toggle).
PWA: I added a Service Worker so you can install it to your dock and use it like a native app.
Key Features
The "Privacy Shield" JWT Decoder Most JWT tools require a backend to decode tokens. Mine uses the jwt-decode library directly in the browser. You can paste your production tokens safelyโthey never touch a network request.
The Diff Checker I integrated the Monaco Diff Editor to show side-by-side comparisons of JSON files. It highlights changes in green/red just like Git.
"Smart" Converter Ever get a log file where the JSON is stringified inside a string? ("{\"id\": 1...}"). The "Converter" tab handles un-escaping and re-formatting automatically.
Open Source & Free
I built this primarily for myself, but Iโm sharing it for any other devs who are paranoid about privacy (like me).
Give it a spin and let me know what you think!
๐ Live Tool: https://d21vtojgd3id3.cloudfront.net
Top comments (0)