jsoncrack.com README

The project's README from github.com/AykutSarac/jsoncrack.com. As one markdown file: README.md.

Logo

JSON Crack

The open-source JSON Editor.
Learn more »

ToDiagram · Discord · Website · Issues · VS Code · Chrome

About the Project

JSON Crack editor

Visualize JSON into interactive graphs

JSON Crack is a tool for visualizing JSON data in a structured, interactive graphs, making it easier to explore, format, and validate JSON. It offers features like converting JSON to other formats (CSV, YAML), generating JSON Schema, executing queries, and exporting visualizations as images. Designed for both readability and usability.

Recognition

Featured on Hacker News

JSON Crack | Product Hunt

Integrations

Contributing

Sponsors & Support

If you find JSON Crack useful, you can support the project by using ToDiagram. For sponsorship inquiries, reach out at [email protected].

Stay Up-to-Date

JSON Crack officially launched as v1.0 on the 17th of February 2022 and we've come a long way so far. Watch releases of this repository to be notified of future updates:

Star at GitHub

Getting Started

To get a local copy up and running, please follow these simple steps.

Prerequisites

Here is what you need to be able to run JSON Crack.

Development

Setup

  1. Clone the repo into a public GitHub repository (or fork https://github.com/AykutSarac/jsoncrack.com/fork). If you plan to distribute the code, read the LICENSE for additional details.

    git clone https://github.com/AykutSarac/jsoncrack.com.git

  2. Go to the project folder

    cd jsoncrack.com

  3. Install packages

    pnpm install

  4. Run the web app

    pnpm dev:www

# Running on http://localhost:3000/

Useful Commands

From repository root:

# Web app
pnpm dev:www
pnpm build:www

# VS Code extension
pnpm dev:vscode
pnpm build:vscode
pnpm lint:vscode
pnpm lint:fix:vscode

# Chrome extension
pnpm dev:chrome
pnpm build:chrome
pnpm lint:chrome

# All workspaces
pnpm dev
pnpm build
pnpm lint

Debug VS Code Extension

  1. Open repository root in VS Code.
  2. Press F5.
  3. Select Run VSCode Extension (apps/vscode) when prompted.
  4. In the Extension Development Host window, open a .json file and run: JSON Crack: Enable JSON Crack visualization.

Docker

🐳 Docker assets are in apps/www. If you want to run JSON Crack locally:

cd apps/www

# Build a Docker image with:
docker compose build

# Run locally with docker compose
docker compose up

# Go to http://localhost:8888

Configuration

The supported node limit can be changed by editing NEXT_PUBLIC_NODE_LIMIT in apps/www/.env.

License

See LICENSE for more information.

jsoncrack.com (AykutSarac/jsoncrack.com)

Searching Database…

44.5K ·GitHub
Jsoncrack.com
Что это такое?JSON Crack — это инструмент с открытым исходным кодом, который визуализирует данные в форматах JSON, YAML, XML и CSV в виде интерактивных графов или деревьев, упрощая изучение, форматирование и проверку структурированных данных.
Это веб-приложение или его можно использовать и как расширение?В основном это веб-приложение (построенное на Next.js), но тот же визуализатор также выпускается в виде расширения для VS Code, расширения для Chrome и npm-пакета.
Как мне запустить его самому, а не через размещённый сайт?Клонируйте репозиторий, перейдите в папку проекта, установите пакеты с помощью pnpm, затем запустите веб-приложение; также есть команда `turbo run dev --filter=www` и файлы Docker в apps/www для локального размещения.
Что мне нужно установить перед сборкой?Node.js версии 24 или выше и pnpm версии 10 или выше.
Есть ли ограничение на размер JSON-файла, который я могу визуализировать?Да, есть настраиваемый лимит количества узлов для графов, который задаётся переменной окружения NEXT_PUBLIC_NODE_LIMIT в файле apps/www/.env.
Мои данные куда-нибудь загружаются при визуализации?Нет, вся обработка происходит локально, в вашем браузере или приложении; ничего не сохраняется на их серверах.
Можно ли конвертировать данные между форматами, например из JSON в CSV?Да, данные можно без труда преобразовывать между форматами, например из JSON в CSV или из XML в JSON, для удобной передачи.
Можно ли сгенерировать код из моего JSON?Да, на основе ваших данных создаются интерфейсы TypeScript, структуры Golang, data-классы Kotlin, типы serde для Rust и JSON Schema.
Могу ли я экспортировать граф как изображение?Да, визуализацию можно скачать в форматах PNG, JPEG или SVG.
Поддерживает ли он расширенные запросы к данным?Да, есть продвинутые инструменты для выполнения запросов jq и JSON path непосредственно к вашим данным.
What are similar projects?xyflow, beautiful-mermaid, git-history, keywordpro, gitdiagram, jsonhero-web, smart-excalidraw-next, G6
Which topics is it in?diagrams, validation, csv, graph, vscode-extension, npm-package, yaml, chrome-extension, browser-extension, visualization, data-visualization, nextjs
Creator
AykutSarac
Size
41 MB
Stars
44.5K
Updated
CommitSep 14Releasev5.0.0Mar 11
Age
4y
Commits · 90 Days