{"id":44335917,"url":"https://github.com/fxzer/json-viewer","last_synced_at":"2026-02-11T11:19:11.545Z","repository":{"id":65269711,"uuid":"584444205","full_name":"fxzer/json-viewer","owner":"fxzer","description":"JSON可视化工具（Vue3+Antv/G6）","archived":false,"fork":false,"pushed_at":"2025-11-10T16:06:18.000Z","size":2820,"stargazers_count":55,"open_issues_count":0,"forks_count":14,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-11-10T16:24:15.789Z","etag":null,"topics":["codemirror","pinia","unocss","vue3"],"latest_commit_sha":null,"homepage":"https://fxzer.github.io/json-viewer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fxzer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-01-02T15:30:44.000Z","updated_at":"2025-11-10T16:06:22.000Z","dependencies_parsed_at":"2024-04-06T15:33:06.535Z","dependency_job_id":"b0f496b8-365e-40bd-91a3-c635bfefed45","html_url":"https://github.com/fxzer/json-viewer","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/fxzer/json-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxzer%2Fjson-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxzer%2Fjson-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxzer%2Fjson-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxzer%2Fjson-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fxzer","download_url":"https://codeload.github.com/fxzer/json-viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxzer%2Fjson-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29332377,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T06:13:03.264Z","status":"ssl_error","status_checked_at":"2026-02-11T06:12:55.843Z","response_time":97,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codemirror","pinia","unocss","vue3"],"created_at":"2026-02-11T11:19:07.788Z","updated_at":"2026-02-11T11:19:11.537Z","avatar_url":"https://github.com/fxzer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"./public/favicon.svg\" width=\"100\" height=\"100\" align=\"center\" style=\"margin:0 auto;\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eJSON-Viewer\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"./README_EN.md\"\u003eEnglish\u003c/a\u003e | 中文\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n一个JSON可视化工具\n\u003c/p\u003e\n\n## 技术栈：Vue 3 + Vite +TS + [Antv/G6](https://g6.antv.vision/) + Pinia +[CodeMirror](https://codemirror.net/)\n\n## 全新版本（2.x.x） 新特性\n\n1. 新增语言（中/英）切换，全站适配\n2. 新增 15 种主题色，主题色全站适配\n3. 新增亮、暗主题切换功能，编辑器主题跟随切换\n4. 新增渲染方式（自动渲染、手动渲染）选择\n5. 代码编辑器升级，优化编辑体验，提升性能（VueJsonEditor ---\u003e VueCodeMirror）\n6. 完全适配移动端 ，画布节点支持移动端点击、缩放事件，新增缩放比例展示\n7. 支持网址链接存储编辑器代码信息，便于分享\n8. 布局升级为活动分栏，让布局更灵活易用\n9. 新增 PWA 功能，可安装后离线使用\n\n## 全新升级（3.x.x） 新特性\n\n1. 版本升级antv/g6@4 -\u003e antv/g6@5\n2. 移除主题色选择，只保留亮、暗主题\n3. 不同颜色区分节点类型\n4. 整合布局配置、解析字段配置项\n\n## 优化项\n\n1. JSON 语法报错不渲染，并提示语法错误位置\n\n2. 使用原子化框架 UnoCSS，减小样式文件体积\n\n3. 使用 `@antfu/esling-config`、`lint-staged`提升语法检查速度\n\n| 构建资源                        | 重构前打包体积 | 重构后打包体积 | 提升                                  |\n| :------------------------------ | -------------- | -------------- | ------------------------------------- |\n| dist/assets/iconfont-xxxxxx.ttf | 4.68 kB        | 无             | 4.68 kB                               |\n| dist/assets/index-xxxxxx.css    | 107.92 kB      | 81.94 kB       | 25.98 kB                              |\n| dist/assets/index-xxxxxx.js     | 3,325.04 kB    | 2,324.82 kB    | 1,000.22 kB （**共减小1,030.88 kB**） |\n\n## 主要功能\n\n1. JSON编辑生成对应视图\n2. 布局配置调整更新视图\n3. 节点收起、展开\n4. 导入、导出JSON\n5. 指定额外解析字段\n6. 亮暗主题切换\n7. 15种主题随意切换\n8. 视图节点聚焦搜索\n9. 视图导出为图片\n10. 点击节点查看节点详情\n11. 链接分享 JSON 代码\n12. 渲染方式控制\n13. 画布操作（放大/缩小/居中/全屏/退出全屏）\n\n## 预览地址：\n\n### Bilibili演示：[Bilibili演示视频地址](https://www.bilibili.com/video/BV18i42117Fa/?spm_id_from=333.999.0.0)\n\n### Github：[https://fxzer.github.io/json-viewer/](https://fxzer.github.io/json-viewer/)\n\n### Gitee：[https://fxzer.gitee.io/json-viewer](https://fxzer.gitee.io/json-viewer)\n\n## 源码分享\n\n### Github：[https://github.com/fxzer/json-viewer](https://github.com/fxzer/json-viewer)\n\n### Gitee：[https://gitee.com/fxzer/json-viewer](https://gitee.com/fxzer/json-viewer)\n\n## 预览截图\n\n\u003cimg src=\"./public/preview.svg\" width=\"100%\" height=\"100%\" align=\"center\" style=\"margin:10px auto;\" /\u003e\n\n## 灵感来源\n\n[JSON Crack](https://github.com/AykutSarac/jsoncrack.com): 一个丝滑且大气的React+TypeScript项目JSON可视化项目。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffxzer%2Fjson-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffxzer%2Fjson-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffxzer%2Fjson-viewer/lists"}