@compdfkit_pdf_sdk/webviewer

PDF SDK for Web | View, Annotate, Edit & Render PDFs in the Browser

ComPDF WebViewer is a JavaScript PDF SDK for Web apps that need PDF viewing, annotation, editing, forms, signatures, comparison, and security directly in the browser. For teams building broader document workflow products, ComPDFKit also works with ComPDF API for Convert, OCR, and Generate workflows.

🚀 Why ComPDF

ComPDF is a practical choice for web teams that need more than a low-level PDF renderer but do not want to build a full document UI stack from scratch.

Why developers use it:

• Browser rendering: render PDFs directly in the browser with a ready-to-use UI.
• No backend required for standalone mode: deploy with WebAssembly and keep rendering client-side.
• SaaS-friendly integration: embed document workflows inside portals, dashboards, CRMs, and customer-facing apps.
• Framework support: use it with React, Angular, Vue, Next.js, Nuxt.js, and more.
• Commercial flexibility: standalone and server-backed deployment options for different product needs.

🎬 Live Demo

Try ComPDF in action:

• Apply the License Key Contact ComPDF to get a free 30-day license to test the project.
• Web Demo: https://www.compdf.com/demo/webviewer
• Sample Project (React): https://github.com/ComPDF/compdfkit-web-example-react
• Sample Project (Vanilla JS): https://github.com/ComPDFKit/compdfkit-web-example-vanilla-javascript

⚡ Quick Start

Requirements: Node.js latest stable, npm-compatible package manager, and a valid ComPDF web license.

1. Install

npm install @compdfkit_pdf_sdk/webviewer

2. Copy the WebViewer assets

cp -a ./node_modules/@compdfkit_pdf_sdk/webviewer/dist/. ./public/webviewer

3. Initialize the viewer

import WebViewer from '@compdfkit_pdf_sdk/webviewer';

const viewer = document.getElementById('viewer');

WebViewer.init(
  {
    path: '/webviewer',
    pdfUrl: '/webviewer/example/developer_guide_web.pdf',
    license: '<Input your license here>',
  },
  viewer,
).then((instance) => {
  const docViewer = instance.docViewer;

  docViewer.addEvent('documentloaded', () => {
    console.log('document loaded');
  });
});

Standalone deployment runs in the browser, so no backend is required for rendering PDFs.

🧩 Key Features

• 🌐 Browser PDF Rendering
  Render PDFs with smooth navigation, thumbnails, and a ready-made document UI.
  👉 Use case: SaaS dashboards, customer portals, embedded viewers

• ✍️ Annotations, Forms & Signatures
  Review, mark up, fill, and sign documents inside the browser.
  👉 Use case: contract workflows, onboarding, collaboration

• 🛠️ Editing & Document Operations
  Support content editing, page workflows, and document manipulation in web apps.
  👉 Use case: online PDF editors, review platforms, content operations tools

• 🔐 Security & Comparison
  Add secure document handling and compare PDFs in browser-based workflows.
  👉 Use case: legal review, approval systems, quality control

• 🧱 Framework-Friendly Integration
  Use one PDF layer across React, Angular, Vue, Next.js, and other frontend stacks.
  👉 Use case: multi-team SaaS platforms and reusable frontend infrastructure

• 🔄 Convert / OCR / Generate via ComPDF API
  Combine WebViewer with backend document processing when your product needs more than in-browser interaction.
  👉 Use case: invoice extraction, document generation, server-side automation

💡 Use Cases

• Document Management Systems with browser-based viewing and review
• PDF Editors embedded in SaaS products
• Customer Portals for form filling, signatures, and secure document exchange
• Invoice Processing UIs that preview files in browser before OCR/extraction workflows
• No-Backend Viewer Scenarios where client-side rendering simplifies deployment

🧪 Code Snippets

Vanilla JavaScript example

import WebViewer from '@compdfkit_pdf_sdk/webviewer';

const element = document.getElementById('viewer');

WebViewer.init(
  {
    path: '/webviewer',
    pdfUrl: '/webviewer/example/developer_guide_web.pdf',
    license: '<Input your license here>',
  },
  element,
).then((instance) => {
  const docViewer = instance.docViewer;

  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit WebViewer loaded');
  });
});

React example

import { useEffect, useRef } from 'react';
import ComPDFKitViewer from '@compdfkit_pdf_sdk/webviewer';

export default function WebViewerContainer() {
  const containerRef = useRef(null);

  useEffect(() => {
    ComPDFKitViewer.init(
      {
        path: '/',
        pdfUrl: './example/developer_guide_web.pdf',
        license: '<Input your license here>',
      },
      containerRef.current,
    ).then((core) => {
      const docViewer = core.docViewer;

      docViewer.addEvent('documentloaded', async () => {
        console.log('document loaded');
      });
    });
  }, []);

  return (
    <div
      ref={containerRef}
      style={{ width: '100%', height: '100vh', overflow: 'hidden' }}
    />
  );
}

🔗 Documentation & Resources

❤️ Engagement

If ComPDF helps your web product ship faster, please ⭐ Star us on GitHub to support the project.

ComPDF is a strong fit for teams that want browser rendering, customizable UI, and a clean upgrade path from PDF viewing to full document workflows.