DEV Community

Cover image for How to Implement PDF Annotations in JavaScript: Highlights, Sticky Notes, and More
Syncfusion, Inc. profile image Calvince Moth
Calvince Moth for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

How to Implement PDF Annotations in JavaScript: Highlights, Sticky Notes, and More

#pdf #documentmanagement #javascript #pdfannotation

TL;DR: Turn static PDFs into interactive documents! Learn how to add and manage annotations in JavaScript with highlights, notes, and export options. Includes API integration steps for creating, editing, and persisting annotations in web apps.

What are PDF annotations?

PDF annotations are interactive markups, such as highlights, underlines, strikethroughs, stamps, comments, free text, ink, and shapes, that help clarify content without altering the original document. They make collaboration easier and keep feedback organized.

Why PDF annotation matters

In modern workflows, reviewing PDFs without annotation tools is a slow and inefficient process. Teams often rely on emails or external chat platforms to share feedback, which leads to delays and increases the risk of miscommunication.

How JavaScript PDF annotation solves this

JavaScript PDF annotation enables users to add these markups directly in the browser, preserving the document’s integrity while facilitating faster, clearer, and more contextual reviews. This is especially useful for online PDF workflows where desktop tools aren’t practical.

In this guide, you’ll learn how to implement PDF annotation in JavaScript using Syncfusion’s PDF Viewer component.

Types of PDF annotations

When you use JavaScript to add PDF annotations, you can choose from several types to make documents more interactive and easier to review. In PDFs, an annotation is any user-added markup, such as highlights, shapes, ink, free text, stamps, or comments, that helps clarify the document without altering its original content.

Here are the most common types of annotations and how you can use them:

Text markup annotation

Text markup annotations are used to visually highlight specific parts of a PDF without changing its original content. Common types include:

  • Highlight: Draw attention to key text
  • Underline: Indicate important phrases
  • Strikethrough: Mark deletions or outdated content
  • Squiggly: Flag areas needing review or correction

Ideal for legal reviews, academic proofreading, and technical documentation to mark important sections or suggest edits.

<alt-text>


Text markup annotations in PDFs using JavaScript PDF Viewer

Shape annotation

Shape annotations include Rectangle, Circle, Arrow, Polygon, and Line, allowing users to highlight specific areas in a document. They are particularly useful for marking diagrams, technical drawings, or visually emphasizing sections. Commonly applied in design and engineering documents to highlight critical areas.

<alt-text>


Shape annotations in PDFs

Stamp annotation

Stamp annotations enable users to place predefined or custom stamps, such as “Approved,” “Rejected,” or logos, on a PDF to indicate status or branding. This feature is ideal for workflows that require visual confirmation of approvals or the addition of branding elements.

<alt-text>


Stamp annotation in PDFs

Sticky notes

Sticky notes allow users to add small comment pop-ups to a PDF, providing feedback or extra context without cluttering the main content. They are ideal for document reviews where suggestions, clarifications, or inline comments are needed.

<alt-text>


Sticky notes in PDFs

Free text annotation

Free Text annotations enable users to type text directly onto the PDF, adding visible notes or instructions without modifying the original content. Used to add comments, labels, or instructions in forms and review documents.

<alt-text>


Free text annotation in PDFs

Ink annotation

Ink annotations allow freehand drawing on a PDF using a pen tool, making them ideal for sketches, notes, or signatures. They are often used to sign forms, mark diagrams, or add any freehand input.

<alt-text>


Ink annotation in PDFs

Measurement annotation

Measurement annotations allow users to measure distances, radius, volume, or areas directly on a PDF, which is essential for precision-based tasks. They are widely used in architectural plans and engineering drawings to verify dimensions, all of which are enabled through JavaScript PDF annotations.

<alt-text>


Measurement annotation in PDFs

Handwritten signature

Handwritten signature annotations allow users to sign documents directly in the browser. This feature is ideal for signing contracts or approving forms directly within the web application.

<alt-text>


Handwritten signature annotations in PDFs

Would you like to try these annotations in your app? Explore Syncfusion JavaScript PDF Viewer and check out the live annotation demo to see it in action.

After exploring all these annotation types, let’s dive into the simple steps to integrate Syncfusion JavaScript PDF Viewer into your application and start adding annotations to your PDFs.

Install Syncfusion JavaScript PDF Viewer to add PDF annotation

Setting up the Syncfusion JavaScript PDF Viewer is quick and straightforward.

Here’s how to get started:

Step 1: Install the package via npm

First, open your terminal and run the following command to install the Syncfusion PDF Viewer package:

npm install @syncfusion/ej2-pdfviewer
Enter fullscreen mode Exit fullscreen mode

Step 2: Import required modules

Next, navigate to your JavaScript or TypeScript file and import the modules needed:

import { 
    PdfViewer, 
    Toolbar, 
    Magnification, 
    Navigation, 
    Annotation, 
    LinkAnnotation,
    ThumbnailView, 
    BookmarkView, 
    TextSelection, 
    TextSearch, 
    FormFields, 
    FormDesigner
} from '@syncfusion/ej2-pdfviewer';
Enter fullscreen mode Exit fullscreen mode

These modules offer essential features, including navigation, annotations, text search, and more, to provide a comprehensive PDF viewing experience.

Step 3: Initialize the Viewer

Finally, create an instance of the PDF Viewer and attach it to your page:

