> ## Documentation Index
> Fetch the complete documentation index at: https://webviewer-docs.mupdf.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Annotation API

The [`annotation`](#annotation) object is an instance accessible from the main [MuPDFWebViewer](/api-reference/introduction#initmupdfwebviewer) instance as follows:

```javascript theme={null}
const annotation = webViewer.annotation;
```

<Note>
  This assumes you have returned your instance name as `webViewer` from the [initMuPDFWebViewer()](/api-reference/introduction#initmupdfwebviewer) promise!
</Note>

## annotation

The `annotation` object has the following methods:

### remove

```typescript theme={null}
remove(config: {
  annotations: ({ name: string; pageIndex: number } | { oid: number; pageIndex: number })[];
  emitEvent?: boolean;
}): Promise<undefined>;
```

Removes annotations.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.annotations" type="object[]" required>
    Array of annotation identifiers to remove (by `{ name, pageIndex }` or `{ oid, pageIndex }`).
  </ParamField>

  <ParamField body="config.emitEvent" type="boolean">
    Whether to emit events.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise" required>
  A Promise.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.annotation.remove({annotations:[
                                      {name:"squiggle_1", pageIndex:0},
                                      {name:"rectangle_10", pageIndex:3},
                                      {oid:36245, pageIndex:1}
                                      ]
                        });
```

### get

```typescript theme={null}
get(config?: { pageIndex: number }): Promise<{ annotations: Annotation[] }>;
```

Gets annotations. Returns array of annotations.

#### Parameters

<ParamField body="config" type="object">
  Optional configuration. If omitted, returns all annotations for all pages.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.pageIndex" type="number" required>
    Page index.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise<{ annotations: Annotation[] }>" required>
  A Promise that resolves to an object containing an `Annotation[]` array.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.annotation.get({pageIndex:0});
```

<Note>
  The `Annotation[]` array contains [annotation objects](#annotation-object), also see the [Working with Annotations guide](/annotations).
</Note>

### add

```typescript theme={null}
add(config: { annotations: Annotation[]; emitEvent?: boolean }): Promise<{ annotations: Annotation[] }>;
```

Adds annotations. Returns array of added annotations.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.annotations" type="Annotation[]" required>
    An array of [annotation objects](#annotation-object).
  </ParamField>

  <ParamField body="config.emitEvent" type="boolean">
    Whether to emit events.
  </ParamField>
</Expandable>

#### Returns

<ResponseField name="result" type="Promise<{ annotations: Annotation[] }>" required>
  A Promise that resolves to an object containing an `Annotation[]` array.
</ResponseField>

<Note>
  The `Annotation[]` array contains [annotation objects](#annotation-object), also see the [Working with Annotations guide](/annotations).
</Note>

### set

```typescript theme={null}
set(config: { annotations: Annotation[]; emitEvent?: boolean }): Promise<undefined>;
```

Updates annotations.

#### Parameters

<ParamField body="config" type="object" required>
  The configuration object.
</ParamField>

<Expandable title="config properties">
  <ParamField body="config.annotations" type="Annotation[]" required>
    An array of [annotation objects](#annotation-object).
  </ParamField>

  <ParamField body="config.emitEvent" type="boolean">
    Whether to emit events.
  </ParamField>
</Expandable>

<Note>
  The `Annotation[]` array contains [annotation objects](#annotation-object), also see the [Working with Annotations guide](/annotations).
</Note>

### undo

```typescript theme={null}
undo(): Promise<{ success: boolean }>;
```

Undoes annotation operations and returns success status.

#### Returns

<ResponseField name="result" type="Promise<{ success: boolean; }>" required>
  A Promise that resolves to a success status.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.annotation.undo();
```

### redo

```typescript theme={null}
redo(): Promise<{ success: boolean }>;
```

Redoes undone annotation operations and returns success status.

#### Returns

<ResponseField name="result" type="Promise<{ success: boolean; }>" required>
  A Promise that resolves to a success status.
</ResponseField>

**Example**

```javascript theme={null}
webViewer.annotation.redo();
```

### Annotation Object

The `Annotation` object type:

```typescript theme={null}
export interface Annotation {
  oid: number;
  type: AnnotType;
  pageIndex: number;
  name: string;
  rect: TRect;
  rects?: TRect[];
  opacity?: number;
  rotation?: number;
  createdAt?: string | null;
  modifiedAt?: string | null;
  author?: string;
  canBePrinted?: boolean;
  locked?: boolean;
  strokeColor?: string;
  strokeWidth?: number;
  imageData?: string;
  position?: TPoint;
  inkList?: TPoint[][];
  fillColor?: string;
  strokeCloudRadius?: number;
  strokeDashPattern?: number[];
  startPoint?: TPoint;
  endPoint?: TPoint;
  startPointStyle?: LineEnd;
  endPointStyle?: LineEnd;
  popupNote?: {
    oid?: number;
    rect: TRect;
    createdAt?: string | null;
    modifiedAt?: string | null;
    author?: string;
  };
  contents?: string;
  vertices?: TPoint[];
  fontColor?: string;
  textAlign?: TextAlign;
  fontFamily?: string;
  fontSize?: number;
  link?: {
    type: string;
    value: string | number;
  };
}
```

### Supporting Types

```typescript theme={null}
export interface TPoint {
  x: number;
  y: number;
}

export interface TRect {
  top: number;
  left: number;
  right: number;
  bottom: number;
}
```