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: 'your-license-key',

  // 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',
});

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);

// 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);
}

// 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);

// 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();

// Open search panel and search for text
viewer.search('hello world');

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

// Navigate between matches
viewer.searchNext();
viewer.searchPrev();

// Clear search
viewer.clearSearch();

// 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 });

// 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;
}

// 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}`);
});

// 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'}`);
});

// Download progress
viewer.on('download:progress', ({ loaded, total, percent }) => {
  console.log(`Downloaded ${loaded}/${total} bytes (${percent}%)`);
});

// Error occurred
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();