Overview

Foxit PDF SDK for Web supports reading, creating, editing, deleting, and importing and exporting annotations on PDF pages. Common annotation types include notes, free text, text markup, highlight, underline, strikeout, stamps, ink, shapes, links, screen annotations, file attachments, and redaction marks.

With the full UI (UIExtension), common annotation tools are built into the toolbar, context menu, properties panel, and annotation list so users can create and edit annotations directly. Use PDFPage, Annot, and related APIs when you need batch annotation handling, business permissions, custom annotation UI, or custom data sync.

Related APIs include:

• PDFPage.getAnnots(), PDFPage.getAnnotCountAsync(): Read page annotations.
• PDFPage.addAnnot(): Create annotations on a page.
• PDFPage.removeAnnotById(), PDFPage.removeAnnotByObjectNumber(): Delete annotations.
• PDFPage.flatten(), PDFPage.flattenAnnot(): Flatten annotations or form widgets.
• Annot.getType(), Annot.getRect(), Annot.setRect(), Annot.getContent(), Annot.setContent(), Annot.getFlags(), Annot.setFlags(): Read or modify common annotation properties.
• PDFPage.getAnnotIdAtDevicePoint(): Hit-test annotations at device coordinates.

Annotation types

Supported annotation types follow the API Reference. Common types include:

Type	Description
note	Note annotations for comments and review.
freetext	Free text for text boxes, typewriter, and similar.
highlight, underline, strikeout, squiggly	Text markup, usually created from text selection.
ink	Ink for handwriting or free drawing.
square, circle, line, polygon, polyline	Shape annotations.
stamp	Stamp annotations.
link	Link annotations.
fileattachment	File attachment annotations.
screen	Screen and media-related annotations.
redact	Redaction marks; before apply they are annotations; after apply content under marks is permanently removed.

WATERMARK NOTE

Watermark annotations in the PDF specification are not the same as page-content watermarks. Watermarks in this documentation describe watermarks written into the PDF or shown at the Viewer render level.

Read page annotations

const page = await pdfDoc.getPageByIndex(0);
const annots = await page.getAnnots();

annots.forEach((annot) => {
    console.log(annot.getType(), annot.getRect());
});

For count only:

const count = await page.getAnnotCountAsync();

Create annotations

PDFPage.addAnnot(annotJson) creates annotations. Required properties vary by type; common fields include type, rect, contents, color, and coords.

const annots = await page.addAnnot({
    type: 'note',
    rect: {
        left: 100,
        right: 130,
        top: 700,
        bottom: 670
    },
    contents: 'Please confirm this content'
});

const note = annots[0];

Text markup usually needs coords from a text selection or search results. With the full UI, prefer built-in text selection tools.

Modify annotation properties

const annot = annots[0];

await annot.setContent('Updated comment text');
await annot.setRect({
    left: 120,
    right: 180,
    top: 720,
    bottom: 680
});

Export or save the PDF after changes to persist them.

Delete and flatten annotations

const annotId = annot.getUniqueID();
await page.removeAnnotById(annotId);

Flattening writes annotation appearance into page content; the annotation is no longer editable as an annotation object.

await page.flattenAnnot(annot);

Notes

• Annotation coordinates usually use PDF coordinates, not Viewer device pixels.
• Creating, modifying, deleting, or flattening annotations may require appropriate document permissions.
• Export or save the PDF after annotation changes to persist them.