# pdf-viewer-annotations

> PDF viewer pre-populated with highlight and underline annotations on page one.

**Framework:** react  **Component:** PdfViewer  **Variant:** annotations

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/js/pdf-viewer-annotations.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-pdfviewer
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/pdf-viewer-annotations/PdfViewer.jsx

```jsx
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject, DynamicStampItem, SignStampItem, StandardBusinessStampItem, DisplayMode } from '@syncfusion/ej2-react-pdfviewer';

function Annotations() {
    let viewer;
    return (<div>
        <div className='control-section'>
            {/* Render the PDF Viewer */}
            
            <PdfViewerComponent ref={(scope) => { viewer = scope; }} id="container" documentPath="https://cdn.syncfusion.com/content/pdf/annotations-v2.pdf" resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib" documentLoad={documentLoaded} style={{ 'height': '640px' }}>
                <Inject services={[Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer]}/>
            </PdfViewerComponent>
        </div>
    </div>);
    function documentLoaded(args) {
        if (args.documentName === 'annotations-v2.pdf') {
            viewer.annotation.addAnnotation("Highlight", {
                bounds: [{ x: 97, y: 610, width: 340, height: 14 }],
                pageNumber: 1
            });
            viewer.annotation.addAnnotation("Underline", {
                bounds: [{ x: 97, y: 705, width: 346, height: 14 }],
                pageNumber: 1
            });
            viewer.annotation.addAnnotation("Strikethrough", {
                bounds: [{ x: 97, y: 800, width: 367, height: 14 }],
                pageNumber: 1
            });
            viewer.annotation.addAnnotation("Squiggly", {
                bounds: [{ x: 97, y: 895.5, width: 336, height: 14 }],
                pageNumber: 1
            });
            viewer.annotation.addAnnotation("Line", {
                offset: { x: 200, y: 230 },
                pageNumber: 2,
                vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]
            });
            viewer.annotation.addAnnotation("Arrow", {
                offset: { x: 200, y: 370 },
                pageNumber: 2,
                vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }]
            });
            viewer.annotation.addAnnotation("Rectangle", {
                offset: { x: 200, y: 480 },
                pageNumber: 2,
                width: 150,
                height: 75
            });
            viewer.annotation.addAnnotation("Circle", {
                offset: { x: 200, y: 620 },
                pageNumber: 2,
                width: 90,
                height: 90
            });
            viewer.annotation.addAnnotation("Polygon", {
                offset: { x: 200, y: 800 },
                pageNumber: 2,
                vertexPoints: [{ x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 }]
            });
            viewer.annotation.addAnnotation("Distance", {
                offset: { x: 200, y: 230 },
                pageNumber: 3,
                vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]
            });
            viewer.annotation.addAnnotation("Perimeter", {
                offset: { x: 200, y: 350 },
                pageNumber: 3,
                vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }]
            });
            viewer.annotation.addAnnotation("Area", {
                offset: { x: 200, y: 500 },
                pageNumber: 3,
                vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }]
            });
            viewer.annotation.addAnnotation("Radius", {
                offset: { x: 200, y: 630 },
                pageNumber: 3,
                width: 90,
                height: 90
            });
            viewer.annotation.addAnnotation("Volume", {
                offset: { x: 200, y: 810 },
                pageNumber: 3,
                vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }]
            });
            viewer.annotation.addAnnotation("FreeText", {
                offset: { x: 250, y: 150 },
                fontSize: 16,
                fontFamily: "Helvetica",
                pageNumber: 4,
                width: 200,
                height: 40,
                isLock: false,
                defaultText: "Syncfusion"
            });
            viewer.annotation.addAnnotation("Stamp", {
                offset: { x: 200, y: 240 },
                pageNumber: 4
            }, DynamicStampItem.Approved);
            viewer.annotation.addAnnotation("Stamp", {
                offset: { x: 200, y: 350 },
                pageNumber: 4
            }, null, SignStampItem.SignHere);
            viewer.annotation.addAnnotation("Stamp", {
                offset: { x: 200, y: 460 },
                pageNumber: 4
            }, null, null, StandardBusinessStampItem.Confidential);
            //The customStampImageSource property contains the stamp image as a base64 string
            viewer.annotation.addAnnotation("Stamp", {
                offset: { x: 200, y: 530 },
                pageNumber: 4,
                customStamps: [
                    {
                        customStampName: "Image",
                        customStampImageSource: "<base64-image-content>"
                    }
                ]
            });
            //The pathData property holds the value of the signature drawn
            viewer.annotation.addAnnotation("HandWrittenSignature", {
                offset: { x: 220, y: 180 },
                pageNumber: 5,
                width: 150,
                height: 60,
                signatureItem: ['Signature'],
                signatureDialogSettings: {
                    displayMode: DisplayMode.Draw
                },
                canSave: true,
                path: "<base64-image-content>"
            });
            viewer.annotation.addAnnotation("HandWrittenSignature", {
                offset: { x: 200, y: 310 },
                width: 200,
                height: 65,
                pageNumber: 5,
                signatureItem: ['Signature'],
                signatureDialogSettings: {
                    displayMode: DisplayMode.Text, hideSaveSignature: false
                },
                path: 'Syncfusion',
                canSave: false,
                fontFamily: "Helvetica",
            });
            //The pathData property holds the signature image as a base64 string 
            viewer.annotation.addAnnotation("HandWrittenSignature", {
                offset: { x: 200, y: 420 },
                pageNumber: 5,
                width: 200,
                height: 80,
                signatureItem: ['Signature'],
                signatureDialogSettings: {
                    displayMode: DisplayMode.Upload, hideSaveSignature: false
                },
                canSave: false,
                path: "<base64-image-content>"
            });
            //The pathData property holds the value of the signature drawn
            viewer.annotation.addAnnotation("Initial", {
                offset: { x: 220, y: 620 },
                pageNumber: 5,
                width: 150,
                height: 60,
                signatureItem: ['Initial'],
                initialDialogSettings: {
                    displayMode: DisplayMode.Draw
                },
                canSave: true,
                path: "<base64-image-content>"
            });
            viewer.annotation.addAnnotation("Initial", {
                offset: { x: 200, y: 750 },
                width: 200,
                height: 65,
                pageNumber: 5,
                signatureItem: ['Initial'],
                initialDialogSettings: {
                    displayMode: DisplayMode.Text, hideSaveSignature: false
                },
                path: 'Syncfusion',
                canSave: false,
                fontFamily: "Helvetica",
            });
            //The pathData property holds the signature image as a base64 string 
            viewer.annotation.addAnnotation("Initial", {
                offset: { x: 200, y: 860 },
                pageNumber: 5,
                width: 200,
                height: 80,
                signatureItem: ['Initial'],
                initialDialogSettings: {
                    displayMode: DisplayMode.Upload, hideSaveSignature: false
                },
                canSave: false,
                path: "<base64-image-content>"
            });
            //The pathData property holds the value of the signature drawn using the ink annotation
            viewer.annotation.addAnnotation("Ink", {
                offset: { x: 250, y: 130 },
                pageNumber: 6,
                width: 200,
                height: 60,
                path: "<base64-image-content>"
            });
            viewer.annotation.addAnnotation("StickyNotes", {
                offset: { x: 300, y: 320 },
                pageNumber: 6,
                isLock: false
            });
        }
    }
}
export default Annotations;
```