I shared a very early prototype of this a couple of days ago, but I spent the weekend completely rewriting the core to make it 100% client-side, privacy-first, and open-source.

Like many of you, I deal with large, deeply nested JSON payloads from APIs daily. I’ve always felt uneasy pasting sensitive production data or API keys into random online JSON formatters that probably log everything.

So I built J-RAY to solve this for myself. It parses JSON and turns it into an interactive node graph using React Flow.

Some technical details:

Zero Server Processing: It’s fully client-side. No databases, no tracking cookies.

Two-Way Binding: You can double-click a node on the visual graph to edit its value, and the raw JSON text editor updates instantly (and vice versa).

Code Gen: It generates TypeScript interfaces on the fly based on the current JSON structure.

Open Source: The whole thing is MIT licensed.

I’m currently testing the limits of React Flow when rendering massive JSON files (the DOM nodes can get heavy), but for standard API payloads, it works smoothly.

I'd love to hear your feedback on the UX, how it handles your edge-case JSONs, or if you manage to break the parser.

Repo: https://github.com/MauryDevIta/J-Ray

Live app: https://j-ray.vercel.app/app

Thanks