Find out what's new in Tiptap Editor 3.0
Tiptap Docs

Adding collaboration to Pages

Restricted ReleaseAlpha

You can enable real-time collaboration in your paginated editor by combining the Pages extension with a collaborative provider, such as TiptapCollabProvider.

1. Requirements

  • A Tiptap Pro plan that supports collaboration
  • Access to the Tiptap Cloud or your own collaboration backend
  • The @tiptap-pro/extension-pages@alpha package
  • The @tiptap-pro/provider-collab package (or your own provider)

2. Install the required packages 

npm install @tiptap-pro/extension-pages@alpha @tiptap-cloud/provider @tiptap/extension-collaboration

3. Set up your collaborative provider 

import { TiptapCollabProvider } from '@tiptap-cloud/provider'
import Collaboration from '@tiptap/extension-collaboration'
import * as Y from 'yjs'

const doc = new Y.Doc() // Initialize Y.Doc for shared editing

const provider = new TiptapCollabProvider({
    name: 'document.name', // Unique document identifier for syncing. This is your document name.
    appId: 'your-app-id', // Your Cloud Dashboard AppID or `baseURL` for on-premises
    token: 'your-jwt-token', // Your JWT token
    document: doc,
})

4. Configure your editor with Pages and collaboration 

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { Pages } from '@tiptap-pro/extension-pages'
import { TiptapCollabProvider } from '@tiptap-cloud/provider'
import Collaboration from '@tiptap/extension-collaboration'
import * as Y from 'yjs'

const doc = new Y.Doc() // Initialize Y.Doc for shared editing

const provider = new TiptapCollabProvider({
    name: 'document.name', // Unique document identifier for syncing. This is your document name.
    appId: 'your-app-id', // Your Cloud Dashboard AppID or `baseURL` for on-premises
    token: 'your-jwt-token', // Your JWT token
    document: doc,
})

const editor = new Editor({
  extensions: [
    StarterKit,
    Pages.configure({
      pageFormat: 'A4',
      header: 'My Project',
      footer: 'Page {page} of {total}',
    }),
    Collaboration.configure({
      document: doc, // Configure Y.Doc for collaboration
    }),
  ],
})

5. Tips for a smooth experience

  • Make sure your provider is connected before editing
  • Handle connection errors and user presence in your UI
  • Combine with other collaborative extensions for comments, cursors, etc.

6. Next steps