Browse docs

OverviewInstallationCanvasAll ComponentsFilesPDFCADAnnotationMeasurementPlacementAPI Key ManagementSymbol ManagementCollaborationCompareBatch ExportNavigationAll CapabilitiesStyles
Message API/docs/components/annotation/markup

Markup

Add clarity to review cycles using text, callouts, and highlighting brushes.

Overview

Markup tools are essential for documenting site observations and design feedback.

  • Text & Callouts: Professional labeling with leader lines.
  • Highlighters: Transparent emphasis for technical text or regions.
  • Freehand: Natural sketching for field notes.

Quick Examples

Activate markup tools with the `toolControl` message.

Callout

iframe.contentWindow.postMessage({
  type: 'toolControl',
  payload: { group: 'annotation', action: 'CALLOUT' }
}, viewerOrigin);

Highlighter

iframe.contentWindow.postMessage({
  type: 'toolControl',
  payload: { group: 'annotation', action: 'HIGHLIGHT' }
}, viewerOrigin);

Text

iframe.contentWindow.postMessage({
  type: 'toolControl',
  payload: { group: 'annotation', action: 'TEXT' }
}, viewerOrigin);

Deactivate

iframe.contentWindow.postMessage({
  type: 'toolControl',
  payload: { command: 'clear' }
}, viewerOrigin);

Complete Implementation

Complete workflow: initialize the canvas, load a file, then manage tool activation.

// CONFIGURATION
const VIEWER_URL = 'https://your-canvas-domain.com';
const VIEWER_ORIGIN = 'https://your-canvas-domain.com';
let activeTool = null;

// INITIALIZE CANVAS
const iframe = document.querySelector('[data-viewer-iframe]');
iframe.src = VIEWER_URL;

iframe.addEventListener('load', () => {
  // LOAD FILE
  iframe.contentWindow.postMessage({
    type: 'view',
    payload: { fileUrl: 'https://example.com/document.pdf' }
  }, VIEWER_ORIGIN);
});

// LISTEN FOR EVENTS
window.addEventListener('message', (event) => {
  if (event.origin !== VIEWER_ORIGIN) return;
  if (event.data.type === 'fileInfo') {
    console.log('File loaded:', event.data.payload.fileInfo.name);
  }
});

// TOOL CONTROL
function activateTool(action) {
  iframe.contentWindow.postMessage({
    type: 'toolControl',
    payload: { group: 'annotation', action: action }
  }, VIEWER_ORIGIN);
  activeTool = action;
}

function deactivateTool() {
  iframe.contentWindow.postMessage({
    type: 'toolControl',
    payload: { command: 'clear' }
  }, VIEWER_ORIGIN);
  activeTool = null;
}

function toggleTool(action) {
  activeTool === action ? deactivateTool() : activateTool(action);
}

// USAGE
// activateTool('CALLOUT');
// toggleTool('HIGHLIGHT');
// deactivateTool();
Complete Implementation

Live Preview

Test the markup tools in real-time.

Interactive Workbench

Live Viewer Preview

Launch the interactive preview to explore the viewer capabilities. Use the dashboard within the modal to test different tools and configurations.

Additional Resources

Connect markup tools with core viewer setup steps.