作者分享
JSON Canvas
一个纯浏览器端的 JSON 可视化编辑工具,所有解析渲染都在本地完成,数据不上传服务器。
在线体验:https://json.nuaapicture.cloud/
核心特性
1. 双栏联动:源码 ↔ 结构图
• 左侧 CodeMirror 源码编辑,右侧自动布局结构图,同一份数据两种视角
• 双向定位:点图上节点→源码对应行高亮;移动源码光标→图上自动选中
• 分栏可拖拽,源码面板可收起
2. 可视化浏览与操作
• 节点展开/折叠、按分支整棵子树收起
• 双击卡片编辑值,实时同步回源码
• 右键复制键名 / 值 / JSONPath 路径(如 $.user.tags[0])/ 整个节点
3. 搜索与定位
• 源码搜索:查找、替换、替换全部
• 图上搜索:支持 $.a.b[0] 路径语法,一键定位深层字段
4. 多文档工作区
• 标签页管理多个 JSON,可新建/切换/重命名/关闭(中键快关)
• 自动存本地,刷新不丢
5. 导入与导出
• 打开本地 .json、从剪贴板粘贴
• 下载 JSON 文件;整个画布导出 PNG
6. 历史记录与版本对比
• 自动记录历史快照,可回溯/恢复/删除
• 任意两文档或快照 diff,差异标注且可点击跳转
7. 编辑辅助与校验
• 一键格式化 / 压缩
• 实时语法校验(有效 JSON / 语法错误及原因)
• 语法高亮、括号匹配、代码折叠、字号可调
8. 统计与外观
• 体积、节点数、对象/数组数、最大嵌套深度
• 深色/浅色主题切换,Geist Mono 等宽字体
快捷键
Ctrl/Cmd+F 查找 · Ctrl/Cmd+H 替换 · Ctrl/Cmd+Shift+V 剪贴板打开 · Ctrl/Cmd+Shift+Backspace 清空 · Ctrl+滚轮 调字号 · 双击卡片编辑值
1
不只是图库!集 AI 创作、实时聊天、团队协作于一体的智能平台
9
day 2024/12/26
今天入职的第一天,完成如下:
1. 安装好开发环境
2. 熟悉了新同事
3. 了解了即将要开发的业务,并且做了资料查询
2
🌟【高效日常记录】🌟
📅 2024/12/16
✨今天又是元气满满的一天呢!🎉
🔍迫不及待地看完了最新的一期项目,内心充满了成就感!😌而且,激动人心的时刻来啦,今夜又更新咯!明天又能开启新一轮的学习之旅啦!🚀
💻忙碌之余,我成功完成了前后端的代码工作,简直太有成就感啦!🎈而且,我还实现了批量导入图片功能,设置标签和分类也变得so easy啦!🤩
💼入职的日子越来越近,心情既紧张又期待!🎊
🤔有个小问题,大家都觉得入职前要不要刷刷leetcode呢?提升一下自己的技能,为未来的工作加油助力!💪
5
**📅2024/12/15 | 前端小白的日常记录🚀**
🌱今天,我探索了图片审核功能的奥秘,仿佛打开了前端世界的一扇新窗口!每一个像素、每一次点击,都让我感受到了前端开发的魅力。
💡明天,我计划继续攻克URL上传的技术难关,让工作流程更加高效。每一次的学习和实践,都是对自我能力的提升。
🛠️值得一提的是,我还实现了自定义填入拒绝理由的功能,这让我在工作中更加得心应手。虽然过程中遇到了对话框组件这个“小怪兽”,但它没能阻挡我前进的脚步,反而让我更加坚定了前行的信念。
⏰入职倒计时7 days🎉,每一天都充满了期待和挑战。我相信,在未来的日子里,我会继续努力,成为更好的自己!
4

