Intuitive and easy to use! Two JSON visualization tools are recommended, and they are really delicious to use with Swagger!

Friends who often use Swagger should understand that Swagger's support for JSON is really unfriendly! Recently, I found two good-looking JSON visualization tools, which can elegantly display JSON data and improve development efficiency. I recommend them to everyone!

SpringBoot actual e-commerce project mall (50k+star) address: https://github.com/macrozheng/mall

Talk about Swagger

Let's first talk about the unfriendly aspects of Swagger's JSON support and why we need JSON visualization tools!

• When we use Swagger to submit a POST request and enter JSON request parameters, it neither supports JSON format verification nor formatting, which is very inconvenient to use;

• When the JSON data we get with Swagger is relatively long, Swagger does not support folding data, and sometimes we can only copy the data to other tools to view, such as finding an online JSON parsing tool.

• For the above two pain points of using Swagger, both JsonHero and JsonVisio can be used to solve them, and they are all relatively unique JSON visualization tools.

JsonHero

Introduction

JsonHero is an open source JSON visualization tool. It is currently available on Github 2.9K+Star . It is very convenient to view JSON data through JsonHero. It supports column view, tree view and edit view. There is always one for you!

Install

• JsonHero is a front-end project. It is very simple to download and install. First download its installation package. Download address: https://github.com/jsonhero-io/jsonhero-web

• After the download is complete, extract it to the specified directory, and create a .env file in the root directory. The content of the file is as follows;

 SESSION_SECRET=abc123

• Then use the following command to install the dependencies and start them. Before use, you need to install the node.js environment;

 npm install
npm start

• After the startup is successful, the console will display the following information;

• Next, you can use JsonHero to visualize JSON data, visit the address: http://localhost:8787

use

• The use of JsonHero is very simple, directly copy the JSON data or the URL to get JSON to the input box, and then click the Go button;

• We can copy the long JSON data obtained in Swagger, and through 列视图 we can view the JSON data layer by layer;

• When we select a JSON object, the data of the JSON object will be displayed directly on the right;

• Through JSON视图 we can view the formatted JSON data, and also when a JSON object is selected, the data of the JSON object will be displayed directly on the right side;

• Through 树视图 , the JSON data can be folded, and the data can be viewed more conveniently;

• We can also perform global search on JSON data through the search function;

• JsonHero also supports previewing data in different formats, such as pictures, time, date, URL and other data.

JsonVisio

Introduction

JsonVisio is a simple and easy-to-use JSON visualization tool, currently available on Github 4.1K+Star , which can support JSON formatting, editing and verification, and can generate tree diagrams according to JSON.

Install

• First we need to download the installation package of JsonVisio, pay attention to the download 1.6.0 version, download address: https://github.com/AykutSarac/jsonvisio.com/releases

• After the download is successful, extract it to the specified directory, and then use the npm command to install and start it;

 npm install
npm run dev

• After the startup is successful, the console will output the following information;

• Next, you can visit the JsonVisio page, click Start Generating to start using the JSON editor, visit the address: http://localhost:3000

use

• Copy the request parameters we need to edit in Swagger, JsonVisio can support editing, formatting, clearing and saving operations;

• When there is an error in our JSON format, a prompt will be given;

• It can also support the generation of dendrograms according to JSON format.

Summarize

By using the above two JSON visualization tools, even if you only use Swagger to debug the interface, you don't have to worry about it! Careful friends should be able to find that JsonHero only supports viewing JSON and does not support editing, so JsonVisio must be used to edit JSON. However, the author of the project replied in Issues that it will be supported in future versions.

project address

• JsonHero: https://github.com/jsonhero-io/jsonhero-web
• JsonVisio: https://github.com/AykutSarac/jsonvisio.com