1.Introduction

JSON Hero is a simple and practical JSON tool that makes reading and understanding JSON documents easier and intuitive through an introduction to the beautiful UI and enhanced additional features.

Support for multiple views to view JSON: Column views, tree views, JSON views, and other column views are a new method for browsing JSON documents inspired by MacOS Finder.

Project address:https://github.com/jsonhero-io/jsonhero-web

2.Installation

To run JSON Hero locally, first clone the source code and install the relevant dependencies:

git clone https://github.com/jsonhero-io/jsonhero-web.git
cd jsonhero-web
npm install

Then run the following command to start and open http://localhost:8787 Ready to use:

npm start

3.Use

go to https://jsonhero.io/ And drag the JSON file onto the website, or paste the JSON or JSON url in the provided form

Content Preview

JSON Hero automatically infers the content of a string and provides useful previews and properties for the selected value.

Date and Time

Image URL

Website URL

JSON URL

Tree View

This is also the most commonly used one. The tree structure can be clearly displayed. Look at a set of diagrams:

At the same time, it supports searching for data in JSON data:

After completing data editing or review, you need to share it with the front end, instead of copying all the data, you just need to generate a specified link, which is very convenient.

On the whole, JSON Hero supports multiple attempts to view JSON data, and also supports VS Code and other extensions. I believe that it is a very awesome tool for small partners who often deal with JSON.