Integrating Sync and Collaboration into Your JavaScript Application

Instant sync and collaboration is available when using the Web SDK with Document Engine in server-backed operational mode.

To get started with Instant, you need to have the Instant component enabled in your license. If you’re just trialing PSPDFKit, all features will be enabled.

Next, to facilitate real-time syncing between multiple clients, you need a central server. This is where Document Engine comes into play; it’ll serve as a central point to ensure all clients see the same state. Document Engine is the backend for PSPDFKit for Web Server-Backed. Using Instant sync isn’t possible when using PSPDFKit for Web Standalone.

Finally, you need to make sure that the web viewer works with Document Engine, and that you enable the Instant flag when displaying your document.

Once you’ve taken all these steps, you can display documents with Instant sync enabled:

PSPDFKit.load({
  authPayload: { jwt: "xxx.xxx.xxx" },
  container: ".foo",
  documentId: "85203",
  instant: true
})
  .then((instance) => {
    console.log("Successfully mounted PSPDFKit", instance);
  })
  .catch((error) => {
    console.error(error.message);
  });

Permissions

If you have the Collaboration Permissions license feature enabled, you also have access to a granular permission system, which allows you to control what each user can see and do. To use it, you have to include the collaboration_permissions and user_id properties in your JSON Web Token (JWT).

Here’s how this might look:

const token = {
  ...otherProperties,
  collaboration_permissions: [
    "annotations:view:all",
    "annotations:edit:all"
  ],
  user_id: "user-12345"
};

The presence of collaboration_permissions and user_id is mandatory for enabling Collaboration Permissions.

If the Collaboration Permissions feature is enabled, all its associated actions are disabled unless you manually allow them. For example, collaboration_permissions: [] means users won’t be able to view any annotation, comment, or form field on a PDF. If collaboration_permissions isn’t present in the JWT, then Collaboration Permissions will automatically be disabled, and users will be able to perform every action without any restriction.

In the code mentioned above, you can see that collaboration_permissions is an array of permission strings. The permission strings define the permissions that have been granted to the user. Each string consists of three parts written in the <content-type>:<action>:<scope> format. You can learn more about different possible values of content type, action, and scope in the Defining Permissions guide.