ComPDFKit WebViewer UI — Open-Source Documentation

The open-source Vue 3 UI layer of the ComPDFKit Web SDK. View, annotate, edit, and sign PDF documents in the browser — fully customizable.

---

What is this?

ComPDFKit WebViewer UI is the open-source UI layer that sits on top of the ComPDFKit Web SDK Core engine. It is built with Vue 3, Pinia, and Vite, and ships as a complete, responsive, customizable interface for working with PDF documents in the browser.

The repository contains the full source of the default UI. You can customize it, extend it, or use it as a reference for building your own PDF viewer interface.

Integrator's page
  └─ webviewer.js (iframe embed, packages/core/webviewer.js)
       └─ Webview Vue app (packages/webview)
            └─ Core bridge (packages/webview/src/core/)
                 └─ ComPDFKitViewer (packages/core)  ←  Web Worker + WASM

The Core engine (@compdfkit/core) is a closed-source WASM binary. The UI layer (@compdfkit/webview) documented here is open source.

Quick start

pnpm install
pnpm dev            # dev server on http://localhost:3032

Embed the viewer in your own page:

import ComPDFKitViewer from '@compdfkit/core/webviewer';

ComPDFKitViewer.init(
  { path: '/lib', pdfUrl: '/files/sample.pdf', license: 'YOUR_LICENSE_KEY' },
  document.getElementById('viewer')
).then(instance => {
  const { UI, Core } = instance;

  UI.setLanguage('en');          // Localization
  UI.setTheme('dark');           // Theming
  UI.disableElements(['printButton', 'downloadButton']); // Hide toolbar buttons
});

See Getting Started.

Guides

Fundamentals

• Getting Started — Install, develop, build, and embed.
• Architecture — Three-layer design, bootstrap flow, multi-instance.
• Core Bridge — The stateless src/core/ facade over the engine.
• State Management — Pinia stores (viewer & document).
• Components — The Vue component tree and key areas.
• Helpers, Hooks & Constants — Utilities and registries.

UI Customization

• UI Customization Overview — Hub for all UI customization topics.
• Header & Toolbar — setHeaderItems, setToolbarGroup, toolbar groups.
• Panels — Left/right panels, addPanel, setPanels, getPanels.
• Show / Hide Elements — openElement, closeElement, disableElements, enableElements.
• Themes & Styles — setTheme, setCustomStyle.
• Localization — setLanguage, addLanguage, supported locales.
• Custom Modals — addCustomModal.
• Popups — annotationPopup, textPopup, contentEditorPopup, cropPagePopup.

Features

• Tools — Tool system, setActiveTool, registerTool.
• Annotations — Create, import, export annotations.
• Forms — AcroForm fields and the form board.
• Signatures — Electronic and digital signatures.
• Stamps — Standard, dynamic, and custom stamps.
• Content Editor — Text & image content editing.
• Events — The core EventBus and event listeners.

Reference

• API Reference — Complete instance.UI / instance.Core surface.
• Deployment — Production builds and release layout.

Repository layout

packages/
├── core/        # Closed-source engine → builds into webview/lib/
└── webview/     # Open-source UI layer (this documentation)
    └── src/
        ├── apis/        # Public API surface (~67 modules → window.instance.UI)
        ├── api_helpers/ # API utilities (encapsulated store, popup API)
        ├── core/        # Stateless bridge to the engine (~120 modules)
        ├── components/  # Vue UI components (~200+ .vue files)
        ├── stores/      # Pinia stores (viewer, document)
        ├── helpers/     # Utilities (device, i18n, popup position, …)
        ├── hooks/       # Vue composables
        ├── constants/   # dataElements, toolNames, panel registries
        └── locales/     # i18n translation files