HelpBot Assistant

How can I help you?

Highlight Annotation (Text Markup) in React PDF Viewer

27 Feb 20267 minutes to read

This guide explains how to enable, apply, customize, and manage Highlight text markup annotations in the Syncfusion React PDF Viewer.
You can highlight text using the toolbar or context menu, programmatically invoke highlight mode, customize default settings, handle events, and export the PDF with annotations.

Enable Highlight in the Viewer

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

This minimal setup enables UI interactions like selection and highlighting.

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import {
  PdfViewerComponent,
  Inject,
  Toolbar,
  Annotation,
  TextSelection
} 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, TextSelection]} />
    </PdfViewerComponent>
  );
}

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

Add Highlight Annotation

Add Highlight Using the Toolbar

  1. Select the text you want to highlight.
  2. Click the Highlight icon in the annotation toolbar.
    • If Pan Mode is active, the viewer automatically switches to Text Selection mode.

Highlight tool

Apply highlight using Context Menu

Right-click a selected text region → select Highlight.

Highlight Context

To customize menu items, refer to Customize Context Menu documentation.

Enable Highlight Mode

Switch the viewer into highlight mode using setAnnotationMode('Highlight').

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

Exit Highlight Mode

Switch back to normal mode using:

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

Add Highlight Programmatically

Use addAnnotation() to insert highlight at a specific location.

function addHighlight() {
  const viewer = document.getElementById('container').ej2_instances[0];

  viewer.annotation.addAnnotation('Highlight', {
    bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
    pageNumber: 1
  });
}

Customize Highlight Appearance

Configure default highlight settings such as color, opacity, and author using highlightSettings.

<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"
  height="650px"
  highlightSettings={{
    author: 'Guest User',
    subject: 'Important',
    color: '#ffff00',
    opacity: 0.9
  }}
>
  <Inject services={[Toolbar, Annotation, TextSelection]} />
</PdfViewerComponent>

Manage Highlight (Edit, Delete, Comment)

Edit Highlight

Edit Highlight Appearance (UI)

Use the annotation toolbar:

  • Edit Color tool
    Edit color

  • Edit Opacity slider
    Edit opacity

Edit Highlight Programmatically

Modify an existing highlight programmatically using editAnnotation().

function editHighlightProgrammatically() {
  const viewer = document.getElementById('container').ej2_instances[0];

  for (let annot of viewer.annotationCollection) {
    if (annot.textMarkupAnnotationType === 'Highlight') {
      annot.color = '#0000ff';
      annot.opacity = 0.8;
      viewer.annotation.editAnnotation(annot);
      break;
    }
  }
}

Delete Highlight

The PDF Viewer supports deleting existing annotations through both the UI and API.
For detailed behavior, supported deletion workflows, and API reference, see Delete Annotation

Comments

Use the Comments panel to add, view, and reply to threaded discussions linked to underline annotations.
It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation‑related notes within the PDF Viewer.

Set properties while adding Individual Annotation

Set properties for individual annotation before creating the control using highlightSettings

function addMultipleHighlights() {
  const viewer = document.getElementById('container').ej2_instances[0];

  // Highlight 1
  viewer.annotation.addAnnotation('Highlight', {
    bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
    pageNumber: 1,
    author: 'User 1',
    color: '#ffff00',
    opacity: 0.9
  });

  // Highlight 2
  viewer.annotation.addAnnotation('Highlight', {
    bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
    pageNumber: 1,
    author: 'User 2',
    color: '#ff1010',
    opacity: 0.9
  });
}

Disable TextMarkup Annotation

Disable text markup annotations (including highlight) using the enableTextMarkupAnnotation property.

<PdfViewerComponent
  id="container"
  enableTextMarkupAnnotation={false}
  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, TextSelection]} />
</PdfViewerComponent>

Handle Highlight Events

The PDF viewer provides annotation life-cycle events that notify when highlight annotations are added, modified, selected, or removed.
For the full list of available events and their descriptions, see Annotation Events

Export and Import

The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer.
For full details on supported formats and steps to export or import annotations, see Export and Import Annotation

See Also