udoc-viewer

import { UDocClient } from '@docmentis/udoc-viewer';

// Create a client (loads the WASM engine)
const client = await UDocClient.create();

// Create a viewer attached to a container element
const viewer = await client.createViewer({
  container: '#viewer'
});

// Load a document
await viewer.load('https://example.com/document.pdf');

// Clean up when done
viewer.destroy();
client.destroy();

<div id="viewer" style="width: 100%; height: 600px;"></div>

<script type="module">
  import { UDocClient } from "@docmentis/udoc-viewer";

  const client = await UDocClient.create();
  const viewer = await client.createViewer({ container: "#viewer" });
  await viewer.load("/path/to/document.pdf");
</script>

import { useEffect, useRef } from "react";
import { UDocClient } from "@docmentis/udoc-viewer";

function DocumentViewer({ src }) {
  const containerRef = useRef(null);

  useEffect(() => {
    let client, viewer;

    (async () => {
      client = await UDocClient.create();
      viewer = await client.createViewer({
        container: containerRef.current,
      });
      await viewer.load(src);
    })();

    return () => {
      viewer?.destroy();
      client?.destroy();
    };
  }, [src]);

  return <div ref={containerRef} style={{ width: "100%", height: "600px" }} />;
}

const client = await UDocClient.create({
  // License key for commercial use (optional)
  license: 'eyJ2Ijox...',

  // Custom base URL for worker and WASM files (optional)
  // Expected files: {baseUrl}/worker.js and {baseUrl}/udoc_bg.wasm
  baseUrl: 'https://cdn.example.com/udoc/',

  // Locale for UI strings (optional, default: 'en')
  locale: 'en',

  // Disable anonymous telemetry (default: false)
  // Requires a license with the 'no_telemetry' feature
  disableTelemetry: false,

  // Skip the npm registry version check on startup (default: false)
  disableUpdateCheck: false,

  // Enable Google Fonts fallback for missing fonts (default: true)
  googleFonts: true,

  // Register custom fonts for on-demand fetching during layout (optional)
  // Supports OTF, TTF, WOFF, and WOFF2. Take priority over Google Fonts.
  fonts: [
    { typeface: 'Roboto', bold: false, italic: false, url: 'https://cdn.example.com/Roboto-Regular.woff2' },
    { typeface: 'Roboto', bold: true,  italic: false, url: 'https://cdn.example.com/Roboto-Bold.woff2' },
  ],
});

const viewer = await client.createViewer({
  // Container element or CSS selector (required for UI mode)
  container: '#viewer',

  // --- View modes ---
  scrollMode: 'continuous',     // 'continuous' or 'spread'
  layoutMode: 'single-page',   // 'single-page', 'double-page', etc.
  pageRotation: 0,              // 0, 90, 180, or 270
  spacingMode: 'all',           // 'all', 'none', 'spread-only', 'page-only'

  // --- Zoom ---
  zoomMode: 'fit-spread-width',
  zoom: 1,
  minZoom: 0.1,
  maxZoom: 5,

  // --- Theme ---
  theme: 'light',               // 'light', 'dark', or 'system'

  // --- Panels ---
  activePanel: null,             // 'thumbnail', 'outline', 'search', etc.
  disableSearch: false,
  disableThumbnails: false,

  // --- UI visibility ---
  hideToolbar: false,
  hideFloatingToolbar: false,
  disableFullscreen: false,
  hideAttribution: false,        // requires license with 'no_attribution'
});

// From URL
await viewer.load('https://example.com/document.pdf');

// From File object (e.g., from file input)
await viewer.load(file);

// From raw bytes
await viewer.load(new Uint8Array(buffer));

// Close current document
viewer.close();

await viewer.load(source);

if (await viewer.needsPassword()) {
  const success = await viewer.authenticate('my-password');
  if (!success) {
    console.error('Incorrect password');
  }
}

