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
这是什么？JSON Hero 是一个开源的网页应用，提供简洁、快速的界面，用于浏览、搜索和理解 JSON 文件，并提供列视图、树形视图和编辑器视图，以及智能预览。
这是托管网站、自托管应用，还是我可以导入的库？它是一个基于 Remix 的网页应用：你可以直接使用托管的 jsonhero.io，也可以克隆下来自己运行。它不是可以导入代码中使用的库。
我怎样在 JSON Hero 中打开我的 JSON？在 jsonhero.io 上拖放文件或粘贴 JSON/JSON 链接；通过 jsonhero.io/new 端点传入 base64 数据或链接；使用 VS Code 或 Raycast 扩展；或者向非官方的 jsonhero.io/api/create.json 接口发送 POST 请求。
我在本地运行它需要什么？你需要 Node.js（引擎要求 >=14）、npm，以及一个包含 SESSIONSECRET 值的 .env 文件，然后再运行 npm run build 和 npm start。
有没有我可以依赖的官方公开 API？没有，目前只记录了一个非官方的创建接口，因此基于它开发的集成不保证稳定。
除了浏览器，它还能在其他地方运行吗？核心产品是网页应用，但提供了配套的 VS Code 和 Raycast 扩展，可以直接在这些工具中打开 JSON。
查看 JSON 文件有哪些不同方式？你可以使用受 macOS Finder 启发的列视图、传统的树形视图，以及完整的编辑器视图；同时可以让内容预览和相关值侧边栏始终可见。
内容预览有什么用？JSON Hero 会推断字符串值的类型，并为日期、图片链接、网站链接、推文链接、JSON 链接和颜色渲染智能预览，而不是只显示原始文本。
我能在 JSON 文件中搜索吗？可以，模糊搜索面板会搜索键名、键路径、原始值，甚至格式化后的值，因此搜索 'Dec' 就能找到 December 的日期时间字符串。
它会为我的 JSON 生成 Schema 吗？会的，它会根据你的文档自动生成推断出的 JSON Schema，可用于校验。
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