# 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1650628468309/6pVji7mEs.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1650618949807/hg8lnmXnM.png)

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

![features-columnview.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1650619091762/R5qXB8_7Y.gif)

It has all the features you'd expect: keyboard navigation, path bar, history. Try it now on [jsonhero.io](https://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:

![features-traversewithcontext.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1650619153895/w06qOpZ74.gif)

#### 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:

![features-preview-imageurls.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1650619546686/psl7vbgQM.png)

#### Related values

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

![features-relatedvalues.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1650619605026/syKnQznnl.gif)

#### 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")

![features-search.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1650619698077/KLZhq6_d1.gif)

#### 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](https://raw.githubusercontent.com/jsonhero-io/documentation-hosting/main/images/features-treeview.gif)

We built this tree view from the ground-up to be fast and scale to large documents, making use of the great [react-virtual](https://github.com/TanStack/react-virtual) project to ensure buttery-smooth scrolling. It's also a [ARIA-compliant](https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html) tree view and has all the keyboard shortcuts you'd expect for quickly traversing and collapsing/expanding content.

We also included a [CodeMirror 6](https://codemirror.net/6/)-powered editor that keeps the nice previews and related values you get from the sidebar as you move around the document:

![Editor View](https://raw.githubusercontent.com/jsonhero-io/documentation-hosting/main/images/features-editorview.gif)

#### 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](https://github.com/jsonhero-io/schema-infer):


![Screen Shot 2022-04-22 at 10.48.31.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1650620957623/fwCkUrXxF.png)

#### Sharing is caring

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1650621075929/3td6K9XW_.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](https://github.com/jsonhero-io/jsonhero-web). JSON Hero is a [remix](https://remix.run) React app that runs on [Cloudflare Workers](https://workers.cloudflare.com/), written in Typescript. 

👉 Please give us a star on [GitHub](https://github.com/jsonhero-io/jsonhero-web) to get the latest updates 🌟