// Get current page (1-based)
const page = viewer.currentPage;

// Go to a specific page (1-based)
viewer.goToPage(5);

// Navigate to next/previous page
viewer.nextPage();
viewer.previousPage();

// Navigate to a destination (from outline)
viewer.goToDestination(destination);

// Navigate with scroll alignment override
viewer.goToDestination(destination, { scrollAlignment: 'center' });

// Change default scroll alignment at runtime
// 'top' | 'center' | 'bottom' | 'nearest'
viewer.setNavigationScrollAlignment('center');
viewer.setSearchScrollAlignment('top');

// Check if document is loaded
if (viewer.isLoaded) {
  // Get page count
  const total = viewer.pageCount;

  // Get document metadata
  const meta = viewer.metadata;
  console.log(`Title: ${meta?.title}, Author: ${meta?.author}`);

  // Get page dimensions (0-based index)
  const info = await viewer.getPageInfo(0);
  console.log(`Page 1: ${info.width} x ${info.height} points`);

  // Get document outline (table of contents)
  const outline = await viewer.getOutline();

  // Get annotations on a page (0-based index)
  const annotations = await viewer.getPageAnnotations(0);

  // Get plain text of a page (matches what search indexes)
  const text = await viewer.getPageText(0);
}

// Extract text from a single page (0-based index)
const pageText = await viewer.getPageText(0);

// Extract the full document
const pages: string[] = [];
for (let i = 0; i < viewer.pageCount; i++) {
  pages.push(await viewer.getPageText(i));
}
const fullText = pages.join('\n\n');

const annotations = await viewer.getPageAnnotations(0); // 0-based page index

for (const a of annotations) {
  console.log(a.type, a.name, a.bounds, a.metadata?.author);
}

const created = await viewer.addPageAnnotation(0, {
  type: 'highlight',
  bounds: { x: 100, y: 700, width: 200, height: 20 },
  quads: [{ points: [
    { x: 100, y: 700 }, { x: 300, y: 700 },
    { x: 300, y: 720 }, { x: 100, y: 720 },
  ] }],
  color: { r: 1, g: 1, b: 0 },
  metadata: { author: 'Alice', contents: 'Important' },
});

console.log(created.name); // generated UUID, stable across save/reload

// Insert many on a single page in one store update
const inserted = await viewer.addPageAnnotations(0, [
  { type: 'highlight', bounds: { x: 100, y: 700, width: 200, height: 20 }, color: { r: 1, g: 1, b: 0 } },
  { type: 'underline', bounds: { x: 100, y: 680, width: 200, height: 2 }, color: { r: 0, g: 0, b: 1 } },
]);

// Replace the whole annotation
await viewer.updatePageAnnotation(0, created.name, {
  ...created,
  color: { r: 0, g: 1, b: 0 },
  metadata: { ...created.metadata, contents: 'Reviewed' },
});

// Patch only a few fields
await viewer.patchPageAnnotation(0, created.name, {
  color: { r: 0, g: 1, b: 0 },
  metadata: { contents: 'Reviewed' }, // keeps existing author/subject
});

// Batch patch/update — one store update, validation is atomic
await viewer.patchPageAnnotations(0, [
  { name: a.name, patch: { color: { r: 1, g: 0, b: 0 } } },
  { name: b.name, patch: { opacity: 0.5 } },
]);

// Remove
await viewer.removePageAnnotation(0, created.name);

const bytes = await viewer.toBytes();       // pending edits flushed into the returned PDF
await viewer.download('annotated.pdf');

// Ephemeral: not written on save, not printed
const cursor = await viewer.addPageAnnotation(0, {
  type: 'square',
  bounds: { x: 50, y: 50, width: 30, height: 30 },
  color: { r: 1, g: 0, b: 0 },
  ephemeral: true,
});

// Promote an ephemeral preview into a saved annotation
await viewer.updatePageAnnotation(0, cursor.name, { ...cursor, ephemeral: false });

