Boost Your API Testing: Visualize JSON with JsonHero & JsonVisio

Frequent Swagger users know its JSON support is unfriendly; here are two attractive JSON visualization tools that can improve development efficiency.

Talking about Swagger

We’ll discuss Swagger’s unfriendly JSON support and why we need visualization tools.

When submitting POST requests in Swagger, JSON parameters lack validation and formatting, making them inconvenient.

Long JSON responses cannot be collapsed in Swagger, forcing users to copy data to external tools.

Both issues can be solved with JsonHero and JsonVisio, two distinctive JSON visualization tools.

JsonHero

Overview

JsonHero is an open‑source JSON visualizer with over 2.9K+ Stars on GitHub. It offers column, tree, and edit views, ensuring at least one view fits your needs.

Installation

Download the package from GitHub and unzip it.

Create a .env file in the root with the following content: SESSION_SECRET=abc123 Install dependencies and start the app (Node.js required):

npm install
npm start

After a successful start, the console shows the launch information.

Access JsonHero at http://localhost:8787 to visualize JSON data.

Usage

Paste JSON data or a JSON URL into the input box and click Go.

Use the Column View to drill down into JSON structures.

Select a JSON object to see its details on the right side.

The JSON View shows formatted JSON with side‑panel details for selected objects.

The Tree View allows folding for easier navigation.

Global search lets you find any value quickly.

JsonHero also previews different data formats such as images, dates, and URLs.

JsonVisio

Overview

JsonVisio is a clean, easy‑to‑use JSON visualizer with over 4.1K+ Stars on GitHub. It supports formatting, editing, validation, and can generate tree diagrams from JSON.

Installation

Download version 1.6.0 from the GitHub releases page.

Unzip to a directory and run:

npm install
npm run dev

The console will display startup information.

Open JsonVisio at http://localhost:3000 and click Start Generating to begin.

Usage

Copy the request parameters from Swagger into JsonVisio; you can edit, format, clear, and save the JSON.

If the JSON format is incorrect, JsonVisio provides error hints.

It can also generate a tree diagram from the JSON structure.

Conclusion

Using these two JSON visualization tools makes Swagger debugging painless. JsonHero excels at viewing JSON, while JsonVisio adds editing capabilities. The project authors plan to add editing support to JsonHero in future releases.

Project Links

JsonHero: https://github.com/jsonhero-io/jsonhero-web

JsonVisio: https://github.com/AykutSarac/jsonvisio.com