How I created best online JSON Formatter
Tags: javascript, tooling, debugging, webdev
Published: 2021-02-25 12:09:28

In my day job, we work with Java and Go based microservices. All these microservices interact with each other either via REST end points or Kafka updates.
Regardless of the medium of interaction, the format of exchanging data is JSON!

##What is JSON?

JSON stands for JavaScript Object Notation. Initially a part of Javascript standard, it has now become a norm for transporting data over a network because of its small footprint as compared to its rival XML!

This is how a sample JSON object looks like -
```javascript
{
  "name": "Dave",
  "age": "32",
  "hobbies": [
    "soccer",
    "trekking"
  ]
}
```
##What is a formatter?

Because JSON is represented as text everywhere, usually when you try to read it in code or logs, it shows up like this -

```
{"name":"Dave","age":"32","hobbies":["soccer","trekking"]}
```

This small (minified) JSON may not look very complex to read, but in real world software, a JSON object may even spread across 100s of lines.
A formatter is a tool that you can use to format this minified string format into a tree like tabbed JSON (as represented above) so that it is easier to read and understand this data.

##What is [JSONToolBox](https://jsontoolbox.com)?

JTB (JSONToolBox) is an online JSON formatter in simple terms. It lets you paste in minified JSON string in one editor and then as you type in, formats that JSON to a tree like view which we call formatted JSON.

![JSONToolBox snapshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbs8bnfkihz6sqcqoncx.jpg)


##Why is it the best formatter?

Coming back to the original context of this article. Consider our application environment where 20+ microservices are constantly interacting with each other and all the interaction information is logged as JSON strings.
When we need to debug a complex flow where data passes between multiple microservices, it becomes a very difficult task as for any other online formatter we need to open multiple tabs in the browser each containing one JSON.
Whereas in JTB, you can format/edit multiple JSON strings at the same time in the same page!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32v5izbq1zk9m18iepz0.gif)

Just click on add formatter and one more formatter pane appears which you can collapse as well if not needed.

##Okay, cool! What else makes it better?

Just being able to format/minify multiple JSON at the same time does not make it the best online JSON formatter out there. It has various other small nifty tricks up its sleeve which are created based on developer inputs or looking at our debugging/development workflow. Here's the list of other cool features of JTB
* Copy minified JSON in a single click
* Copy any child object in a single click
* Download formatted JSON as a file 
* Change file name of the JSON you are formatting/editing/downloading
* Search in formatted JSON
* Drag and drop a JSON file to format/minify
* Import multiple files at the same time.
* No advertisements!

Oh and did I mention it is a PWA!!!
So it is also the best offline JSON formatter out there :D

Although there is a plethora of online JSON formatters out there, I want to make JSONToolBox to be the most developer friendly tool out there. So, if you have any suggestions/feedback that you think can improve your productivity while using [JTB](https://jsontoolbox.com) then do mention here or DM me on [twitter](https://twitter.com/sourabh_86). Would love to hear what people think of it.

Happy coding!