# Annotations ## Content Annotations allow you to add notes or mark content on a PDF page. They can be used to highlight or associate information with text, images, or other visual elements. Annotations may contain text, shapes, sounds, file attachments, and other interactive elements. Annotations can appear in either a closed or open state. In the closed state, they appear as a note, icon, or visual marker on the page, depending on the annotation type. In the open state, they display their associated content, such as a pop-up window with text. DsPdfJS supports a variety of standard PDF annotation types, as listed below: * [Text Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/text-annotation) * [Free Text Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/free-text-annotation) * [Line Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/line-annotation) * [Polyline Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/polyline-annotation) * [Square Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/square-annotation) * [Circle Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/circle-annotation) * [Polygon Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/polygon-annotation) * [Stamp Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/stamp-annotation) * [Ink Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/ink-annotation) * [File Attachment Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/file-attachment-annotation) * [Link Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/link-annotation) * [RichMedia Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/richmedia-annotation) * [Sound Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/sound-annotation) * [Widget Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/widget-annotation) * [Watermark Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/watermark-annotation) * [Redact Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/redact-annotation) * [Text Markup Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/text-markup-annotation) * [Caret Annotation](/document-solutions/javascript-pdf-api/docs/features/annotations/caret-annotation) Each annotation type is represented by a dedicated class with properties that allow you to configure its appearance and behavior. You can also control annotation characteristics such as visibility and printing behavior by setting the[ flags](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/AnnotationBase#flags) property using values from the [AnnotationFlags ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/enumerations/AnnotationFlags)enum. For more information about annotations and their behavior, see PDF Specification 2.0, Section 12.5. ![AnnotationsSample.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/AnnotationsSample-20260423.63aa5b.png?width=720) ### Add Annotations DsPdfJS allows you to add annotations to a page in a PDF document. Annotations are stored in the annotations collection of the page on which they are placed. To add an annotation to a page: 1. Create an instance of the class corresponding to the annotation type you want to add, for example [TextAnnotation](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/AnnotationBase). 2. Call the[ add ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/AnnotationCollection#add)method on the page’s annotations collection ([AnnotationCollection](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/AnnotationCollection) class) to add the annotation to the page. >type=note > **Note:** The examples on this page use helper functions from the [Snippet Helpers](https://developer.mescius.com/document-solutions/javascript-pdf-api/docs/snippet-helpers) module. These utilities are provided only to simplify the examples and are not part of the DsPdfJS API. ```javascript const doc = new PdfDocument(); const page = doc.newPage(); // --------------- // Add Annotations // --------------- const textAnnot = new TextAnnotation(); textAnnot.contents = "This is an annotation in red color."; textAnnot.color = "Red"; textAnnot.Name = "Text Annotation"; textAnnot.rect = { x: 72, y: 72, width: 0, height: 0 }; //Add the text annotation page.annotations.add(textAnnot); const docData = doc.savePdf(); Util.saveFile("annotations_add_text_annotation.pdf", docData); ``` ### Get Annotations You can access annotations from the annotations collection of a page. To get annotations from a page: 1. Access the page from the document using the pages collection. 2. Access the page’s [annotations](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfPage#annotations) collection. 3. Retrieve an annotation from the collection by specifying its index using the [getAt](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/AnnotationCollection#getat) method. ```auto //Get Annotation const acol = doc.pages.getAt(0).annotations; // Display the property values console.log(`Annotation Type: ${acol.getAt(0).name}`); ``` ### Modify Annotations You can modify an annotation by setting the properties of the annotation instance added to the page. For example, you can update the [contents](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/TextAnnotation#contents) and [color ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/TextAnnotation#color)properties of a TextAnnotation to change the text and appearance of the annotation. ```auto // Modify annotation textAnnot.color = "BlueViolet"; textAnnot.contents = "This is a Text annotation."; const docData2 = doc.savePdf(); Util.saveFile("annotations_modify_annotation.pdf", docData2); ``` ### Delete Annotations You can delete a specific annotation or remove all annotations from a page using the page’s annotations collection. To delete annotations from a page: * Call the [removeAt ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/AnnotationCollection#removeat)method on the annotations collection and specify the index of the annotation to delete. * Call the [clear ](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/AnnotationCollection#clear)method on the annotations collection to remove all annotations from the page. ```auto // Delete a particular annotation page.annotations.removeAt(0); // Delete all annotations page.annotations.clear(); ```