JSON Viewer Pro

Why I built it

Every time I ship a feature that talks to an API, I do the same three things: pretty-print a sample response, generate a model class for the client, and diff yesterday’s payload against today’s to figure out what the backend changed without telling anyone. There are tools for each of those , none of them are in the same tab.

So I put them in the same tab.

What it does

• Pretty-print and explore. Paste a JSON blob, get a collapsible tree view with key/value highlighting. The usual stuff, but fast and without ads.
• Convert to Dart models. One paste, one click , out comes a Dart class with fromJson / toJson and nullable handling. Saves me ~5 minutes per API endpoint when wiring up a Flutter screen.
• Convert to TypeScript types. Same idea, but emits interface declarations with optional fields where the source had nulls.
• Diff two JSON payloads. Paste old on the left, new on the right , get a structural diff that ignores key ordering and highlights added/removed/changed fields. Way more useful than a line-by-line diff when you’re debugging a flaky integration.

What I learned

• JSON Format. I added a “format” button the able to helper user understand clearly the proper JSON structure.
• Type generation is mostly about the edge cases. Empty arrays, mixed-type arrays, deeply nested optionals , that’s where most of the code lives. The happy path is a hundred lines, the unhappy path is the rest.
• Line-by-line diffs are still useful when you want them. I do a classic line diff so you can see exactly what changed in the raw text, whitespace and key ordering included. Eventually I’d like to add a structural mode that walks both sides as trees and ignores key order, but for now the line view covers the day-to-day case of “what did the backend send me yesterday vs today.”

Status

Live on Firebase Hosting. I use it most weeks when I’m working on a new API integration. Open to feature requests if anyone has ideas.