Collaborative editing

Commercial use

Using the collaborative editing commercially? Become a sponsor to fund its development!

Introduction

This example shows how you can use Tiptap to let multiple users collaborate in the same document in real-time.

It connects all clients to a WebSocket server and merges changes to the document with the power of Y.js. If you want to learn more about collaborative text editing, check out our guide on collaborative editing.

Example

Shared Document

Be nice! The content of this editor is shared with other users from the Internet.

Backend

In case you’re wondering what kind of sorcery you need on the server to achieve this, here is the whole backend code for the demo:

Request early access

Our plug & play collaboration backend hocuspocus is still work in progress. If you want to give it a try, get early access.

import { Server } from '@hocuspocus/server'
import { RocksDB } from '@hocuspocus/extension-rocksdb'

const server = Server.configure({
  port: 80,
  extensions: [
    new RocksDB({ path: './database' }),
  ],
})

server.listen()