Introducing JSON Hero: an open-source, beautiful JSON viewer for the web that lets you browse, search and navigate your JSON files at speed. 🚀

Programming on the web in 2022:

https://twitter.com/tlakomy/status/1491049739978436612

So we set out to create a new tool to make reading and understanding JSON easier and more efficient than a Wall-O-Text:

brandbird (8).png

It's too easy to get lost in a deeply nested document, and you end up having to resort to manually collapsing parts of the hierarchy so you can more easily focus on subset of the JSON you care about. Unfortunately, this makes comparing related values difficult and time consuming.

The macOS Finder solves some of these issues by providing a handy Column View

Screen Shot 2022-04-22 at 10.15.45.png

If we apply those same principles to a JSON document, it might look something like this:

It has all the features you'd expect: keyboard navigation, path bar, history. Try it now on jsonhero.io

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:

The smart preview pane

We built a preview pane that displays more information about the current selection. It can automatically infer the content of the selected item and give you intelligent previews for dates and times, websites, tweets, youtube videos, colors, and more:

Easily see all the related values across your entire JSON document for a specific field, including any undefined or null values:

Search everything

Looking for something specific? Use CMD+K and quickly pull up the fuzzy search palette. Search for object keys, paths, values, and even formatted values (e.g. searching for "Dec" will find "2021-12-01T13:56:12Z")

Keeping with tradition

Column view might not be the right view for all occasions, so we built a classic JSON tree view as well

Tree View

We built this tree view from the ground-up to be fast and scale to large documents, making use of the great react-virtual project to ensure buttery-smooth scrolling. It's also a ARIA-compliant tree view and has all the keyboard shortcuts you'd expect for quickly traversing and collapsing/expanding content.

We also included a CodeMirror 6-powered editor that keeps the nice previews and related values you get from the sidebar as you move around the document:

Editor View

Automatically inferred JSON Schema

Get a head-start on creating a JSON Schema document from your JSON using our automatically inferred schema generator, powered by @jsonhero/schema-infer:

Screen Shot 2022-04-22 at 10.48.31.png

Easily share the link to your JSON and even link to a specific part of the document

Screen Shot 2022-04-22 at 10.50.16.png

IMPORTANT: Anyone who has the URL to your JSON will be able to view it, and all of JSON Hero is public. If you are using jsonhero.io, your data is stored in Cloudflare KV.

100% Open Source

If you'd like to contribute or run JSON Hero yourself, feel free to join us on our GitHub. JSON Hero is a remix React app that runs on Cloudflare Workers, written in Typescript.

👉 Please give us a star on GitHub to get the latest updates 🌟

Introducing JSON Hero: an open-source, beautiful JSON viewer for the web that lets you browse, search and navigate your JSON files at speed. 🚀

Comments (13)

More from this blog

Introducing API Hero: an open-source proxy that makes every API you use faster and more reliable

How to programmatically create a commit on GitHub using the GitHub API and API Hero

How to use the GitHub API directly from your Next.js app using API Hero

Introducing API Hero: integrate popular APIs in seconds and scale without servers