viewer.on('annotation:add', ({ pageIndex, annotation }) => {
  if (annotation.ephemeral) return;
  syncToBackend({ kind: 'create', pageIndex, annotation });
});

viewer.on('annotation:update', ({ pageIndex, annotation }) => { /* ... */ });
viewer.on('annotation:remove', ({ pageIndex, annotation }) => { /* ... */ });

viewer.on('annotation:select', (selection) => {
  if (!selection) return; // null = deselect
  showInspector(selection.annotation);
});

// Pointer hover — clientX/clientY are viewport coords for tooltip placement
viewer.on('annotation:hover', (hover) => {
  if (!hover) return hideTooltip();
  showTooltip(hover.annotation, { x: hover.clientX, y: hover.clientY });
});

// Pointer click — fires before built-in handling (link nav, sticky-note popups)
viewer.on('annotation:click', ({ pageIndex, annotation, clientX, clientY }) => {
  console.log('clicked', annotation.subtype, 'on page', pageIndex);
});

// Zoom
viewer.zoomIn();
viewer.zoomOut();
viewer.setZoom(1.5);                  // 150%
viewer.setZoomMode('fit-spread-width');
viewer.setMinZoom(0.5);               // clamp minimum to 50%
viewer.setMaxZoom(3);                 // clamp maximum to 300%
console.log(viewer.zoom);            // current zoom level
console.log(viewer.zoomMode);        // current zoom mode

// View modes
viewer.setScrollMode('continuous');    // 'continuous' | 'spread'
viewer.setLayoutMode('double-page');   // 'single-page' | 'double-page' | ...
viewer.setPageRotation(90);            // 0 | 90 | 180 | 270
viewer.setSpacingMode('none');         // 'all' | 'none' | 'spread-only' | 'page-only'

// Theme
viewer.setTheme('dark');               // 'light' | 'dark' | 'system'
viewer.setThemeSwitchingEnabled(false); // hide theme toggle button
console.log(viewer.theme);            // current theme

// Text selection
viewer.setTextSelectionEnabled(false); // disable text selection

// Fullscreen
viewer.setFullscreen(true);
console.log(viewer.isFullscreen);

// Simple tools
viewer.setActiveTool({ kind: 'pointer' });
viewer.setActiveTool({ kind: 'hand' });
viewer.setActiveTool({ kind: 'zoom' });

// Tool sets — sub-tool is required
viewer.setActiveTool({ kind: 'annotate', sub: 'freehand' });
viewer.setActiveTool({ kind: 'annotate', sub: 'rectangle' });
viewer.setActiveTool({ kind: 'markup', sub: 'highlight' });

// Calling with the same tool-set kind that's already active toggles back to pointer

// Read current tool
const t = viewer.activeTool;
if (t.kind === 'annotate') {
  console.log('annotating with', t.sub); // 'freehand' | 'rectangle' | ...
}

// Toolbar visibility
viewer.setToolbarVisible(false);
viewer.setFloatingToolbarVisible(false);

// Fullscreen button
viewer.setFullscreenEnabled(false);

// Disable entire panel areas
viewer.setLeftPanelEnabled(false);
viewer.setRightPanelEnabled(false);

// Disable individual panel tabs
// Panels: 'thumbnail', 'outline', 'bookmarks', 'layers',
//         'attachments', 'search', 'comments'
viewer.setPanelEnabled('thumbnail', false);
viewer.setPanelEnabled('search', false);

// Open/close panels programmatically
viewer.openPanel('outline');
viewer.closePanel();

// Search and await results (returns Promise<SearchMatch[]>)
const matches = await viewer.search('hello world');
console.log(`Found ${matches.length} matches`);

// Search with options
const caseMatches = await viewer.search('hello', { caseSensitive: true });

