# json-viewer

**Repository Path**: gergergeregg342222222/json-viewer

## Basic Information

- **Project Name**: json-viewer
- **Description**: JSON可视化（Vue3+Pinia+Antv/g6）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 15
- **Created**: 2024-01-03
- **Last Updated**: 2024-01-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JSON-Viewer（JSON可视化工具）



## 技术栈：Vue 3 + Vite +TS + [Antv/G6](https://g6.antv.antgroup.com/zh) + Pinia +[vue3-json-editor](https://www.npmjs.com/package/vue3-json-editor)



## 实现功能：

1. JSON编辑生成对应视图
2. 布局配置调整更新视图
3. 节点收起、展开
4. 导入、导出JSON
5. 指定额外解析字段
6. 4种主题随意切换
7. 视图节点聚焦搜索
8. 视图导出为图片
9. 点击节点查看节点详情
10. 画布操作（放大/缩小/居中/全屏/退出全屏）



## 预览地址：
### Bilibili演示：[Bilibili演示视频地址](https://www.bilibili.com/video/BV1cG4y117Rw/?vd_source=0e300a3720f58f257ff36648c263c668)
### Github：[https://coderfxj.github.io/json-viewer/](https://coderfxj.github.io/json-viewer/)
### Gitee：[https://giteefxj.gitee.io/json-viewer](https://giteefxj.gitee.io/json-viewer)



## 源码分享
### Github：[https://github.com/CoderFXJ/json-viewer/tree/dev](https://github.com/CoderFXJ/json-viewer/tree/dev)
### Gitee：[https://gitee.com/GiteeFXJ/json-viewer/tree/dev/](https://gitee.com/GiteeFXJ/json-viewer/tree/dev/)



## 预览截图

![image.png](https://cdn.nlark.com/yuque/0/2023/png/23029928/1673416180614-05d77d3f-20f8-45a8-a956-ee5e4cdaf2fc.png#averageHue=%23fcfcfc&clientId=u0a59ab2e-59eb-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=1000&id=udc017b24&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1000&originWidth=1915&originalType=binary&ratio=1&rotation=0&showTitle=false&size=213668&status=done&style=none&taskId=ufdf67833-87ac-4493-b646-acf7d44edbd&title=&width=1915)

## 灵感来源
[JSON Crack](https://github.com/AykutSarac/jsoncrack.com): 一个丝滑且大气的React+TypeScript项目JSON可视化项目。