diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-event.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-event.md
index edecf4606..828fc6624 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-event.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-event.md
@@ -112,11 +112,11 @@ export default App;
### annotationDoubleClick
-The [annotationDoubleClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationdoubleclickevent) event is triggered when an annotation is double-clicked.
+The [annotationDoubleClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationdoubleclickevent) event is triggered when an annotation is double-clicked.
#### Event Arguments
-For event data, see [AnnotationDoubleClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationDoubleClickEventArgs/).
+For event data, see [AnnotationDoubleClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationDoubleClickEventArgs).
The following example illustrates how to handle the `annotationDoubleClick` event.
@@ -187,11 +187,11 @@ export default App;
### annotationMouseLeave
-The [annotationMouseLeave](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationmouseleaveevent) event is triggered when the user's mouse pointer moves away from an annotation object.
+The [annotationMouseLeave](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotationmouseleave) event is triggered when the user's mouse pointer moves away from an annotation object.
#### Event Arguments
-For event data, see [AnnotationMouseLeaveEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMouseLeaveEventArgs/).
+For event data, see [AnnotationMouseLeaveEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMouseLeaveEventArgs).
The following example illustrates how to handle the `annotationMouseLeave` event.
@@ -262,11 +262,11 @@ export default App;
### annotationMouseover
-The [annotationMouseover](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationmouseoverevent) event is triggered when the mouse is moved over an annotation object.
+The [annotationMouseover](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationmouseoverevent) event is triggered when the mouse is moved over an annotation object.
#### Event Arguments
-For event data, see [AnnotationMouseOverEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMouseOverEventArgs/).
+For event data, see [AnnotationMouseOverEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMouseOverEventArgs).
The following example illustrates how to handle the `annotationMouseover` event.
@@ -337,11 +337,11 @@ export default App;
### annotationMove
-The [annotationMove](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationmoveevent) event is triggered when an annotation is moved over the page of the PDF document.
+The [annotationMove](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationmoveevent) event is triggered when an annotation is moved over the page of the PDF document.
#### Event Arguments
-For event data, see [AnnotationMoveEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMoveEventArgs/).
+For event data, see [AnnotationMoveEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMoveEventArgs).
The following example illustrates how to handle the `annotationMove` event.
@@ -412,11 +412,11 @@ export default App;
### annotationMoving
-The [annotationMoving](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationmovingevent) event is triggered while an annotation is being moved.
+The [annotationMoving](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationmovingevent) event is triggered while an annotation is being moved.
#### Event Arguments
-For event data, see [AnnotationMovingEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMovingEventArgs/).
+For event data, see [AnnotationMovingEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMovingEventArgs).
The following example illustrates how to handle the `annotationMoving` event.
@@ -487,11 +487,11 @@ export default App;
### annotationPropertiesChange
-The [annotationPropertiesChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationpropertieschangeevent) event is triggered when an annotation's property is modified on a PDF document page.
+The [annotationPropertiesChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationpropertieschangeevent) event is triggered when an annotation's property is modified on a PDF document page.
#### Event Arguments
-For event data, see [AnnotationPropertiesChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs/). It provides properties such as `annotationId`, `pageNumber`, and `action`.
+For event data, see [AnnotationPropertiesChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs). It provides properties such as `annotationId`, `pageNumber`, and `action`.
The following example illustrates how to handle the `annotationPropertiesChange` event.
@@ -563,11 +563,11 @@ export default App;
### annotationRemove
-The [annotationRemove](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationremoveevent) event is triggered when an annotation is removed from a PDF document's page.
+The [annotationRemove](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationremoveevent) event is triggered when an annotation is removed from a PDF document's page.
#### Event Arguments
-For event data, see [AnnotationRemoveEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationRemoveEventArgs/). It provides properties such as `annotationId` and `pageNumber`.
+For event data, see [AnnotationRemoveEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationRemoveEventArgs). It provides properties such as `annotationId` and `pageNumber`.
The following example illustrates how to handle the `annotationRemove` event.
@@ -638,11 +638,11 @@ export default App;
### annotationResize
-The [annotationResize](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationresizeevent) event is triggered when an annotation is resized on a PDF document page.
+The [annotationResize](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationresizeevent) event is triggered when an annotation is resized on a PDF document page.
#### Event Arguments
-For event data, see [AnnotationResizeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationResizeEventArgs/).
+For event data, see [AnnotationResizeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationResizeEventArgs).
The following example illustrates how to handle the `annotationResize` event.
@@ -713,11 +713,11 @@ export default App;
### annotationSelect
-The [annotationSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationselectevent) event is triggered when an annotation is selected on a PDF document's page.
+The [annotationSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationselectevent) event is triggered when an annotation is selected on a PDF document's page.
#### Event Arguments
-For event data, see [AnnotationSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationSelectEventArgs/).
+For event data, see [AnnotationSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationSelectEventArgs).
The following example illustrates how to handle the `annotationSelect` event.
@@ -788,11 +788,11 @@ export default App;
### annotationUnselect
-The [annotationUnselect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationunselectevent) event is triggered when an annotation is unselected from the PDF document's page.
+The [annotationUnselect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationunselectevent) event is triggered when an annotation is unselected from the PDF document's page.
#### Event Arguments
-For event data, see [AnnotationUnSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationUnSelectEventArgs/).
+For event data, see [AnnotationUnSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationUnSelectEventArgs).
The following example illustrates how to handle the `annotationUnselect` event.
@@ -863,11 +863,11 @@ export default App;
### beforeAddFreeText
-The [beforeAddFreeText](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#beforeaddfreetextevent) event is triggered before adding a text in the freeText annotation.
+The [beforeAddFreeText](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#beforeaddfreetextevent) event is triggered before adding a text in the freeText annotation.
#### Event Arguments
-For event data, see [BeforeAddFreeTextEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/beforeAddFreeTextEventArgs/).
+For event data, see [BeforeAddFreeTextEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/beforeAddFreeTextEventArgs).
The following example illustrates how to handle the `beforeAddFreeText` event.
@@ -942,11 +942,11 @@ export default App;
### addSignature
-The [addSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#addsignatureevent) event is triggered when a signature is added to a page of a PDF document.
+The [addSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#addsignatureevent) event is triggered when a signature is added to a page of a PDF document.
#### Event Arguments
-For event data, see [AddSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/addSignatureEventArgs/). It provides properties such as `pageNumber`.
+For event data, see [AddSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/addSignatureEventArgs). It provides properties such as `pageNumber`.
The following example illustrates how to handle the `addSignature` event.
@@ -1017,11 +1017,11 @@ export default App;
### removeSignature
-The [removeSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#removesignatureevent) event is triggered when the signature is removed from the page of a PDF document.
+The [removeSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#removesignatureevent) event is triggered when the signature is removed from the page of a PDF document.
#### Event Arguments
-For event data, see [RemoveSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/removeSignatureEventArgs/). It provides properties such as `pageNumber`.
+For event data, see [RemoveSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/removeSignatureEventArgs). It provides properties such as `pageNumber`.
The following example illustrates how to handle the `removeSignature` event.
@@ -1092,11 +1092,11 @@ export default App;
### resizeSignature
-The [resizeSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#resizesignatureevent) event is triggered when the signature is resized and placed on a page of a PDF document.
+The [resizeSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resizesignatureevent) event is triggered when the signature is resized and placed on a page of a PDF document.
#### Event Arguments
-For event data, see [ResizeSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/resizeSignatureEventArgs/).
+For event data, see [ResizeSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/resizeSignatureEventArgs).
The following example illustrates how to handle the `resizeSignature` event.
@@ -1167,11 +1167,11 @@ export default App;
### signaturePropertiesChange
-The [signaturePropertiesChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#signaturepropertieschangeevent) event is triggered when the property of the signature is changed in the page of the PDF document.
+The [signaturePropertiesChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#signaturepropertieschangeevent) event is triggered when the property of the signature is changed in the page of the PDF document.
#### Event Arguments
-For event data, see [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/).
+For event data, see [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs).
The following example illustrates how to handle the `signaturePropertiesChange` event.
@@ -1242,11 +1242,11 @@ export default App;
### signatureSelect
-The [signatureSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#signatureselectevent) event is triggered when signature is selected over the page of the PDF document.
+The [signatureSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#signatureselectevent) event is triggered when signature is selected over the page of the PDF document.
#### Event Arguments
-For event data, see [SignatureSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signatureSelectEventArgs/).
+For event data, see [SignatureSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signatureSelectEventArgs).
The following example illustrates how to handle the `signatureSelect` event.
@@ -1317,11 +1317,11 @@ export default App;
### signatureUnselect
-The [signatureUnselect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#signatureunselectevent) event is triggered when signature is unselected over the page of the PDF document.
+The [signatureUnselect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#signatureunselectevent) event is triggered when signature is unselected over the page of the PDF document.
#### Event Arguments
-For event data, see [SignatureUnSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signatureUnSelectEventArgs/).
+For event data, see [SignatureUnSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signatureUnSelectEventArgs).
The following example illustrates how to handle the `signatureUnselect` event.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/annotation-undo-redo.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/annotation-undo-redo.png
new file mode 100644
index 000000000..fe93c32f7
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/annotation-undo-redo.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/area-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/area-annot.png
new file mode 100644
index 000000000..5974cf3bc
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/area-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/arrow-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/arrow-annot.png
new file mode 100644
index 000000000..c85e14482
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/arrow-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/circle-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/circle-annot.png
new file mode 100644
index 000000000..25eb71e63
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/circle-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/delete-annot-context-menu.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/delete-annot-context-menu.png
new file mode 100644
index 000000000..7a622d4ac
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/delete-annot-context-menu.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/delete-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/delete-annot.png
new file mode 100644
index 000000000..11a148f2f
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/delete-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/distance-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/distance-annot.png
new file mode 100644
index 000000000..9adddffc2
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/distance-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/export-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/export-annot.png
new file mode 100644
index 000000000..9ad0f027e
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/export-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/free-text-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/free-text-annot.png
new file mode 100644
index 000000000..9b5ab0fb6
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/free-text-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/highlight-context.gif b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/highlight-context.gif
new file mode 100644
index 000000000..205b0ec3b
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/highlight-context.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/highlight-tool.gif b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/highlight-tool.gif
new file mode 100644
index 000000000..bb780e81e
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/highlight-tool.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/import-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/import-annot.png
new file mode 100644
index 000000000..8921a81c3
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/import-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/line-angle-constraint.gif b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/line-angle-constraint.gif
new file mode 100644
index 000000000..12ca903df
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/line-angle-constraint.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/line-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/line-annot.png
new file mode 100644
index 000000000..691212636
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/line-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/perimeter-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/perimeter-annot.png
new file mode 100644
index 000000000..6f97c31e0
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/perimeter-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/polygon-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/polygon-annot.png
new file mode 100644
index 000000000..38318eaf6
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/polygon-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/radius-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/radius-annot.png
new file mode 100644
index 000000000..b04dcfbee
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/radius-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/rect-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/rect-annot.png
new file mode 100644
index 000000000..36e5305f9
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/rect-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/squiggle-context.gif b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/squiggle-context.gif
new file mode 100644
index 000000000..cc1d2ea21
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/squiggle-context.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/squiggle-tool.gif b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/squiggle-tool.gif
new file mode 100644
index 000000000..bc5e01966
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/squiggle-tool.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/strikethrough-context.gif b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/strikethrough-context.gif
new file mode 100644
index 000000000..a1bc4f77d
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/strikethrough-context.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/strikethrough-tool.gif b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/strikethrough-tool.gif
new file mode 100644
index 000000000..bd482b495
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/strikethrough-tool.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/underline-context.gif b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/underline-context.gif
new file mode 100644
index 000000000..e06278e5b
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/underline-context.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/underline-tool.gif b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/underline-tool.gif
new file mode 100644
index 000000000..f274f11bb
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/underline-tool.gif differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/volume-annot.png b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/volume-annot.png
new file mode 100644
index 000000000..21387faca
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-images/volume-annot.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-permission.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-permission.md
new file mode 100644
index 000000000..0207a94cb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-permission.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Annotations Permission in React PDF Viewer | Syncfusion
+description: Learn how to use annotation permissions in Syncfusion React PDF Viewer using programmatic APIs.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Annotation permissions in React PDF Viewer
+
+Use [annotationSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#annotationsettings) to control creation-time permissions and behavior of annotations in the PDF Viewer.
+
+## Common permissions
+
+- isLock: Locks the annotation so it cannot be moved, resized, edited, or deleted.
+- skipPrint: Excludes annotations from the print output when the document is printed from the viewer.
+- skipDownload: Excludes annotations from the exported/downloaded document.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner,
+ AllowedInteraction} from '@syncfusion/ej2-pdfviewer';
+
+ PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
+ TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
+
+let viewer: PdfViewer = new PdfViewer();
+viewer.resourceUrl= 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+viewer.documentPath= 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+// Default annotation settings applied to annotations created via the UI
+viewer.annotationSettings = {
+ author: 'XYZ',
+ minHeight: 10,
+ minWidth: 10,
+ maxWidth: 100,
+ maxHeight: 100,
+ isLock: false, // allow moving/resizing/editing by default
+ skipPrint: false, // include annotations when printing the document
+ skipDownload: false, // include annotations when downloading/exporting the document
+ allowedInteractions: [AllowedInteraction.Resize],
+};
+
+viewer.appendTo("#pdfViewer");
+```
+
+## Individual permissions
+
+- isPrint: Controls whether a specific annotation participates in printing. Set to false to prevent just that annotation from printing.
+- isLock: You can also lock/unlock a specific annotation instance programmatically.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields);
+
+const pdfviewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
+ // Text markup defaults
+ highlightSettings: { author: 'QA', subject: 'Review', color: '#ffff00', opacity: 0.6 },
+ strikethroughSettings: { author: 'QA', subject: 'Remove', color: '#ff0000', opacity: 0.6 },
+ underlineSettings: { author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9 },
+ squigglySettings: { author: 'Guest User', subject: 'Corrections', color: '#00ff00', opacity: 0.9 },
+
+ // Shapes
+ lineSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, isLock: false, isPrint: true },
+ arrowSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, isLock: false, isPrint: true },
+ rectangleSettings: { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1, isLock: false, isPrint: true },
+ circleSettings: { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1, isLock: false, isPrint: true },
+ polygonSettings: { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1, isLock: false, isPrint: true },
+
+ // Measurements
+ distanceSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, isLock: false, isPrint: true },
+ perimeterSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, isLock: false, isPrint: true },
+ areaSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00', isLock: false, isPrint: true },
+ radiusSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00', isLock: false, isPrint: true },
+ volumeSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00', isLock: false, isPrint: true },
+
+ // Others
+ freeTextSettings: { borderColor: '#222222', opacity: 1, isLock: false, isPrint: true },
+ inkAnnotationSettings: { strokeColor: '#0000ff', thickness: 3, opacity: 0.8, isLock: false, isPrint: true },
+ stampSettings: { opacity: 0.9, isLock: false, isPrint: true },
+ stickyNotesSettings: { author: 'QA', subject: 'Review', opacity: 1, isLock: false, isPrint: true }
+});
+
+pdfviewer.appendTo('#PdfViewer');
+```
+
+Behavior notes
+- isLock true: The annotation is locked; users cannot move, resize, or edit it through the UI until it is unlocked.
+- skipPrint true: All annotations are omitted from the print output initiated from the viewer.
+- skipDownload true: All annotations are omitted from the exported/downloaded PDF from the viewer.
+- isPrint on an individual annotation: Use this when you only want to exclude a particular annotation from printing while leaving others printable.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotations/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotations/create-modify-annotation)
+- [Customize Annotation](../annotations/customize-annotation)
+- [Remove Annotation](../annotations/delete-annotation)
+- [Handwritten Signature](../annotations/signature-annotation)
+- [Export and Import Annotation](../annotations/export-import/export-annotation)
+- [Annotation in Mobile View](../annotations/annotations-in-mobile-view)
+- [Annotation Events](../annotations/annotation-event)
+- [Annotation API](../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/area-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/area-annotation.md
new file mode 100644
index 000000000..8edee1f16
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/area-annotation.md
@@ -0,0 +1,664 @@
+---
+layout: post
+title: Area annotation in React PDF Viewer | Syncfusion
+description: Learn to add, edit, and customize Area measurement annotations in Syncfusion React PDF Viewer with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Area annotation in React PDF Viewer
+
+Area is a measurement annotation used to measure the surface of a closed region in the PDF.
+
+
+
+## Add Area Annotation
+
+### Add area annotation via UI
+
+Use the annotation toolbar:
+- Click the **Edit Annotation** button in the PDF Viewer toolbar.
+- Click the **Measurement Annotation** dropdown.
+- Choose **Area**, then draw the region on the page.
+
+N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode.
+
+
+
+### Enable area mode
+
+The PDF Viewer library allows drawing measurement annotations programmatically after enabling area mode in button clicks.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function areaMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Area');
+ }
+
+ return (
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Edit Area Annotation
+
+### Edit Area Annotation in UI
+
+You can select, move, and resize Area annotations directly in the viewer:
+- Select an Area to show its vertex handles.
+- Move: drag inside the shape to reposition it on the page.
+- Resize/reshape: drag any vertex handle to adjust the polygon points and size.
+- Delete or access more options from the context menu.
+
+Use the toolbar to change appearance:
+- Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools.
+
+See the sections below for screenshots and details.
+
+#### Edit the properties of area annotations
+
+The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+#### Edit fill color
+
+The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+
+
+
+#### Edit stroke color
+
+The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+
+
+
+#### Edit thickness
+
+Edit border thickness using the range slider provided in the Edit Thickness tool.
+
+
+
+#### Edit opacity
+
+The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+
+
+
+### Edit an existing area annotation programmatically
+
+To modify an existing area annotation programmatically, use the editAnnotation() method.
+
+Here is an example of using editAnnotation():
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+
+ function editAreaAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Area calculation') {
+ ann.annotationSelectorSettings.resizerShape = 'Circle';
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.fillColor = '#FFFF00';
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Editing scale ratio and unit of the area measurement annotation
+
+The scale ratio and unit of measurement can be modified using the scale ratio option provided in the context menu of the PDF Viewer control.
+
+ 
+
+The Units of measurements support for the measurement annotations in the PDF Viewer are
+
+* Inch
+* Millimeter
+* Centimeter
+* Point
+* Pica
+* Feet
+
+
+
+## Setting default scale ratio settings during control initialization
+
+The properties of scale ratio for measurement annotation can be set before creating the control using ScaleRatioSettings as shown in the following code snippet,
+
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
+ BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation,
+ FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
+let pdfviewer;
+
+function App() {
+ return (
);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Export and Import Annotation](../../annotations/export-import/export-annotation)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/arrow-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/arrow-annotation.md
new file mode 100644
index 000000000..3df524677
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/arrow-annotation.md
@@ -0,0 +1,566 @@
+---
+layout: post
+title: Arrow annotation in React PDF Viewer | Syncfusion
+description: Learn to add, edit, and customize Arrow annotations in Syncfusion React PDF Viewer with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Arrow annotation in React PDF Viewer
+
+Arrow is a shape annotation used to point, direct attention, or indicate flow. Common use cases include callouts, direction markers, and connectors in technical reviews.
+
+
+
+## Add Arrow Annotation
+
+### Add arrow annotation via UI
+
+Use the annotation toolbar:
+- Click the **Edit Annotation** button in the PDF Viewer toolbar.
+- Open the **Shape Annotation**** dropdown.
+- Choose **Arrow**, then draw on the page.
+
+N> When in pan mode, selecting a shape annotation switches the viewer to text select mode.
+
+
+
+### Enable arrow mode
+
+The PDF Viewer library allows drawing shape annotations programmatically after enabling arrow mode in button clicks.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function arrowMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Arrow');
+ }
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endhighlight %}
+{% endtabs %}
+
+## Edit Arrow Annotation
+
+### Edit arrow annotation in UI
+
+You can select, move, and resize Arrow annotations directly in the viewer:
+- Select an Arrow to show its handles.
+- Move: drag inside the shape to reposition it on the page.
+- Resize/reshape: drag start/end handles to adjust its length and direction.
+- Delete or access more options from the context menu.
+
+#### Editing the properties of the arrow annotation
+
+The fill color, stroke color, thickness, and opacity of arrow shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+##### Editing fill color
+
+The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+
+
+
+#### Editing stroke color
+
+The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+
+
+
+#### Editing thickness
+
+The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
+
+
+
+#### Editing opacity
+
+The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+
+
+
+#### Editing the line properties
+
+Arrow annotations have additional options in the Line Properties window. Open it by right-clicking a line or arrow annotation and selecting Properties from the context menu.
+
+
+
+### Edit an existing arrow annotation programmatically
+
+To modify an existing arrow annotation programmatically, use the editAnnotation() method.
+
+Here is an example of using editAnnotation():
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+
+ function editArrowAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Arrow') {
+ ann.annotationSelectorSettings.resizerShape = 'Circle';
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.fillColor = '#FFFF00';
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+N> In both [Arrow](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#arrowsettings) and [Line](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#linesettings) annotations Settings, the Fill Color option is available only when an arrowhead style is applied at the Start or End. If both Start and End arrowhead styles are set to None, lines do not support fill rendering and the Fill Color option remains disabled.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Export and Import Annotation](../../annotations/export-import/export-annotation)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/circle-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/circle-annotation.md
new file mode 100644
index 000000000..5adf6d86a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/circle-annotation.md
@@ -0,0 +1,573 @@
+---
+layout: post
+title: Circle annotation in React PDF Viewer | Syncfusion
+description: Learn to add, edit, and customize Circle annotations in Syncfusion React PDF Viewer with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Circle annotation in React PDF Viewer
+
+Circle is a shape annotation used to highlight circular regions or draw emphasis bubbles.
+
+
+
+## Add Circle Annotation
+
+### Add circle annotation via UI
+
+Use the annotation toolbar:
+- Click the **Edit Annotation** button in the PDF Viewer toolbar.
+- Open the **Shape Annotation** dropdown.
+- Choose **Circle**, then draw on the page.
+
+N> When in pan mode, selecting a shape annotation switches the viewer to text select mode.
+
+
+
+### Enable circle mode
+
+The PDF Viewer library allows drawing Circle annotations programmatically after enabling Circle mode in button clicks.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function circleMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Circle');
+ }
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Edit Circle Annotation
+
+### Edit circle annotation in UI
+
+You can select, move, and resize Circle annotations directly in the viewer:
+- Select a Circle to show its handles.
+- Move: drag inside the shape to reposition it on the page.
+- Resize: drag the corner handles to adjust its diameter.
+- Delete or access more options from the context menu.
+
+#### Editing the properties of the circle annotation
+
+The fill color, stroke color, thickness, and opacity of circle shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+##### Editing fill color
+
+The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+
+
+
+##### Editing stroke color
+
+The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+
+
+
+##### Editing thickness
+
+The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
+
+
+
+##### Editing opacity
+
+The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+
+
+
+### Edit an existing circle annotation programmatically
+
+Use editAnnotation on items from annotationCollection.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function editCircleAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Circle') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.fillColor = '#FFFF00';
+ ann.annotationSelectorSettings.resizerShape = 'Circle';
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function editCircleAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Circle') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.fillColor = '#FFFF00';
+ ann.annotationSelectorSettings.resizerShape = 'Circle';
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Default circle settings during initialization
+
+Set default [circleSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#circlesettings) before creating the control.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Export and Import Annotation](../../annotations/export-import/export-annotation)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/distance-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/distance-annotation.md
new file mode 100644
index 000000000..8243faf8d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/distance-annotation.md
@@ -0,0 +1,651 @@
+---
+layout: post
+title: Distance annotation in React PDF Viewer | Syncfusion
+description: Learn to add, edit, and customize Distance measurement annotations in Syncfusion React PDF Viewer with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Distance annotation in React PDF Viewer
+
+Distance is a measurement annotation used to measure the length between two points in the PDF.
+
+
+
+## Add Distance Annotation
+
+### Add distance annotation via UI
+
+Use the annotation toolbar:
+- Click the **Edit Annotation** button in the PDF Viewer toolbar.
+- Open the **Measurement Annotation** dropdown.
+- Choose **Distance**, then draw on the page.
+
+N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode.
+
+
+
+### Enable distance mode
+
+The PDF Viewer component allows drawing Distance annotations programmatically after enabling Distance mode in button clicks.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function distanceMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Distance');
+ }
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Edit Distance Annotation
+
+### Edit distance annotation in UI
+
+You can select, move, and resize Distance annotations directly in the viewer:
+- Select a Distance measurement to show its handles.
+- Move: drag the line to reposition it on the page.
+- Resize: drag the end handles to adjust its length.
+- Delete or access more options from the context menu.
+
+#### Edit the properties of area annotations
+
+The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+#### Edit fill color
+
+The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+
+
+
+#### Edit stroke color
+
+The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+
+
+
+#### Edit thickness
+
+Edit border thickness using the range slider provided in the Edit Thickness tool.
+
+
+
+#### Edit opacity
+
+The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+
+
+
+### Edit an existing distance annotation programmatically
+
+Use editAnnotation on items from annotationCollection.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function editDistanceAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Distance calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.opacity = 0.8;
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function editDistanceAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Distance calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.opacity = 0.8;
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Default distance settings during initialization
+
+Set default [distanceSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#distancesettings) before creating the control.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Export and Import Annotation](../../annotations/export-import/export-annotation)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/free-text-annotation.md
new file mode 100644
index 000000000..19c782365
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/free-text-annotation.md
@@ -0,0 +1,606 @@
+---
+layout: post
+title: Free text annotation in React PDF Viewer | Syncfusion
+description: Learn to add, edit, delete, and customize Free Text annotations in Syncfusion React PDF Viewer, with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Free text annotation in React PDF Viewer
+
+Free Text is a text box annotation used to place formatted text anywhere on the page for notes, labels, or callouts.
+
+
+
+## Add Free Text annotation
+
+### Add Free Text annotation via UI
+
+Use the annotation toolbar:
+- Click the **Edit Annotation** button in the PDF Viewer toolbar.
+- Click the **Free Text Annotation** button to enable Free Text mode.
+- Click on the page to add text.
+
+When in pan mode, selecting Free Text switches the viewer to text select mode.
+
+
+
+### Switch to Free Text mode
+
+The PDF Viewer component allows drawing Distance annotations programmatically after enabling Distance mode in button clicks.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function freeTextMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('FreeText');
+ }
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Edit Free Text annotation
+
+### Edit Free Text Annotation in UI
+
+You can select, move, and resize FreeText annotations directly in the viewer:
+- Select a Free Text annotation to display its bounding box and resize handles.
+- Move: drag the annotation box to reposition it on the page.
+- Resize: drag any corner or edge handle to adjust its size.
+- Delete: press the Delete key or use the context menu to remove the annotation.
+
+Use the toolbar to change the appearance of the selected Free Text annotation:
+- Font Family, Font Size, Font Style (Bold, Italic, Underline)
+- Font Color and Text Alignment
+- Fill Color (background) and Stroke Color (border)
+- Border Thickness and Opacity
+
+See the sections below for screenshots and details.
+
+#### Edit the properties of free text annotations
+
+Font family, font size, styles, font color, text alignment, fill color, stroke color, border thickness, and opacity can be edited using the Font Family, Font Size, Font Color, Text Align, Font Style, Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+#### Edit font family
+
+Edit the font family by selecting a font in the Font Family tool.
+
+
+
+#### Edit font size
+
+Edit the font size by selecting a size in the Font Size tool.
+
+
+
+#### Edit font color
+
+Edit the font color using the color palette in the Font Color tool.
+
+
+
+#### Edit text alignment
+
+Align text by selecting an option from the Text Align tool.
+
+
+
+#### Edit text styles
+
+Edit text styles by selecting options in the Font Style tool.
+
+
+
+#### Edit fill color
+
+Edit the fill color using the color palette in the Edit Color tool.
+
+
+
+#### Edit stroke color
+
+Edit the stroke color using the color palette in the Edit Stroke Color tool.
+
+
+
+#### Edit thickness
+
+Edit border thickness using the range slider in the Edit Thickness tool.
+
+
+
+#### Edit opacity
+
+Edit opacity using the range slider in the Edit Opacity tool.
+
+
+
+### Edit Free Text annotation programmatically
+
+Use editAnnotation to update existing Free Text content.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function changeContent() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Text Box') {
+ ann.dynamicText = 'syncfusion';
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function changeContent() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Text Box') {
+ ann.dynamicText = 'syncfusion';
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+
+
+## Default Free Text settings during initialization
+
+Set default Free Text properties before creating the control using freeTextSettings.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Export and Import Annotation](../../annotations/export-import/export-annotation)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/highlight-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/highlight-annotation.md
new file mode 100644
index 000000000..000a5bad6
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/highlight-annotation.md
@@ -0,0 +1,623 @@
+---
+layout: post
+title: Highlight annotation in React PDF Viewer | Syncfusion
+description: Learn to add, edit, delete, and customize Highlight text markup annotations in Syncfusion React PDF Viewer, with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Highlight annotation in React PDF Viewer
+
+The PDF Viewer provides options to add, edit, and delete Highlight annotations on text. You can add highlights via the UI (context menu or annotation toolbar) and programmatically. You can also customize color, opacity, author/subject, and default settings, and use undo/redo, save, print, or disable highlights as needed.
+
+
+
+## Add Highlight Annotation
+
+### Add highlight annotation via UI
+
+You can add highlights in two ways:
+
+1. Using the context menu
+- Select text in the PDF document and right-click it.
+- Choose **Highlight** in the context menu.
+
+
+
+2. Using the annotation toolbar
+- Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
+- Select **Highlight** to enable highlight mode.
+- Select text to add the highlight annotation. Alternatively, select text first and then click **Highlight**.
+
+
+
+N> When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection.
+
+### Enable Highlight Mode
+
+The PDF Viewer component allows add highlight annotations programmatically after enabling Highlight mode in button clicks.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, Annotation, FormDesigner, FormFields, TextSearch, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function enableHighlightMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Highlight');
+ }
+
+ return (
+
+ {/* Element to set text markup annotation mode */}
+
+
+
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the **server-backed PDF Viewer**, add the below `serviceUrl` in the `index.ts` file: `pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';`
+
+{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/highlight-mode-cs1" %}
+
+#### Exit Highlight mode
+
+To switch back to normal mode from highlight mode:
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+
+// Common (Standalone/Server-Backed)
+function exitHighlightMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('None');
+}
+
+// Add the buttons inside your component JSX:
+//
+//
+//
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the **server-backed PDF Viewer**, add the below `serviceUrl` in the `index.ts` file:
+`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';`
+
+{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/highlight-normal-mode-cs1" %}
+
+### Add highlight annotation programmatically
+
+Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ 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
+ });
+ }
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set default properties during control initialization
+
+Set default properties before creating the control using `highlightSettings`.
+
+> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
+
+Refer to the following code snippet to set the default highlight settings.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, Annotation, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Edit Ink Annotation
+
+### Edit ink annotation in UI
+
+You can select, move, and resize Ink annotations directly in the viewer:
+- Select an Ink annotation to show its handles.
+- Move: drag inside the stroke to reposition it on the page.
+- Resize: drag the selector handles to adjust its bounds.
+- Delete or access more options from the context menu.
+
+#### Edit the properties of ink annotations
+
+Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+#### Edit stroke color
+
+Edit the stroke color using the color palette in the Edit Stroke Color tool.
+
+
+
+#### Edit thickness
+
+Edit thickness using the range slider in the Edit Thickness tool.
+
+
+
+#### Edit opacity
+
+Edit opacity using the range slider in the Edit Opacity tool.
+
+
+
+### Edit an existing ink annotation programmatically
+
+Use editAnnotation to modify properties and bounds of an existing ink annotation.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function editInkAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.shapeAnnotationType === 'Ink') {
+ const { width, height } = ann.bounds;
+ ann.bounds = { x: 100, y: 100, width, height };
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.annotationSelectorSettings.resizerShape = 'Circle';
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Export and Import Annotation](../../annotations/export-import/export-annotation)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/line-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/line-annotation.md
new file mode 100644
index 000000000..c108957d2
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/line-annotation.md
@@ -0,0 +1,585 @@
+---
+layout: post
+title: Line annotation in React PDF Viewer | Syncfusion
+description: Learn to add, edit, and customize Line annotations in Syncfusion React PDF Viewer with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Line annotation in React PDF Viewer
+
+Line is a shape annotation used to mark straight connections or callouts. Common use cases include underline-like rulers, connectors, and measurement guides.
+
+
+
+## Add Line Annotation
+
+### Add line annotation via UI
+
+Use the annotation toolbar:
+- Click the **Edit Annotation** button in the PDF Viewer toolbar.
+- Open the **Shape Annotation** dropdown.
+- Choose **Line**, then draw on the page.
+
+N> When in pan mode, selecting a shape annotation switches the viewer to text select mode.
+
+
+
+### Enable line mode
+
+The PDF Viewer component allows to add line annotations programmatically after enabling line mode in button clicks.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function lineMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Line');
+ }
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Edit Line Annotation
+
+### Edit Line Annotation in UI
+
+You can select, move, and resize Line annotations directly in the viewer:
+- Select a Line to show its end-point handles.
+- Move: drag the line to reposition it on the page.
+- Resize/reshape: drag either end-point to adjust the line.
+- Delete or access more options from the context menu.
+
+Use the toolbar to change appearance:
+- Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools.
+
+
+
+#### Editing the properties of the shape annotation
+
+The fill color, stroke color, thickness, and opacity of shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+#### Editing fill color
+
+The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+
+
+
+#### Editing stroke color
+
+The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+
+
+
+#### Editing thickness
+
+The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
+
+
+
+#### Editing opacity
+
+The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+
+
+
+#### Editing the line properties
+
+Line annotations have additional options in the Line Properties window. Open it by right-clicking a line or arrow annotation and selecting Properties from the context menu.
+
+
+
+### Edit an existing line annotation programmatically
+
+To modify an existing line annotation programmatically, use the editAnnotation() method.
+
+Here is an example of using editAnnotation():
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function editLineAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Line') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.annotationSelectorSettings.resizerShape = 'Circle';
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function editLineAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Line') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.annotationSelectorSettings.resizerShape = 'Circle';
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Default line settings during initialization
+
+Set default properties before creating the control using lineSettings.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+N> In both [Arrow](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#arrowsettings) and [Line](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#linesettings) annotations Settings, the Fill Color option is available only when an arrowhead style is applied at the Start or End. If both Start and End arrowhead styles are set to None, lines do not support fill rendering and the Fill Color option remains disabled.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## Set properties while adding Individual Annotation
+
+Set properties for individual annotation before creating the control using `lineSettings`.
+
+> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
+
+Refer to the following code snippet to set the default line settings.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function addLineWithSettings() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.lineSettings = { opacity: 0.5 }; // optional global default
+
+ viewer.annotation.addAnnotation('Line', {
+ offset: { x: 200, y: 230 },
+ pageNumber: 1,
+ vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }],
+ // To see fillColor, ensure arrowheads are applied (depending on version settings)
+ fillColor: '#ff1010ff',
+ strokeColor: '#fff000',
+ opacity: 0.9,
+ author: 'User 1',
+ thickness: 1
+ });
+ }
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Export and Import Annotation](../../annotations/export-import/export-annotation)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/perimeter-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/perimeter-annotation.md
new file mode 100644
index 000000000..0f4e464ad
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/perimeter-annotation.md
@@ -0,0 +1,657 @@
+---
+layout: post
+title: Perimeter annotation in React PDF Viewer | Syncfusion
+description: Learn to add, edit, and customize Perimeter measurement annotations in Syncfusion React PDF Viewer with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Perimeter annotation in React PDF Viewer
+
+Perimeter is a measurement annotation used to measure the length around a closed polyline in the PDF.
+
+
+
+## Add Perimeter Annotation
+
+### Add perimeter annotation via UI
+
+Use the annotation toolbar:
+- Click the Edit Annotation button in the PDF Viewer toolbar.
+- Click the Measurement Annotation dropdown.
+- Choose Perimeter, then draw the polyline on the page.
+
+N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode.
+
+
+
+### Enable perimeter mode
+
+The PDF Viewer library allows drawing measurement annotations programmatically after enabling perimeter mode in button clicks.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function perimeterMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Perimeter');
+ }
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Edit Perimeter Annotation
+
+### Edit perimeter annotation in UI
+
+You can select, move, and resize Perimeter annotations directly in the viewer:
+- Select a Perimeter to show its vertex handles.
+- Move: drag inside the shape to reposition it on the page.
+- Resize/reshape: drag any vertex handle to adjust the polyline points and size.
+- Delete or access more options from the context menu.
+
+#### Edit the properties of Perimeter annotations
+
+The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+#### Edit fill color
+
+The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+
+
+
+#### Edit stroke color
+
+The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+
+
+
+#### Edit thickness
+
+Edit border thickness using the range slider provided in the Edit Thickness tool.
+
+
+
+#### Edit opacity
+
+The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+
+
+
+### Edit an existing perimeter annotation programmatically
+
+To modify an existing perimeter annotation programmatically, use the editAnnotation() method.
+
+Here is an example of using editAnnotation():
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function editPerimeterAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Perimeter calculation') {
+ ann.annotationSelectorSettings.resizerShape = 'Circle';
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.fillColor = '#FFFF00';
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Editing scale ratio and unit of the perimeter measurement annotation
+
+The scale ratio and unit of measurement can be modified using the scale ratio option provided in the context menu of the PDF Viewer control.
+
+
+
+The Units of measurements support for the measurement annotations in the PDF Viewer are
+
+- Inch
+- Millimeter
+- Centimeter
+- Point
+- Pica
+- Feet
+
+
+
+## Setting default scale ratio settings during control initialization
+
+The properties of scale ratio for measurement annotation can be set before creating the control using measurementSettings as shown in the following code snippet,
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Edit Polygon Annotation
+
+### Edit Polygon Annotation in UI
+
+You can select, move, and resize Polygon annotations directly in the viewer:
+- Select a Polygon to show its vertex handles.
+- Move: drag inside the shape to reposition it on the page.
+- Resize/reshape: drag any vertex handle to adjust the polygon points and size.
+- Delete or access more options from the context menu.
+
+Use the toolbar to change appearance:
+- Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools.
+
+See the sections below for details.
+
+#### Edit the properties of area annotations
+
+The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+#### Edit fill color
+
+The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+
+
+
+#### Edit stroke color
+
+The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+
+
+
+#### Edit thickness
+
+Edit border thickness using the range slider provided in the Edit Thickness tool.
+
+
+
+#### Edit opacity
+
+The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+
+
+
+### Edit an existing polygon annotation programmatically
+
+Use editAnnotation on items from annotationCollection.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function editPolygonAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Polygon') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.fillColor = '#FFFF00';
+ ann.annotationSelectorSettings.resizerShape = 'Circle';
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Export and Import Annotation](../../annotations/export-import/export-annotation)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/radius-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/radius-annotation.md
new file mode 100644
index 000000000..89697cbfe
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/radius-annotation.md
@@ -0,0 +1,654 @@
+---
+layout: post
+title: Radius annotation in React PDF Viewer | Syncfusion
+description: Learn to add, edit, and customize Radius measurement annotations in Syncfusion React PDF Viewer with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Radius annotation in React PDF Viewer
+
+Radius is a measurement annotation used to measure the radius of a circle in the PDF.
+
+
+
+## Add Radius Annotation
+
+### Add radius annotation via UI
+
+Use the annotation toolbar:
+- Click the Edit Annotation button in the PDF Viewer toolbar.
+- Open the Measurement Annotation dropdown.
+- Choose Radius, then draw on the page.
+
+N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode.
+
+
+
+### Enable radius mode
+
+The PDF Viewer component allows drawing Radius annotations programmatically after enabling Radius mode in button clicks.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function radiusMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Radius');
+ }
+
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Edit Radius Annotation
+
+### Edit radius annotation in UI
+
+You can select, move, and resize Radius annotations directly in the viewer:
+- Select a Radius measurement to show its handles.
+- Move: drag the shape to reposition it on the page.
+- Resize: drag the handles to adjust its size.
+- Delete or access more options from the context menu.
+
+#### Edit the properties of radius annotations
+
+The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+#### Edit fill color
+
+The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+
+
+
+#### Edit stroke color
+
+The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+
+
+
+#### Edit thickness
+
+Edit border thickness using the range slider provided in the Edit Thickness tool.
+
+
+
+#### Edit opacity
+
+The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+
+
+
+### Edit an existing radius annotation programmatically
+
+Use editAnnotation on items from annotationCollection.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function editRadiusAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Radius calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.opacity = 0.8;
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function editRadiusAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Radius calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.opacity = 0.8;
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Default radius settings during initialization
+
+Set default [radiusSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#radiussettings) before creating the control.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ return (
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Edit Rectangle Annotation
+
+### Edit Rectangle Annotation in UI
+
+You can select, move, and resize Rectangle annotations directly in the viewer:
+- Select a Rectangle to show its resize handles.
+- Move: drag inside the shape to reposition it on the page.
+- Resize: drag any corner or side handle to adjust size.
+- Delete or access more options from the context menu.
+
+Use the toolbar to change appearance:
+- Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools.
+
+#### Edit the properties of area annotations
+
+The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+#### Edit fill color
+
+The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+
+
+
+#### Edit stroke color
+
+The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+
+
+
+#### Edit thickness
+
+Edit border thickness using the range slider provided in the Edit Thickness tool.
+
+
+
+#### Edit opacity
+
+The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+
+
+
+### Edit an existing rectangle annotation programmatically
+
+Use editAnnotation on items from annotationCollection.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import './index.css';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ function editRectangleAnnotation() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let i = 0; i < viewer.annotationCollection.length; i++) {
+ const ann = viewer.annotationCollection[i];
+ if (ann.subject === 'Rectangle') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.fillColor = '#FFFF00';
+ ann.annotationSelectorSettings.resizerShape = 'Circle';
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+
+ return (
+
+
+```
+
+Step 3: Import and inject modules
+
+Make sure the Annotation module is injected. If you also want text selection/search, include those as needed.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch);
+
+let pdfviewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+pdfviewer.appendTo('#PdfViewer');
+
+// Wire up custom annotation tools using setAnnotationMode
+const bindAnnoTools = () => {
+ const setMode = (mode: string) => pdfviewer.annotationModule.setAnnotationMode(mode as any);
+
+ document.getElementById('toolHighlight')?.addEventListener('click', () => setMode('Highlight'));
+ document.getElementById('toolUnderline')?.addEventListener('click', () => setMode('Underline'));
+ document.getElementById('toolStrike')?.addEventListener('click', () => setMode('Strikethrough'));
+ document.getElementById('toolRectangle')?.addEventListener('click', () => setMode('Rectangle'));
+ document.getElementById('toolCircle')?.addEventListener('click', () => setMode('Circle'));
+ document.getElementById('toolLine')?.addEventListener('click', () => setMode('Line'));
+ document.getElementById('toolArrow')?.addEventListener('click', () => setMode('Arrow'));
+ document.getElementById('toolPolygon')?.addEventListener('click', () => setMode('Polygon'));
+ document.getElementById('toolFreeText')?.addEventListener('click', () => setMode('FreeText'));
+ document.getElementById('toolInk')?.addEventListener('click', () => setMode('Ink'));
+ document.getElementById('toolSticky')?.addEventListener('click', () => setMode('StickyNotes'));
+ // Measurement tools
+ document.getElementById('toolDistance')?.addEventListener('click', () => setMode('Distance'));
+ document.getElementById('toolPerimeter')?.addEventListener('click', () => setMode('Perimeter'));
+ document.getElementById('toolArea')?.addEventListener('click', () => setMode('Area'));
+ document.getElementById('toolRadius')?.addEventListener('click', () => setMode('Radius'));
+
+ // Exit drawing mode
+ document.getElementById('toolNone')?.addEventListener('click', () => setMode('None'));
+};
+
+bindAnnoTools();
+```
+
+## Custom Tools Using Syncfusion Toolbar for a richer UI
+
+You can replace the plain buttons with Syncfusion EJ2 Toolbar items and icons similar to the custom toolbar sample. Here is a compact example showing a few common tools. Add the Toolbar package (@syncfusion/ej2-navigations) and wire each item’s click to setAnnotationMode.
+
+```ts
+import { Toolbar as Tool, ClickEventArgs, ItemModel } from '@syncfusion/ej2-navigations';
+
+// Add built-in icon classes via EJ2 CSS (match your version), for example:
+//
+
+const items: ItemModel[] = [
+ { text: 'Highlight', id: 'annHighlight', tooltipText: 'Highlight', prefixIcon: 'e-pv-highlight-icon' },
+ { text: 'Underline', id: 'annUnderline', tooltipText: 'Underline', prefixIcon: 'e-pv-underline-icon' },
+ { text: 'Strike', id: 'annStrike', tooltipText: 'Strikethrough', prefixIcon: 'e-pv-strikethrough-icon' },
+ { type: 'Separator' },
+ { text: 'Rect', id: 'annRect', tooltipText: 'Rectangle', prefixIcon: 'e-pv-shape-rectangle-icon' },
+ { text: 'Circle', id: 'annCircle', tooltipText: 'Circle', prefixIcon: 'e-pv-shape-circle-icon' },
+ { text: 'Line', id: 'annLine', tooltipText: 'Line', prefixIcon: 'e-pv-shape-line-icon' },
+ { text: 'Arrow', id: 'annArrow', tooltipText: 'Arrow', prefixIcon: 'e-pv-shape-arrow-icon' },
+ { text: 'Polygon', id: 'annPolygon', tooltipText: 'Polygon', prefixIcon: 'e-pv-shape-pentagon' },
+ { type: 'Separator' },
+ { text: 'Free Text', id: 'annFreeText', tooltipText: 'Free Text', prefixIcon: 'e-pv-freetext-icon' },
+ { text: 'Ink', id: 'annInk', tooltipText: 'Ink', prefixIcon: 'e-pv-inkannotation-icon' },
+ { text: 'Note', id: 'annSticky', tooltipText: 'Sticky Note', prefixIcon: 'e-pv-sticky-notes' },
+ { type: 'Separator' },
+ { text: 'Distance', id: 'annDistance', tooltipText: 'Distance', prefixIcon: 'e-pv-calibrate-distance-icon' },
+ { text: 'Perimeter', id: 'annPerimeter', tooltipText: 'Perimeter', prefixIcon: 'e-pv-calibrate-perimeter-icon' },
+ { text: 'Area', id: 'annArea', tooltipText: 'Area', prefixIcon: 'e-pv-calibrate-area-icon' },
+ { text: 'Radius', id: 'annRadius', tooltipText: 'Radius', prefixIcon: 'e-pv-calibrate-radius-icon' },
+ { type: 'Separator' },
+ { text: 'Exit', id: 'annNone', tooltipText: 'Exit drawing', align: 'Right' }
+];
+
+const annoToolbar = new Tool({
+ items,
+ overflowMode: 'Scrollable',
+ clicked: (args: ClickEventArgs) => {
+ switch (args.item.id) {
+ case 'annHighlight': pdfviewer.annotationModule.setAnnotationMode('Highlight'); break;
+ case 'annUnderline': pdfviewer.annotationModule.setAnnotationMode('Underline'); break;
+ case 'annStrike': pdfviewer.annotationModule.setAnnotationMode('Strikethrough'); break;
+ case 'annRect': pdfviewer.annotationModule.setAnnotationMode('Rectangle'); break;
+ case 'annCircle': pdfviewer.annotationModule.setAnnotationMode('Circle'); break;
+ case 'annLine': pdfviewer.annotationModule.setAnnotationMode('Line'); break;
+ case 'annArrow': pdfviewer.annotationModule.setAnnotationMode('Arrow'); break;
+ case 'annPolygon': pdfviewer.annotationModule.setAnnotationMode('Polygon'); break;
+ case 'annFreeText': pdfviewer.annotationModule.setAnnotationMode('FreeText'); break;
+ case 'annInk': pdfviewer.annotationModule.setAnnotationMode('Ink'); break;
+ case 'annSticky': pdfviewer.annotationModule.setAnnotationMode('StickyNotes'); break;
+ case 'annDistance': pdfviewer.annotationModule.setAnnotationMode('Distance'); break;
+ case 'annPerimeter': pdfviewer.annotationModule.setAnnotationMode('Perimeter'); break;
+ case 'annArea': pdfviewer.annotationModule.setAnnotationMode('Area'); break;
+ case 'annRadius': pdfviewer.annotationModule.setAnnotationMode('Radius'); break;
+ case 'annNone': pdfviewer.annotationModule.setAnnotationMode('None'); break;
+ }
+ }
+});
+annoToolbar.appendTo('#annotationToolbar');
+```
+
+Notes
+
+- setAnnotationMode accepts the annotation type name. Common values include: Highlight, Underline, Strikethrough, StickyNotes, FreeText, Ink, Rectangle, Circle, Line, Arrow, Polygon, Polyline, Distance, Perimeter, Area, Radius, and None to exit.
+- You can predefine default annotation styles using the corresponding settings properties (for example, areaSettings as shown in the Area annotation topic).
+- To combine with a fully custom viewer toolbar, see Custom Toolbar in React PDF Viewer.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotations/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotations/create-modify-annotation)
+- [Customize Annotation](../annotations/customize-annotation)
+- [Remove Annotation](../annotations/delete-annotation)
+- [Handwritten Signature](../annotations/signature-annotation)
+- [Export and Import Annotation](../annotations/export-import/export-annotation)
+- [Annotation Permission](../annotations/annotation-permission)
+- [Annotation in Mobile View](../annotations/annotations-in-mobile-view)
+- [Annotation Events](../annotations/annotation-event)
+- [Annotation API](../annotations/annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/customize-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/customize-annotation.md
new file mode 100644
index 000000000..94630b11f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/customize-annotation.md
@@ -0,0 +1,246 @@
+---
+layout: post
+title: Customize annotations in React PDF Viewer | Syncfusion
+description: Learn how to customize PDF annotations in Syncfusion React PDF Viewer using UI tools and programmatic settings (defaults and runtime edits).
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Customize annotations in React PDF Viewer
+
+You can customize annotation color, stroke color, thickness, opacity, and other properties using the built‑in UI or via code. This page summarizes common customization patterns and shows how to set defaults per annotation type.
+
+## Customize via UI
+
+Use the annotation toolbar after selecting an annotation:
+- Edit Color: changes the annotation fill/text color
+
+- Edit Stroke Color: changes border/line color (shapes and lines)
+
+- Edit Thickness: adjusts border/line thickness
+
+- Edit Opacity: adjusts transparency
+
+
+Type‑specific options (for example, Line Properties) are available from the context menu (right‑click > Properties) where supported.
+
+## Set default properties during initialization
+
+You can set defaults for specific annotation types when creating the PdfViewer instance. You can set author, subject, color, opacity using Annotation Settings. Below are examples using settings already used in the annotation type pages.
+
+TextMarkup Annotations:
+
+- Highlight : Set default properties before creating the control using [`highlightSettings`](./annotation-types/highlight-annotation/#set-default-properties-during-control-initialization)
+- Strikethrough: Use [`strikethroughSettings`](./annotation-types/strikethrough-annotation/#default-strikethrough-settings-during-initialization)
+- Underline: Use [`underlineSettings`](./annotation-types/underline-annotation/#default-underline-settings-during-initialization)
+- Squiggly: Use [`squigglySettings`](./annotation-types/Squiggly-annotation/#set-default-properties-during-control-initialization)
+
+Shape Annotations:
+
+- Line: Use [`lineSettings`](./annotation-types/line-annotation/#default-line-settings-during-initialization)
+- Arrow: Use [`arrowSettings`](./annotation-types/arrow-annotation/#default-arrow-settings-during-initialization)
+- Rectangle: Use [`rectangleSettings`](./annotation-types/rectangle-annotation/#default-rectangle-settings-during-initialization)
+- Circle : Use [`circleSettings`](./annotation-types/circle-annotation/#default-circle-settings-during-initialization)
+- Polygon: Use [`polygonSettings`](./annotation-types/polygon-annotation/#default-polygon-settings-during-initialization)
+
+Measurement Annotations:
+
+- Distance: Use [`distanceSettings`](./annotation-types/distance-annotation/#default-distance-settings-during-initialization)
+- Perimeter: Use [`perimeterSettings`](./annotation-types/perimeter-annotation/#default-perimeter-settings-during-initialization)
+- Area: Use [`areaSettings`](./annotation-types/area-annotation/#default-area-settings-during-initialization)
+- Radius: Use [`radiusSettings`](./annotation-types/radius-annotation/#default-radius-settings-during-initialization)
+- Volume: Use [`volumeSettings`](./annotation-types/volume-annotation/#default-volume-settings-during-initialization)
+
+Other Annotations:
+
+- Redaction: Use [`redactionSettings`](./annotation-types/redaction-annotation/#default-redaction-settings-during-initialization)
+- Free Text: Use [`freeTextSettings`](./annotation-types/free-text-annotation/#default-free-text-settings-during-initialization)
+- Ink (Freehand): Use [`inkAnnotationSettings`](./annotation-types/ink-annotation/#default-ink-settings-during-initialization)
+- Stamp: Use [`stampSettings`](./annotation-types/stamp-annotation/#default-stamp-settings-during-initialization)
+- Sticky Notes: Use [`stickyNotesSettings`](./annotation-types/sticky-notes-annotation/#default-sticky-notes-settings-during-initialization)
+
+Set defaults for specific annotation types when creating the PdfViewer instance. Below are examples using settings already used in the annotation type pages.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields);
+
+const pdfviewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
+ // Text markup defaults
+ highlightSettings: { author: 'QA', subject: 'Review', color: '#ffff00', opacity: 0.6 },
+ strikethroughSettings: { author: 'QA', subject: 'Remove', color: '#ff0000', opacity: 0.6 },
+ underlineSettings: { author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9 },
+ squigglySettings: { author: 'Guest User', subject: 'Corrections', color: '#00ff00', opacity: 0.9 },
+
+ // Shapes
+ lineSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 },
+ arrowSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 },
+ rectangleSettings: { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1 },
+ circleSettings: { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1 },
+ polygonSettings: { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1 },
+
+ // Measurements
+ distanceSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 },
+ perimeterSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 },
+ areaSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00' },
+ radiusSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00' },
+ volumeSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00' },
+
+ // Others
+ freeTextSettings: { borderColor: '#222222', thickness: 1, opacity: 1 },
+ inkAnnotationSettings: { color: '#0000ff', thickness: 3, opacity: 0.8 },
+ stampSettings: { opacity: 0.9 },
+ stickyNotesSettings: { author: 'QA', subject: 'Review', color: '#ffcc00', opacity: 1 }
+});
+
+pdfviewer.appendTo('#PdfViewer');
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation);
+
+const pdfviewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+
+ highlightSettings: { author: 'QA', subject: 'Review', color: '#ffff00', opacity: 0.6 },
+ strikethroughSettings: { author: 'QA', subject: 'Remove', color: '#ff0000', opacity: 0.6 },
+ underlineSettings: { author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9 },
+ squigglySettings: { author: 'Guest User', subject: 'Corrections', color: '#00ff00', opacity: 0.9 },
+
+ lineSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 },
+ arrowSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 },
+ rectangleSettings: { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1 },
+ circleSettings: { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1 },
+ polygonSettings: { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1 },
+
+ distanceSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 },
+ perimeterSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 },
+ areaSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00' },
+ radiusSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00' },
+ volumeSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00' },
+
+ freeTextSettings: { borderColor: '#222222', thickness: 1, opacity: 1 },
+ inkAnnotationSettings: { color: '#0000ff', thickness: 3, opacity: 0.8 },
+ stampSettings: { opacity: 0.9 },
+ stickyNotesSettings: { author: 'QA', subject: 'Review', color: '#ffcc00', opacity: 1 }
+});
+
+pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+pdfviewer.appendTo('#PdfViewer');
+{% endhighlight %}
+{% endtabs %}
+
+N> After changing defaults using UI tools (Edit Color, Edit Opacity, etc.), the values will reflect the latest selection for subsequent annotations in the same session.
+
+## Customize programmatically at runtime
+
+To update an existing annotation from code, modify its properties and call editAnnotation.
+
+Example: bulk‑update matching annotations.
+
+```html
+
+```
+```ts
+// Requires a PdfViewer instance named `pdfviewer`
+document.getElementById('bulkUpdateAnn')?.addEventListener('click', () => {
+ for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
+ const ann = pdfviewer.annotationCollection[i];
+ // Example criteria; customize as needed
+ if (ann.author === 'Guest' || ann.subject === 'Rectangle') {
+ ann.color = '#ff0000';
+ ann.opacity = 0.8;
+ // For shapes/lines you can also change strokeColor/thickness when applicable
+ // ann.strokeColor = '#222222';
+ // ann.thickness = 2;
+ pdfviewer.annotation.editAnnotation(ann);
+ }
+ }
+});
+```
+
+## Customize Annotation Settings
+
+Defines the settings of the annotations. You can change annotation settings like author name, height, width etc., using [annotationSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#annotationsettings) API
+
+```html
+
+```
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+
+ PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
+ TextSelection, TextSearch, Print, Annotation,FormFields, FormDesigner);
+
+ let viewer: PdfViewer = new PdfViewer();
+ viewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+ viewer.documentPath = "PDF_Succinctly.pdf";
+ // Change the annotation settings.
+ viewer.annotationSettings = {
+ author: 'XYZ',
+ minHeight: 10,
+ minWidth: 10,
+ maxWidth: 100,
+ maxHeight: 100,
+ isLock: false,
+ skipPrint: false,
+ skipDownload: false,
+ allowedInteractions: [AllowedInteraction.Select, AllowedInteraction.Move]
+ };
+ viewer.appendTo('#PdfViewer');
+```
+## Customize Annotation SelectorSettings
+
+Defines the settings of annotation selector. You can customize the annotation Selector using [annotationSelectorSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#annotationselectorsettings) API
+
+```html
+
+```
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-pdfviewer';
+
+ PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
+ TextSelection, TextSearch, Print, Annotation,FormFields,FormDesigner);
+
+ let viewer: PdfViewer = new PdfViewer();
+ viewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+ viewer.documentPath = "PDF_Succinctly.pdf";
+ // Change the annotation selector settings.
+ viewer.annotationSelectorSettings = {
+ selectionBorderColor: 'blue',
+ resizerBorderColor: 'red',
+ resizerFillColor: '#4070ff',
+ resizerSize: 8,
+ selectionBorderThickness: 1,
+ resizerShape: 'Circle',
+ selectorLineDashArray: [5, 6],
+ resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
+ resizerCursorType: CursorType.grab
+ };
+ viewer.appendTo('#PdfViewer');
+```
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotations/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotations/create-modify-annotation)
+- [Remove Annotation](../annotations/delete-annotation)
+- [Handwritten Signature](../annotations/signature-annotation)
+- [Export and Import Annotation](../annotations/export-import/export-annotation)
+- [Annotation Permission](../annotations/annotation-permission)
+- [Annotation in Mobile View](../annotations/annotations-in-mobile-view)
+- [Annotation Events](../annotations/annotation-event)
+- [Annotation API](../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/delete-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/delete-annotation.md
new file mode 100644
index 000000000..0f018f3d0
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/delete-annotation.md
@@ -0,0 +1,104 @@
+---
+layout: post
+title: Remove annotations in React PDF Viewer | Syncfusion
+description: Learn how to remove/delete PDF annotations in Syncfusion React PDF Viewer using UI options (context menu, toolbar, Delete key) and programmatic APIs.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Remove annotations in React PDF Viewer
+
+You can remove annotations using the built-in UI or programmatically. This page shows the common ways to delete annotations in the viewer.
+
+## Delete via UI
+
+You can delete a selected annotation in three ways:
+- Context menu: Right-click the annotation and choose Delete.
+
+- Secondary toolbar: Select the annotation and click the Delete button on the annotation toolbar.
+
+- Keyboard: Select the annotation and press the `Delete` key.
+
+## Delete programmatically
+
+You can delete the currently selected annotation, or delete a specific annotation by its id.
+
+```html
+
+
+
+
+
+```
+```ts
+import {
+ PdfViewer,
+ Toolbar,
+ Magnification,
+ Navigation,
+ LinkAnnotation,
+ ThumbnailView,
+ BookmarkView,
+ TextSelection,
+ TextSearch,
+ Print,
+ Annotation,
+ FormFields,
+ FormDesigner
+} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(
+ Toolbar,
+ Magnification,
+ Navigation,
+ LinkAnnotation,
+ ThumbnailView,
+ BookmarkView,
+ TextSelection,
+ TextSearch,
+ Print,
+ Annotation,
+ FormFields,
+ FormDesigner
+);
+
+// Create viewer
+const viewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+ // Standalone resources
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+});
+viewer.appendTo('#PdfViewer');
+
+document.getElementById('del')?.addEventListener('click', () => {
+ // Delete the selected annotation
+ viewer.annotation.deleteAnnotation();
+});
+
+document.getElementById('delbyId')?.addEventListener('click', () => {
+ // Delete the first annotation using its id from the annotation collection
+ if (viewer.annotationCollection.length > 0) {
+ viewer.annotation.deleteAnnotationById(viewer.annotationCollection[0].id);
+ }
+});
+```
+
+N> Deleting via API requires the annotation to exist in the current document. Ensure an annotation is selected when using deleteAnnotation(), or pass a valid id to deleteAnnotationById().
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotations/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotations/create-modify-annotation)
+- [Customize Annotation](../annotations/customize-annotation)
+- [Handwritten Signature](../annotations/signature-annotation)
+- [Export and Import Annotation](../annotations/export-import/export-annotation)
+- [Annotation Permission](../annotations/annotation-permission)
+- [Annotation in Mobile View](../annotations/annotations-in-mobile-view)
+- [Annotation Events](../annotations/annotation-event)
+- [Annotation API](../annotations/annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/export-import/export-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/export-import/export-annotation.md
new file mode 100644
index 000000000..06f5d586f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/export-import/export-annotation.md
@@ -0,0 +1,134 @@
+---
+layout: post
+title: Export annotations in React PDF Viewer | Syncfusion
+description: Learn how to Export annotations in Syncfusion React PDF Viewer using UI options and programmatic APIs.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Export annotations in React PDF Viewer
+
+PDF Viewer provides support to export annotations. You can export annotations from the PDF Viewer in two ways:
+
+- Using the built-in UI in the Comments panel (JSON or XFDF file)
+- Programmatically (JSON, XFDF, or as an object for custom handling)
+
+## Export using the UI (Comments panel)
+
+The Comments panel provides export actions in its overflow menu:
+
+- Export annotation to JSON file
+- Export annotation to XFDF file
+
+Follow the steps to export annotations:
+
+1. Open the Comments panel in the PDF Viewer.
+2. Click the overflow menu (three dots) at the top of the panel.
+3. Choose Export annotation to JSON file or Export annotation to XFDF file.
+
+This generates and downloads the selected format containing all annotations in the current document.
+
+
+
+## Export programmatically
+
+You can export annotations from code using [exportAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportannotation) ,[exportAnnotationsAsObject](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportannotationsasobject) and [exportAnnotationsAsBase64String](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportannotationsasbase64string) APIs.
+
+Use the following end-to-end example to initialize the viewer and export annotations as JSON, XFDF, or as an object.
+
+```html
+
+
+
+
+
+
+
+
+```
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, AllowedInteraction, AnnotationDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+// Inject required modules
+PdfViewer.Inject(
+ Toolbar,
+ Magnification,
+ Navigation,
+ LinkAnnotation,
+ ThumbnailView,
+ BookmarkView,
+ TextSelection,
+ TextSearch,
+ Print,
+ Annotation,
+ FormFields,
+ FormDesigner
+);
+
+// Initialize the viewer
+let viewer: PdfViewer = new PdfViewer();
+viewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+viewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+viewer.appendTo('#pdfViewer');
+
+// Wire up export actions
+
+//Export Annotation as JSON
+const btnJson = document.getElementById('ExportJSON');
+btnJson?.addEventListener('click', () => {
+ viewer.exportAnnotation(AnnotationDataFormat.Json);
+});
+
+//Export Annotation As XFDF
+const btnXfdf = document.getElementById('ExportXfdf');
+btnXfdf?.addEventListener('click', () => {
+ viewer.exportAnnotation(AnnotationDataFormat.Xfdf);
+});
+
+//Export Annotation As Object
+const btnObject = document.getElementById('ExportAsObject');
+btnObject?.addEventListener('click', () => {
+ viewer.exportAnnotationsAsObject().then((value: any) => {
+ // Persist or transmit the object as needed (DB/API). Keep for future import.
+ console.log('Exported annotation object:', value);
+ });
+});
+
+//Export Annotation as Base 64
+var exportObject1;
+document.getElementById('ExportAsBase64')?.addEventListener('click', function () {
+viewer.exportAnnotationsAsBase64String(AnnotationDataFormat.Json).then(function (value: any) {
+ exportObject1 = value;
+ console.log(exportObject1);
+ })
+ });
+```
+
+## Common use cases
+
+- Archive or share annotations as portable JSON/XFDF files
+- Save annotations alongside a document in your storage layer
+- Send annotations to a backend for collaboration or review workflows
+- Export as object for custom serialization and re-import later
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../../overview)
+- [Annotation Types](../../annotations/annotation-types/area-annotation)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Import Annotation](../export-import/import-annotation)
+- [Import Export Events](../export-import/export-import-events)
+- [Annotation Permission](../../annotations/annotation-permission)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/export-import/export-import-events.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/export-import/export-import-events.md
new file mode 100644
index 000000000..7f3ac64b1
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/export-import/export-import-events.md
@@ -0,0 +1,70 @@
+---
+layout: post
+title: Import/Export events for annotations in React PDF Viewer | Syncfusion
+description: Learn how to handle Import/Export events for annotations in the Syncfusion React PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Import/Export events for annotations in React PDF Viewer
+
+Import/Export events let you track and customize the full lifecycle of annotation data flowing into and out of the PDF Viewer.
+
+Use them to validate inputs, show progress UI, log audit trails, or block operations based on your business rules. Each event exposes typed event-args (ImportStartEventArgs, ImportSuccessEventArgs, ImportFailureEventArgs, ExportStartEventArgs, ExportSuccessEventArgs, ExportFailureEventArgs) describing the operation context.
+
+## Import events
+- [importStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importstart): Triggers when an import operation starts.
+- [importSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importsuccess): Triggers when annotations are successfully imported.
+- [importFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importfailed): Triggers when importing annotations fails.
+
+## Handle import events
+```ts
+viewer.importStart = (args: any) => {
+ console.log('Import started', args);
+};
+viewer.importSuccess = (args: any) => {
+ console.log('Import success', args);
+};
+viewer.importFailed = (args: any) => {
+ console.error('Import failed', args);
+};
+```
+
+## Export events
+- [exportStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportstart): Triggers when an export operation starts.
+- [exportSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportsuccess): Triggers when annotations are successfully exported.
+- [exportFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportfailed): Triggers when exporting annotations fails.
+
+## Handle export events
+```ts
+viewer.exportStart = (args: any) => {
+ console.log('Export started', args);
+};
+viewer.exportSuccess = (args: any) => {
+ console.log('Export success', args);
+};
+viewer.exportFailed = (args: any) => {
+ console.error('Export failed', args);
+};
+```
+
+Notes:
+- importStart/importSuccess/importFailed cover the lifecycle of annotation imports.
+- exportStart/exportSuccess/exportFailed cover the lifecycle of annotation exports.
+
+## See also
+
+- [Annotation Overview](../../overview)
+- [Annotation Types](../../annotations/annotation-types/area-annotation)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Export Annotation](../export-import/export-annotation)
+- [Import Annotation](../export-import/import-annotation)
+- [Annotation Permission](../../annotations/annotation-permission)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/export-import/import-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/export-import/import-annotation.md
new file mode 100644
index 000000000..231525fcb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/export-import/import-annotation.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Import annotations in React PDF Viewer | Syncfusion
+description: Learn how to import annotations in Syncfusion React PDF Viewer using UI options and programmatic APIs.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Import annotations in React PDF Viewer
+
+You can import annotations into the PDF Viewer in two ways:
+
+- Using the built-in UI in the Comments panel (import JSON or XFDF files)
+- Programmatically by passing an annotation object exported from the viewer
+
+## Import using the UI (Comments panel)
+
+The Comments panel provides import options in its overflow menu:
+
+- Import annotations from JSON file
+- Import annotations from XFDF file
+
+Steps:
+1. Open the Comments panel in the PDF Viewer.
+2. Click the overflow menu (three dots) at the top of the panel.
+3. Choose Import annotations from JSON file or Import annotations from XFDF file and pick the file.
+
+All annotations in the selected file will be applied to the current document.
+
+
+
+## Import programmatically (from object)
+
+Import annotations from an object previously exported using exportAnnotationsAsObject(). Only objects returned by the viewer can be re-imported using [importAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importannotation) method.
+
+The following end-to-end example initializes the viewer and wires a button to import annotations from a pasted/exported object.
+
+```html
+
+
+
+```
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, AllowedInteraction } from '@syncfusion/ej2-pdfviewer';
+
+// Inject required modules
+PdfViewer.Inject(
+ Toolbar,
+ Magnification,
+ Navigation,
+ LinkAnnotation,
+ ThumbnailView,
+ BookmarkView,
+ TextSelection,
+ TextSearch,
+ Print,
+ Annotation,
+ FormFields,
+ FormDesigner
+);
+
+// Initialize the viewer
+let viewer: PdfViewer = new PdfViewer();
+viewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+viewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+viewer.appendTo('#pdfViewer');
+
+//Exported Annotation as Object
+var exportedObject: string;
+const btnObject = document.getElementById('ExportAsObject');
+btnObject?.addEventListener('click', () => {
+ viewer.exportAnnotationsAsObject().then((value: any) => {
+ // Persist or transmit the object as needed (DB/API). Keep for future import.
+ console.log('Exported annotation object:', value);
+ exportedObject=value;
+ });
+});
+
+// Import from an exported object pasted in the textarea
+const btnImport = document.getElementById('ImportFromObject');
+btnImport?.addEventListener('click', () => {
+ viewer.importAnnotation(JSON.parse(exportedObject));
+});
+```
+
+## Common use cases
+
+- Restore annotations saved earlier (e.g., from a database or API)
+- Apply reviewer annotations shared as JSON/XFDF files via the Comments panel
+- Migrate or merge annotations between documents or sessions
+- Support collaborative workflows by reloading team annotations
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../../overview)
+- [Annotation Types](../../annotations/annotation-types/area-annotation)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Export Annotation](../export-import/export-annotation)
+- [Import Export Events](../export-import/export-import-events)
+- [Annotation Permission](../../annotations/annotation-permission)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/overview.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/overview.md
new file mode 100644
index 000000000..b85e521df
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/overview.md
@@ -0,0 +1,51 @@
+---
+layout: post
+title: Overview of Annotation in React PDF Viewer control | Syncfusion
+description: Learn about Annotations and how to add, edit, delete, and configure Annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Annotations overview in React PDF Viewer
+
+Annotations in PDFViewer are interactive elements that allow users to add notes, highlights, or text boxes directly to a PDF document. These annotations can be used to add context or feedback directly to PDF files, simplifying collaboration during document reviews.
+
+The PDF Viewer component provides a complete set of annotation tools for reviewing, measuring, and marking up PDFs in JavaScript (ES6).
+
+## Supported annotations
+
+- Text markup: [Highlight](../annotations/annotation-types/highlight-annotation), [Underline](../annotations/annotation-types/underline-annotation), [Squiggly](../annotations/annotation-types/Squiggly-annotation), [Strikethrough](../annotations/annotation-types/strikethrough-annotation)
+- Shapes: [Line](../annotations/annotation-types/line-annotation), p[Arrow](../annotations/annotation-types/arrow-annotation), [Rectangle](../annotations/annotation-types/rectangle-annotation), [Circle](../annotations/annotation-types/circle-annotation), [Polygon](../annotations/annotation-types/polygon-annotation)
+- Text boxes: [Free Text](../annotations/annotation-types/free-text-annotation)
+- Drawing: [Ink](../annotations/annotation-types/ink-annotation) (freehand)
+- Stamps: [Standard and custom stamps](../annotations/annotation-types/stamp-annotation)
+- Notes: [Sticky Notes](../annotations/annotation-types/sticky-notes-annotation) (comments)
+- Redaction: Mark and apply [redactions](../annotations/annotation-types/redaction-annotation)
+- Measurement: [Distance](../annotations/annotation-types/distance-annotation), [Perimeter](../annotations/annotation-types/perimeter-annotation), [Area](../annotations/annotation-types/area-annotation), [Radius](../annotations/annotation-types/radius-annotation), [Volume](../annotations/annotation-types/volume-annotation)
+
+## Annotation manipulation capabilities
+
+- [Create annotations](../annotations/create-modify-annotation): Use the toolbar, context menu, or APIs to add highlights, notes, shapes, and more directly onto the PDF document.
+- [Edit annotations](../annotations/create-modify-annotation.md): Modify existing annotations by moving, resizing, or updating text and style properties like color, opacity, and thickness.
+- [Customize annotations](../annotations/customize-annotation): Adjust appearance and behavior—such as fonts, fill colors, and opacity—through the UI or configuration options.
+- [Undo and redo annotations](../annotations/annotations-undo-redo): Revert or reapply annotation actions (add, edit, delete) using toolbar buttons or corresponding APIs.
+- [Import and export annotations](../annotations/export-import/export-annotation): Save and load annotations in JSON or XFDF formats to persist markups across sessions or share them with others.
+- Set [Permissions](../annotations/annotation-permission): Enable or disable annotation permission, ensuring compliance with document permissions.
+- Add and manage [comments](../annotations/comments): Insert, edit, and delete comments or sticky notes attached to annotations for clearer feedback and collaboration.
+
+## See also
+
+- [Annotation Types](../annotations/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotations/create-modify-annotation)
+- [Customize Annotation](../annotations/customize-annotation)
+- [Remove Annotation](../annotations/delete-annotation)
+- [Handwritten Signature](../annotations/signature-annotation)
+- [Export and Import Annotation](../annotations/export-import/export-annotation)
+- [Annotation Permission](../annotations/annotation-permission)
+- [Annotation in Mobile View](../annotations/annotations-in-mobile-view)
+- [Annotation Events](../annotations/annotation-event)
+- [Annotation Undo Redo](../annotations/annotations-undo-redo)
+- [Annotation API](../annotations/annotations-api)
\ No newline at end of file