Nowadays when you’re dealing with Web APIs, you often find yourself in the situation of handling JSON, either in the input for these APIs or in the output, or both. Some browsers have the means to pretty print the JSON from their dev tools. But you don’t always have that opportunity. That’s why there are tools to pretty-print JSON. I’ve found quite a few of them on the web, but all the ones I’ve found have one terrible flaw: they actually send the JSON you’re trying to pretty-print to the server 🙀. I don’t want my JSON data (sensitive or not) to be sent to some random servers!

All your JSON are belong to us

Now as I wrote, I don’t particularly like the fact that my JSON data is sent over the wire just for pretty printing. It may not be super secret or anything, but in these days, you cannot be careful enough. Besides, it’s completely unnecessary to do it. All you need is already in your browser! So I quickly built my own JSON pretty printer (and syntax highlighter). You can find it right here.

Offline JSON Pretty Printing to the Rescue

Actually, the design is very simple: all my JSON pretty printer does, is take your JSON input and try to parse it as JSON in the browser.

JSON.parse(yourJsonInput)

If that fails, I’m showing the parsing error and that’s that. If it succeeds, I get back a JavaScript object/array/value, which then I’m inspecting. For objects, I’m using basic tree navigation to go through all the properties and values (which can be nested objects/arrays/values) for pretty printing. That’s it, really simple. No need to transmit the data anywhere – it stays right in your browser!

So like it, hate it, use it or don’t: JSON Pretty Printer

Update from 2023-01-03

I wasn’t so happy with the workings of some of the old code anymore, plus I wanted to move the tool to this site anyway. So I’ve redone it and published it here: Pretty Print Json. I’ve also updated the links above as well as added a note on the original site with a link to the new tool. 😄