// Fuzzy matching — strips all whitespace, control characters, pipes (|),
// and zero-width characters from both the query and document text before
// comparison. Designed for AI-generated citations where spacing or
// separators may differ from the original document text.
const fuzzy = await viewer.search('cell A | cell B', { fuzzy: true });

// Restrict search to a page range (inclusive, 0-based).
// Both text loading and match collection are limited to the range —
// useful for large documents when only a subset is of interest.
const ranged = await viewer.search('invoice', { pageRange: [10, 20] });

// Each search() call is self-contained: the range is reset unless
// explicitly provided, so a prior scoped search can't leak into a
// later broad one.
await viewer.search('invoice', { pageRange: [10, 20] }); // pages 10-20
await viewer.search('payment');                          // whole doc

// Note: the built-in search panel always searches the entire document.
// pageRange is only honored when calling the API directly.

// Each match contains location, highlight rects, and context snippet
for (const match of matches) {
  console.log(`Page ${match.pageIndex + 1}: "${match.context[1]}"`);
  console.log(`  Before: "${match.context[0]}", After: "${match.context[2]}"`);
  console.log('  Rects:', match.rects); // bounding boxes in PDF points
}

// Navigate between matches (scrolls viewport to match)
viewer.searchNext();
viewer.searchPrev();

// Navigate with a per-call scroll alignment override
viewer.searchNext({ scrollAlignment: 'center' });
viewer.searchPrev({ scrollAlignment: 'top' });

// Jump to a specific match by index
viewer.setSearchActiveIndex(5);
viewer.setSearchActiveIndex(5, { scrollAlignment: 'center' });

// Read current state
console.log(viewer.searchMatches);     // SearchMatch[]
console.log(viewer.searchActiveIndex); // number (-1 if none)

// Listen for incremental updates (fires as pages load and on navigation)
viewer.on('search:change', ({ matches, activeIndex }) => {
  updateMySearchUI(matches, activeIndex);
});

// Clear search
viewer.clearSearch();

const viewer = await client.createViewer({
  container: '#viewer',
  disableSearch: true, // hide built-in search panel
});

await viewer.load('document.pdf');

// Wire up your own search input
searchInput.addEventListener('input', async () => {
  const matches = await viewer.search(searchInput.value);
  renderResultsList(matches); // your custom UI
});

// Wire up next/prev buttons
nextBtn.addEventListener('click', () => viewer.searchNext());
prevBtn.addEventListener('click', () => viewer.searchPrev());

// Export document as raw bytes
const bytes = await viewer.toBytes();

// Download document to user's device
await viewer.download('document.pdf');

// Create headless viewer (no container)
const viewer = await client.createViewer();
await viewer.load(pdfBytes);

// Render page to ImageData (0-based page index)
const imageData = await viewer.renderPage(0, { scale: 2 });

// Render to Blob
const blob = await viewer.renderPage(0, {
  format: 'blob',
  imageType: 'image/png'
});

// Render to data URL
const dataUrl = await viewer.renderPage(0, {
  format: 'data-url',
  imageType: 'image/jpeg',
  quality: 0.9
});

// Render a thumbnail
const thumb = await viewer.renderThumbnail(0, { scale: 1 });

// Render a sub-region of a page.
// rect is in page points (1pt = 1/72 inch), top-left origin — same coordinate
// space as getPageInfo(page).width / .height. Output pixel size is
// rect.width * scale x rect.height * scale.
const { width, height } = await viewer.getPageInfo(0);
const regionImageData = await viewer.renderRegion(
  0,
  { x: 0, y: 0, width: width / 2, height: height / 2 },
  { scale: 2 }
);

// Same crop as a PNG blob
const regionBlob = await viewer.renderRegion(
  0,
  { x: 100, y: 100, width: 200, height: 150 },
  { format: 'blob', imageType: 'image/png', scale: 2 }
);

