HelpBot Assistant

How can I help you?

Rectangle Annotation (Shape) in React PDF Viewer

27 Feb 20267 minutes to read

Rectangle annotations let users highlight regions, group content, or draw callout boxes on PDFs for reviews and markups. You can add rectangles from the toolbar, switch to rectangle mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.

Rectangle overview

Enable Rectangle Annotation in the Viewer

To enable Line 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 Rectangle Annotation

Add Rectangle Annotation Using the Toolbar

  1. Open the Annotation Toolbar.
  2. Select Shapes → Rectangle.
  3. Click and drag on the PDF page to draw the rectangle.

Shape toolbar

NOTE

When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.

Enable Rectangle Mode

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

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

Exit Rectangle Mode

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

Add Rectangle Programmatically

Use the addAnnotation API to draw a rectangle at a specific location.

function addRectangle() {
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.annotation.addAnnotation('Rectangle', {
    offset: { x: 200, y: 480 },
    pageNumber: 1,
    width: 150,
    height: 75
  });
}

Customize Rectangle Appearance

Configure default rectangle appearance (fill color, stroke color, thickness, opacity) using the rectangleSettings property.

<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"
  rectangleSettings={{ fillColor: '#ffff00', strokeColor: '#ff6a00', thickness: 2, opacity: 0.9 }}
  style={{ height: '650px' }}
>
  <Inject services={[Toolbar, Annotation]} />
</PdfViewerComponent>

Manage Rectangle (Edit, Move, Resize, Delete)

Edit Rectangle

Edit Rectangle (UI)

  • Select a rectangle to view resize handles.
  • Drag any side/corner to resize; drag inside the shape to move it.
  • Edit fill, stroke, thickness, and opacity using the annotation toolbar.

Shape tools

Use the annotation toolbar:

  • Edit fill Color tool
    Edit fill color

  • Edit stroke Color tool
    Edit stroke color

  • Edit Opacity slider
    Edit opacity

  • Edit Thickness slider
    Edit thickness

Edit Rectangle Programmatically

Modify an existing Rectangle programmatically using editAnnotation().

function editRectangleProgrammatically() {
  const viewer = document.getElementById('container').ej2_instances[0];
  for (const annot of viewer.annotationCollection) {
    if (annot.subject === 'Rectangle') {
      annot.strokeColor = '#0000ff';
      annot.thickness = 2;
      annot.fillColor = '#ffff00';
      viewer.annotation.editAnnotation(annot);
      break;
    }
  }
}

Delete Rectangle

The PDF Viewer supports deleting existing annotations through the UI and API.
See Delete Annotation for full behavior and workflows.

Comments

Use the Comments panel to add, view, and reply to threaded discussions linked to rectangle annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.

Set properties while adding Individual Annotation

Set properties for individual rectangle annotations by passing values directly during addAnnotation.

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

  // Rectangle 1
  viewer.annotation.addAnnotation('Rectangle', {
    offset: { x: 200, y: 480 },
    pageNumber: 1,
    width: 150,
    height: 75,
    opacity: 0.9,
    strokeColor: '#ff6a00',
    fillColor: '#ffff00',
    author: 'User 1'
  });

  // Rectangle 2
  viewer.annotation.addAnnotation('Rectangle', {
    offset: { x: 380, y: 480 },
    pageNumber: 1,
    width: 120,
    height: 60,
    opacity: 0.85,
    strokeColor: '#ff1010',
    fillColor: '#ffe600',
    author: 'User 2'
  });
}

Disable Rectangle Annotation

Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the enableShapeAnnotation property.

<PdfViewerComponent
  id="container"
  enableShapeAnnotation={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]} />
</PdfViewerComponent>

Handle Rectangle Events

The PDF viewer provides annotation life-cycle events that notify when Rectangle 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. For details on supported formats and workflows, see Export and Import annotations.

See Also