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:

<code>SESSION_SECRET=abc123</code>

Install dependencies and start the app (Node.js required):

<code>npm install
npm start</code>

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:

<code>npm install
npm run dev</code>

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