Some test text!

Create annotations

Creating annotations in viewer

The annotation tools can be found on the UI toolbar header. You can click on a tool to switch to it or click on the downward pointing arrow to see all of the other annotation tools.

Annotation tools

Another way to switch tools is to right-click on the document which will bring up a context menu. From this menu you can select an annotation tool to switch to.

Annotation tools

Once you've switched to an annotation tool then it varies a bit depending on which tool you're using but you'll be able to click or click + drag to create the annotation.


Most of the time your users will create annotations using the built in UI tools but it's also possible to create them programmatically. You can find the properties and functions that are available on each type of annotation in the annotation API documentation.

You'll also want to make sure that you add the annotation after the document has been loaded. For example to add it immediately after the document loads use the documentLoaded event:

  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('documentLoaded', () => {
      // create annotation here


Creating rectangle annotations
To create a rectangle annotation.

Creating stamp annotations
To create a stamp annotation.

Creating free text annotations
To create a free text annotation.

Creating highlight annotations
To create a highlight annotation.

Creating file attachment annotations
To create a file attachment annotation.

Creating custom annotations
To create a customized annotation.

Update Annotation Contents Programmatically

To Programmatically change the contents of an Annotation you can use the setContents method. In the case of a Free Text annotation this will change the text being displayed on the document. Keep in mind that the updateAnnotation method will also need to be called to render the new updated text.

In the below example, we will change the text on a FreeTextAnnotation once it's selected.

.then(instance => {
  const { annotationManager } = instance.Core;

  annotationManager.addEventListener('annotationSelected', (annotations, action) => {
      if (annotations[0].Subject === 'Free Text' && action === 'selected') {
        // set the new content
        // render the new update
Set Contents Demo

Add an Annotation Reply Programmatically

Similar to how we can update the contents of an Annotation programmatically, we can also perform a similar action with Annotation replies. Annotation replies are Sticky Note Annotations (StickyAnnotation) that are children of their respective parent annotation.

Suppose we wanted to programmatically have a reply letting the user know that a comment was deleted from the parent annotation. This can be achieved by using the createAnnotationReply method along with the deleteReply listener.

Annotation Reply Demo
.then(instance => {
	const { annotationManager } = instance.Core;

  annotationManager.addEventListener('deleteReply', (annotation, root) => {
      annotationManager.createAnnotationReply(root, `Comment was Removed by ${annotationManager.getCurrentUser()}`);

Get the answers you need: Support

Upcoming Webinar: SDK Features Preview and Live Run-Through | July 14, 2022 at 11 am PT


The Platform


© 2022 PDFTron Systems Inc. All rights reserved.


Terms of Use