ComPDF SDK for Web (React Example)

As part of the KDAN ecosystem, ComPDF SDK for Web is a powerful JavaScript-based PDF library that enables developers to easily add PDF viewing, annotation, editing, and more to their applications across multiple frameworks including Vanilla JavaScript, Vue.js, React, Angular, Next.js, Nuxt.js, and more — with just a few lines of code.

If you find this library helpful, please consider giving us a ⭐ Star on GitHub! Have feedback or questions? Join the conversation in our Discussions.

Why ComPDF SDK?

• Easy to Integrate: Clear docs and a powerful JavaScript API let you add PDF features in just a few lines of code.

• Fully Customizable UI: Ship your own look and feel with source-level control over every UI element.

• Comprehensive PDF Features: View, annotate, edit, convert, OCR, redact, sign, compress, compare, and more — all in one SDK.

• 5×24 Expert Support: One-to-one technical assistance via email, phone, and on-site service.

Table of Contents

• Supported Features
• How to Make a React PDF Viewer App
• Free Trial and License
• Changelog
• Support
• Note
• Related

Supported Features

• Viewer:

  • Fast and smooth PDF rendering and viewing
  • Display Modes - single/double page, vertical & horizontal scrolling, cover mode, crop mode
  • Text Search & Selection
  • PDF Navigation - outlines, bookmarks

• Annotations:

  • Notes - add longer comments with adjustable icon shape and color

  • Ink - freehand drawing with customizable color, opacity, line thickness

  • Text - add, move, resize text directly on page

  • Inspector - adjust annotation looks (line styles, borders, colors, opacity, font)

  • Comment on Annotations and Update Status

  • Import & Export & Flatten Annotations (XFDF, FDF, JSON)

  • Highlight, Underline, Strikeout, Squiggly

  • Shapes - Rectangle, Oval, Line, Arrow, Polygon, Polyline, Cloud

  • Stamps, Sound, Movie, File Attachment, Link, Distance, Perimeter, Area

• Document Editor:

  • Page manipulation - insert, delete, rotate, reorder, extract, crop
  • Split PDF, Merge PDF

• Content Editor: Edit PDF text and images directly like in Word

• Signatures:

  • Electronic Signatures - draw, type, image signatures
  • Digital Signatures - certificate-based signature validation

• Forms:

  • Process fillable and static PDF forms
  • Form filling, form creation, form flattening

• Security:

  • Encryption - set open password, permission password
  • Restrict printing, copying, editing

• Redaction: Permanently remove sensitive content from PDFs

• Layers: View, edit, display, lock, and export specific layers within a file

• Color Separation: Identify color models like CMYK, PMS. Toggle color visibility and view details.

• Measurement: Distance, area, perimeter measurement tools

• Compare Documents: Side-by-side document comparison to highlight differences

How to Make a React PDF Viewer App

Prerequisites

• The latest stable version of Node.js.
• A package manager compatible with npm.
• Apply the License Key: Contact ComPDFKit's sales team to get a free 30-day license to test the project.

Create a New Project

Create a new React project:

npx create-react-app compdfkit-app
cd compdfkit-app

Add ComPDF for Web

1. Install the webviewer package:

npm i @compdfkit_pdf_sdk/webviewer --save

2. Copy the static resource files to your project's public folder:

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

Display a PDF

1. Add your PDF document to the public/webviewer/example directory.

2. Create src/webviewer.js with the following code:

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

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

  useEffect(() => {
    let docViewer = null;

    ComPDFKitViewer.init({
      path: '/',
      pdfUrl: './example/developer_guide_web.pdf',
      license: '<Input your license here>'
    }, containerRef.current).then((instance) => {
      docViewer = instance.docViewer;
      docViewer.addEvent('documentloaded', async () => {
        console.log('ComPDFKit Web Demo loaded');
      })
    })
  }, []);

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

3. Update src/App.js to include the WebViewer component:

import WebViewer from './webviewer.js';

function App() {
  return (
    <div className="App">
      <WebViewer />
    </div>
  );
}

export default App;

Run the App

npm start

Open http://localhost:3000 on your browser.

Free Trial and License

Replace the <Input your license here> field in the src/webviewer.js with the license you get from our Team.

ComPDF SDK for Web supports flexible licensing options. You can apply for a license online to use it, reducing the process of contacting the service team and saving you time. If you need more information, you can contact our sales team. Each license is valid only for the root domain name and any of its subdomains.

The license we provide on Github can only run the demo. If you want to integrate our Web PDF SDK into your own React project, please apply for a free trial license on the website.

Please note that it is not allowed to distribute any documents, sample code, or source code from the ComPDF SDK package to third parties.

Changelog

Go to our changelog to keep up with the latest updates, improvements, and bug fixes.

Support

ComPDF has a professional R&D team that produces comprehensive technical documentation and guides to help developers. Also, you can get an immediate response when reporting your problems to our support team.

• For detailed information, please visit our Guides page.

• For technical assistance, please reach out to our Technical Support.

• To get more details and an accurate quote, please contact our Sales Team.

Note

We are glad to announce that you can register a ComPDF API account for a free trial to process 200+ API calls per month for free.

Related

• Download ComPDF SDK for Web in npm.

• Online Demo of ComPDF SDK

• Integrate ComPDF SDK for Web into Salesforce, SharePoint, Microsoft Teams, etc.

• Build a Web PDF Viewer with React

• ComPDF SDK for Web - Standalone Deployment