Programming on the web in 2022:
So we set out to create a new tool to make reading and understanding JSON easier and more efficient than a Wall-O-Text:
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
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:
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
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:
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:
Sharing is caring
Easily share the link to your JSON and even link to a specific part of the document
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
👉 Please give us a star on GitHub to get the latest updates 🌟