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

开通后有三种使用方式：

WebUI（浏览器对话）：在 AI 开发者空间里打开码道对话窗口，用自然语言描述需求，码道自动创建项目、编写代码、启动部署。全程浏览器操作，零安装，最适合快速原型和 Demo 开发。本文用这种方式演示。
TUI（终端命令行） ：在本地终端里运行 codearts 命令进入交互界面，适合需要本地文件系统操作、命令行工具开发的场景。
桌面 IDE（IDE 插件）：在 CodeArts IDE 里安装码道插件，边写代码边让 AI 补全、重构，适合正式项目开发。

进入 AI 开发者空间

浏览器打开 https://developer.huaweicloud.com/devspace/
弹窗「请选择要进入的版本」→ 点击 体验版
首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
弹窗「临时凭据自动配置」→ 点击同意，沙箱自动创建

进入 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 的 <script> 里。核心功能包括：

1. 树形折叠展开

JSON 解析后递归渲染成树形结构，每个对象和数组节点都可以点击折叠或展开：

点击节点前的箭头图标（▸/▾）切换折叠状态
提供全部展开 和全部折叠按钮，一键操作整棵树
嵌套层级自动缩进，层级关系一目了然
数组节点显示元素数量，对象节点显示键值对数量

2. 语法高亮

不同类型的值用不同颜色区分，一眼看出数据类型：

字符串：绿色
数字：蓝紫色
布尔（true/false）：橙色
null：灰色
键名：浅蓝色，与值颜色区分

3. 搜索过滤

顶部搜索框输入关键词，实时高亮匹配的键名和值：

输入即过滤，匹配节点高亮显示
不匹配的节点可自动折叠，只保留命中路径
支持在深层嵌套中快速定位目标字段

4. 节点复制

点击任意节点可以复制其内容：

复制节点路径 （如 data.users[0].name），方便在代码里引用
复制节点值，支持复制单个值或整个子对象的 JSON
点击后有视觉反馈提示复制成功

5. 深色主题

界面采用深色主题，长时间使用不刺眼：

深色背景 + 高对比度文字
语法高亮颜色在深色背景下更鲜明
输入框和树形区域视觉分离，布局清晰

运行效果

实际验证：打开页面后左侧文本框粘贴一段 JSON，右侧立刻渲染成树形结构；点击节点箭头折叠展开，层级缩进清晰；字符串绿色、数字蓝紫、布尔橙色，类型一眼可辨；搜索框输入关键词，匹配节点高亮闪烁；点击节点复制路径，粘贴到别处直接可用；全部展开按钮一键展开所有层级，全部折叠一键收起。

完整界面效果，左侧 JSON 输入区，右侧树形渲染区，深色主题整体观感：

直接试玩

这个工具已经完整开源（源代码、本文档、全部截图），托管在 Demo Park 仓库：

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-json-tree-viewer

打开上面的链接，进入 codearts-json-tree-viewer 文件夹，把 index.html 下载到本地，浏览器打开即可使用。粘贴任意 JSON 数据，立刻获得可折叠展开的树形视图，无需安装任何依赖。

总结

一次需求生成一个能用的 JSON 树形查看器，从递归解析、树形渲染、语法高亮到搜索过滤和节点复制，全部由码道 WebUI 完成。不需要自己搭框架、写解析逻辑，只要把功能和交互说清楚，码道就交付了一个体验完整的工具。而且自带部署，内置预览链接打开即用，不需要自己配服务器。

WebUI 的优势在于零安装零配置：浏览器打开码道对话窗口，输入自然语言需求，代码生成、项目创建、HTTP 部署一条龙完成。对于这种单文件工具类应用，从想法到可运行的产品只需要一句话。想体验这种从自然语言直接到可运行工具的流程，免费开通码道体验版：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz