Rasterex APINPM Package/docs/components/collaboration/implementation

Workflow Guide

Complete end-to-end interactive implementation guide for collaboration using the SDK.

Step-by-Step Interactive Workflow

Follow this complete guide to integrate real-time collaboration. Each step includes production-ready code for your host application.

Host Sends

1. HTML Container

Prepare your document canvas container in your template markup:

html

<!-- Document Canvas Container -->
<div id="viewer" style="height: 600px"></div>

<!-- Interface Controls -->
<div class="canvas-controls">
  <button id="btn-collab">Initialize Collaboration</button>
  <button id="btn-measure">Measure Length</button>
</div>

Host Sends

2. User Set (Identity Setup)

The first logical step is identifying the participant using the SDK collaboration API:

typescript

import { createViewer } from "@rasterex/viewer";

const viewer = createViewer({ container: "#viewer" });
await viewer.mount();
await viewer.ready();

async function setUserIdentity() {
  const result = await viewer.collaboration.setUser({
    username: "eng_77",
    displayName: "Alexander Smith",
    email: "alex@engineering-pro.com"
  });

  if (result.success) {
    console.log("User identity set successfully");
  }
}

Host Sends

3. Enable Sync Control

Explicitly enable the collaboration synchronization room before opening the document:

typescript

function enableSync() {
  viewer.collaboration.enable({
    roomId: "document_collaboration_room_A1"
  });

  document.getElementById('btn-collab').textContent = "Collaboration Active";
}

Host Sends

4. Open & Collaborate

Open the document and trigger actions that will automatically synchronize across connected users:

typescript

// Open the document to join the active room
await viewer.documents.open({
  url: "https://files.example.com/floor-plan.pdf",
  displayName: "Floor Plan.pdf"
});

// Enable measurement tool that broadcasts measurements
document.getElementById('btn-measure')?.addEventListener("click", () => {
  void viewer.tools.set({ action: "MEASURE_LENGTH", enabled: true });
});