English | 中文
一个JSON可视化工具
技术栈：Vue 3 Vite TS Antv/G6 Pinia CodeMirror
- 新增语言（中/英）切换，全站适配
- 新增 15 种主题色，主题色全站适配
- 新增亮、暗主题切换功能，编辑器主题跟随切换
- 新增渲染方式（自动渲染、手动渲染）选择
- 代码编辑器升级，优化编辑体验，提升性能（VueJsonEditor ---> VueCodeMirror）
- 完全适配移动端 ，画布节点支持移动端点击、缩放事件，新增缩放比例展示
- 支持网址链接存储编辑器代码信息，便于分享
- 布局升级为活动分栏，让布局更灵活易用
- 新增 PWA 功能，可安装后离线使用
-
JSON 语法报错不渲染，并提示语法错误位置
-
使用原子化框架 UnoCSS，减小样式文件体积
-
使用
@antfu/esling-config、lint-staged提升语法检查速度
| 构建资源 | 重构前打包体积 | 重构后打包体积 | 提升 |
|---|---|---|---|
| dist/assets/iconfont-xxxxxx.ttf | 4.68 kB | 无 | 4.68 kB |
| dist/assets/index-xxxxxx.css | 107.92 kB | 81.94 kB | 25.98 kB |
| dist/assets/index-xxxxxx.js | 3,325.04 kB | 2,324.82 kB | 1,000.22 kB （共减小1,030.88 kB） |
- JSON编辑生成对应视图
- 布局配置调整更新视图
- 节点收起、展开
- 导入、导出JSON
- 指定额外解析字段
- 亮暗主题切换
- 15种主题随意切换
- 视图节点聚焦搜索
- 视图导出为图片
- 点击节点查看节点详情
- 链接分享 JSON 代码
- 渲染方式控制
- 画布操作（放大/缩小/居中/全屏/退出全屏）
Bilibili演示：Bilibili演示视频地址
JSON Crack: 一个丝滑且大气的React TypeScript项目JSON可视化项目。