一个标星38.1k⭐优雅的JSON数据可视化工具:jsoncrack.com

1.一个优雅的JSON数据可视化工具:http://jsoncrack.com 38.1k⭐

• OpenGithub社区：https://open.itc.cn/
• Github : https://github.com/OpenGithubs
• Github 2024:https://github.com/OpenGithubs/Summary2024
• 微信公众号: >>搜索开源推荐官
• 头条社区: >>搜索开源推荐官
• 知乎社区: >>搜索Open Github社区
• 微信交流群:+微信: open_github

优雅的 JSON 数据可视化工具。该项目不是简单的展示 JSON 数据，而是将其转化为类似脑图的形式，支持放大/缩小、展开/收缩、搜索节点、导出图片等操作，还可以快速部署成服务。

[官网] [使用文档]

2.项目流行趋势

• 项目地址：https://github.com/AykutSarac/jsoncrack.com
• Github趋势榜：
  • 入选2025-06-24日榜,日增⭐115 stars today
  • 入选2025-06-25日榜,日增⭐76 stars today
  • 入选2025-06-25周榜,周增⭐191 stars this week
  • 入选2025-02-26月榜,月增⭐2,502 stars this month
• 开源时间：2022-01-30
• 最后更新：2025-06-20
• 主要语言：TypeScript
• 项目分类：[后端] [工具]
• Star历史曲线：

3. JSON Crack 使用指南与核心特性

在线使用

1. 打开网址：
   https://jsoncrack.com/editor
2. 在左侧粘贴或输入任意 JSON 数据。
3. 右侧自动生成结构图谱，支持缩放、拖动、折叠节点。
4. 可导出为 PNG 或 SVG 格式图像，便于文档/汇报展示。

本地部署步骤

如需本地运行或自定义开发：

# 克隆项目
git clone https://github.com/AykutSarac/jsoncrack.com
cd jsoncrack.com

# 安装依赖
pnpm install   # 或使用 npm install

# 启动开发服务器
pnpm dev

# 浏览地址
http://localhost:3000

示例：

{
  "name": "Alice",
  "age": 30,
  "skills": ["JavaScript", "Python", "UI Design"],
  "address": {
    "city": "San Francisco",
    "zip": "94107"
  }
}

将以上 JSON 粘贴到网站中，立即生成结构图谱

使用场景

• 前后端开发调试接口
• 数据结构建模可视化
• API 文档展示优化
• 团队交流和非技术人员演示
• 学习 JSON / 数据结构可视化逻辑

更多Github开源项目,请关注微信&公众号

欢迎添加微信好友共同学习进步，微信号：open_github

▲关注公众号”开源推荐官”，洞察Github开源社区动态