大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 JSON Crack

✨ Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.

JSON Crack 是一款用于将 JSON 数据可视化为结构化交互式图表的工具，让开发者更轻松地探索、格式化和验证 JSON 数据。其提供多种功能，例如：将 JSON 转换为其他格式（CSV、YAML）、生成 JSON Schema、执行查询以及将可视化结果导出为图像。同时，该工具兼顾了可读性和易用性。

传统的 JSON 查看器和 JSON 格式化工具只能让用户在文本编辑器中处理原始数据，而 JSON Crack 则提供了一种独特的数据可视化方式，使理解和分析复杂的数据结构变得更加容易，其提供树状视图和图形视图，帮助用户以完全不同的方式渲染数据。

JSON Crack 的典型特征包括：

• 可视化工具：即时将 JSON、YAML、CSV、XML 和 TOML 转换为交互式图表或树状图，并支持深色和浅色模式
• 转换：无缝转换数据格式，例如：将 JSON 转换为 CSV 或将 XML 转换为 JSON，方便共享
• 格式化和验证：支持美化和验证 JSON、YAML 和 CSV 文件，确保数据清晰准确
• 代码快速生成：生成 TypeScript 接口、Golang 结构体和 JSON Schema
• JSON Schema：支持创建 JSON Schema、模拟数据并验证各种数据格式
• 高级工具：支持解码 JWT、随机化数据以及运行 jq 或 JSON Path 查询
• 支持导出图像：支持将图表导出为 PNG、JPEG 或 SVG 格式的图像并与他人分享
• 隐私优先：所有数据处理均在本地进行，服务器上不会存储任何数据
• 支持大体积转换：大约支持 300 KB 的数据，但实际支持量可能会因数据复杂程度和硬件配置而异
• 编辑器环境支持：支持从 VS Code 应用商店快速安装扩展程序，并按照扩展程序页面上的说明进行 JSON 可视化操作

目前 JSON Crack 在 Github 通过 Apache-2.0 许可证开源，有超过 43k 的 star、4k 的 fork、是一个妥妥的前端优质开源项目。

如何使用 JSON Crack

JSON Crack 消除了原始、混乱数据的混乱，使复杂的数据看起来简单易懂，而且使用起来非常简单。

首先克隆仓库
https://github.com/AykutSarac/jsoncrack.com/fork：

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

然后进入仓库目录：

cd jsoncrack.com

接着安装相应的包：

pnpm install
// 安装相应的依赖

然后执行下面的命令运行项目：

// 启动项目
pnpm dev
// Running on http://localhost:3000/

同时，仓库根目录下提供了一个 Dockerfile 文件，如果想在本地运行 JSON Crack，可以通过下面的命令：

# Build a Docker image with:
docker compose build

# Run locally with `docker-compose`
docker compose up
# Go to http://localhost:8888

参考资料

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

https://jsoncrack.com/

https://community.postman.com/t/json-crack-visualising-json-data/40372