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 в JSON Hero?Перетащите файл или вставьте JSON либо ссылку на JSON на jsonhero.io, передайте данные или URL в base64 через эндпоинт jsonhero.io/new, используйте расширение для VS Code или Raycast либо отправьте POST-запрос к неофициальному API jsonhero.io/api/create.json.
Что нужно, чтобы запустить это локально?Нужны Node.js (в поле engine указана версия >=14), npm и файл .env со значением SESSIONSECRET перед запуском npm run build и npm start.
Есть ли официальный публичный API, на который я могу опереться?Нет, задокументирован только неофициальный эндпоинт создания, поэтому интеграции на его основе не гарантированно будут стабильными.
Работает ли это где-то, кроме браузера?Основной продукт — веб-приложение, но есть сопутствующие расширения для VS Code и Raycast, которые открывают JSON прямо из этих инструментов.
Какие есть способы просмотра JSON-файла?Есть колоночный вид в духе Finder из macOS, традиционный древовидный вид и полный режим редактора; при этом превью содержимого и боковые панели связанных значений остаются видимыми.
Чем полезны превью содержимого?JSON Hero определяет тип строковых значений и показывает умные превью для дат, ссылок на изображения, ссылок на сайты, ссылок на твиты, ссылок на JSON и цветов вместо простого текста.
Можно ли искать внутри JSON-файла?Да, панель нечёткого поиска ищет по именам ключей, путям ключей, исходным значениям и даже по отформатированным значениям, так что поиск по 'Dec' находит строки с датами в декабре.
Генерирует ли оно схему для моего JSON?Да, оно автоматически создаёт выведенную 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