--- title: "Add PDF comment annotations programmatically | Nutrient" canonical_url: "https://www.nutrient.io/guides/web/knowledge-base/programmatic-comment-annotations/" md_url: "https://www.nutrient.io/guides/web/knowledge-base/programmatic-comment-annotations.md" last_updated: "2026-05-18T14:28:53.388Z" description: "Programmatically add comment annotations to PDFs by creating comment marker annotations and associated comment threads using Nutrient Web SDK." --- You can programmatically add [comment annotations](https://www.nutrient.io/api/web/classes/NutrientViewer.Comment.html) to a PDF. However, it requires creating both the annotation and its associated comment thread logic to work properly. ## How to programmatically create a comment thread When adding a comment annotation programmatically, you need to: - Create the [comment marker annotation](https://www.nutrient.io/api/web/classes/NutrientViewer.Annotations.CommentMarkerAnnotation.html). - Create a comment with the annotation’s `id` as its `rootId`. - Add both to your document instance. [Playground example](https://www.nutrient.io/demo/sandbox?p=eyJ2IjoxLCJzZXR0aW5ncyI6eyJmaWxlTmFtZSI6ImJhc2ljLnBkZiJ9LCJqcyI6Ii8vc2V0IHVzZXIgbmFtZSBmcm9tIGEgbG9naW4gb3IgYXV0aGVudGljYXRpb25cbmNvbnN0IHVzZXJOYW1lID0gXCJ1c2VyIG5hbWVcIjtcblBTUERGS2l0LmxvYWQoe1xuICAuLi5iYXNlT3B0aW9ucyxcbiAgdGhlbWU6IFBTUERGS2l0LlRoZW1lLkRBUkssXG4gIHRvb2xiYXJJdGVtczogW3sgdHlwZTogXCJjb21tZW50XCIgfV0sXG59KS50aGVuKChpbnN0YW5jZSkgPT4ge1xuICBjb25zdCBhbm5vdGF0aW9uID0gbmV3IFBTUERGS2l0LkFubm90YXRpb25zLkNvbW1lbnRNYXJrZXJBbm5vdGF0aW9uKHtcbiAgICAgIGlkOiBcInRlc3RcIixcbiAgICAgIHBhZ2VJbmRleDogMCxcbiAgICAgIGJvdW5kaW5nQm94OiBuZXcgUFNQREZLaXQuR2VvbWV0cnkuUmVjdCh7XG4gICAgICAgIHRvcDogMTAwLFxuICAgICAgICBsZWZ0OiAxMDAsXG4gICAgICAgIHdpZHRoOiAxMCxcbiAgICAgICAgaGVpZ2h0OiAxMCxcbiAgICAgIH0pLFxuICAgICAgY3VzdG9tRGF0YTogeyBjaXJjbGVJZDogXCJteS1jaXJjbGVcIiB9LFxuICAgIH0pLFxuICAgIGNvbW1lbnQgPSBuZXcgUFNQREZLaXQuQ29tbWVudCh7XG4gICAgICBpZDogXCJjb21tZW50SWRcIixcbiAgICAgIHJvb3RJZDogXCJ0ZXN0XCIsXG4gICAgICBwYWdlSW5kZXg6IDAsXG4gICAgICB0ZXh0OiB7IGZvcm1hdDogXCJwbGFpblwiLCB2YWx1ZTogXCJIZWxsb1wiIH0sXG4gICAgfSk7XG4gIGluc3RhbmNlLnNldEFubm90YXRpb25DcmVhdG9yTmFtZSh1c2VyTmFtZSksXG4gICAgaW5zdGFuY2UuY3JlYXRlKFthbm5vdGF0aW9uLCBjb21tZW50XSksXG4gICAgaW5zdGFuY2UuYWRkRXZlbnRMaXN0ZW5lcihcImFubm90YXRpb25zLmNyZWF0ZVwiLCAoYW5ub3RhdGlvbnMpID0%252BIHtcbiAgICAgIGNvbnNvbGUubG9nKGFubm90YXRpb25zLmdldCgwKS50b0pTKCkpO1xuICAgIH0pO1xufSk7XG4iLCJjc3MiOiIvKiBBZGQgeW91ciBDU1MgaGVyZSAqL1xuIn0%253D) - This has been tested with Nutrient Web SDK 2024.8.0. The following steps provide a detailed walkthrough that breaks down the Playground example above. 1. Create the desired username variable: ```js const userName = "user name"; NutrientViewer.load({...baseOptions, toolbarItems: [{ type: "comment" }] }); ``` 2. Create a comment marker annotation with specific positioning: ```js const annotation = new NutrientViewer.Annotations.CommentMarkerAnnotation({ id: "test", pageIndex: 0, boundingBox: new NutrientViewer.Geometry.Rect({ top: 100, left: 100, width: 10, height: 10 }), customData: { circleId: "my-circle" } }); ``` 3. Add the comment’s content: ```js const comment = new NutrientViewer.Comment({ id: "commentId", rootId: "test", pageIndex: 0, text: { format: "plain", value: "Hello" } }); ``` 4. Apply changes by setting the creator name and creating the annotations: - [setAnnotationCreatorName](/api/web/classes/NutrientViewer.Instance.html#setannotationcreatorname) ```js instance.setAnnotationCreatorName(userName); instance.create([annotation, comment]); ``` 5. Add an event listener to track comment creation: ```js instance.addEventListener("annotations.create", (annotations) => { // Show the properties of the first annotation. console.log(annotations.first().toJS()); }); ``` ## Important notes - The `rootId` of the comment must match the annotation’s `id`. - Comment creation dates are automatically set to the browser’s local date/time. - It’s not possible to manually override the comment creation date. - Both the annotation and its comment must be created together in the same `instance.create()` call, like in the example above. ## Conclusion By properly linking a comment marker annotation with its associated comment using the `rootId`, you can programmatically add comments to your PDF documents. Remember that the comment’s creation date will always reflect the current date and time of the browser. If you need additional assistance or have questions about implementing comment annotations programmatically, don’t hesitate to reach out to our [Support team](https://support.nutrient.io/hc/en-us/requests/new). --- ## Related pages - [Add Custom Keyboard Shortcuts](/guides/web/knowledge-base/add-custom-keyboard-shortcuts.md) - [How to add a custom toolbar item to display current zoom percentage](/guides/web/knowledge-base/add-custom-zoom-perentage.md) - [Add Listener Text Note Annotation](/guides/web/knowledge-base/add-listener-text-note-annotation.md) - [Add Listener Toolbar Item](/guides/web/knowledge-base/add-listener-toolbar-item.md) - [Add Signature Initials](/guides/web/knowledge-base/add-signature-initials.md) - [Listen to an annotation’s hover event](/guides/web/knowledge-base/annotations-hover-event.md) - [Blurry Print Resolution](/guides/web/knowledge-base/blurry-print-resolution.md) - [Automatic Annotation Field Tab Ordering](/guides/web/knowledge-base/automatic-annotation-field-tab-ordering.md) - [Change Default Line Width Ink Annotations](/guides/web/knowledge-base/change-default-line-width-ink-annotations.md) - [Check Document Contains Annotations](/guides/web/knowledge-base/check-document-contains-annotations.md) - [Keep widget annotation dimensions consistent across devices](/guides/web/knowledge-base/consistent-widget-annotation-dimensions.md) - [Customize Page Indicator](/guides/web/knowledge-base/customize-page-indicator.md) - [Check Password Protected Files](/guides/web/knowledge-base/check-password-protected-files.md) - [Control Appearance Of Delete Button On Ink Annotations](/guides/web/knowledge-base/control-appearance-of-delete-button-on-ink-annotations.md) - [Create Highlight Annotations From Text Extraction Technology](/guides/web/knowledge-base/create-highlight-annotations-from-text-extraction-technology.md) - [Default To Cloudy Border](/guides/web/knowledge-base/default-to-cloudy-border.md) - [Delete All Annotations](/guides/web/knowledge-base/delete-all-annotations.md) - [Deselect Text](/guides/web/knowledge-base/deselect-text.md) - [Detect Pspdfkit Ui Loaded](/guides/web/knowledge-base/detect-pspdfkit-ui-loaded.md) - [Determine Current Layout Mode](/guides/web/knowledge-base/determine-current-layout-mode.md) - [Disable Context Menu](/guides/web/knowledge-base/disable-context-menu.md) - [How to disable text annotation movement in web apps](/guides/web/knowledge-base/disable-text-annotation-movement.md) - [Download Exported Document](/guides/web/knowledge-base/download-exported-document.md) - [Disable Resize Of Annotations](/guides/web/knowledge-base/disable-resize-of-annotations.md) - [Export Ink Annotation Image](/guides/web/knowledge-base/export-ink-annotation-image.md) - [Find Ink Annotation For Signature Form Field](/guides/web/knowledge-base/find-ink-annotation-for-signature-form-field.md) - [Focus Viewer After Loading](/guides/web/knowledge-base/focus-viewer-after-loading.md) - [Focus the delete button in a confirm dialog](/guides/web/knowledge-base/focus-delete-button-in-confirm-modal-component.md) - [Extracting text and cursor position in annotations](/guides/web/knowledge-base/extract-annotation-text-and-retrieve-cursor-position.md) - [Focus Widget Annotation](/guides/web/knowledge-base/focus-widget-annotation.md) - [Get Entered Document Password](/guides/web/knowledge-base/get-entered-document-password.md) - [Fix errors with unsupported form field actions](/guides/web/knowledge-base/handle-unsupported-form-field-actions.md) - [Get Visible Annotations](/guides/web/knowledge-base/get-visible-annotations.md) - [Handling Clicks On Custom Overlays](/guides/web/knowledge-base/handling-clicks-on-custom-overlays.md) - [Highlight required form fields](/guides/web/knowledge-base/highlight-required-fields.md) - [How Do I Limit The Number Of Annotations](/guides/web/knowledge-base/how-do-i-limit-the-number-of-annotations.md) - [How Do I Disable Scrolling On Page Edges](/guides/web/knowledge-base/how-do-i-disable-scrolling-on-page-edges.md) - [How Do I Prevent Printing Annotations](/guides/web/knowledge-base/how-do-i-prevent-printing-annotations.md) - [Resize multiline text fields to avoid overflow](/guides/web/knowledge-base/how-do-i-resize-form-fields.md) - [How Do I Toggle The Theme](/guides/web/knowledge-base/how-do-i-toggle-the-theme.md) - [How Do I Rotate A Page](/guides/web/knowledge-base/how-do-i-rotate-a-page.md) - [How Do I Zoom To A Specific Value](/guides/web/knowledge-base/how-do-i-zoom-to-a-specific-value.md) - [How To Create Bookmarks From Outline Elements](/guides/web/knowledge-base/how-to-create-bookmarks-from-outline-elements.md) - [Image Attachments Lost Stamp Annotation Templates](/guides/web/knowledge-base/image-attachments-lost-stamp-annotation-templates.md) - [License Registered Different Bundle Id](/guides/web/knowledge-base/license-registered-different-bundle-id.md) - [Iterate over form fields and widgets](/guides/web/knowledge-base/iterate-over-form-fields.md) - [Load Pdf As Arraybuffer](/guides/web/knowledge-base/load-pdf-as-arraybuffer.md) - [Link Text](/guides/web/knowledge-base/link-text.md) - [Load Pdf From Stream](/guides/web/knowledge-base/load-pdf-from-stream.md) - [Loading Multiple Files](/guides/web/knowledge-base/loading-multiple-files.md) - [Nutrient Size Optimization](/guides/web/knowledge-base/nutrient-size-optimization.md) - [Load Pdf Stub From String](/guides/web/knowledge-base/load-pdf-stub-from-string.md) - [Disabling automatic synchronization in Nutrient Web SDK](/guides/web/knowledge-base/manual-instant-sync.md) - [Observe Document Editor Visibility](/guides/web/knowledge-base/observe-document-editor-visibility.md) - [Override Ink Signature Dialog](/guides/web/knowledge-base/override-ink-signature-dialog.md) - [Override User Agent](/guides/web/knowledge-base/override-user-agent.md) - [Persist Currently Edited Note Test](/guides/web/knowledge-base/persist-currently-edited-note-test.md) - [Overview](/guides/web/knowledge-base/overview.md) - [Prevent Shortcut Printing](/guides/web/knowledge-base/prevent-shortcut-printing.md) - [Persist Ink Signatures Across Instances](/guides/web/knowledge-base/persist-ink-signatures-across-instances.md) - [Place Annotation At Visible Center](/guides/web/knowledge-base/place-annotation-at-visible-center.md) - [Prevent Editing Content Text Annotation](/guides/web/knowledge-base/prevent-editing-content-text-annotation.md) - [Process Currently Rendered Pages](/guides/web/knowledge-base/process-currently-rendered-pages.md) - [Programmatically Navigate To Page](/guides/web/knowledge-base/programmatically-navigate-to-page.md) - [Render Document Full Height](/guides/web/knowledge-base/render-document-full-height.md) - [Read-only forms](/guides/web/knowledge-base/read-only-forms.md) - [Render Night Mode](/guides/web/knowledge-base/render-night-mode.md) - [Render Page Black White](/guides/web/knowledge-base/render-page-black-white.md) - [Render Visible Area In Current Page](/guides/web/knowledge-base/render-visible-area-in-current-page.md) - [Render Page Without Annotations](/guides/web/knowledge-base/render-page-without-annotations.md) - [Render Watermark When Printing](/guides/web/knowledge-base/render-watermark-when-printing.md) - [Restore Last Seen Page](/guides/web/knowledge-base/restore-last-seen-page.md) - [Save Modified Pdf To Document Engine](/guides/web/knowledge-base/save-modified-pdf-to-document-engine.md) - [Show Annotations Properties As Tooltip](/guides/web/knowledge-base/show-annotations-properties-as-tooltip.md) - [Rotate Ink Annotation](/guides/web/knowledge-base/rotate-ink-annotation.md) - [Show Focus Ring Read Only](/guides/web/knowledge-base/show-focus-ring-read-only.md) - [Submit Ink Signatures With Form](/guides/web/knowledge-base/submit-ink-signatures-with-form.md) - [Wait For Element Appear](/guides/web/knowledge-base/wait-for-element-appear.md) - [Web Sdk Vs Dws Viewer](/guides/web/knowledge-base/web-sdk-vs-dws-viewer.md) - [Easily zoom to specific annotations in PDF](/guides/web/knowledge-base/zoom-to-specific-annotation.md)