Tiptap Docs

Adding collaboration to Pages

Alpha

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 Tiptap Cloud or your own collaboration backend
  • The Pages stack: @tiptap-pro/extension-convert-kit, @tiptap-pro/extension-pages-tablekit, @tiptap-pro/extension-pages
  • A collaborative provider: @tiptap-pro/provider (or your own) plus @tiptap/extension-collaboration and yjs

2. Install the required packages 

npm install @tiptap-pro/extension-convert-kit \
            @tiptap-pro/extension-pages-tablekit \
            @tiptap-pro/extension-pages \
            @tiptap-pro/provider \
            @tiptap/extension-collaboration \
            yjs

3. Set up your collaborative provider 

import { TiptapCollabProvider } from '@tiptap-pro/provider'
import * as Y from 'yjs'

const doc = new Y.Doc()

const provider = new TiptapCollabProvider({
  name: 'document.name', // Unique document identifier for syncing
  appId: 'your-app-id', // Document server ID from the Cloud dashboard, or use `baseURL` for on-premises
  token: 'your-jwt', // JWT generated by your server
  document: doc,
})

4. Configure your editor with the Pages stack and collaboration 

import { Editor } from '@tiptap/core'
import { ConvertKit } from '@tiptap-pro/extension-convert-kit'
import { TableKit } from '@tiptap-pro/extension-pages-tablekit'
import { Pages } from '@tiptap-pro/extension-pages'
import Collaboration from '@tiptap/extension-collaboration'

const editor = new Editor({
  extensions: [
    ConvertKit.configure({ table: false }),
    TableKit,
    Pages.configure({
      pageFormat: 'A4',
      header: 'My Project',
      footer: 'Page {page} of {total}',
      // Mirror the main editor's stack inside header/footer overlays so
      // the schema, marks, and tables behave identically there.
      headerFooterExtensions: [ConvertKit.configure({ table: false }), TableKit],
    }),
    Collaboration.configure({
      document: doc,
    }),
  ],
})

Headers and footers are part of the same session

The header and footer editors collaborate alongside the main document. No additional provider configuration is required; setting up Collaboration on the editor brings them in. See Page header and footer for details.

5. Tips for a smooth experience

  • Make sure the provider is connected before editing
  • Handle connection errors and user presence in your UI
  • Combine with other collaborative extensions for comments, cursors, etc.
  • Pass the same extensions to headerFooterExtensions as your main editor uses, so the schema lines up across the document and its headers and footers

6. Next steps

PreviouslyPageKit