# PDF annotation in JavaScript Programmatically create multiple annotation types in your PDF document. Examples of programmatic annotations include links, highlights, free text, ink, or notes on your PDFs. Get additional resources by visiting our [JavaScript PDF annotation library](/guides/web/annotations.md). [Get Started](https://www.nutrient.io/sdk/web/getting-started.md) [All Samples](https://www.nutrient.io/guides/web/samples.md) [Download](https://www.nutrient.io/guides/web/downloads.md) [Launch Demo](https://www.nutrient.io/demo/) --- ```js import PSPDFKit from "@nutrient-sdk/viewer"; import { toolbarCustomBreakpoint } from "../../_server/components/example/utils"; export function load(defaultConfiguration) { // Nutrient Web SDK freezes the Options object to prevent changes after the first load if (!Object.isFrozen(PSPDFKit.Options)) { PSPDFKit.Options.BREAKPOINT_MD_TOOLBAR = toolbarCustomBreakpoint; } // You can find an introductions to annotations in our guides: // https://www.nutrient.io/guides/web/annotations/introduction-to-annotations/ return PSPDFKit.load({...defaultConfiguration, enableHistory: true, enableRichText: () => true, toolbarItems: defaultConfiguration.toolbarItems.reduce((acc, item) => { if (item.type === "polyline") { return acc.concat([item, { type: "undo" }, { type: "redo" }]); } return acc.concat([item]); }, []), }).then(async (instance) => { // Add event listeners for annotion changes instance.addEventListener("annotations.load", (loadedAnnotations) => { console.log("Annotations were loaded", loadedAnnotations.toJS()); }); instance.addEventListener("annotations.change", function () { console.log("Something in the annotations has changed."); }); instance.addEventListener( "annotations.create", function (createdAnnotations) { console.log("New annotations got created", createdAnnotations.toJS()); }, ); instance.addEventListener( "annotations.update", function (updatedAnnotations) { console.log("Annotations got updated", updatedAnnotations.toJS()); }, ); instance.addEventListener( "annotations.delete", function (deletedAnnotations) { console.log("Annotations got deleted", deletedAnnotations.toJS()); }, ); const annotationsOnFirstPage = await instance.getAnnotations(0); // For this example we only want to generate the annotations once. Therefore // we check if we already have annotations on our Page and if it's the case, // don't create them again. Since there is already one annotation within the // PDF on the first page, we check if there is less than once annotation. if (annotationsOnFirstPage.size <= 1) { // Creating a few annotations const changes = await instance.create([ newInkAnnotation(), newTextAnnotation(), newEllipseAnnotationAnnotation(), newHighlightAnnotation(), newNoteAnnotation(), ]); const savedAnnotations = await instance.ensureChangesSaved(changes); console.log( "Saved annotations with IDs", savedAnnotations.map((it) => it.id).join(", "), ); } return instance; }); } // Ink annotation with three lines on the second page function newInkAnnotation() { return new PSPDFKit.Annotations.InkAnnotation({ pageIndex: 1, boundingBox: new PSPDFKit.Geometry.Rect({ width: 150, height: 50, top: 50, left: 50, }), strokeColor: PSPDFKit.Color.WHITE, lines: PSPDFKit.Immutable.List([ PSPDFKit.Immutable.List([ new PSPDFKit.Geometry.DrawingPoint({ x: 50, y: 50 }), new PSPDFKit.Geometry.DrawingPoint({ x: 200, y: 50 }), ]), PSPDFKit.Immutable.List([ new PSPDFKit.Geometry.DrawingPoint({ x: 50, y: 75 }), new PSPDFKit.Geometry.DrawingPoint({ x: 200, y: 75 }), ]), PSPDFKit.Immutable.List([ new PSPDFKit.Geometry.DrawingPoint({ x: 50, y: 100 }), new PSPDFKit.Geometry.DrawingPoint({ x: 200, y: 100 }), ]), ]), }); } // Creates a text annotation on the first page that says "Welcome to Nutrient" function newTextAnnotation() { return new PSPDFKit.Annotations.TextAnnotation({ pageIndex: 0, boundingBox: new PSPDFKit.Geometry.Rect({ width: 150, height: 150, top: 50, left: 50, }), text: { format: "plain", value: "Welcome to\nNutrient" }, font: "Helvetica", isBold: true, horizontalAlign: "center", verticalAlign: "center", backgroundColor: PSPDFKit.Color.BLUE, fontColor: PSPDFKit.Color.WHITE, }); } // Creates an ellipse annotation on the first page function newEllipseAnnotationAnnotation() { return new PSPDFKit.Annotations.EllipseAnnotation({ pageIndex: 0, boundingBox: new PSPDFKit.Geometry.Rect({ left: 390, top: 380, width: 120, height: 120, }), }); } // Highlights the "Set of Kitchen Utensils" on the first page function newHighlightAnnotation() { return new PSPDFKit.Annotations.HighlightAnnotation({ pageIndex: 0, boundingBox: new PSPDFKit.Geometry.Rect({ left: 30, top: 424, width: 223, height: 83, }), rects: PSPDFKit.Immutable.List([ new PSPDFKit.Geometry.Rect({ left: 30, top: 424, width: 223, height: 42, }), new PSPDFKit.Geometry.Rect({ left: 30, top: 465, width: 122, height: 42, }), ]), }); } // Creates a Note annotation on the first page function newNoteAnnotation() { return new PSPDFKit.Annotations.NoteAnnotation({ pageIndex: 0, text: { format: "plain", value: "An example for a Note Annotation", }, boundingBox: new PSPDFKit.Geometry.Rect({ left: 500, top: 20, width: 30, height: 30, }), }); } ``` This code sample is an example that illustrates how to use our SDK. Please adapt it to your specific use case. --- ## Related pages - [Handling password-protected PDFs in our JavaScript viewer](/guides/web/samples/password-protected-pdf.md) - [Storing electronic signatures in the browser using JavaScript](/guides/web/samples/stored-electronic-signatures.md) - [PDF text selection using JavaScript](/guides/web/samples/pdf-text-selection-javascript.md) - [PDF presentation mode using JavaScript](/guides/web/samples/presentation-mode.md) - [Open, view, and annotate on images using JavaScript](/guides/web/samples/annotating-images.md) - [Add electronic signature images to PDFs using JavaScript](/guides/web/samples/adding-image-electronic-signatures.md) - [Add watermarks to PDFs using JavaScript example](/guides/web/samples/add-watermarks-to-pdf-javascript.md) - [Custom HTML PDF annotations using JavaScript](/guides/web/samples/custom-annotations.md) - [Customizing PDF text search using JavaScript](/guides/web/samples/customized-pdf-search.md) - [Customized Document Editor Toolbar](/guides/web/samples/customized-document-editor-toolbar.md) - [Collaborate on PDFs using JavaScript](/guides/web/samples/instant-pdf-collaboration.md) - [PDF Collaboration permissions using JavaScript](/guides/web/samples/collaboration-permissions.md) - [Open PDFs using JavaScript](/guides/web/samples/open-pdf-using-javascript.md) - [Zoom example for our JavaScript PDF viewer](/guides/web/samples/zooming.md) - [Create custom overlays on PDFs using JavaScript](/guides/web/samples/custom-overlay-items.md) - [Edit PDFs using JavaScript](/guides/web/samples/edit-pdf-javascript.md) - [Disable PDF editing and annotations](/guides/web/samples/open-read-only-pdf.md) - [Customize the PDF toolbar using JavaScript](/guides/web/samples/customized-pdf-toolbar.md) - [Add electronic signatures to PDFs using JavaScript](/guides/web/samples/electronic-signatures-in-pdf.md) - [Customize PDF annotation tooltips using JavaScript](/guides/web/samples/custom-annotation-tooltip.md) - [Customizing JavaScript PDF printing modes](/guides/web/samples/pdf-printing-modes.md) - [Customize PDF annotation permissions using JavaScript](/guides/web/samples/custom-annotation-permissions.md) - [View PDFs in dark mode using JavaScript](/guides/web/samples/dark-mode-pdf-viewer.md) - [PDF form support using JavaScript](/guides/web/samples/javascript-pdf-form.md) - [JavaScript PDF magazine viewer](/guides/web/samples/javascript-magazine-viewer.md) - [Flipbook PDF viewer using JavaScript](/guides/web/samples/flipbook.md) - [Hide or reveal area on PDFs using JavaScript](/guides/web/samples/hide-reveal-area-in-pdf.md) - [Digitally sign a PDF using JavaScript](/guides/web/samples/javascript-digital-signatures.md) - [Redact PDFs using JavaScript](/guides/web/samples/javascript-pdf-redaction.md) - [Drag-and-drop UI in our JavaScript PDF viewer](/guides/web/samples/drag-and-drop.md) - [Customize the UI for PDF annotations using JavaScript](/guides/web/samples/annotations-inspector.md)