← 返回项目
PROJECT · 04

JSON / ATLAS

粘贴原始 JSON、定位语法错误,并在格式化文本与可探索树之间快速切换;数据始终留在浏览器中。

状态
可运行原型
角色
工具设计、交互设计、前端
周期
1 周
年份
2026
1 FILE单文件应用
0数据上传
100%本地处理
CASE STUDY
ToolingJSONVanilla JS

起点

处理接口响应和配置文件时,人们经常在编辑器、在线格式化工具和浏览器控制台之间来回切换。问题不只是格式混乱,而是语法错误通常没有足够清晰的位置提示。

交互模型

左侧保留原始文本,右侧把合法数据转换成可折叠的结构树。格式化、压缩、搜索和路径查看围绕同一份本地状态工作,不需要上传数据或创建账户。

错误恢复

当解析失败时,工具会定位可能的行列位置并保留原始内容,用户可以直接回到出错字符继续编辑,而不是先清空或覆盖输入。

技术取舍

整个 Demo 由一个静态文件组成,不使用框架或远程依赖。所有用户内容通过文本节点渲染,解析只使用 JSON.parse,避免执行或拼接输入数据。

结果

它把一个常见的小任务做成了完整工具:足够快、足够明确,也能证明信息结构、安全边界和键盘体验可以同时被认真处理。

SANDBOXED EXPERIENCE

可交互 Demo

Demo 在隔离的沙箱中运行。