Get started with DOCX collaboration

This quickstart uses useWebrtcCollaboration to add real-time DOCX collaboration to a React or Vue editor. It connects two editors through WebRTC and shows each participant's changes.

Start with a working editor from the Quickstart. For provider options and failure states, see the collaboration reference.

Install the packages

Install the Pro package, Yjs, and the WebRTC provider:

npm install @docx-editor.dev/pro yjs y-webrtc

You also need @docx-editor.dev/react or @docx-editor.dev/vue in your application.

Create a room ID

Create one room ID and send it to each participant:

import { createCollaborationRoomId } from '@docx-editor.dev/pro/collaboration/webrtc';

const roomId = createCollaborationRoomId();

Store the room ID in your application state or URL. Do not create a new ID during each render.

Add a collaborative editor

Call useWebrtcCollaboration with a room ID, an identity, and the initial DOCX bytes. The first editor creates the room. Later editors join its document.

import { DocxEditor } from '@docx-editor.dev/react';
import { useWebrtcCollaboration } from '@docx-editor.dev/pro/react/webrtc';

interface CollaborativeEditorProps {
  roomId: string;
  bytes: Uint8Array;
  actorId: string;
  name: string;
}

export function CollaborativeEditor({ roomId, bytes, actorId, name }: CollaborativeEditorProps) {
  const { document, modules, session, pending, error } = useWebrtcCollaboration({
    room: {
      roomId,
      identity: { actorId, name },
      bootstrap: { kind: 'create-or-join', document: bytes },
    },
  });

  if (error) {
    return <p>{error.detail ?? error.code}</p>;
  }
  if (pending || !document) {
    return <p>Connecting…</p>;
  }

  return <DocxEditor key={session?.sessionId} document={document} modules={modules} />;
}

Vue provides the composable at @docx-editor.dev/pro/vue/webrtc. Select Vue in the collaboration API reference for a complete component.

Test the room

1. Open the application in one browser tab.
2. Open a second tab with the same roomId and a different actorId.
3. Type in either editor.

Open the first tab before the second tab. This sequence prevents both peers from seeding an empty room at the same time.

The example uses the public demo signaling service when you omit signaling. Configure your own signaling URLs and TURN servers for production.

Continue the setup

• Production WebRTC setup: configure signaling and TURN servers.
• Hocuspocus setup: connect authentication and persistence.
• Custom Yjs providers: connect an existing Yjs deployment.
• Tracked changes: suggesting mode and the review sidebar.
• Build a DOCX agent: connect a headless replica to a room for real-time agent edits.