Collaboration extension

This small guide quickly shows how to integrate basic collaboration functionality into your editor. For a proper collaboration integration, review the documentation of Tiptap Collaboration, which is a cloud and on-premises collaboration server solution.

Install

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

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 Collaboration 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

Source code

packages/extension-collaboration/

You Did It!

Your editor is now collaborative! Invite your friends and start typing together 🙌🏻 If you want to continue building out your collaborative editing features, make sure to check out the Tiptap Collaboration Docs for a fully hosted on on-premises collaboration server solution.