你是否曾希望可以将 .canvas 文件分享到 Obsidian 之外的应用中？比如将其嵌入博客或文档网站，同时保留完整的交互性？为此，我开发了一个专门的工具：
JSON Canvas Viewer
一个可嵌入、高度可定制且与框架通用的库，可在任意网页环境中渲染 Obsidian Canvas 文件。
提示：Obsidian Canvas 也被称为 JSON Canvas。
交互式演示已直接集成在我的网站中:
你也可以在上方页面中找到所有内容——包括 GitHub 仓库、文档、npm 页面以及更多关于 JSON Canvas 的信息。
开发动机
Obsidian 的 Canvas 功能非常出色——但被局限在应用内部。当我试图将我的画布展示在个人网站上时，遇到了诸多限制。现有的解决方案要么存在缺陷，要么功能不完整，又或是仅支持特定前端框架。因此，我构建了 JSON Canvas Viewer 来彻底解决这一问题。
特性与优势
- 原生 TypeScript
- 可完整呈现官方规范中定义的全部画布功能
- 响应式设计，具备强大的移动端和触控板支持
- 支持懒加载与预渲染（Prerendering）
- 开箱即用的可扩展架构与摇树优化（tree-shaking），已提供四个可选模块
- 真正意义上的通用性：提供 Vite 插件、React 组件、Vue 组件 以及 原生 JS 类
- 提供专为快速试用设计的 chimp 版本
- 已收录于 JSON Canvas 官方网站（参见
TypeScript viewer library）
5 秒内快速体验（使用 chimp 版本）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🐒 Canvas Viewer</title>
<style>
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body></body>
<script type="module">
import { JSONCanvasViewer, parser, loadCanvas } from 'https://unpkg.com/json-canvas-viewer/dist/chimp.js';
new JSONCanvasViewer({
container: document.body, // 指定挂载容器
canvas: loadCanvas('path/to/your.canvas'), // 请确保准备好了你的 .canvas 文件
markdownParser: parser,
});
</script>
</html>
你可以参与：
给项目加星：json-canvas-viewer
尝试使用 你的复杂画布文件并报告 issues。
提出新功能建议 —— 例如支持 Advanced Canvas 的特性。
贡献代码 —— 如果你对此项目充满热情，欢迎加入开发！
