JSON Canvas Viewer
JSON Canvas Viewer 是一个前端库，提供可扩展的 JSON Canvas 查看器，能够轻松集成到任何现有框架和范式中。
演示
Interface
Logic
Work: Constructs interactive canvas elements and manages element interactions and rendering.
Interface
Logic
Work: Uses Pointeract to listen to interactions on the viewer and translate to DataManager method calls.
Interface
Logic
Work: Renders all groups, edges and labels that doesn't need interactivity.
Interface
Logic
Work: Initializes the canvas, manages states, and provides canvas control mathods.
Main Interface
Main Logic
Work: Controls lazy loading, provides start and dispose hooks, and manages modules.
Interface
Logic
Logic
Work: Controls main render loop and handles viewer resize
Interface
Logic
Work: Generates applies and caches color palette. Controls viewer theme toggling.
Interface
Central Type Machine
All Available Options and Main Class Augmentations
Received Options and Augmentations
Coordinator
- Start/dispose hooks
- DI container
Learn More
上方展示的 JSON Canvas Viewer 架构插图本身就是一个 JSON Canvas Viewer 实例，其中加载了 Minimap、Controls 与 MistouchPreventer 模块。
简介
Obsidian 提供了一款名为 JSON Canvas 的强大工具，它让我能够以非线性方式思考，非常适合复杂状态机或依赖图等场景。虽然个人使用已经足够，但由于目前缺少成熟的外部查看方式，它很难与他人分享。
JSON Canvas Viewer 正是为了解决这个问题而生。它是一个基于 TypeScript 的 JSON Canvas 文件查看器，可让用户直接在浏览器中查看并交互画布，也能轻松嵌入到网站中。它不依赖任何特定框架构建，因此能够轻松集成到任意框架。
特性
- 在浏览器中查看 JSON Canvas 文件（
.canvas） - 可轻松嵌入网站
- 支持交互式平移与缩放
- 能完整呈现 官方规范 定义的所有画布特性
- 响应式设计，适配移动端与触控板
- 支持懒加载
- 原生支持 TypeScript
- 具备现代美学设计，支持亮色与暗色模式
- 提供专为快速试用设计的 chimp 版本
- 🔥 比在 Obsidian 中直接渲染画布更高效！
- 🧩 由 SynthKernel 架构驱动的开箱即用扩展性与摇树优化，当前可选模块包括：
Minimap：便于导航Controls：显示缩放与全屏按钮MistouchPreventer：防止画布拦截页面滚动DebugPanel：显示缩放比例与位置信息
集成
JSON Canvas Viewer 目前可以与以下技术栈 / 技术无缝协作（包括但不限于）：
- ✅ 原生 JS/TS：原生支持 -
json-canvas-viewer - ✅ 预渲染：
renderToString-json-canvas-viewer - ✅ Vite：Vite 插件 -
vite-plugin-json-canvas - ✅ Vue：Vue 组件 -
@json-canvas-viewer/vue - ✅ React：React 组件 -
@json-canvas-viewer/react - ✅ Preact：Preact 组件 -
@json-canvas-viewer/preact
了解更多关于 JSON Canvas Viewer 的信息，请访问 GitHub 仓库。
许可证
JSON Canvas Viewer 采用 MIT 许可证 授权。