JSON Canvas Viewer
一个前端库，提供可扩展的 JSON Canvas 查看器，能够轻松集成到任何现有框架和范式中。
简体中文
简体中文
外观
演示
上方展示 JSON Canvas Viewer 架构的插图即为该查看器自身的实例，已加载 Minimap、Controls 和 MistouchPreventer 模块。
简介
Obsidian 提供了一款名为 JSON Canvas 的强大工具，它使我能够以非线性方式思考，非常适合用于复杂状态机或依赖关系图等场景。虽然它在个人使用上已足够，但很难与他人分享，因为目前尚无成熟的方法可在 Obsidian 外部查看这些内容。
JSON Canvas Viewer 正是为解决此问题而生。它是一个基于 TypeScript 的 JSON Canvas 文件查看器，使用户可以直接在浏览器中查看和交互画布，或轻松将查看器嵌入网站。它不依赖任何特定框架构建，因此可轻易集成至任意框架中。
特性
- 在网页浏览器中查看 JSON Canvas 文件（
.canvas） - 可轻松嵌入网站
- 支持交互式的平移与缩放功能
- 能够完整显示 官方规范 中定义的所有画布特性
- 响应式设计，适配移动端与触控板操作
- 支持懒加载
- 原生支持 TypeScript
- 具备现代美学设计，支持亮色与暗色模式
- 提供专为快速试用设计的 chimp 版本
- 🔥 性能优于在 Obsidian 中渲染画布！
- 🧩 开箱即用的可扩展性与摇树优化（tree-shaking），当前可选模块包括：
Minimap：便于导航Controls：显示缩放及全屏按钮MistouchPreventer：防止画布干扰页面滚动DebugPanel：显示缩放比例与位置数据
集成
JSON Canvas Viewer 目前可无缝集成以下技术栈 / 技术（包括但不限于）：
- ✅ Vanilla JS/TS：天然支持
- ✅ 预渲染：
renderToString - ✅ Vite：Vite 插件
- ✅ Webpack：Webpack Loader & Plugin
- ✅ Vue：Vue 组件
- ✅ React：React 组件
了解更多关于 JSON Canvas Viewer 的信息，请访问 GitHub 仓库。
许可证
JSON Canvas Viewer 采用 MIT 许可证 授权。