let viewer = new PdfViewer({
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
});
viewer.appendTo('#PdfViewer');
Enter fullscreen mode Exit fullscreen mode

And that’s it! Your Syncfusion JavaScript PDF Viewer is now ready to use.

Note: For a detailed walkthrough and advanced configuration options, refer to the Getting Started documentation.

Now that your PDF Viewer is set up, let’s explore how to add, delete, and manage annotations using the built-in toolbar or through APIs.

Adding PDF annotations

Adding annotations is simple and fast. You can add annotations either through the user interface or programmatically using Syncfusion’s JavaScript PDF Viewer.

1. Add annotations via the UI

The easiest way to add annotations is through the built-in toolbar. It provides an intuitive interface that allows users to interact directly with PDF pages for seamless review and markup. The toolbar supports several annotation types, including:

  • Text markup (highlight, underline, strikethrough)
  • Shapes for diagrams and technical drawings
  • Stamps for approvals or branding
  • Ink for freehand notes or signatures
  • Free text for inline comments
  • Sticky notes for contextual feedback
  • Signatures for secure document signing

With these options, users can quickly and efficiently annotate PDFs, making collaboration and document review more interactive.

<alt-text>


Add PDF annotations in JavaScript

2. Add annotations programmatically

For developers who need flexibility and automation, the API provides a powerful way to add annotations dynamically. Instead of relying on the UI, you can use the addAnnotation method to create annotations programmatically:

pdfviewer.annotation.addAnnotation(type, options);
Enter fullscreen mode Exit fullscreen mode
  • type: Specifies the annotation type, such as Highlight, StickyNotes, or Line.
  • options: Defines properties such as position, size, color, and page number.

This approach is ideal for custom workflows or data-driven annotation logic, where annotations need to be generated automatically based on user actions or external data.

Note: For advanced configuration and additional options, refer to the documentation.

Deleting PDF annotations

Removing annotations is just as simple as adding them. You can delete annotations either through the user interface or programmatically using Syncfusion’s JavaScript PDF Viewer.

1. Delete via UI

Users can remove specific annotations directly from the PDF by clicking the Delete icon in the toolbar or by right-clicking the annotation and selecting Delete from the context menu. This provides a quick and intuitive way to clean up unwanted markups during review.

<alt-text>


Delete PDF annotations in JavaScript

2. Delete programmatically

For developers who need more control, annotations can be deleted programmatically using the deleteAnnotationById method. Simply pass the annotation’s unique ID:

viewer.annotationModule.deleteAnnotationById(annotationId);
Enter fullscreen mode Exit fullscreen mode

The annotationId is a unique identifier for the annotation you want to remove. You can retrieve this ID from the annotationCollection array, making it easy to manage annotations dynamically.

Note: For advanced options and detailed examples, refer to the official documentation.

Managing PDF annotations

Beyond deleting, Syncfusion’s PDF Viewer allows users to edit, customize, comment, export, and import annotations, creating a seamless review experience.

1. Add comments to JavaScript PDF annotations

To add comments, simply double-click an annotation or use the toolbar to open the comment panel. From there, you can add notes, reply to existing comments, and even set statuses like Accepted or Rejected for collaborative reviews.

<alt-text>


Add comments to PDF annotations using JavaScript PDF Viewer

2. Customize annotations

Make annotations stand out by adjusting properties such as stroke or fill color, opacity, thickness, or font styles for free text annotations. These changes can be applied through the Properties panel or programmatically via the API.

<alt-text>


Customize PDF annotations using JavaScript PDF Viewer

3. Export and import annotations

Syncfusion’s JavaScript PDF Viewer supports exporting annotations in XFDF and JSON formats. This feature allows developers to persist, share, and reload annotations efficiently in web applications.

Export example:

var xfdfData = pdfviewer.exportAnnotations();
console.log(xfdfData); // XFDF string
Enter fullscreen mode Exit fullscreen mode

<alt-text>


Export and import PDF annotations

Importing annotations

To reload annotations from XFDF, use the code below:

var savedData = localStorage.getItem('pdfAnnotations');
if (savedData) {
    pdfviewer.importAnnotations(savedData);
}
Enter fullscreen mode Exit fullscreen mode

4. Editing PDF annotations in the browser

Managing annotations doesn’t have to be complicated. Users can simply right-click on any annotation to access quick actions such as cut, copy, paste, delete, or add comments. This streamlined approach makes it easy to modify annotations directly within the document, eliminating the need for additional UI components and ensuring a faster, more intuitive review process.

<alt-text>


Edit annotations without extra UI

Note: To explore all annotation management features in detail, refer to the official documentation.

Conclusion

Thank you for reading! Implementing annotation with Syncfusion JavaScript PDF Viewer enhances your web application by enabling users to add highlights, sticky notes, shapes, stamps, ink, and free text directly within PDFs. Whether through an intuitive toolbar or a flexible API, annotations can be added and customized with ease.

Developers can fine-tune properties like color, opacity, and thickness, and ensure persistence by saving annotations to the PDF or exporting/importing them in XFDF or JSON formats. Here’s what developers say about Syncfusion:

Ready to implement JavaScript PDF annotation? Try the live demo and explore the full PDF Viewer features in the documentation.

The PDF Viewer component offers all the functionality I could ask for and is fully customizable, G2 Reviewer.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

Top comments (0)