Automerge 和 Yjs 两者简单对比:
| 对比点 | Automerge | Yjs |
|---|---|---|
| 性能 | 较慢(v2 有改进) | 非常快(结构优化+GC) |
| 内存使用 | 较大(因保留完整历史) | 较小(支持垃圾回收) |
| 社区活跃度 | 中等 | 高 |
| 插件生态 | 较少 | 非常丰富(尤其是编辑器方向) |
| 合并冲突处理 | 清晰但占空间 | 高效但实现复杂 |
基础介绍#
Yjs 是一个基于 CRDT 的高性能协作编辑框架,它将用户对文档的修改转化为增量更新操作,并通过内部的数据结构进行冲突处理与合并。Yjs 可以通过 WebSocket、WebRTC 等通信机制实现多方数据同步。开发者只需使用其提供的 API 即可轻松实现文本、数组等结构的实时协作,复杂的合并逻辑与光标状态同步等均由 Yjs 自动处理。
🏠Yjs架构设计#

从上到下分别是:编辑器集成层、Yjs 核心层、通信与存储层。
顶层:编辑器适配层
这一层是用户直接交互的前端编辑器,例如:
- ProseMirror、Tiptap(富文本编辑器)
- Slate(React 编辑器)
- Monaco(VS Code 内核的代码编辑器)
Yjs 为这些编辑器提供了专用的绑定模块(类似于驱动程序),用于监听用户在编辑器中的操作(如文本插入、删除),并将其同步到 Yjs 的共享文档中。这样,用户的本地编辑行为会实时转换为可传播的 CRDT 更新操作,进而同步给其他协作者。
Yjs 支持大多数 主流编辑器的接入
因此,为了实现协同能力,每种编辑器都需要开发一个“绑定层”,用于在编辑器的数据结构与 Yjs 的文档结构之间进行双向转换(同步变更与应用变更)。这个绑定层正是实现协作功能的桥梁(起到一个连接编辑器和 Yjs 的桥梁作用)。
-
y-prosemirror:用于 ProseMirror 编辑器
-
y-monaco:用于 Monaco 编辑器
-
y-quill:用于 Quill 编辑器
-
y-codemirror:用于 CodeMirror 编辑器
中间层:Yjs 核心
这一层是整个系统的核心,Yjs 负责以下任务:
- 管理文档的状态副本(即 CRDT 文档)
- 将用户操作转化为 CRDT 操作
- 自动合并并发编辑,解决冲突
- 管理数据结构,如
Y.Text,Y.Map,Y.Array,Y.Xml
所有编辑器的变更都会同步到这里,然后统一进行处理和广播,是整个协作系统的“中枢神经”。
底层:通信与存储模块
Yjs 本身不包含网络通信逻辑,而是通过插件方式提供以下通信与持久化能力:
- y-protocols:定义同步协议与协作状态(如光标位置、用户状态)的传输格式
- y-websocket:使用 WebSocket 实现基于服务器的实时通信
- y-webrtc:使用 WebRTC 实现点对点通信,无需中间服务器
- y-indexeddb:在浏览器中进行本地持久化,支持离线编辑与重连恢复
- y-redis:在多个 WebSocket 服务器之间同步更新(适用于负载均衡场景)
开发者可以根据应用需求灵活选择这些模块进行组合,构建出具备离线能力、实时同步能力、跨设备同步能力的协作系统。
整个数据流的流向如下图所示:

Yjs优点概览#
1. 冲突处理稳健可靠#
Yjs 基于 CRDT 数据结构 实现分布式冲突自动合并机制,具备以下特性:
- 强一致性:即使并发编辑也能最终达成一致状态。
- 无需中央服务器协调:天然支持去中心化。
- 天然处理网络延迟/离线重连:变更按因果顺序合并,无需额外冲突解析。
与传统的 OT(Operational Transformation)算法相比,CRDT 在复杂网络环境下更稳健,适用于异步协作和离线编辑。
2. 协作者状态同步#
Yjs 内置 Awareness 模块,用于同步协作者的界面状态信息:
- 光标位置、文本选区
- 用户名、用户颜色标识
- 在线/离线状态
这一机制让协作者能够“感知”他人的存在,提升协作体验,有效避免操作冲突。
3. 离线编辑支持#
Yjs 是天然支持离线编辑的框架:
- 所有变更都通过本地 CRDT 数据结构记录
- 在恢复联网后可无缝同步给其他协作者
- 通常配合
y-indexeddb实现 浏览器端持久化
离线编辑 + 自动同步 是构建 “Local-First” 应用的基础能力。
4. 版本快照与历史恢复#
Yjs 提供轻量级的文档快照机制:
- 快照是结构性的,不需要保存全量内容
- 可用于实现版本回溯、撤销恢复等功能
- 可将快照序列化保存到数据库,便于持久化
5. 高并发协作能力#
Yjs 针对性能优化良好,适用于高并发场景:
- 文档数据结构增量压缩
- 支持垃圾回收(减少内存占用)
- 实测可支持 几十到上百人 实时编辑(具体上限与文档规模、GC 策略有关)
在配合合适的通信层(如 WebSocket 广播服务)时,Yjs 表现出极高的扩展性。
6. 插件化生态 & 编辑器绑定支持#
Yjs 拥有丰富的绑定与适配模块:
| 编辑器 | 对应绑定模块 |
|---|---|
| ProseMirror / Tiptap | y-prosemirror |
| Quill | y-quill |
| Monaco(代码编辑器) | y-monaco |
| Slate | y-slate |
| CodeMirror | y-codemirror.next |
同时也有配套的通信模块(y-websocket、y-webrtc)和存储模块(y-indexeddb、y-leveldb 等),可以灵活组合使用。
总结一下:Yjs 用工程化方式实现了 CRDT 协作能力,是构建现代多人协作应用(富文本、代码、图形)的强大基石。借助 Yjs,开发者可以快速实现支持离线、实时同步和冲突自动合并的多人协作功能。
Yjs官网#
最后是关于 Yjs 的官网:
第一个是 Yjs 的正式官网,由作者 Kevin Jahns 维护,特点如下:
- 权威文档:API、使用方式、通信模块等都有说明
- 代码示例:含 TypeScript 支持、协作代码演示
- 插件介绍:如 y-websocket、y-indexeddb、y-prosemirror 等
- 持续更新:是社区开发者首选参考站点
- 适合:技术人员、框架集成、深入研究者
第二个是社区作品,这个页面是一个设计美观的 介绍性落地页(Landing Page),特点如下:
- 主要用于视觉展示,像一个营销型首页
- 页面简洁,有动画效果,展示 Yjs 优点
- 由社区用户或爱好者构建(非官方维护)
- 并不包含完整的文档或深入的技术细节
-EOF-