--- title: "How to Implement PDF Annotations in JavaScript: Highlights, Sticky Notes, and More" published_at: "2025-11-26T12:03:16+00:00" modified_at: "2026-07-01T11:52:43+00:00" url: "https://www.syncfusion.com/blogs/post/pdf-annotations-in-javascript" excerpt: "Learn how to implement PDF annotation in JavaScript, including adding highlights, sticky notes, and shapes, with easy steps for web applications." taxonomy_category: - "Document Management" - "JavaScript" - "PDF" - "PDF Annotation" - "PDF viewer" - "Web Development" taxonomy_post_tag: - "Document Editing" - "JavaScript" - "PDF Annotation" - "PDF Viewer" - "Web Apps" --- # How to Implement PDF Annotations in JavaScript: Highlights, Sticky Notes, and More [Sumathi Uthayakumar](https://www.syncfusion.com/blogs/author/sumathi-uthayakuma) ![JavaScript PDF Annotation: How to Add and Manage Annotations in Web Apps](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/JavaScript-PDF-Annotation-How-to-Add-and-Manage-Annotations-in-Web-Apps.jpg) **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. Add Seamless PDF Viewing to JavaScript Apps Embed a fast, secure PDF viewer into your JavaScript apps with Syncfusion JavaScript PDF Viewer SDK. Display documents accurately, navigate pages, search text, annotate PDFs, fill forms, and handle large files with smooth performance. [Add JavaScript PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) ## 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](https://www.syncfusion.com/javascript-ui-controls/js-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. ![Text markup annotations in PDFs using JavaScript PDF Viewer](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Text-markup-annotations-in-PDF.png) 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. ![Shape annotations in PDFs](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Shape-annotations-in-PDF.png) 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. ![Stamp annotation in PDFs](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Stamp-annotation-in-PDF.png) 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. ![Sticky notes in PDFs](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Sticky-notes-in-PDF.png) 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. ![Free text annotation in PDFs](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Free-text-annotation-in-PDF.png) 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. ![Ink annotation in PDFs](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Ink-annotation-in-PDF.png) 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. ![Measurement annotation in PDFs](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Measurement-annotation-in-PDF.png) 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. ![Handwritten signature annotations in PDFs](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Handwritten-signature-annotations-in-PDF.png) Handwritten signature annotations in PDFs Would you like to try these [annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/annotations/text-markup-annotation) in your app? Explore [Syncfusion JavaScript PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) and check out the live annotation [demo](https://document.syncfusion.com/demos/pdf-viewer/javascript-es5/#/tailwind3/pdfviewer/annotations.html) 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 ``` ### 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'; ``` 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'); ``` 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](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) . 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. ![Add PDF annotations in JavaScript](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Add-PDF-annotations-in-JavaScript.gif) 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); ``` - **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](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/annotations/text-markup-annotation) *.* ## 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. ![Delete PDF annotations in JavaScript](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Delete-PDF-annotations-in-JavaScript.gif) 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); ``` 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](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/how-to/delete-annotations) *.* ## 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. ![Add comments to PDF annotations using JavaScript PDF Viewer](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Adding-comments-to-JavaScript-PDF-annotations.png) 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. ![Customize PDF annotations using JavaScript PDF Viewer](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Customizing-PDF-annotations.png) 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 ``` ![Export and import PDF annotations using JavaScript PDF Viewer](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Exporting-and-importing-PDF-annotations.png) 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); } ``` ### 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. ![Edit annotations without extra UI](https://www.syncfusion.com/blogs/wp-content/uploads/2025/11/Annotation-editing-without-extra-UI.png) Edit annotations without extra UI **Note:** To explore all annotation management features in detail, refer to the official [documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/annotations/text-markup-annotation) . ## Conclusion Thank you for reading! Implementing annotation with Syncfusion [JavaScript PDF Viewer](https://www.syncfusion.com/javascript-ui-controls/js-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](https://document.syncfusion.com/demos/pdf-viewer/javascript-es5/#/tailwind3/pdfviewer/annotations.html) and explore the full PDF Viewer features in the [documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/annotations/text-markup-annotation) . The PDF Viewer component offers all the functionality I could ask for and is fully customizable, [G2 Reviewer](https://www.g2.com/products/syncfusion-essential-studio/reviews/syncfusion-essential-studio-review-9106364) . If you’re a Syncfusion user, you can download the setup from the [license and downloads](https://www.syncfusion.com/account/downloads) page. Otherwise, you can download a free [30-day trial](https://www.syncfusion.com/downloads/) . You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) for queries. We are always happy to assist you! ## Related Blogs [How to Create Interactive Fillable PDF Forms Using JavaScript PDF Viewer](https://www.syncfusion.com/blogs/post/create-fillable-pdf-forms-javascript) [How to Fix Memory Leaks in JavaScript PDF Viewers: Best Practices and Debugging Tips](https://www.syncfusion.com/blogs/post/memory-leaks-in-javascript-pdf-viewer) [Top Security Risks in JavaScript PDF Viewers (and How to Fix Them)](https://www.syncfusion.com/blogs/post/security-vulnerabilities-javascript-pdf-viewer) [How to Embed PDFs in HTML PDF Viewer: Native HTML Tags vs. Syncfusion JavaScript PDF Viewer](https://www.syncfusion.com/blogs/post/embed-pdfs-in-html-pdf-viewer)