I built a 100% client-side JSON visualizer to stop leaking sensitive data

#react #javascript #webdev #showdev

We’ve all been there. You are debugging a massive API response, the raw JSON is a nightmare to read, so you copy the whole payload and paste it into the first jsonformatter.org you find on Google.

Then it hits you: "Wait, I just pasted my company's sensitive data, emails, and private keys into a random cloud server. Where is this data going?" 😳

I got tired of this security nightmare. So this weekend, I decided to build a solution.

Enter J-RAY 🕶️

J-RAY is a minimalist, privacy-first JSON visualizer that turns chaotic nested objects into interactive neural graphs.

The golden rule? 100% Client-Side processing.
There is no backend. There is no database saving your payloads. There are 0 trackers (not even Google Analytics). Everything runs locally in your browser sandbox. Once you close the tab, the data is gone forever.

The Tech Stack 🛠️

I wanted it to be lightning-fast and visually striking (going for that dark/cyberpunk aesthetic).

Framework: React + Vite for instant hot-reloading and fast builds.
Graph Engine: ReactFlow to handle the heavy lifting of node generation, panning, and zooming.
Styling: Tailwind CSS.

Why a Node Graph? 🧠

While classic text folding (like in VSCode) is great, when you are dealing with a completely unknown architecture, seeing the relationships mapped out visually helps you grasp the data structure in seconds. It's also incredibly useful when you need to explain an API structure to non-developers like PMs or designers.