tiptap/docs/api/extensions/collaboration.md

description	icon
Collaborative text editing can be fricking complex, but it doesn’t have to be that way.	user-voice-line

Collaboration

The Collaboration extension enables you to collaborate with others in a single document. The implementation is based on Y.js by Kevin Jahns, which is the coolest thing to integrate collaborative editing in your project.

The history works totally different in a collaborative editing setup. If you undo a change, you don’t want to undo changes of other users. To handle that behaviour this extension provides an own undo and redo command. Don’t load the default History extension together with the Collaboration extension to avoid conflicts.

:::pro Pro Extension We kindly ask you to sponsor our work when using this extension in production. :::

Installation

npm install @tiptap/extension-collaboration yjs y-websocket

Settings

document

An initialized Y.js document.

Default: null

Collaboration.configure({
  document: new Y.Doc(),
})

field

Name of a Y.js fragment, can be changed to sync multiple fields with one Y.js document.

Default: 'default'

Collaboration.configure({
  document: new Y.Doc(),
  field: 'title',
})

fragment

A raw Y.js fragment, can be used instead of document and field.

Default: null

Collaboration.configure({
  fragment: new Y.Doc().getXmlFragment('body'),
})

Commands

The Collboration extension comes with its own history extension. Make sure to disable the default extension, if you’re working with the StarterKit.

undo()

Undo the last change.

editor.commands.undo()

redo()

Redo the last change.

editor.commands.redo()

Keyboard shortcuts

Command	Windows/Linux	macOS
undo()	Control Z	Cmd Z
redo()	Shift Control Z Control Y	Shift Cmd Z Cmd Y

Source code

packages/extension-collaboration/

Usage

:::warning Public The content of this editor is shared with other users. ::: https://embed.tiptap.dev/preview/Extensions/Collaboration?hideSource https://embed.tiptap.dev/preview/Extensions/Collaboration