JSON Hero is an open-source, beautiful JSON explorer for the web that lets you browse, search and navigate your JSON files at speed. πŸš€



JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features.

  • 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
  • Search your JSON files (both keys and values)
  • Keyboard accessible
  • Easily sharable URLs with path support

JSON Hero Screenshot


Column view

Inspired by macOS Finder, Column View is a new way to browse a JSON document.

JSON Hero Column View

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:

Column View - Traverse with Context

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:

Editor view

Tree view

Use a traditional tree view to traverse your JSON document, with collapsible sections and keyboard shortcuts. All while keeping the nice previews:

Tree view


Quickly open a search panel and fuzzy search your entire JSON file in milliseconds. Searches through key names, key paths, values, and even pretty formatted values (e.g. Searching for "Dec" will find datetime strings in the month of December.)


Content Previews

JSON Hero automatically infers the content of strings and provides useful previews and properties of the value you've selected. It's "Show Don't Tell" for JSON:

Dates and Times

Preview colors

Image URLs

Preview colors

Website URLs

Preview websites

Tweet URLS

Preview tweets


Preview JSON


Preview colors

Related Values

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

Editor view

Keyboard Shortcuts


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.


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:


Now, run npm start and open your browser to http://localhost:8787

  • Feature request: add support for jumping to json node by specific path.

    Feature request: add support for jumping to json node by specific path.

    Say I already open the json I need to view, and I got the path I want to jump to from another colleague, and I want to jump to this path without reload my page.

    It's more effective than using the search bar to search and navigate.

    opened by wufeng87 9
  • Added Shortcut Panel

    Added Shortcut Panel

    What does this pull request do?

    This pull request adds a panel that shows you every shortcut that the app uses. It is available after you either:

    • Open a JSON file
    • Open a URL that leads to a JSON file
    • Paste in some JSON on the home page

    It can be opened using:

    • The shortcut Alt/Option + S which can be seen in the button on the left-hand side of the footer
    • Clicking on the above-mentioned button

    When opened, it shows you a list of the app's shortcuts, all in their own categories, with icons for each of the shortcuts on the left. All shortcuts that use an OS-dependent modifier key (eg. Cmd (Mac) / Ctrl (Windows/Linux)) will only show the shortcut using the key that the user's OS would use.

    Screen Shot 2022-05-19 at 10 50 02 PM

    The panel is also dark mode styled and will change when the user toggles dark mode.

    Screen Shot 2022-05-19 at 10 41 58 PM

    The panel can be closed by:

    • Using the shortcut used to open the panel (Alt/Option + S)
    • Clicking anywhere outside of the panel
    • Clicking the "x" in the top right-hand corner of the panel

    There is a demo Loom video below where you can see all the functionalities that I described above in practice


    opened by om-ray 6
  • Change search bar shortcut key

    Change search bar shortcut key

    The current shortcut key is cmd+k however this collides with google's search shortcut key resulting in a poor user experience.


    My solution is to change the combination to shift+s which is more accessible and does not collide with any other shortcut.

    opened by MalikBagwala 6
  • Create docker file and docker build push CI

    Create docker file and docker build push CI

    Why docker?

    Make it easier to deploy and debug. Since everyone can pull the same image from Docker Hub and the npm dependencies would be handled well in the building stage of docker image. Also this makes it easier to deploy for the machines that have docker but no node.js environment.


    What is the purpose of setting SESSION_SECRET=abc123, should this be different for every deployment? If so, maybe we should set this SESSION_SECRET through a environment variable in docker?

    TODO before merge

    TODO after merge

    • [ ] Check the actions, are they working as expected
    • [ ] Check your Docker Hub account, are the newly pushed images as expected
    • [ ] Pull one of the image and try to run it locally

    Any suggestions are welcomed!

    opened by henryclw 6
  • Bug: crash when url isn't JSON (e.g. is HTML login page)

    Bug: crash when url isn't JSON (e.g. is HTML login page)

    When I open jsonhero with the following json


    I got this error image

    opened by cver 5
  • New copy to clipboard shortcut feature and footer icon

    New copy to clipboard shortcut feature and footer icon

    Hi! I just created this PR adding a new shortcut for copying the selected node. I leave some images here... tried to follow svg structure you have in the project πŸ˜ƒ

    Captura de pantalla 2022-04-27 a las 14 35 50 Captura de pantalla 2022-04-27 a las 14 35 56

    Few days using JSON Hero t handle big json files and feels quite comfortable... awesome app Let me know how it looks, in case you want me to add/edit something let me know! Thanks

    opened by DSGDSR 5
  • Compile error: [ERROR] Could not resolve

    Compile error: [ERROR] Could not resolve "./tailwind.css"

    Runtime is docker image: node:16.17.0 When run npm install and npm start,it occurs error:

    > start
    > concurrently "npm run dev" "npm run start:worker"
    [0] > dev
    [0] > concurrently "npm run dev:css" "npm run dev:search" "remix watch"
    [1] > start:worker
    [1] > miniflare --env .env --build-command "npm run dev:worker" --watch
    [0] [2] Watching Remix app in development mode...
    [0] [1]
    [0] [1] > dev:search
    [0] [1] > esbuild ./app/entry.worker.ts --outfile=./public/entry.worker.js --bundle --format=esm --define:process.env.NODE_ENV='"development"' --watch
    [0] [1]
    [0] [0]
    [0] [0] > dev:css
    [0] [0] > tailwindcss -i ./styles/tailwind.css -o ./app/tailwind.css --watch
    [0] [0]
    [1] > dev:worker
    [1] > esbuild --define:process.env.NODE_ENV='"development"' --bundle --sourcemap --outdir=dist ./worker
    [1] ✘ [ERROR] Could not resolve "../build"
    [1]     worker/index.js:3:23:
    [1]       3 β”‚ import * as build from "../build";
    [1]         β•΅                        ~~~~~~~~~~
    [0] [1] [watch] build finished, watching for changes...
    [1] 1 error
    [1] [mf:err] BuildError [1]: Build failed with exit code 1
    [1]     at ChildProcess.<anonymous> (/src/node_modules/@miniflare/core/src/plugins/build.ts:77:25)
    [1]     at ChildProcess.emit (node:events:513:28)
    [1]     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
    [1] npm run start:worker exited with code 1
    [0] [0] Browserslist: caniuse-lite is outdated. Please run:
    [0] [0]   npx browserslist@latest --update-db
    [0] [0]   Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
    [0] [0]
    [0] [0] warn - The `@variants` directive has been deprecated in Tailwind CSS v3.0.
    [0] [0] warn - Use `@layer utilities` or `@layer components` instead.
    [0] [0] warn - https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer
    [0] [0]
    [0] [0] Rebuilding...
    [0] [0] Done in 1887ms.
    [0] [2]
    [0] [2] ✘ [ERROR] Could not resolve "./tailwind.css"
    [0] [2]
    [0] [2]     app/root.tsx:43:19:
    [0] [2]       43 β”‚ import styles from "./tailwind.css";
    [0] [2]          β•΅                    ~~~~~~~~~~~~~~~~
    [0] [2]
    [0] [2]
    [0] [2] Build failed with 1 error:
    [0] [2] app/root.tsx:43:19: ERROR: Could not resolve "./tailwind.css"
    [0] [2] πŸ’Ώ Built in 3.6s
    opened by OneCodeMonkey 4
  • [feature request] provides timestamp preview

    [feature request] provides timestamp preview

    A date can be encoded as an int, as the number of second from epoch.

      "d1": "2022-09-10 10:19:05+02:00",
      "d2": 1662798100

    Like rfc-3339 string are displayed in a calendar, it would be nice to have the same preview for timestamp.


    good first issue hacktoberfest 
    opened by setop 4
  • Feat: Implement a JSON validation feature with alert message for malformed JSON submissions.

    Feat: Implement a JSON validation feature with alert message for malformed JSON submissions.

    Fix #62 where there are no error message shown to the user when a malformed JSON is submitted. Instead, it shows nothing if passed as a string/URL, or the app crashes completely if an invalid file is uploaded.

    What does this PR do?

    1. Added a generic Alert component based on https://v1.tailwindcss.com/components/alerts.
    2. Added a utility function to generate random UUID -> used for key generation on other components.
    3. createCookieSessionStorage to store cookies with Remix. Needed for the session flash.
    4. Implements additional validation features on the /actions/createFrom__ routes.
      1. Validates the content of upload files, redirect to index with an flag if invalid. Before, the app just crashes.
      2. Session flash: Return data to the fallback route during failure (landing page in this case).
    5. Add a Remix loader in the homepage to receive the data sent by the action routes.
    6. Add an alert box in the NewFile.tsx to show a message if the JSON submitted to the action routes is malformed.
      1. Styling fix: Replaced explicit margin mb-4 by setting the container to a flexbox with gap attribute specified.

    This is obviously a pretty big change and I would love to hear any suggestions to make this PR better.

    Possible alternative solution

    A much more simpler route than leveraging session flash is just by attaching a URL parameter on the redirect("/") call on the action routes. It would remove the need for the additional remix and cookie what-not. But since the project already depends on Remix, I see no reason why we shouldn't take full advantage of it.

    I am uncertain if using URL parameters for this would be the best approach or whether it is reliable. I am yet to encounter a project that prefers URL parameters for this sort of communication over something like flashing. It would also lead to a bad side effect. Imagine a user loading the URL with the parameter attached maybe from a link given by someone or a cached URL. Although they haven't submitted any JSON, as long as the flag is set, the alert message would still be shown.


    Alert message during failure.


    App crashes if the file uploaded has invalid content (fixed on this PR).


    opened by ShaneMaglangit 3
  • Bug: Switching to JSON view creates a weird padding at the bottom of the page.

    Bug: Switching to JSON view creates a weird padding at the bottom of the page.

    While working on another issue, I noticed that a weird padding pops up on the bottom of the page whenever the JSON View is opened.

    Steps to replicate

    1. Load the json page with Column View
    2. Switch to JSON View





    OS: Windows 11 Browser: Chrome

    good first issue hacktoberfest 
    opened by ShaneMaglangit 3
  • Nit: cursor should be pointer, not text, over JSON selector UI

    Nit: cursor should be pointer, not text, over JSON selector UI

    Currently, a text pointer is displayed over the text in the JSON selection/upload UI.


    The cursor should be a pointer over the whole container, including the text.

    Great project btw! πŸ‘πŸ™πŸ‘

    good first issue 
    opened by samdutton 3
  • Embeddable version of JSON Hero - needed feature

    Embeddable version of JSON Hero - needed feature

    I am using a JSON Hero tool a lot and whenever I use it, I have to open in another tab and continue browsing the JSON.

    So, I was thinking is there a chance to use JSON Hero tool on the same page where I am opening it from - my app page by using