Render PDF annotations and forms with PDF.js AnnotationLayer

import { AnnotationLayer } from "pdfjs-dist";

async function renderAnnotationLayer(page, viewport, container) {
  const annotations = await page.getAnnotations();

  const annotationLayerDiv = document.createElement("div");
  annotationLayerDiv.className = "annotationLayer";
  container.appendChild(annotationLayerDiv);

  const annotationLayer = new AnnotationLayer({
    div: annotationLayerDiv,
    accessibilityManager: null,
    annotationCanvasMap: null,
    page,
    viewport: viewport.clone({ dontFlip: true }),
  });

  await annotationLayer.render({
    annotations,
    div: annotationLayerDiv,
    page,
    viewport: viewport.clone({ dontFlip: true }),
    linkService,
  });
}

const viewer = new pdfjs.PDFViewer({
  container,
  eventBus,
  linkService,
  findController,
  // Enable interactive form rendering
  annotationMode: pdfjs.AnnotationMode.ENABLE_FORMS,
});

const AnnotationMode = {
  DISABLE: 0,        // Don't render annotations at all.
  ENABLE: 1,         // Render annotations (read-only).
  ENABLE_FORMS: 2,   // Render annotations with interactive forms.
  ENABLE_STORAGE: 3, // Interactive forms with local storage persistence.
};

async function getFormData(pdfDocument) {
  const formData = {};

  for (let i = 1; i <= pdfDocument.numPages; i++) {
    const page = await pdfDocument.getPage(i);
    const annotations = await page.getAnnotations();

    for (const annot of annotations) {
      if (annot.subtype === "Widget") {
        formData[annot.fieldName] = {
          type: annot.fieldType, // "Tx" (text), "Btn" (button), "Ch" (choice).
          value: annot.fieldValue,
          options: annot.options, // For dropdowns/listboxes.
        };
      }
    }
  }

  return formData;
}

const viewer = new pdfjs.PDFViewer({
  container,
  eventBus,
  linkService,
  enableXfa: true, // Enable XFA form rendering.
});

async function listAnnotations(pdfDocument) {
  for (let i = 1; i <= pdfDocument.numPages; i++) {
    const page = await pdfDocument.getPage(i);
    const annotations = await page.getAnnotations();

    for (const annot of annotations) {
      console.log({
        type: annot.subtype,        // "Link", "Text", "Highlight", "Widget", etc.
        rect: annot.rect,           // [x1, y1, x2, y2] in PDF coordinates.
        contents: annot.contents,   // Popup text content.
        color: annot.color,         // `Uint8ClampedArray` of [r, g, b] (0–255).
        url: annot.url,             // For link annotations.
        fieldName: annot.fieldName, // For form widgets.
        fieldValue: annot.fieldValue,
      });
    }
  }
}

/* Style popup annotations */
.annotationLayer .popup {
  background-color: #FFFFCC;
  border: 1px solid #999;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  max-width: 300px;
}

/* Style form fields */
.annotationLayer .textWidgetAnnotation input {
  border: 1px solid #4A90D9;
  border-radius: 2px;
  padding: 2px 4px;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input {
  accent-color: #4A90D9;
}

const formFields = await instance.getFormFields();

await instance.setFormFieldValues({
  "First Name": "Jane",
  "Last Name": "Doe",
  "Email": "jane@example.com",
});