// Create a new document from pages of existing documents
const [newDoc] = await client.compose([
  [
    { doc: viewerA, pages: "1-3" },
    { doc: viewerB, pages: "5", rotation: 90 }
  ]
]);

// Export the composed document
const bytes = await newDoc.toBytes();
await newDoc.download('composed.pdf');

// Split a document by its top-level bookmarks
const result = await client.splitByOutline(viewer);
console.log(`Split into ${result.viewers.length} documents`);
result.sections.forEach((section, i) => {
  console.log(`Document ${i}: ${section.title}`);
});

// Split with options
const result = await client.splitByOutline(viewer, {
  maxLevel: 2,         // Include up to 2 levels of bookmarks
  splitMidPage: true,  // Filter content when sections share a page
});

// Extract all embedded images from a document
const images = await client.extractImages(viewer);
for (const image of images) {
  console.log(`${image.name}: ${image.format} (${image.width}x${image.height})`);
  // image.data contains the raw image bytes
}

// Convert raw images to PNG for easier viewing
const pngImages = await client.extractImages(viewer, {
  convertRawToPng: true,
});

// Extract all embedded fonts from a document
const fonts = await client.extractFonts(viewer);
for (const font of fonts) {
  console.log(`${font.name}: ${font.fontType} (.${font.extension})`);
  // font.data contains the raw font bytes
}

// Compress a document (FlateDecode, object streams, compressed xref)
const compressedBytes = await client.compress(viewer);

// Decompress a document (remove all filter encodings)
const decompressedBytes = await client.decompress(viewer);

// Save the result
const blob = new Blob([compressedBytes], { type: 'application/pdf' });

/* Override the primary color */
.udoc-viewer-root {
  --udoc-primary: #e91e63;
  --udoc-primary-hover: #c2185b;
}

/* Override dark theme colors */
.udoc-viewer-root.udoc-viewer-dark {
  --udoc-primary: #f48fb1;
  --udoc-primary-hover: #f06292;
}

const viewer = await client.createViewer({
  container: '#viewer',
  customPageOverlay: (pageIndex, container, scale) => {
    const btn = document.createElement('button');
    btn.textContent = '💬';
    btn.style.cssText =
      'position:absolute;top:8px;right:-40px;pointer-events:auto;cursor:pointer;';
    btn.onclick = () => openCommentDialog(pageIndex);
    container.appendChild(btn);

    // Optional: cleanup runs when the page scrolls out of view
    return () => btn.remove();
  },
});

// Option 1: Register fonts declaratively at client creation
const client = await UDocClient.create({
  googleFonts: true, // default, enable Google Fonts fallback
  fonts: [
    { typeface: 'CustomFont', bold: false, italic: false, url: 'https://cdn.example.com/CustomFont-Regular.woff2' },
    { typeface: 'CustomFont', bold: true,  italic: false, url: 'https://cdn.example.com/CustomFont-Bold.woff2' },
  ],
});

// Option 2: Register fonts programmatically (before loading documents)
await client.registerFonts([
  { typeface: 'CustomFont', bold: false, italic: false, url: 'https://cdn.example.com/CustomFont-Regular.woff2' },
]);

// Option 3: Disable Google Fonts entirely (only use registered fonts)
const headlessClient = await UDocClient.create({ googleFonts: false });

// User uploads a font file
const fontBytes = new Uint8Array(await fontFile.arrayBuffer());
const info = await client.parseFontInfo(fontBytes);
// info = { typeface: "Roboto", bold: true, italic: false }

// Store font file to your storage (e.g., S3, GCS) and save metadata
await storage.upload(`fonts/${fontFile.name}`, fontBytes);
await db.fonts.insert({
  typeface: info.typeface,
  bold: info.bold,
  italic: info.italic,
  url: `https://cdn.example.com/fonts/${fontFile.name}`,
});

// Fetch font entries from your database
const fonts = await db.fonts.list();

