- 难度
- 中等
- 适合
- 入门 / 进阶
- 主要语言
- TypeScript
- GitHub
- ★ 129.2k
- 许可证
- MIT
- 快照日期
- 2026年8月9日
先判断要不要学
这个项目值得拆什么？
Excalidraw 既是可直接使用的白板应用，也是可嵌入 React 项目的编辑器包。仓库把图形元素、数学几何、编辑器交互和在线协作分成独立工作区，适合学习复杂前端产品如何从基础模型逐步组成用户体验。
- 01
编辑器核心以独立 React 包发布，可对照学习“可复用能力”与“完整应用”的边界
- 02
同时覆盖 Canvas 交互、本地优先、PWA 和端到端加密协作，有足够多的可选学习切口
可以学什么
不只是看代码，而是找到产品的骨架
- 学界面
- 学产品结构
- 学完整项目组织
- 学部署
把画布交互拆成可组合能力
追踪选择、绘制、绑定和撤销如何围绕元素模型协作。
packages/excalidraw · packages/element · packages/math从组件包走到完整产品
对照 npm 编辑器包和 excalidraw.com 应用，理解业务能力如何在外层组装。
packages/excalidraw · excalidraw-app · examples协作与本地优先的产品取舍
从应用层的协作和本地保存入口学习离线体验、分享与隐私的边界。
excalidraw-app · firebase-project · public三段学习路径
从理解、修改到做出你的版本
0130 分钟先跑通
理清编辑器包与线上应用的边界。
- 阅读 README 的 Features 与 Excalidraw.com 两节
- 对照根 package.json 的 workspaces
- 浏览 packages/excalidraw 和 excalidraw-app
完成标志：能画出核心包、在线应用与协作服务的关系。
022 小时动手改
在一个小 React 项目中使用编辑器并修改一项交互。
- 按 Quick start 嵌入组件
- 设置初始数据或界面选项
- 监听变更并在本地保存 JSON
完成标志：得到一个可保存与恢复图形的小白板。
031 天做变体
用编辑器核心做一个具体场景变体。
- 选定流程图、教学批注或头脑风暴场景
- 预制图形库与工具栏
- 增加导出和恢复
- 记录未实现的协作边界
完成标志：得到一个可分享的专用画布原型。
评分解释
每一分都要说清楚为什么
可复刻性21 / 25
可先通过独立 React 包做小变体，无需复刻全站。
文档与代码清晰度18 / 20
README、开发文档和工作区边界都较明确。
新手学习价值18 / 20
可从组件嵌入起步，再向复杂交互深入。
产品完整度15 / 15
编辑、导出、离线与协作构成完整产品链。
vibe coding 代表性9 / 10
适合让 AI 帮助快速组装专用画布和预制工具。
活跃度5 / 5
仓库活跃，文档和包仍持续更新。
新颖性4 / 5
手绘渲染、可嵌入编辑器和加密协作的组合很有代表性。