DEV Community

Cover image for DevBox Showcase: JSON Viewer
Szikszai Gusztáv
Szikszai Gusztáv

Posted on • Updated on

DevBox Showcase: JSON Viewer

Hi 👋,

This is the first post in the series showcasing tools from DevBox 🎉, a desktop application or browser extension packed with tools that every developer should have.

Sometimes during development you get a JSON file which is minimized, and you need to get some information out of it. I'll show you how you can use DevBox to view JSON files interactively in a tree view and get that information.

Once DevBox opened, click on the JSON Viewer card:

JSON Viewer Card

You should see something like this:

JSON Viewer Empty

We are going to use this minified JSON to view from the Start Wars API:

{"name":"Luke Skywalker","height":"172","mass":"77","hair_color":"blond","skin_color":"fair","eye_color":"blue","birth_year":"19BBY","gender":"male","homeworld":"","films":["","","","",""],"species":[""],"vehicles":["",""],"starships":["",""],"created":"2014-12-09T13:50:51.644000Z","edited":"2014-12-20T21:17:56.891000Z","url":""}
Enter fullscreen mode Exit fullscreen mode

And we would like to find out when this entity was created!

After copying and pasting the JSON into the left textarea, you will immediately see the tree view on the right!

JSON Viewer With Content

The created field is not visible, so we need to scroll down to see it:

JSON Viewer Scrolled

And now we have the exact date this entity was created!

You can still buy DevBox here for a lifetime price of $25 $20 💰, get it while it's available!

More DevBox showcases are coming, so follow me here if you want to be notified!

Discussion (1)