• Public
  • Public/Protected
  • All


WebViewer Collaboration Client

Welcome to the API documentation for the PDFTron Webviewer Collaboration Client module.

Main classes

  • CollabClient - The root level class that must be instantiated to enable realtime collaboration. The main purpose of this class is to log in a user.

  • User - A user class returned from the login methods on CollabClient. This class is used to create documents, fetch documents, etc.

  • Document - A class representing a single document. Instances of this class can be used to view a document, create Snapshots, invite users, etc.

  • Annotation - A class representing a single annotation belonging to a Document. Instances of this class are used to fetch Mentions and track unread state.

  • Mention - A class representing an "@" mention of a user. This class is closely tied to Annotations.

  • Snapshot - A class representing the state of a document at a certain period of time. Used to implement features like versioning. A snapshot can be used to preview a document at a previous state, and even revert a document to that state.


The client API is strongly event driven - the API provides all of the events you need to build a reactive UI.

You can subscribe to a variety of global events on CollabClient.EventManager.

For example, you can subscribe to an event that is triggered whenever a user creates an annotation:

client.EventManager.subscribe('annotationAdded', (annotation) => {
console.log('annotationAdded', annotation)

Each entity class also has events you can subscribe to for entity specific events. To see what events are emitted, look at the "subscribe" function on each entity

client.EventManager.subscribe('annotationAdded', (annotation) => {
annotation.subscribe('onChange', (updatedAnnotation) => {
console.log('annotation changed', updatedAnnotation)

Example flow

The standard flow for the client API is:

  1. Create an instance of CollabClient
  2. Retrieve an instance of User using a CollabClient login method.
  3. Get a list of documents belonging to the User.
  4. Display the document in the viewer by calling Document.view
import { CollabClient } from '@pdftron/collab-client'
import WebViewer from '@pdftron/webviewer';

}, element).then(async (instance) => {

const client = new CollabClient({
url: 'http://localhost:3000/',
subscriptionUrl: 'ws://localhost:3000/subscribe',

const user = await client.loginAnonymously("Guest");

const documents = await user.getAllDocuments();

// Load a document by default
if(documents.length > 0) {
const document = documents[0]
await document.view(`http://mywebsite.com/documents/${document.id}.pdf`)

// Create a document from an HTML file input
const filePickerInput = document.getElementById('file-picker');
filePickerInput.onchange = (e) => {
const file = e.target.files[0];

const document = await user.createDocument({
document: file,
isPublic: true,
name: file.name

await document.view(`http://mywebsite.com/documents/${document.id}.pdf`);


Generated using TypeDoc