JSON Crack 上手：嵌套 JSON 画成结构图，免费但有 300KB 上限

JSON Crack 是一个在浏览器里运行的 JSON 可视化工具。把一段嵌套很深的 JSON 粘进左侧编辑器，右侧会实时画出可折叠的结构图。它解决的不是格式化问题，而是"看不懂层级"的问题。

在线版免费、不用注册，源码在 GitHub 以 Apache-2.0 协议开放。下面按实际使用顺序，说清它怎么用、免费版能撑到哪、什么时候该换别的工具。

JSON Crack 是什么，和格式化器差在哪

常见的 JSON 工具做两件事：检查语法、按缩进排版。JSON Crack 多做一步，把数据画成节点图。对象、数组、值各占一个节点，父子关系用连线表示，点一下就能折叠整棵子树。

它同时提供图和树两种视图，粘贴时自动解析，改文本时图形跟着变。输入可以是 JSON、YAML、XML 或 CSV，四种格式之间能互相转换。

判断标准很简单：如果只关心某个字段的值，格式化器够用；如果要先弄清每一层装的是什么，图视图更省时间。嵌套三层的订单、带多级分类的配置、接口里层层包裹的 data 字段，都属于后者。

项目在 2022 年 1 月 30 日建仓，同年 2 月 17 日发布 v1.0。截至 2026 年 11 月 7 日，仓库有 44589 个 Star、3587 个 Fork、47 个未关闭 issue，主语言 TypeScript，许可证为 Apache-2.0。

上手：三步把一段 JSON 变成结构图

第一步，打开 JSON Crack 首页，点 Open JSON Editor 进入编辑器，不需要账号。顶部有 File、View、Tools 三个菜单，右侧另有一个指向 ToDiagram 的 Pro 入口。

第二步，把 JSON 粘进左侧，也可以拖入本地文件，或者填一个返回 JSON 的 URL。解析在浏览器内完成，编辑区上方会显示 Valid 状态和当前格式标识，格式选错时手动切换即可。

第三步，在搜索框里输入字段名，命中的节点高亮，其余变淡；点节点旁的箭头折叠无关分支，只留关心的子树。看完从 File 菜单导出 PNG、JPEG 或 SVG。

想练手可以找几个公开 API，把返回体粘进来看层级，公开数据与免费 API 清单里有些现成入口。

编辑器地址支持带参数加载远程数据，格式是 jsoncrack.com/editor?json=数据地址。这个用法适合把固定示例放进文档，读者点开就能看到图，不用自己复制粘贴。

能做什么：转换、校验、查询与代码生成

除了看结构，编辑器里还带了一批开发时常用的小功能。它们不是各自独立的页面，而是同一个输入框上的不同出口。

• 格式互转：JSON 转 CSV、YAML 转 JSON、XML 转 JSON 等。
• 校验与格式化：检查 JSON、YAML、CSV 的语法，顺手排版。
• 查询：支持 jq 语法和 JSONPath，按路径取子节点再导出。
• 代码生成：按样例数据产出 TypeScript interface、Go struct、Rust serde 结构和 JSON Schema。
• 杂项：JWT 解码、生成随机测试数据。
• 嵌入：iframe 指向 /widget，或用 postMessage 传数据，也可以装 jsoncrack-react 包做 React 组件，具体写法在官方嵌入文档里。

如果只是想在编辑器里看，官方还提供了 VS Code 扩展。装好后打开 .json 文件，点右上角图标就能切到图视图，解析与渲染都在本地完成，不往服务器发数据。

代码生成适合起手，不适合直接交付。按样例推断出的类型，可选字段可能被写成必填，嵌套数组的元素类型也常要人工收窄，生成后仍需要过一遍。

源码在 GitHub 仓库公开，想二次开发或者内网自建，可以按 Apache-2.0 的条款自己部署一份。

免费额度与三条实际边界

在线版没有账号体系，也没有每日次数限制，官方 FAQ 的说法是长期免费的开源工具。真正要留意的是另外三件事。

其一，边界在数据量。官方给出的参考值是约 300 KB，实际能到多少取决于数据复杂度和机器性能。一份几兆的接口日志粘进去，页面会明显卡顿，图形也很难看清。

其二，边界在功能分层。团队协作、私有云保存、AI 生成图这类能力已经迁到 ToDiagram，JSON Crack 本身只保留编辑器。以前订阅过的用户，可以用同一套账号在 ToDiagram 登录。

其三，边界在隐私口径。官方强调编辑内容只在浏览器处理、不存到服务器；但隐私政策仍写明可能收集使用数据、使用 Cookie 和 Google Analytics。处理生产环境数据前，建议先脱敏再粘。

适用与不适用场景，以及可以换用什么

适合的场景很具体：调试接口返回、排查 webhook 的嵌套结构、给同事讲清一份 OpenAPI schema、在文档或 issue 里放一张结构图。这类数据通常在几十 KB 以内，看图比滚文本快。

不适合的场景同样明确：几百兆的日志、需要逐字对比两版文件的差异、必须留在内网不能过浏览器的数据。这些需求用别的工具更省事。

• 要看超大文件：JSON Editor Online 支持到 512 MB，有文本、树、表格三种视图和差异对比，当前版本 7.15.1，私有云文档需要订阅。
• 要在终端里批量处理：jq 一行命令就能筛字段、拼结构，适合写进脚本和流水线，终端命令行工具清单里有它的位置。
• 只是临时解码一个 JWT：CyberChef 这类浏览器内工具箱也能完成，不一定要开结构图。

如果主要工作在 VS Code 里，先装扩展比开网页顺手；如果经常处理大文件，直接换 JSON Editor Online；如果只做格式化，编辑器自带的 Format Document 就够用。

两个常见疑问

粘进去提示解析失败怎么办？先看是不是复制时带了多余逗号或注释，JSON 本身不允许注释。YAML 和 CSV 要先在左上角切换格式，否则会被当成 JSON 解析。

节点挤在一起看不清怎么办？节点可以拖动来挪位置；也可以先用搜索缩小范围，或者折叠上层节点，只展开关心的分支，图会自动重排。

相关地址

以下为文中入口的官方地址，功能、版本与条款以各站页面为准。

• JSON Crack（官网）：https://jsoncrack.com/
• JSON Crack（在线编辑器）：https://jsoncrack.com/editor
• JSON Crack（嵌入文档）：https://jsoncrack.com/docs
• JSON Crack（GitHub 仓库）：https://github.com/AykutSarac/jsoncrack.com
• ToDiagram（Pro 版入口）：https://todiagram.com/
• JSON Editor Online（同类替代）：https://jsoneditoronline.org/