// Register all fonts with the viewer
await client.registerFonts(
  fonts.map((f) => ({ typeface: f.typeface, bold: f.bold, italic: f.italic, url: f.url }))
);

// Now load the document — registered fonts will be used during rendering
await viewer.load(documentSource);

// Query font usage after at least one page has been rendered
const fontUsage = await viewer.getFontUsage();

for (const entry of fontUsage) {
  // What the document requested
  const spec = 'typeface' in entry.spec
    ? `${entry.spec.typeface} (bold=${entry.spec.bold}, italic=${entry.spec.italic})`
    : `fontId=${entry.spec.fontId}`;

  // How it was resolved
  const resolved = entry.resolved;
  console.log(`${spec} → ${resolved.familyName} [${resolved.source}]`);

  // Any additional fonts used via glyph fallback
  for (const fb of entry.fallbacks) {
    console.log(`  fallback: ${fb.familyName} [${fb.source}]`);
  }
}

// Listen for incremental updates as pages render
viewer.on('font:usageChange', ({ entries }) => {
  console.log(`Font usage updated: ${entries.length} font specs resolved`);
});

// Document loaded
const unsubscribe = viewer.on('document:load', ({ pageCount }) => {
  console.log(`Loaded ${pageCount} pages`);
});

// Document closed
viewer.on('document:close', () => {
  console.log('Document closed');
});

// Page changed
viewer.on('page:change', ({ page, previousPage }) => {
  console.log(`Page ${previousPage} -> ${page}`);
});

// Viewport changed (scroll, zoom, layout, or scroll-mode change).
// Throttled to one fire per animation frame and de-duped. Page indices 0-based.
viewer.on('viewport:change', ({ firstVisiblePage, lastVisiblePage, zoom, scrollTop }) => {
  console.log(`Visible: ${firstVisiblePage}-${lastVisiblePage} @ ${zoom}x`);
});

// Panel opened/closed
viewer.on('panel:change', ({ panel, previousPanel }) => {
  console.log(`Panel: ${previousPanel} -> ${panel}`);
});

// UI component visibility changed
viewer.on('ui:visibilityChange', ({ component, visible }) => {
  console.log(`${component} is now ${visible ? 'visible' : 'hidden'}`);
});

// Document loading progress (fetching/parsing the document for display)
viewer.on('document:loading', ({ loaded, total, percent }) => {
  console.log(`Loaded ${loaded}/${total} bytes (${percent}%)`);
});

// Search results changed (matches found or active match navigated)
viewer.on('search:change', ({ matches, activeIndex }) => {
  console.log(`${matches.length} matches, active: ${activeIndex}`);
});

// Annotation lifecycle (fires for both UI- and API-driven changes;
// see the Annotations section above for full payloads)
viewer.on('annotation:add', ({ pageIndex, annotation }) => {});
viewer.on('annotation:update', ({ pageIndex, annotation }) => {});
viewer.on('annotation:remove', ({ pageIndex, annotation }) => {});
viewer.on('annotation:select', (selection) => {}); // null when cleared

// Error occurred. phase is 'fetch' | 'parse' | 'render' | 'permit'.
// 'permit' = free-tier verification was blocked or unavailable.
viewer.on('error', ({ error, phase }) => {
  console.error(`Error during ${phase}:`, error);
});

// Unsubscribe
unsubscribe();

// Destroy the viewer first
viewer.destroy();

// Then destroy the client
client.destroy();

// Free tier: each document open is verified online (limited per domain)
const client = await UDocClient.create();

// Licensed: unlimited, fully offline, no permit check
const client = await UDocClient.create({ license: 'eyJ2Ijox...' });

viewer.on('error', ({ error, phase }) => {
  if (phase === 'permit') {
    // Free-tier limit reached, or verification was unavailable.
    // Prompt the user to retry, or upgrade to a commercial license.
  }
});

const client = await UDocClient.create({
  license: 'eyJ2Ijox...',
  disableTelemetry: true,
});