Introduction to PDF Web SDK

What is PDF Web SDK?

PDF Web SDK is a powerful JavaScript Document SDK and UI Component Library that provides a complete solution for viewing, annotating, and editing PDF documents directly in the browser. It's built with performance and ease of integration in mind.

Key Features

• 📄 Full PDF Editing: Edit text, images, and page layouts, with IME input for Korean, Japanese, and Chinese text
• ✏️ Annotations & Markup: Highlight, underline, sticky notes, and drawing tools
• 📝 Forms: Fill, flatten, and sign interactive PDF forms (AcroForms)
• 🔒 Security: Redaction, password protection, and digital signatures
• 🎨 Customizable UI: Out-of-the-box responsive interface with white-label ready styling
• ⚡ High Performance: Powered by WebAssembly for smooth rendering
• 🔧 Framework Compatible: Works with React, Angular, Vue, Svelte, and vanilla JavaScript
• 🌍 Server-Side Ready: Node.js SDK for batch processing and server-side operations

UI vs SDK (Headless)

The @avanquest/pdf-web-viewer package contains two distinct ways to interact with the PDF engine:

1. UI Mode: The complete viewer with toolbar, sidebar, and pre-built user interface.
2. SDK (Headless) Mode: The core PDF processing engine without any UI, ideal for custom interfaces or server-side processing.

Feature	Headless SDK	UI Mode
User Interface	❌ None	✅ Full toolbar & sidebar
Programmatic API	✅ Full	✅ Full
Document Rendering	✅ Yes	✅ Yes
Browser Only	❌ No (Node.js ready)	✅ Yes
Custom UI	✅ Build your own	❌ Use built-in
Server-Side Processing	✅ Yes	❌ No

Accessing the SDK

There are two ways to access the SDK:

1. Via PdfEditor result (recommended for UI apps):

   const editor = await PdfEditor({ container, license });
   const doc = await editor.sdk.openDocument({ file }); // SDK already initialized
   Copy

2. Direct import (for headless/server-side):

   import { PdfSdk } from '@avanquest/pdf-web-viewer/sdk';
   await PdfSdk.initialize({ license, basePath }); // Must initialize first!
   const doc = await PdfSdk.openDocument({ file });
   Copy

Asset Separation

To optimize your deployment, you only need to include the assets relevant to your usage mode:

• Common Assets (Required for both):

  • pwv-workers: WebAssembly workers for PDF processing.
  • pwv-fonts: Standard fonts for rendering.

• UI-Only Assets (Not needed for Headless SDK):

  • pwv-i18n: Localization files for the UI.
  • pwv-stamps: Default stamp images for the annotation tool.
  • pwv-cursors: Custom tool cursors for the UI.

Quick Start

1. Install PDF Web SDK

npm install https://cdn-developers.avanquest.com/websdk-files/packages/pdf-web-viewer/0.11.8/avanquest-pdf-web-viewer-0.11.8.tgz
Copy

The package is published on the Avanquest CDN, not the public npm registry. To upgrade, change the version in both segments of the URL. The dependency recorded in your package.json is this URL.

2. Copy Assets and Resources

Copy the worker files from node_modules to your public folder:

cp -R ./node_modules/@avanquest/pdf-web-viewer/public ./public
Copy

For webpack, use copy-webpack-plugin:

new CopyPlugin({
  patterns: [{
    from: 'node_modules/@avanquest/pdf-web-viewer/public',
    to: 'public',
  }],
}),
Copy

For Vite, create a plugin to copy assets on build start.

3. Initialize PDF Web SDK

import { PdfEditor } from '@avanquest/pdf-web-viewer';

const editor = await PdfEditor({
  container: document.getElementById('viewer'),
  license: 'YOUR_LICENSE_KEY' /*  Use trial (no key needed) or your license  */,
  basePath: '/public',
});

/* Open a document using the document view service */
const file = /* File object from input or fetch */;
await editor.ui.pdfWebService.openDocument(file);

/* Or use the SDK directly for programmatic operations */
const doc = await editor.sdk.openDocument({ file });
Copy

Using SDK Directly (Headless Mode)

For headless operations without UI, you can import PdfSdk directly:

import { PdfSdk } from '@avanquest/pdf-web-viewer/sdk';

/* Must initialize before use */
await PdfSdk.initialize({
  license: 'YOUR_LICENSE_KEY',
  basePath: '/public',
});

/* Perform operations */
const doc = await PdfSdk.openDocument({ file: pdfFile });
Copy

License

To extend your trial or get a production license, visit our licensing page.

Documentation

• Quick Start - HTML - HTML integration guide
• Server-Side SDK - Node.js SDK guide
• UI Integration Overview - How to integrate and customize the UI
• SDK Integration Guide - How to integrate SDK
• Full API Reference - Detailed API documentation

Licensing

PDF Web SDK will run in trial mode until a license is provided. For more information, visit our licensing page.