JSONHero
JSON Hero is a beautiful JSON viewer for the web. Stop reading thousand-line JSON documents in your editor
- View JSON any way you'd like: Column View, Tree View, Editor View, and more.
- Automatically infers the contents of strings and provides useful previews
- Creates an inferred JSON Schema that could be used to validate your JSON
- Quickly scan related values to check for edge cases
Features
Column view
Inspired by macOS Finder, Column View is a new way to browse a JSON document.
It has all the features you'd expect: Keyboard navigation, Path bar, history.
It also has a nifty feature that allows you to "hold" a descendent selected and travel up through the hierarchy, and then move between siblings and view the different values found at that path. It's hard to describe, but here is an animation to help demonstrate:
As you can see, holding the Option (or Alt key on Windows) while moving to a parent keeps the part of the document selected and shows it in context of it's surrounding JSON. Then you can traverse between items in an array and compare the values of the selection across deep hierarchy cahnges.
Editor view
View your entire JSON document in an editor, but keep the nice previews and related values you get from the sidebar as you move around the document:
Tree view
Coming soon
Terminal
Coming soon
Bugs and Feature Requests
Have a bug or a feature request? Feel free to open a new issue.
You can also join our Discord channel to hang out and discuss anything you'd like.
Developing
To run locally, first clone the repo and install the dependencies:
git clone https://github.com/jsonhero-io/jsonhero-web.git
cd jsonhero-web
npm install
Then, create a file at the root of the repo called .env and set the SESSION_SECRET value:
SESSION_SECRET=abc123
Now, run npm start and open your browser to http://localhost:8787