Collaboration

Real-time collaborative editing with Y.js, remote carets and a presence list.

Collaboration is shipped as a separate entry point, vue-echo-editor/collaboration, so apps that don't use it never install or download Y.js.

Install the peer dependencies

npm
pnpm
bun
yarn
npm i yjs y-websocket @tiptap/y-tiptap @tiptap/extension-collaboration @tiptap/extension-collaboration-caret

Any Y.js provider works: y-websocket, Hocuspocus, y-webrtc, y-indexeddb or Tiptap Cloud.

Create the document and provider

import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'

const doc = new Y.Doc()
const provider = new WebsocketProvider('wss://your-server.example', 'document-42', doc)

Register CollaborationKit

CollaborativeEditor.vue
<script setup lang="ts">
import { onBeforeUnmount } from 'vue'
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
import { EchoEditor, BaseKit, Heading, Bold, Italic, Link, BulletList } from 'vue-echo-editor'
import { CollaborationKit, CollaborationUsers, getUserColor } from 'vue-echo-editor/collaboration'

const props = defineProps<{ room: string; userName: string }>()

const doc = new Y.Doc()
const provider = new WebsocketProvider('wss://your-server.example', props.room, doc)

const extensions = [
  // ⚠️ No `History` — Y.js ships its own collaborative undo manager
  BaseKit,
  CollaborationKit.configure({
    document: doc,
    provider,
    user: { name: props.userName, color: getUserColor(props.userName) },
  }),
  Heading,
  Bold,
  Italic,
  Link,
  BulletList,
]

onBeforeUnmount(() => {
  provider.destroy()
  doc.destroy()
})
</script>

<template>
  <CollaborationUsers :provider="provider" />
  <EchoEditor :extensions="extensions" />
</template>

CollaborationKit options

OptionTypeDefaultDescription
documentY.Doc—Required. The shared document.
providerprovidernullEnables remote carets and presence (needs an awareness instance).
user{ name, color, avatar? } | falsefalseThe local user shown to others.
fieldstring'default'Name of the Y.XmlFragment in the document.
undoRedobooleantrueShow undo / redo buttons backed by the Y.js undo manager.
collaborationobject{}Extra options for Tiptap's Collaboration.
caretobject{}Extra options for CollaborationCaret (custom caret rendering …).

Presence

<CollaborationUsers :provider :max="5" /> renders an avatar stack of connected users. Build your own UI with the composable:

import { useCollaborationUsers } from 'vue-echo-editor/collaboration'

const { users } = useCollaborationUsers(provider)
// users.value → [{ clientId, name, color, avatar?, isSelf }]

Offline support

Combine a network provider with y-indexeddb to keep working offline and sync when the connection returns:

import { IndexeddbPersistence } from 'y-indexeddb'

new IndexeddbPersistence('document-42', doc)

Try it without a server

The examples app links two in-memory Y.js documents so you can see two editors syncing live on one page.

AI assistant
Stream completions from any model into the inline AI menu.
Internationalization
11 built-in languages, lazy loading, RTL and custom translations.