Pretty Json
Since json is one of the most common data formats developers work with, we appreciate being able to easily read it.
It follows that many tools try to make it pretty, or beautified, when displaying it. It’s great these tools exist, because as you can see there is a big difference between pretty json and ugly json if you’re looking at this stuff all day. If you have good tools your json should look great like the example below from Postman.
example of pretty json from postman
Ugly Json
Json has become ubiquitous, but along the way came a fly in the ointment as it was used more and more.
Developers have evolved to using json a value inside other json documents, which can cause confusion.
For each property, instead of having a string value like “small and simple”, each property/value pair may contain a complete json document as it's one single value.
The problem comes up because doing this requires escaping characters in the string value, and most tools haven’t evolved to make escaped json look pretty. This puts us right back in the boat of having to look at ugly json.
example of ugly json
Let’s try to make a stronger claim than “most tools” don’t handle this well. I have been able to find exactly zero, and there are a lot of tools that format json. I’ve checked some very nicely done online tools such as jsonformatter.org, curiousconcept.com, jsoneditoronline.org. Postman is also a great tool, but has at least 10 comments trying to figure this out since 2015 and I can find nothing in the latest version. Apparently the issue is so taboo, stackoverflow is deleting questions that dare to mention it out of fear developers could get caught in a tabloid scandal.
First in the World?
Could this require someone being the first in the world to step up and display pretty json when escaped? It’s hard to believe there is zero of anything in the world, let alone zero of something related to json. To decide which of these two possibilities is true, I kindly request your input:
- It already exists - Fantastic! I must have missed it. Please email or comment and I’ll update the post to credit you and the tool.
- It does not exist - Could be fantastic! Have a json tool and want to help? I’ll try to pitch in some UX ideas here, and coding if there’s interest.
Escaped Json Spec – v0.0.1
The naive approach of just unescaping everything has a few issues. To start it’s then no longer valid json. This prevents some round-tripping scenarios, and doesn’t really allow easy editing because escaped sections must stay escaped if you say, type in a new value. It might allow nicer formatting only, but still wouldn’t make it easy to see which parts are escaped.
One thought is that this should not require any conversion. Instead, the escaped sections could just be displayed differently without ever converting anything. This would allow copy/paste and round-tripping to work well. For tools that want to go farther and allow ad-hoc editing, the new rendering could be dynamically updated as changes are typed. This would allow someone to type normally what appears to be simple json, while having it automatically escaped when needed based on whether the editing started within an escaped section.
How Should it Look?
Here are a few ideas to use Italics, a prefix, and color.
Which one should you use?
The best may change after someone finally supports unescaped formats. For now I recommend https://jsonformatter.org, because it's clean, fast, easy to use. It has some nice extras for going to CSV, XML, YAML, as well as reversing the process with minification. Importantly, the ads displayed are minimal and don't get in the way of the work.
By the way, for formatting JavaScript don't miss the excellent Prettier project which can try here.