Collaboration integration

Collaboration connects browser editors to a shared document service. For example, two users open the same spreadsheet, and an edit in one browser appears in the other.

Prepare the backend using server integration, then configure the editor and document loading below. Follow the paired Server and Web code in Office Quick Start.

Connect your existing editor

Keep your Web SDK editor. Follow the browser configuration in Quick Start to add collaboration plugins and configure document loading, edit submission, and WebSocket addresses. Keep browser and server package versions compatible.

Fixed example users and default permissions are for demonstration. In your application, include login credentials in requests so the backend can verify identity and document access. See license configuration for licensing.

Create and open the same document

Creating and opening are separate actions:

1. When a user creates a document, your backend saves it and returns its ID.
2. The browser loads that ID. Reuse it when reopening the document or sharing it with another user.

The API's unitId is this document ID. Do not create a new local blank document on every visit.

For example, after registering Sheets and collaboration plugins, load a server spreadsheet:

import '@univerjs-pro/collaboration-client/facade'const workbook = await univerAPI.getCollaboration().loadSheetAsync('your-document-id')if (!workbook) throw new Error('Document could not be loaded')

See the Sheets, Docs, Slides, Boards, Bases, and PDFs guides for product-specific loading. Check support in the product and target backend release.

Verify synchronization, saving, and permissions

Open the same document in two independent browser sessions, such as a regular and private window. Edit in one and check the other. Then verify content after refresh, reconnection, and server restart.

Test with an editor, viewer, and unauthorized user. Read-only UI settings control page interactions; the server must still reject unauthorized reads and changes.

If documents load but edits do not synchronize, check the WebSocket connection. If content disappears after restart, check backend storage. See server integration for those settings.

Add exchange, comments, or history

To edit an imported file together, create a collaborative document from its converted data; see file exchange integration. Comments and history need their own plugins, services, and permissions. Follow Office extension modules.

For history panel configuration, see Sheets, Docs, Slides, Boards, Bases. See PDFs history for its current scope.