{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "pdf-viewer-annotations",
  "framework": "react",
  "type": "registry:component",
  "component": "PdfViewer",
  "variant": "annotations",
  "dependencies": [
    "@syncfusion/ej2-react-pdfviewer"
  ],
  "description": "PDF viewer pre-populated with highlight and underline annotations on page one.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/js/pdf-viewer-annotations.md"
  },
  "files": [
    {
      "target": "src/components/pdf-viewer-annotations/PdfViewer.jsx",
      "content": "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';\n\nfunction Annotations() {\n    let viewer;\n    return (<div>\n        <div className='control-section'>\n            {/* Render the PDF Viewer */}\n            \n            <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' }}>\n                <Inject services={[Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer]}/>\n            </PdfViewerComponent>\n        </div>\n    </div>);\n    function documentLoaded(args) {\n        if (args.documentName === 'annotations-v2.pdf') {\n            viewer.annotation.addAnnotation(\"Highlight\", {\n                bounds: [{ x: 97, y: 610, width: 340, height: 14 }],\n                pageNumber: 1\n            });\n            viewer.annotation.addAnnotation(\"Underline\", {\n                bounds: [{ x: 97, y: 705, width: 346, height: 14 }],\n                pageNumber: 1\n            });\n            viewer.annotation.addAnnotation(\"Strikethrough\", {\n                bounds: [{ x: 97, y: 800, width: 367, height: 14 }],\n                pageNumber: 1\n            });\n            viewer.annotation.addAnnotation(\"Squiggly\", {\n                bounds: [{ x: 97, y: 895.5, width: 336, height: 14 }],\n                pageNumber: 1\n            });\n            viewer.annotation.addAnnotation(\"Line\", {\n                offset: { x: 200, y: 230 },\n                pageNumber: 2,\n                vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]\n            });\n            viewer.annotation.addAnnotation(\"Arrow\", {\n                offset: { x: 200, y: 370 },\n                pageNumber: 2,\n                vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }]\n            });\n            viewer.annotation.addAnnotation(\"Rectangle\", {\n                offset: { x: 200, y: 480 },\n                pageNumber: 2,\n                width: 150,\n                height: 75\n            });\n            viewer.annotation.addAnnotation(\"Circle\", {\n                offset: { x: 200, y: 620 },\n                pageNumber: 2,\n                width: 90,\n                height: 90\n            });\n            viewer.annotation.addAnnotation(\"Polygon\", {\n                offset: { x: 200, y: 800 },\n                pageNumber: 2,\n                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 }]\n            });\n            viewer.annotation.addAnnotation(\"Distance\", {\n                offset: { x: 200, y: 230 },\n                pageNumber: 3,\n                vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]\n            });\n            viewer.annotation.addAnnotation(\"Perimeter\", {\n                offset: { x: 200, y: 350 },\n                pageNumber: 3,\n                vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }]\n            });\n            viewer.annotation.addAnnotation(\"Area\", {\n                offset: { x: 200, y: 500 },\n                pageNumber: 3,\n                vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }]\n            });\n            viewer.annotation.addAnnotation(\"Radius\", {\n                offset: { x: 200, y: 630 },\n                pageNumber: 3,\n                width: 90,\n                height: 90\n            });\n            viewer.annotation.addAnnotation(\"Volume\", {\n                offset: { x: 200, y: 810 },\n                pageNumber: 3,\n                vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }]\n            });\n            viewer.annotation.addAnnotation(\"FreeText\", {\n                offset: { x: 250, y: 150 },\n                fontSize: 16,\n                fontFamily: \"Helvetica\",\n                pageNumber: 4,\n                width: 200,\n                height: 40,\n                isLock: false,\n                defaultText: \"Syncfusion\"\n            });\n            viewer.annotation.addAnnotation(\"Stamp\", {\n                offset: { x: 200, y: 240 },\n                pageNumber: 4\n            }, DynamicStampItem.Approved);\n            viewer.annotation.addAnnotation(\"Stamp\", {\n                offset: { x: 200, y: 350 },\n                pageNumber: 4\n            }, null, SignStampItem.SignHere);\n            viewer.annotation.addAnnotation(\"Stamp\", {\n                offset: { x: 200, y: 460 },\n                pageNumber: 4\n            }, null, null, StandardBusinessStampItem.Confidential);\n            //The customStampImageSource property contains the stamp image as a base64 string\n            viewer.annotation.addAnnotation(\"Stamp\", {\n                offset: { x: 200, y: 530 },\n                pageNumber: 4,\n                customStamps: [\n                    {\n                        customStampName: \"Image\",\n                        customStampImageSource: \"<base64-image-content>\"\n                    }\n                ]\n            });\n            //The pathData property holds the value of the signature drawn\n            viewer.annotation.addAnnotation(\"HandWrittenSignature\", {\n                offset: { x: 220, y: 180 },\n                pageNumber: 5,\n                width: 150,\n                height: 60,\n                signatureItem: ['Signature'],\n                signatureDialogSettings: {\n                    displayMode: DisplayMode.Draw\n                },\n                canSave: true,\n                path: \"<base64-image-content>\"\n            });\n            viewer.annotation.addAnnotation(\"HandWrittenSignature\", {\n                offset: { x: 200, y: 310 },\n                width: 200,\n                height: 65,\n                pageNumber: 5,\n                signatureItem: ['Signature'],\n                signatureDialogSettings: {\n                    displayMode: DisplayMode.Text, hideSaveSignature: false\n                },\n                path: 'Syncfusion',\n                canSave: false,\n                fontFamily: \"Helvetica\",\n            });\n            //The pathData property holds the signature image as a base64 string \n            viewer.annotation.addAnnotation(\"HandWrittenSignature\", {\n                offset: { x: 200, y: 420 },\n                pageNumber: 5,\n                width: 200,\n                height: 80,\n                signatureItem: ['Signature'],\n                signatureDialogSettings: {\n                    displayMode: DisplayMode.Upload, hideSaveSignature: false\n                },\n                canSave: false,\n                path: \"<base64-image-content>\"\n            });\n            //The pathData property holds the value of the signature drawn\n            viewer.annotation.addAnnotation(\"Initial\", {\n                offset: { x: 220, y: 620 },\n                pageNumber: 5,\n                width: 150,\n                height: 60,\n                signatureItem: ['Initial'],\n                initialDialogSettings: {\n                    displayMode: DisplayMode.Draw\n                },\n                canSave: true,\n                path: \"<base64-image-content>\"\n            });\n            viewer.annotation.addAnnotation(\"Initial\", {\n                offset: { x: 200, y: 750 },\n                width: 200,\n                height: 65,\n                pageNumber: 5,\n                signatureItem: ['Initial'],\n                initialDialogSettings: {\n                    displayMode: DisplayMode.Text, hideSaveSignature: false\n                },\n                path: 'Syncfusion',\n                canSave: false,\n                fontFamily: \"Helvetica\",\n            });\n            //The pathData property holds the signature image as a base64 string \n            viewer.annotation.addAnnotation(\"Initial\", {\n                offset: { x: 200, y: 860 },\n                pageNumber: 5,\n                width: 200,\n                height: 80,\n                signatureItem: ['Initial'],\n                initialDialogSettings: {\n                    displayMode: DisplayMode.Upload, hideSaveSignature: false\n                },\n                canSave: false,\n                path: \"<base64-image-content>\"\n            });\n            //The pathData property holds the value of the signature drawn using the ink annotation\n            viewer.annotation.addAnnotation(\"Ink\", {\n                offset: { x: 250, y: 130 },\n                pageNumber: 6,\n                width: 200,\n                height: 60,\n                path: \"<base64-image-content>\"\n            });\n            viewer.annotation.addAnnotation(\"StickyNotes\", {\n                offset: { x: 300, y: 320 },\n                pageNumber: 6,\n                isLock: false\n            });\n        }\n    }\n}\nexport default Annotations;"
    }
  ]
}