web-annotations.md

Web SDK Examples: Annotations

These are interactive Nutrient Playground examples. Click any link to try the code in your browser.

For local runnable examples, see web/annotation/README.md.

---

Annotations

• Watermark from text annotation

  • Dynamically add watermark text annotations to PDF pages before flattening them into a document. — Video

• Flatten annotation on annotation create

• Remove inline text selection toolbar on text select

• Bulk delete all annotations

  • After the viewer loads, it gathers annotations from every page, flattens their IDs, and deletes them in a single operation. It uses totalPageCount with getAnnotations and an async IIFE to run the cleanup immediately.

• Straighten freeform highlight

  • Convert freeform ink annotations into highlight annotations. — Video

• Add ink stroke color preset to custom buttons

  • Customize the toolbar to add two custom ink annotation buttons — one for red ink and one for blue ink — alongside the default ink annotation tool. — Video

• Custom outlines for shape annotations

  • Customize shape annotations by adding an outline. — Video

• Customize annotation creators

  • Create and customize stamp annotations with multiple creators. — Video

• Prevent dragging of annotations

  • Allow special behavior for text and note annotations, while preserving default behaviors for forms and links, and restrict dragging for other annotation types.

• Restrict dragging and editing ink annotations and signatures

  • Prevent users from editing or dragging ink annotations and ink signatures, but allow them to delete them.

• Programmatically create a comment thread

  • Programmatically add a comment marker annotation and an associated comment while setting the annotation creator’s name. — Video

• Open URL from image annotation

• Display highlighted text in annotation sidebar

  • Customize the annotation sidebar to display highlighted text and allow annotation editing (except for signatures). — Video

• Log the print activity in the sidebar

• Hide link annotations tooltip

  • Hide the popover element when a link annotation is selected. — Video

• Toggle all Annotation to show/hide with a custom button in toolbar

• Use custom renderers to display annotation information on hover

  • Enhance annotations by adding hover-based tooltips while preventing edits. — Video

• Create highlight annotations programmatically from search

  • Search for specific text values in a document, create highlight annotations for the found text, and apply those annotations to the document. — Video

• Use custom actions with the embedded PDF widget button

  • Create a button form field, add an event listener to handle button clicks that trigger a file input for uploading images, and attach the selected image as an annotation in the document. — Video

• Prevent showing note annotation content on hover

  • Add an event listener to hide the note annotation popover when the mouse is over the note icon. — Video

• Link comments with annotations

  • When an annotation is selected, a tooltip appears, allowing users to create a linked comment marker annotation. — Video

• Create annotations from the clipboard

  • Enable pasting content from the clipboard onto a PDF as a text or image annotation. — Video

• Navigate annotations with a custom toolbar button

  • Get all annotation coordinates and seamlessly navigate with a custom “Next Annotation” button that highlights and jumps to each annotation. — Video

• Snip and save annotations as JPEG images

  • Snip the area covered by an annotation and save it as a JPEG image. — Video

• Add a timestamp as a subtitle to a custom stamp

  • Add a custom stamp annotation template with dynamic subtitle text (including the current date and time), and set up the UI to update the subtitle each time the stamps list is opened. — Video

• Add PDF file as custom stamp

• Add and count a checkmark annotation in the toolbar

  • Use a custom toolbar button for toggling stamp creation mode, allowing users to add "Accepted" stamp annotations on page press and track the total count of such annotations across a document. — Video

• Strike through text using a line annotation and automatically add a text annotation above

• Cut, copy, and paste an annotation between pages

• Drop stamp annotations from the toolbar

• Custom rendering of link annotations with pins

• Skip the Delete confirmation popup dialog for annotations

  • This hook listens for the annotation deletion start event and immediately deletes the targeted annotation. It then clicks the dialog’s Cancel button to suppress the confirmation UI. The result is a seamless delete action with no popup interrupting the workflow