Callout Annotation in React PDF Viewer

20 Oct 20265 minutes to read

Callout annotations let users place an editable text box on a PDF page and connect it to a target point with one or more callout leader lines. They combine the inline commenting experience of a Free Text annotation with a connector that visually points to the content being annotated, making them ideal for review notes, labels, and call-outs that reference specific areas of a document without altering the original content.

Callout Annotation Overview

Enable Callout Annotation in the Viewer

To enable Callout annotations, inject the following modules into the React PDF Viewer:

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';

function App() {
  return (
    <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
      style={{ height: '650px' }}
    >
      <Inject services={[Toolbar, Annotation]} />
    </PdfViewerComponent>
  );
}

ReactDOM.createRoot(document.getElementById('sample')).render(<App />);

Add Callout Annotation

Add Callout Annotation Using the Toolbar

  1. Open the Annotation Toolbar.

  2. Select the Callout Annotation tool.

    Callout Annotation tool in the annotation toolbar

  3. Click on the PDF page to place the text box.
  4. Type the annotation text into the box.
  5. Drag or resize the text box as needed.
  6. Adjust the callout line position so the leader line points to the desired content on the page.

When Pan mode is active, choosing the Callout Annotation tool switches the viewer into the appropriate selection/edit workflow for a smoother experience.

Enable Callout Annotation Mode

Programmatically switch to Callout Annotation mode.

function enableCalloutMode() {
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.annotation.setAnnotationMode('Callout');
}

Exit Callout Annotation Mode

function exitCalloutMode() {
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.annotation.setAnnotationMode('None');
}

Add Callout Annotation Programmatically

Use the addAnnotation API to create a Callout Annotation at a specific location and connect it to a target point on the page using calloutLines.

function addCalloutProgrammatically() {
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.annotation.addAnnotation('Callout', {
    offset: { x: 200, y: 200 },
    pageNumber: 1,
    opacity: 1,
    borderColor: '#000000',
    borderWidth: 1,
    borderStyle: 'solid',
    author: 'Guest',
    calloutLines: [
      { x: 50, y: 50 },
      { x: 100, y: 100 },
      { x: 200, y: 250 }
    ],
    lineEndingStyle: 'Open'
  });
}

Key Callout Properties

  • offset: Location of the Callout Annotation text box on the page, in page coordinates.
  • pageNumber: The page on which the Callout Annotation is placed.
  • calloutLines: An ordered array of { x, y } points that define the path of the callout leader line, connecting the text box to the target area on the page. The first point starts near the text box and the last point anchors the line to the content being called out.
  • lineEndingStyle: Style applied to the end of the callout leader line (for example, Open).

Customize Callout Annotation Appearance

Customize the appearance of a Callout Annotation when adding it programmatically by passing values such as borderColor, borderWidth, borderStyle, opacity, lineEndingStyle, and calloutLines to addAnnotation. These values control the leader line and text box rendered on the page.

To edit a callout after placing it, select the annotation and use the annotation toolbar to change its text formatting and appearance.

Selected Callout Annotation with text formatting controls

Use the color controls to change the selected callout’s color.

Color control for a selected Callout Annotation

To change the leader line’s arrowhead or line style, open its line properties.

Callout line properties for arrowhead and line style

To tailor right‑click options, see Customize Context Menu.

Modify, Edit, Delete Callout Annotation

  • Move/Resize: Drag the text box or use the resize handles.
  • Edit Text: Click inside the box and type.
  • Adjust Leader Line: Drag the endpoints of the callout line to point to the desired content.
  • Delete: Use the toolbar or context menu options. For deletion workflows and API details, see Delete Annotation.

Callout annotations do not modify the original PDF text; they overlay an editable text box connected by a leader line on top of the page content.

Delete Callout Annotation

Delete Callout Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see Delete Annotation.

Callout Annotation Events

Listen to add/modify/select/remove events for Callout annotations and handle them as needed. For the full list and parameters, see Annotation Events.

Export and Import

Callout annotations can be exported or imported just like other annotations. For supported formats and steps, see Export and Import annotations.

See Also