JSON 树形查看器：粘贴即解析，折叠展开一目了然

# JSON 树形查看器：粘贴即解析，折叠展开一目了然 > 本案例用华为云 CodeArts 码道 **WebUI** 作为开发入口：在浏览器里打开码道对话窗口，用自然语言描述需求， > 码道直接生成一个单文件 `index.html` 的 JSON 树形查看器，粘贴 JSON 即可折叠展开浏览，自带语法高亮和搜索过滤。 > 不用装 CLI、不用配 AK/SK，全程浏览器搞定，内置部署还能给出公网预览链接。 > 源码和截图全部开源在文末 Demo Park。 ## 为什么需要一个 JSON 查看器 做开发和接口联调时，JSON 几乎无处不在——API 返回值、配置文件、日志数据，动辄几百上千行。问题来了： - 直接看一坨压缩过的 JSON，括号嵌套深到看不出层级，找个字段要数半天缩进。 - 编辑器里格式化虽然能用，但层级关系仍然不直观，大文件展开后滚动找半天。 - 在线工具能用，但粘贴敏感数据到第三方网站总有顾虑，而且很多不支持深色主题。 最理想的方式是：**粘贴进去立刻解析成可折叠的树**，点一下展开、收起，关键值带语法高亮颜色区分，还能搜索定位。这种工具自己写也不难，但要从零做一个体验好的——树形渲染、递归解析、搜索高亮、深色主题——还是需要花点功夫的。 这次用码道 WebUI，一句话需求就生成了完整的单文件应用。 ## 码道开通（免费体验版） 开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用： [https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz](https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz) 开通后有三种使用方式： - **WebUI（浏览器对话）**：在 AI 开发者空间里打开码道对话窗口，用自然语言描述需求，码道自动创建项目、编写代码、启动部署。全程浏览器操作，零安装，最适合快速原型和 Demo 开发。本文用这种方式演示。 - **TUI（终端命令行）**：在本地终端里运行 `codearts` 命令进入交互界面，适合需要本地文件系统操作、命令行工具开发的场景。 - **桌面 IDE（IDE 插件）**：在 CodeArts IDE 里安装码道插件，边写代码边让 AI 补全、重构，适合正式项目开发。 ## 进入 AI 开发者空间 1. 浏览器打开 [https://developer.huaweicloud.com/devspace/](https://developer.huaweicloud.com/devspace/) 2. 弹窗「请选择要进入的版本」→ 点击 **体验版** 3. 首次使用会跳到华为云登录页，**扫码登录一次**，后续浏览器会话复用 4. 弹窗「临时凭据自动配置」→ 点击 **同意**，沙箱自动创建 进入 AI 开发者空间主界面后，左侧菜单栏找到 **CodeArts**，点击它右侧的**浏览器图标**，弹出码道 WebUI 对话窗口，底部输入框提示「尽管吩咐，我来帮你搞定」。 > 小贴士：体验版沙箱 3 小时后自动重置，关键内容记得及时保存。 ## 任务描述 在码道 WebUI 输入框粘贴以下需求，回车发送（模型默认 `glm-5.2`，可直接用）： ``` 开发一个 JSON 树形查看器网页工具：左侧文本框粘贴 JSON，右侧实时渲染成可折叠展开的树形结构，支持语法高亮（字符串、数字、布尔、null 不同颜色）、搜索过滤高亮匹配节点、点击节点复制路径和值、一键全部展开/折叠、深色主题界面美观，单个网页即开即用。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。 ```  需求发出后，左侧「任务」计数 +1，码道开始自动拆解任务、创建项目、编写代码。 ## 开发过程 码道接收到需求后，自动完成了以下工作，整个过程约几分钟： - 创建项目目录 `/workspace/json-tree-viewer` - 生成单文件 `index.html`，包含 JSON 解析、递归树形渲染、语法高亮、搜索过滤、节点复制、深色主题等完整逻辑 - 启动 `python3 -m http.server` 部署 HTTP 服务 - `curl` 自检确认页面可访问 完成后码道输出任务摘要，包含内部预览访问地址和功能清单。打开预览链接即可使用工具。 ## 功能解析 生成的 JSON 树形查看器是一个纯前端单文件应用，所有逻辑在 `index.html` 的 `