DEV Community

deepesh verma
deepesh verma

Posted on

I Built a JSON Viewer with Table View, JWT Decoder, and Image Preview (Because Existing Ones Weren’t Enough)

If you work with APIs daily, you already know this:

Most JSON viewers are… basic.

They pretty-print JSON.
They collapse/expand nodes.
And that’s about it.

But modern API responses aren’t simple anymore — they’re large, nested, and full of data that needs interpretation, not just formatting.

So I built JSON Vision Pro.


🚨 The Problem

While working with APIs, I kept running into the same issues:

  • Large JSON arrays were hard to read
  • JWT tokens required external tools to decode
  • Image URLs had to be opened manually
  • Comparing API responses was painful

Every time, the workflow looked like this:

  1. Open JSON
  2. Copy something
  3. Go to another tool
  4. Come back
  5. Repeat

It breaks focus. It wastes time.


💡 The Idea

What if a JSON viewer could understand the data, not just display it?

Instead of treating everything as text:

  • Arrays become tables
  • Tokens become readable
  • URLs become previews

That’s the core idea behind JSON Vision Pro.


🚀 What JSON Vision Pro Does

📊 Table View for Arrays

JSON arrays are automatically convertible into clean table views.

No more scanning through nested objects — just read it like structured data.


🔑 Built-in JWT Decoder

Paste or detect a JWT → instantly see:

  • Header
  • Payload
  • Expiration

No more jumping to external websites.


🎨 Smart Visual Previews

The extension automatically detects and renders:

  • 🖼️ Image URLs → inline thumbnails
  • 🎨 Color codes → color chips
  • ⏱️ Unix timestamps → readable dates

This alone removes a lot of manual effort.


⚖️ Response Comparison

Compare two API responses side-by-side:

  • See what changed
  • Highlight differences instantly

Super useful for debugging and QA.


🔍 Search & JSONPath

  • Search across entire JSON
  • Use JSONPath queries like:

$.users[*].name

Works well even with large payloads.


🕒 Time Machine (History)

Quickly switch between recent API responses and compare them.


🧠 Why This Matters

Most tools treat JSON as text.

But developers don’t think in raw JSON — they think in:

  • Data structures
  • Patterns
  • Differences

The goal was simple:

Reduce friction between “seeing data” and “understanding data”


⚡ How to Use

  1. Install the extension
  2. Open any API endpoint returning JSON
  3. The viewer activates automatically

Works with:

  • REST APIs
  • Local JSON files
  • Any application/json response

🔒 Privacy First

  • 100% local processing
  • No tracking
  • No data leaves your browser

💭 Final Thoughts

This started as a small frustration.

But once you start working with:

  • Table views instead of raw arrays
  • Inline previews instead of guessing
  • Built-in tools instead of switching tabs

…it’s hard to go back.


🚀 Try It Out

If you work with APIs regularly, I’d love your feedback.

JSON Vision Pro is available for Edge and Firefox.


📢 Feedback

If you try it:

  • Let me know what’s missing
  • Suggest features
  • Or just tell me how your workflow feels now

That’s how this gets better.

Top comments (0)