5 Star 27 Fork 15

fxzer/json-viewer

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

JSON-Viewer

English | 中文

一个JSON可视化工具

技术栈:Vue 3 + Vite +TS + Antv/G6 + Pinia +CodeMirror

全新版本(2.x.x) 新特性

  1. 新增语言(中/英)切换,全站适配
  2. 新增 15 种主题色,主题色全站适配
  3. 新增亮、暗主题切换功能,编辑器主题跟随切换
  4. 新增渲染方式(自动渲染、手动渲染)选择
  5. 代码编辑器升级,优化编辑体验,提升性能(VueJsonEditor ---> VueCodeMirror)
  6. 完全适配移动端 ,画布节点支持移动端点击、缩放事件,新增缩放比例展示
  7. 支持网址链接存储编辑器代码信息,便于分享
  8. 布局升级为活动分栏,让布局更灵活易用
  9. 新增 PWA 功能,可安装后离线使用

全新升级(3.x.x) 新特性

  1. 版本升级antv/g6@4 -> antv/g6@5
  2. 移除主题色选择,只保留亮、暗主题
  3. 不同颜色区分节点类型
  4. 整合布局配置、解析字段配置项

优化项

  1. JSON 语法报错不渲染,并提示语法错误位置

  2. 使用原子化框架 UnoCSS,减小样式文件体积

  3. 使用 @antfu/esling-configlint-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

主要功能

  1. JSON编辑生成对应视图
  2. 布局配置调整更新视图
  3. 节点收起、展开
  4. 导入、导出JSON
  5. 指定额外解析字段
  6. 亮暗主题切换
  7. 15种主题随意切换
  8. 视图节点聚焦搜索
  9. 视图导出为图片
  10. 点击节点查看节点详情
  11. 链接分享 JSON 代码
  12. 渲染方式控制
  13. 画布操作(放大/缩小/居中/全屏/退出全屏)

预览地址:

Bilibili演示:Bilibili演示视频地址

Github:https://fxzer.github.io/json-viewer/

Gitee:https://fxzer.gitee.io/json-viewer

源码分享

Github:https://github.com/fxzer/json-viewer

Gitee:https://gitee.com/fxzer/json-viewer

预览截图

灵感来源

JSON Crack: 一个丝滑且大气的React+TypeScript项目JSON可视化项目。

MIT License Copyright (c) 2023 fxzer Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

JSON可视化(Vue3+Pinia+Antv/g6) 展开 收起
README
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/fxzer/json-viewer.git
git@gitee.com:fxzer/json-viewer.git
fxzer
json-viewer
json-viewer
main

搜索帮助