Visualise JSON data with this tool

Photo by Ferenc Almasi on Unsplash

I always thought it would be cool to visualise the JSON data in the form of a flowchart or something like that so that it will be easier to get an idea of the data structure, how it is categorised and so on.

What if I tell you there is a tool with which you can do all this?

JSON Crack - Crack your data into pieces

They also provide a VS code extension and an online editor with which you can instantly visualise your JSON data.

If you have a sample JSON data like this,

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

The site can convert this piece of information into a visualisation like below, which you can then download as an image with a lot of customisations.

Visualisation of the JSON data

Conclusion

Hope this article was helpful. Visualise your JSON data with this simple hack and become much more productive.