> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/annotation/create-annotations.md).

# Create Annotations in WebViewer JavaScript PDF Viewer

Learn how to create annotations in WebViewer effortlessly. Discover where to find annotation tools, switch between them, and create annotations programmatically. Master the art of updating and cloning

The annotation tools can be found on the UI toolbar header. You can click on a tool to switch to it. The tool buttons container on the right will give you tools you can use interchangeably. Clicking the down arrow beside the tool will show the options for that tool.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-d338913ed06889d2d8dccdd7e4e34dac3093e8da%2Ff5820b4579740d9c0fb4104a8d11b4a139da748d-775x79.png?alt=media)

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.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-9e73f7be429140bfeb5620ed7cf292a6fc5a7903%2F8ca5fabff478f838b437f0219c628ae2e9c85907-254x56.png?alt=media)

Once you have switched to an annotation tool, then you'll be able to click or click + drag (depending on the annotation type) to create the annotation.

## Creating annotations programmatically

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](https://sdk.apryse.com/api/web/Core.Annotations.Annotation.html).

You will 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](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded__anchor) event:

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('documentLoaded', () => {
      // Use object initializer to initialize annotation properties
      const annot = new Annotations.RectangleAnnotation({
        PageNumber: 1,
        X: 50,
        Y: 100,
        Width: 150,
        Height: 100,
      });
      
      annotationManager.addAnnotation(annot);
      // Always redraw annotation
      annotationManager.redrawAnnotation(annot);
    });
  });
```

{% endcode %}

[DocumentViewer#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded) [RectangleAnnotation](https://sdk.apryse.com/api/web/Core.Annotations.RectangleAnnotation.html#main) [AnnotationManager.addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) [AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

    docViewer.on('documentLoaded', () => {
      const annot = new Annotations.RectangleAnnotation();
      annot.PageNumber = 1;
      annot.X = 50;
      annot.Y = 100;
      annot.Width = 150;
      annot.Height = 100;
      
      annotManager.addAnnotation(annot);
      // Always redraw annotation
      annotManager.redrawAnnotation(annot);
    });
  });
```

{% endcode %}

[DocumentViewer#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded) [RectangleAnnotation](https://sdk.apryse.com/api/web/Core.Annotations.RectangleAnnotation.html#main) [AnnotationManager.addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) [AnnotationManager.redrawAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation)
{% endtab %}
{% endtabs %}

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-e6b86b8d9487798c74d9b2e64778bf455618d2a7%2Fc7ce78ac55aee9239f23081e1af7721b46b44820-396x350.png?alt=media)

{% hint style="info" %}
Annotations can be initialized with an object initializer which is a key-value object that initializes properties on the annotation on construction. The initializer can **only** initialize public properties on the annotations listed in our [documentation](https://sdk.apryse.com/api/web/Core.Annotations.Annotation.html). This is only available in WebViewer 8+ but setting the properties individually is also available.
{% endhint %}

## Updating annotation contents

To programmatically change the contents of an Annotation, you can use the [`setContents`](https://sdk.apryse.com/api/web/Core.Annotations.Annotation.html#setContents) method. In the case of a FreeText annotation this will change the text being displayed on the document. Keep in mind that the [`updateAnnotation`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#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`](https://sdk.apryse.com/api/web/Core.Annotations.FreeTextAnnotation.html#main) once it's selected.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer(…)
  .then(instance => {
    const { annotationManager, Annotations } = instance.Core;

    annotationManager.addEventListener('annotationSelected', (annotations, action) => {
        const annotation = annotations[0];
        if (annotation instanceof Annotations.FreeTextAnnotation && action === 'selected') {
          // set the new content
          annotation.setContents('Redacted');
          // render the new update
          annotationManager.updateAnnotation(annotation);
        }
    });
  });
```

{% endcode %}

[Annotation.setContents](https://sdk.apryse.com/api/web/Core.Annotations.Annotation.html#setContents) [AnnotationManager.updateAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#updateAnnotation)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer(…)
  .then(instance => {
    const { annotManager, Annotations } = instance;

    annotManager.on('annotationSelected', (annotations, action) => {
        const annotation = annotations[0];
        if (annotation instanceof Annotations.FreeTextAnnotation && action === 'selected') {
          // set the new content
          annotation.setContents('Redacted');
          // render the new update
          annotManager.updateAnnotation(annotation);
        }
    });
  });
```

{% endcode %}

[Annotation.setContents](https://sdk.apryse.com/api/web/Core.Annotations.Annotation.html#setContents) [AnnotationManager.updateAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#updateAnnotation)
{% endtab %}
{% endtabs %}

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-2b99c87bc747d21cd1e6a3672d56d36749ede03e%2F05dcdc7c0e704393305abba66eb953d39c7970bf-250x135.gif?alt=media)

## Cloning an annotation

Cloning an annotation is made possible with the [`getAnnotationCopy`](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationCopy) API on the AnnotationManager. You can use this API to deep clone an annotation regardless of whether it has been added to the document.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer(…)
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('documentLoaded', () => {
      const annots = annotationManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
      // Clone a certain annotation on to another page
      const clone = annotationManager.getAnnotationCopy(annots[0]);
      clone.PageNumber = 2;

      annotationManager.addAnnotation(clone);
      annotationManager.redrawAnnotation(clone);
    });
  });
```

{% endcode %}

[AnnotationManager.getAnnotationsList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationsList) [AnnotationManager.getAnnotationCopy](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationCopy)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer(…)
  .then(instance => {
    const { docViewer, annotManager } = instance;

    docViewer.on('documentLoaded', () => {
      const annots = annotManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
      // Clone a certain annotation on to another page
      const clone = annotManager.getAnnotationCopy(annots[0]);
      clone.PageNumber = 2;

      annotManager.addAnnotation(clone);
      annotManager.redrawAnnotation(clone);
    });
  });
```

{% endcode %}

[AnnotationManager.getAnnotationsList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationsList) [AnnotationManager.getAnnotationCopy](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationCopy)
{% endtab %}
{% endtabs %}

## Examples

[Creating rectangle annotations](/web/get-started/guides/create-annotation-rectangle.md) To create a rectangle annotation.

[Creating stamp annotations](/web/get-started/guides/create-annotation-stamp.md) To create a stamp annotation.

[Creating free text annotations](/web/get-started/guides/create-annotation-free-text.md) To create a free text annotation.

[Creating highlight annotations](/web/get-started/guides/create-annotation-highlight.md) To create a highlight annotation.

[Creating file attachment annotations](/web/get-started/guides/create-annotation-file-attachment.md) To create a file attachment annotation.

[Creating custom annotations](/web/annotation/customize/custom-annotations.md) To create a customized annotation.

## Next steps

Check out our custom annotation [guide](/web/annotation/customize/custom-annotations.md) or learn how to programmatically create annotation [replies](/web/annotation/annotationmanager/replies.md)!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/annotation/create-annotations.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.