jsonhero-web README

The project's README from github.com/triggerdotdev/jsonhero-web. As one markdown file: README.md.

Trigger.dev logo

Open Bounties Rewarded Bounties

Brought to you by Trigger.dev

JSON Hero was created and is maintained by the team behind Trigger.dev. With Trigger.dev you can trigger workflows from APIs, on a schedule, or on demand. We make API calls easy with authentication handled for you, and you can add durable delays that survive server restarts.

JSON Hero

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

JSON Hero Screenshot

Features

Send to JSON Hero

Send your JSON to JSON Hero in a variety of ways

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.)

Search

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

JSON URLs

Preview JSON

Colors

Preview colors

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

Editor view

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/triggerdotdev/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

Then, run npm run build or npm run dev to build.

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

jsonhero-web (triggerdotdev/jsonhero-web)

Searching Database…

10.9K ·GitHub
Jsonhero-web
What is this?JSON Hero is an open-source web app that gives you a clean, fast UI for browsing, searching and understanding JSON files, with column, tree and editor views plus smart previews.
Is this a hosted site, a self-hosted app, or a library I import?It is a Remix-based web app: you can use the hosted jsonhero.io, or clone and run it yourself. It is not a library you import into code.
How do I open my JSON in JSON Hero?Drag and drop a file or paste JSON/a JSON URL at jsonhero.io, pass a base64 payload or URL via the jsonhero.io/new endpoint, use the VS Code or Raycast extension, or POST to the unofficial jsonhero.io/api/create.json API.
What do I need to run it locally?You need Node.js (engine requires >=14), npm, and a .env file with a SESSIONSECRET value before running npm run build and npm start.
Is there an official public API I can rely on?No, only an unofficial create endpoint is documented, so building integrations against it isn't guaranteed to be stable.
Does this run anywhere besides the browser?The core product is a web app, but there are companion VS Code and Raycast extensions for opening JSON directly from those tools.
What are the different ways to view a JSON file?You get a macOS Finder-inspired Column View, a traditional Tree View, and a full Editor View, all while keeping content previews and related-value sidebars visible.
What makes the content previews useful?JSON Hero infers the type of string values and renders smart previews for dates, image URLs, website URLs, tweet URLs, JSON URLs, and colors instead of showing raw text.
Can I search inside a JSON file?Yes, a fuzzy search panel searches key names, key paths, raw values, and even formatted values, so searching 'Dec' finds December datetime strings.
Does it generate a schema for my JSON?Yes, it automatically creates an inferred JSON Schema from your document that you can use for validation.
What are similar projects?omni-tools, jsoncrack.com, react-jsonschema-form, theatre, quicktype, graphiql, 3d-asset-server, router
Which topics is it in?viewer, raycast, json-schema, tools, vscode-extension, devtools, search, editor, json, hacktoberfest, react, frontend
Creator
triggerdotdev
Size
57.3 MB
Stars
10.9K
Updated
CommitJul 17
Age
4y
Commits · 90 Days