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` 命令，以及位于 apps/www 下的 Docker 相关文件，可用于本地托管。
构建之前需要先安装什么？Node.js 24 或更高版本，以及 pnpm 10 或更高版本。
我能可视化的 JSON 文件大小有限制吗？有限制。图形的节点数量上限是可配置的，由 apps/www/.env 中的 NEXT_PUBLIC_NODE_LIMIT 环境变量控制。
可视化时，我的数据会被上传到任何地方吗？不会。所有处理都在你的浏览器或应用中本地完成，不会存储在他们的服务器上。
它能在格式之间转换吗，比如从 JSON 转成 CSV？可以，它能在不同格式之间无缝转换，例如 JSON 转 CSV，或 XML 转 JSON，方便分享。
它能根据我的 JSON 生成代码吗？可以，它能根据你的数据生成 TypeScript 接口、Golang 结构体、Kotlin 数据类、Rust serde 类型以及 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