Redaction
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-permission.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-permission.md
new file mode 100644
index 0000000000..807cc4a758
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-permission.md
@@ -0,0 +1,153 @@
+---
+layout: post
+title: Annotations Permission in Vue PDF Viewer | Syncfusion
+description: Learn here all about how to use annotation permissions in Syncfusion Vue PDF Viewer using programmatic APIs.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Annotation permissions in Vue
+
+Use [annotationSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotationsettings) to control creation-time permissions and default behavior for annotations in the PDF Viewer. These settings establish defaults for annotations created through the UI and programmatic flows.
+
+## Common permissions
+
+- `isLock`: Lock an annotation so it cannot be moved, resized, edited, or deleted.
+- `skipPrint`: Exclude annotations from the print output when printing from the viewer.
+- `skipDownload`: Exclude annotations from the exported/downloaded PDF.
+
+Example: set default `annotationSettings` as a component property on `PdfViewerComponent`.
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Individual permissions
+
+- `isPrint`: Controls whether a specific annotation participates in printing. Set to `false` to exclude only that annotation from print output.
+- `isLock`: Lock or unlock a specific annotation instance programmatically.
+
+Example: set per-annotation defaults for text markup, shapes, and measurements as component properties.
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## 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/vue-pdf-viewer-examples)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation-types)
+- [Create and Modify Annotation](./create-modify-annotation)
+- [Customize Annotation](./customize-annotation)
+- [Annotation Events](./annotation-event)
+- [Annotations API](./annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/area-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/area-annotation.md
new file mode 100644
index 0000000000..a423502a5a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/area-annotation.md
@@ -0,0 +1,461 @@
+---
+layout: post
+title: Add Area Measurement Annotations in Vue PDF Viewer | Syncfusion
+description: Learn how to enable, draw, customize, and manage Area measurement annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Area Measurement Annotations in Vue PDF Viewer
+Area is a measurement annotation used to calculate the surface of a closed region on a PDF page—ideal for engineering, construction, or design reviews.
+
+
+
+## Enable Area Measurement
+
+To enable Area annotations, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#toolbar)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Area Annotation
+
+### Add Area Using the Toolbar
+
+1. Open the **Annotation Toolbar**.
+2. Select **Measurement** → **Area**.
+3. Click points to define the polygon; double‑click to close and finalize the area.
+
+
+
+> **Tip:** If Pan mode is active, choosing a measurement tool switches the viewer into the appropriate interaction mode for a smoother workflow.
+
+### Enable Area Mode
+Programmatically switch the viewer into Area mode.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Area Mode
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Area Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#addannotation) API to draw an area by providing **vertexPoints** for a closed region.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Area Appearance
+Configure default properties using the [`areaSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#areasettings) property (for example, default **fill color**, **stroke color**, **opacity**).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Area (Move, Reshape, Edit, Delete)
+- **Move**: Drag inside the polygon to reposition it.
+- **Reshape**: Drag any vertex handle to adjust points and shape.
+
+### Edit Area
+
+#### Edit Area (UI)
+
+- Edit the **fill color** using the Edit Color tool.
+ 
+- Edit the **stroke color** using the Edit Stroke Color tool.
+ 
+- Edit the **border thickness** using the Edit Thickness tool.
+ 
+- Edit the **opacity** using the Edit Opacity tool.
+ 
+- Open **Right Click → Properties** for additional line‑based options.
+ 
+
+
+#### Edit Area Programmatically
+Update properties and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Area Annotation
+Delete Area Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set Default Properties During Initialization
+Apply defaults for Area using the [`areaSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#areasettings) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set Properties While Adding Individual Annotation
+Pass per‑annotation values directly when calling [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#addannotation).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Scale Ratio and Units
+- Use **Scale Ratio** from the context menu to set the actual‑to‑page scale.
+ 
+- Supported units include **Inch, Millimeter, Centimeter, Point, Pica, Feet**.
+ 
+
+### Set Default Scale Ratio During Initialization
+Configure scale defaults using [`measurementSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#measurementsettings).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Area Events
+
+Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see [**Annotation Events**](../annotation-event).
+
+## Export and Import
+Area measurements can be exported or imported with other annotations. For workflows and supported formats, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/arrow-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/arrow-annotation.md
new file mode 100644
index 0000000000..7b971c616d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/arrow-annotation.md
@@ -0,0 +1,442 @@
+---
+layout: post
+title: Arrow Annotation (Shape) in Vue PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Arrow annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Arrow Annotation (Shape) in Vue PDF Viewer
+Arrow annotations let users point, direct attention, or indicate flow on PDFs—useful for callouts, direction markers, and connectors during reviews. You can add arrows from the toolbar, switch to arrow mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.
+
+
+
+## Enable Arrow Annotation in the Viewer
+
+To enable Arrow annotations, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#toolbar)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Arrow Annotation
+
+### Add Arrow Annotation Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Arrow**.
+3. Click and drag on the PDF page to draw the arrow.
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+### Enable Arrow Mode
+Switch the viewer into arrow mode using `setAnnotationMode('Arrow')`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Arrow Mode
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Arrow Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#addannotation) API to draw an arrow at a specific location (defined by two **vertexPoints**).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Arrow Appearance
+Configure default arrow appearance (fill color, stroke color, thickness, opacity) using the [`arrowSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#arrowsettings) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> For **Line** and **Arrow** annotations, **Fill Color** is available only when an arrowhead style is applied at the **Start** or **End**. If both are `None`, lines do not render fill and the Fill option remains disabled.
+
+## Manage Arrow (Edit, Move, Resize, Delete)
+### Edit Arrow
+
+#### Edit Arrow (UI)
+- Select a Arrow to view resize handles.
+- Drag endpoints to adjust length/angle.
+- Edit stroke color, opacity, and thickness using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Line Properties**
+Open the Line Properties dialog via **Right Click → Properties**.
+
+
+
+#### Edit Arrow Programmatically
+
+Modify an existing Arrow programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Arrow
+
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+### Comments
+
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to arrow annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+
+Set properties for individual arrow annotations by passing values directly during [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#addannotation).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Arrow Annotation
+
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Arrow Events
+
+The PDF viewer provides annotation life-cycle events that notify when Arrow annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/circle-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/circle-annotation.md
new file mode 100644
index 0000000000..02c75c40eb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/circle-annotation.md
@@ -0,0 +1,436 @@
+---
+layout: post
+title: Circle Annotation (Shape) in Vue PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Circle annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Circle Annotation (Shape) in Vue PDF Viewer
+Circle annotations let users highlight circular regions or draw emphasis bubbles on PDFs for reviews and markups. You can add circles from the toolbar, switch to circle mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.
+
+
+
+## Enable Circle Annotation in the Viewer
+
+To enable Circle annotations, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#toolbar)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Circle Annotation
+
+### Apply Circle Annotation Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Circle**.
+3. Click and drag on the PDF page to draw the circle (ellipse).
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+### Enable Circle Mode
+
+Switch the viewer into circle mode using `setAnnotationMode('Circle')`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Circle Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Circle Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#addannotation) API to draw a circle (ellipse) at a specific location.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Circle Appearance
+Configure default circle appearance (fill color, stroke color, thickness, opacity) using the [`circleSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#circlesettings) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Circle (Edit, Move, Resize, Delete)
+
+### Edit Circle
+
+#### Edit Circle (UI)
+
+- Select a Circle to view resize handles.
+- Drag any side/corner to resize; drag inside the shape to move it.
+- Edit **fill**, **stroke**, **thickness**, and **opacity** using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit fill Color** tool
+
+
+- **Edit stroke Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Edit Thickness** slider
+
+
+#### Edit Circle Programmatically
+
+Modify an existing Circle programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Circle
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to circle annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+Set properties for individual circle annotations by passing values directly during [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#addannotation).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Circle Annotation
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Circle Events
+
+The PDF viewer provides annotation life-cycle events that notify when Circle annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/distance-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/distance-annotation.md
new file mode 100644
index 0000000000..47835cdaca
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/distance-annotation.md
@@ -0,0 +1,427 @@
+---
+layout: post
+title: Add Distance Annotations in Vue PDF Viewer | Syncfusion
+description: Learn how to enable, measure, customize, and manage Distance annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Distance Annotations in Vue PDF Viewer
+Distance is a measurement annotation used to measure the length between two points on a PDF page. Use it for precise reviews, markups, or engineering measurements.
+
+
+
+## Enable Distance Annotation
+
+To enable Distance annotation, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Distance Annotation
+
+### Add Distance Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select **Measurement** → **Distance**.
+3. Click to set the start point, then click again to set the end point.
+
+
+
+N> If Pan mode is active, choosing a measurement tool switches the viewer into the appropriate interaction mode for a smoother workflow.
+
+### Enable Distance Mode
+Programmatically switch the viewer into Distance mode.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Distance Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) API to draw a Distance measurement by providing two **vertexPoints**.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Distance Appearance
+Configure default properties using the [`Distance Settings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#distancesettings) property (for example, default **fill color**, **stroke color**, **opacity**).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Distance (Move, Resize, Edit, Delete)
+- **Move**: Drag the measurement to reposition it.
+- **Resize**: Drag the end handles to adjust the length.
+
+### Edit Distance
+
+#### Edit Distance (UI)
+Change **stroke color**, **thickness**, and **opacity** using the annotation toolbar tools.
+
+- Edit the **fill color** using the Edit Color tool.
+ 
+- Edit the **stroke color** using the Edit Stroke Color tool.
+ 
+- Edit the **border thickness** using the Edit Thickness tool.
+ 
+- Edit the **opacity** using the Edit Opacity tool.
+ 
+- Open **Right Click → Properties** for additional line-based options.
+
+
+
+#### Edit Distance Programmatically
+Update properties and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Distance Annotation
+
+Delete Distance Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set Default Properties During Initialization
+Apply defaults for Distance using the [`distanceSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#distancesettings) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set Properties While Adding Individual Annotation
+Pass per-annotation values directly when calling [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Scale Ratio and Units
+
+- Use **Scale Ratio** from the context menu to set the actual-to-page scale.
+ 
+- Supported units include **Inch, Millimeter, Centimeter, Point, Pica, Feet**.
+ 
+
+### Set Default Scale Ratio During Initialization
+Configure scale defaults using `measurementSettings`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Distance Events
+
+Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see [**Annotation Events**](../annotation-event).
+
+## Export and Import
+Distance measurements can be exported or imported with other annotations. For workflows and supported formats, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/free-text-annotation.md
new file mode 100644
index 0000000000..ecd0e01692
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/free-text-annotation.md
@@ -0,0 +1,381 @@
+---
+layout: post
+title: Add Free Text Annotations in Vue PDF Viewer | Syncfusion
+description: Learn how to enable, add, customize, and manage Free Text (text box) annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Free Text Annotations in Vue PDF Viewer
+Free Text annotations let users place editable text boxes on a PDF page to add comments, labels, or notes without changing the original document content.
+
+## Enable Free Text in the Viewer
+
+To enable free text annotations, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Free Text
+
+### Add Free Text Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Click **Free Text** to enable Free Text mode.
+3. Click on the page to place the text box and start typing.
+
+
+
+N>* When Pan mode is active, choosing Free Text switches the viewer into the appropriate selection/edit workflow for a smoother experience.
+
+### Enable Free Text Mode
+
+Programmatically switch to Free Text mode.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Free Text Programmatically
+
+Use the [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) API to create a text box at a given location with desired styles.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Free Text Appearance
+
+Configure default properties using the [`FreeTextSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#freeTextsettings) property (for example, default **fill color**, **border color**, **font color**, **opacity**, and **auto‑fit**).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To tailor right‑click options, see [**Customize Context Menu**](../../context-menu/custom-context-menu).
+
+## Modify, Edit, Delete Free Text
+
+- **Move/Resize**: Drag the box or use the resize handles.
+- **Edit Text**: Click inside the box and type.
+- **Delete**: Use the toolbar or context menu options. For deletion workflows and API details, see [**Delete Annotation**](../remove-annotations).
+
+### Edit Free Text
+
+#### Edit Free Text (UI)
+
+Use the annotation toolbar to configure font family, size, color, alignment, styles, fill color, stroke color, border thickness, and opacity.
+
+- Edit the **font family** using the Font Family tool.
+
+
+- Edit the **font size** using the Font Size tool.
+
+
+- Edit the **font color** using the Font Color tool.
+
+
+- Edit the **text alignment** using the Text Alignment tool.
+
+
+- Edit the **font styles** (bold, italic, underline) using the Font Style tool.
+
+
+- Edit the **fill color** using the Edit Color tool.
+
+
+- Edit the **stroke color** using the color palette in the Edit Stroke Color tool.
+
+
+- Edit the **border thickness** using the Edit Thickness tool.
+
+
+- Edit the **opacity** using the Edit Opacity tool.
+
+
+#### Edit Free Text Programmatically
+
+Update bounds or text and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Free Text annotations do **not** modify the original PDF text; they overlay editable text boxes on top of the page content.
+
+### Delete Free Text
+
+Delete Free Text via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set Default Properties During Initialization
+Apply defaults for new text boxes using the [`freeTextSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#freeTextsettings) property. You can also enable **Auto‑fit** so the box expands with content.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Free Text Annotation Events
+
+Listen to add/modify/select/remove events for Free Text and handle them as needed. For the full list and parameters, see [**Annotation Events**](../annotation-event).
+
+## Export and Import
+
+Free Text annotations can be exported or imported just like other annotations. For supported formats and steps, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/highlight-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/highlight-annotation.md
new file mode 100644
index 0000000000..fbe95bcb8d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/highlight-annotation.md
@@ -0,0 +1,414 @@
+---
+layout: post
+title: Highlight Text in Vue PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Highlight annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Highlight Annotation (Text Markup) in Vue PDF Viewer
+
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Highlight* text markup annotations in the Syncfusion **Vue PDF Viewer**.
+You can highlight text using the toolbar or context menu, programmatically invoke highlight mode, customize default settings, handle events, and export the PDF with annotations.
+
+## Enable Highlight in the Viewer
+
+To enable Highlight annotations, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and highlighting.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Highlight Annotation
+
+### Add Highlight Using the Toolbar
+
+1. Select the text you want to highlight.
+2. Click the **Highlight** icon in the annotation toolbar.
+ - If **Pan Mode** is active, the viewer automatically switches to **Text Selection** mode.
+
+
+
+### Apply highlight using Context Menu
+
+Right-click a selected text region → select **Highlight**.
+
+
+
+To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+
+### Enable Highlight Mode
+
+Switch the viewer into highlight mode using `setAnnotationMode('Highlight')`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Highlight Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Highlight Programmatically
+
+Use [`addAnnotation()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) to insert highlight at a specific location.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Highlight
+
+The PDF Viewer supports deleting existing annotations through both the UI and API.
+For detailed behavior, supported deletion workflows, and API reference, see [Delete Annotation](../remove-annotations)
+
+### Comments
+
+Use the [Comments panel](../comments) to add, view, and reply to threaded discussions linked to highlight annotations.
+It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation‑related notes within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+
+Set properties for individual annotation before creating the control using [highlightSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#highlightsettings)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable TextMarkup Annotation
+
+Disable text markup annotations (including highlight) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Highlight Events
+
+The PDF viewer provides annotation life-cycle events that notify when highlight annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer.
+For full details on supported formats and steps to export or import annotations, see [Export and Import Annotation](../export-import-annotations)
+
+## See Also
+
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/ink-annotation.md
new file mode 100644
index 0000000000..b859efccf5
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/ink-annotation.md
@@ -0,0 +1,309 @@
+---
+layout: post
+title: Add Freehand Drawing (Ink) Annotation in Vue PDF Viewer | Syncfusion
+description: Learn how to enable, draw, customize, and manage Ink (freehand) annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Freehand Drawing (Ink) Annotations in Vue PDF Viewer
+Ink annotations allow users to draw freehand strokes using mouse, pen, or touch input to mark content naturally.
+
+
+
+## Enable Freehand Drawing (Ink)
+
+To enable ink annotations, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Ink annotation
+
+### Draw Freehand Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Click **Draw Ink**.
+3. Draw freehand on the page.
+
+
+
+### Enable Ink Mode
+Switch the viewer into a ink annotation mode programmatically.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Ink Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) API to create an ink stroke by providing a path (an array of move/line commands), bounds, and target page.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Ink Appearance
+You can customize **stroke color**, **thickness**, and **opacity** using the [`inkAnnotationSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#inkannotationsettings) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Erase, Modify, or Delete Ink Strokes
+- **Move**: Drag the annotation.
+- **Resize**: Use selector handles.
+- **Change appearance**: Use Edit Stroke Color, Thickness, and Opacity tools.
+- **Delete**: Via toolbar or context menu.
+- **Customize context menu**: See [Customize Context Menu](../../context-menu/custom-context-menu).
+
+### Edit ink annotation in UI
+
+Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+- Edit the **stroke color** using the color palette in the Edit Stroke Color tool.
+
+
+
+- Edit **thickness** using the range slider in the Edit Thickness tool.
+
+
+
+- Edit **opacity** using the range slider in the Edit Opacity tool.
+
+
+
+### Edit Ink Programmatically
+
+Modify an existing ink programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Ink
+
+Delete Ink via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Ink Annotation Events
+
+The PDF viewer provides annotation life‑cycle events that notify when Ink annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+Ink annotations can be exported or imported along with other annotations.
+See [Export and Import annotations](../export-import-annotations).
+
+## See Also
+
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotation](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/line-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/line-annotation.md
new file mode 100644
index 0000000000..60c2f789b8
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/line-annotation.md
@@ -0,0 +1,449 @@
+---
+layout: post
+title: Line Annotation (Shape) in Vue PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Line annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Line Annotation (Shape) in Vue PDF Viewer
+
+Line annotations allow users to draw straight connectors or callouts on PDFs for markup, review, diagrams, or measurement guides. They support customization of color, thickness, opacity, and arrowheads, and can be edited, resized, deleted, or exported along with the document.
+
+
+
+## Enable Line Annotation in the Viewer
+
+To enable Line annotations, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#toolbar)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Line Annotation
+
+### Add Line Annotation Using the Toolbar
+
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Line**.
+3. Click and drag on the PDF page to draw the line.
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+### Enable Line Mode
+
+Switch the viewer into line mode using `setAnnotationMode('Line')`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Line Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Line Programmatically
+
+You can add line annotations using the [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#addannotation) API.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Line Appearance
+
+Configure default line appearance using the [`lineSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#linesettings) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Fill color is available only when an arrowhead style is applied at the Start or End of the line. If both are set to `None`, the Fill option is disabled.
+
+## Manage Line (Edit, Move, Resize, Delete)
+
+### Edit Line
+
+#### Edit Line Appearance (UI)
+- Select a line to view resize handles.
+- Drag endpoints to adjust length/angle.
+- Edit stroke color, opacity, and thickness using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Line Properties**
+Open the Line Properties dialog via **Right Click → Properties**.
+
+
+
+#### Edit Line Programmatically
+
+Modify an existing Line programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Line
+
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+### Comments
+
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to line annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+
+Set properties for individual line annotations using the [`lineSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#linesettings) API or by passing per‑annotation values during [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#addannotation).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Line Annotation
+
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Line Events
+
+The PDF viewer provides annotation life-cycle events that notify when Line annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/perimeter-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/perimeter-annotation.md
new file mode 100644
index 0000000000..bf5deaf907
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/perimeter-annotation.md
@@ -0,0 +1,428 @@
+---
+layout: post
+title: Add Perimeter Measurement Annotations in Vue PDF Viewer | Syncfusion
+description: Learn how to enable, draw, customize, and manage Perimeter measurement annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Perimeter Measurement Annotations in Vue PDF Viewer
+Perimeter is a measurement annotation used to calculate the length around a closed polyline on a PDF page—useful for technical markups and reviews.
+
+
+
+## Enable Perimeter Measurement
+
+To enable Perimeter annotations, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Perimeter Annotation
+
+### Add Perimeter Annotation Using the Toolbar
+
+1. Open the **Annotation Toolbar**.
+2. Select **Measurement** → **Perimeter**.
+3. Click multiple points to define the polyline; double‑click to close and finalize the perimeter.
+
+
+
+N> If Pan mode is active, choosing a measurement tool switches the viewer into the appropriate interaction mode for a smoother workflow.
+
+### Enable Perimeter Mode
+Programmatically switch the viewer into Perimeter mode.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Radius Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) API to insert a Radius measurement at a specific location by providing **width** and **height**.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Radius Appearance
+Configure default properties using the [`Radius Settings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#radiussettings) property (for example, default **fill color**, **stroke color**, **opacity**).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Radius (Move, Reshape, Edit, Delete)
+- **Move**: Drag inside the polygon to reposition it.
+- **Reshape**: Drag any vertex handle to adjust points and shape.
+
+### Edit Radius Annotation
+
+#### Edit Radius (UI)
+
+- Edit the **fill color** using the Edit Color tool.
+ 
+- Edit the **stroke color** using the Edit Stroke Color tool.
+ 
+- Edit the **border thickness** using the Edit Thickness tool.
+ 
+- Edit the **opacity** using the Edit Opacity tool.
+ 
+- Open **Right Click → Properties** for additional line‑based options.
+ 
+
+#### Edit Radius Programmatically
+
+Update properties and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Radius Annotation
+
+Delete Radius Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set Default Properties During Initialization
+Apply defaults for Radius using the [`radiusSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#radiussettings) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set Properties While Adding Individual Annotation
+Pass per-annotation values directly when calling [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Scale Ratio & Units
+- Use **Scale Ratio** from the context menu.
+ 
+- Supported units: Inch, Millimeter, Centimeter, Point, Pica, Feet.
+ 
+
+### Set Default Scale Ratio During Initialization
+Configure scale defaults using [`measurementSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#measurementsettings).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Radius Events
+Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see [**Annotation Events**](../annotation-event).
+
+## Export and Import
+Radius measurements can be exported or imported with other annotations. For workflows and supported formats, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/rectangle-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/rectangle-annotation.md
new file mode 100644
index 0000000000..fd80807d61
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/rectangle-annotation.md
@@ -0,0 +1,431 @@
+---
+layout: post
+title: Rectangle Annotation (Shape) in Vue PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Rectangle annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Rectangle Annotation (Shape) in Vue PDF Viewer
+Rectangle annotations let users highlight regions, group content, or draw callout boxes on PDFs for reviews and markups. You can add rectangles from the toolbar, switch to rectangle mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.
+
+
+
+## Enable Rectangle Annotation in the Viewer
+
+To enable Rectangle annotations, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#toolbar)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Rectangle Annotation
+
+### Add Rectangle Annotation Using the Toolbar
+
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Rectangle**.
+3. Click and drag on the PDF page to draw the rectangle.
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+### Enable Rectangle Mode
+Switch the viewer into rectangle mode using `setAnnotationMode('Rectangle')`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Rectangle Mode
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Rectangle Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#addannotation) API to draw a rectangle at a specific location.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Rectangle Appearance
+Configure default rectangle appearance (fill color, stroke color, thickness, opacity) using the [`rectangleSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#rectanglesettings) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Rectangle (Edit, Move, Resize, Delete)
+### Edit Rectangle
+
+#### Edit Rectangle (UI)
+- Select a rectangle to view resize handles.
+- Drag any side/corner to resize; drag inside the shape to move it.
+- Edit **fill**, **stroke**, **thickness**, and **opacity** using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit fill Color** tool
+
+
+- **Edit stroke Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Edit Thickness** slider
+
+
+
+#### Edit Rectangle Programmatically
+
+Modify an existing Rectangle programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Rectangle
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to rectangle annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+Set properties for individual rectangle annotations by passing values directly during [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#addannotation).
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Rectangle Annotation
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Rectangle Events
+
+The PDF viewer provides annotation life-cycle events that notify when Rectangle annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/redaction-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/redaction-annotation.md
new file mode 100644
index 0000000000..b1407db0a3
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/redaction-annotation.md
@@ -0,0 +1,332 @@
+---
+layout: post
+title: PDF Redaction in Vue PDF Viewer | Syncfusion
+description: Learn to add, edit, delete, and apply redaction annotations in Syncfusion Vue PDF Viewer with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# PDF Redaction in Vue PDF Viewer
+
+Redaction annotations permanently remove sensitive content from a PDF. You can draw redaction marks over text or graphics, redact entire pages, customize overlay text and styling, and apply redaction to finalize.
+
+
+
+## Add Redaction Annotation
+
+### Add redaction annotations in UI
+- Use the **Redaction** tool from the toolbar to draw over content to hide it.
+- Redaction marks can show overlay text (for example, "Confidential") and can be styled.
+
+
+
+Redaction annotations are interactive:
+- **Movable**
+
+- **Resizable**
+
+
+You can also add redaction annotations from the **context menu** by selecting content and choosing **Redact Annotation**.
+
+
+N> Ensure the **Redaction** tool is included in the toolbar. See [RedactionToolbar](../../Redaction/toolbar.md) for configuration.
+
+### Add redaction annotations programmatically
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+Track additions using the `annotationAdd` event on the viewer.
+
+## Edit Redaction Annotations
+
+### Edit redaction annotations in UI
+Use the viewer to select, move, and resize Redaction annotations. Use the context menu for additional actions.
+
+#### Edit the properties of redaction annotations in UI
+Use the property panel or **context menu → Properties** to change overlay text, font, fill color, and more.
+
+
+
+### Edit redaction annotations programmatically
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Delete redaction annotations
+
+### Delete in UI
+- **Right‑click → Delete**
+
+- Use the **Delete** button in the toolbar
+
+- Press **Delete** key
+
+### Delete programmatically
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Redact pages
+
+### Redact pages in UI
+Use the **Redact Pages** dialog to mark entire pages with options like **Current Page**, **Odd Pages Only**, **Even Pages Only**, and **Specific Pages**.
+
+
+### Add page redactions programmatically
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Apply redaction
+
+### Apply redaction in UI
+Click **Apply Redaction** to permanently remove marked content.
+
+
+
+N> **Redaction is permanent and cannot be undone.**
+
+### Apply redaction programmatically
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Applying redaction is **irreversible**.
+
+## Default redaction settings during initialization
+
+Configure defaults with the `redactionSettings` **component prop**:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+- [Annotation Overview](../overview)
+- [Redaction Overview](../../Redaction/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)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/squiggly-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/squiggly-annotation.md
new file mode 100644
index 0000000000..50a57e9163
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/squiggly-annotation.md
@@ -0,0 +1,396 @@
+---
+layout: post
+title: Squiggly Annotation (Text Markup) in Vue PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Squiggly annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Squiggly Annotation (Text Markup) in Vue PDF Viewer
+
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Squiggly* text markup annotations in the Syncfusion **Vue PDF Viewer**.
+You can add squiggly underlines from the toolbar or context menu, programmatically invoke squiggly mode, customize default settings, handle events, and export the PDF with annotations.
+
+## Enable Squiggly in the Viewer
+To enable Squiggly annotations, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and squiggly markup.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Squiggly Annotation
+
+### Add Squiggly Using the Toolbar
+
+1. Select the text you want to annotate.
+2. Click the **Squiggly** icon in the annotation toolbar.
+ - If **Pan Mode** is active, the viewer automatically switches to **Text Selection** mode.
+
+
+### Add Squiggly Using the Context Menu
+
+Right-click a selected text region → select **Squiggly**.
+
+To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+
+### Enable Squiggly Mode
+Switch the viewer into squiggly mode using `setAnnotationMode('Squiggly')`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Squiggly Mode
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Squiggly Programmatically
+Use [`addAnnotation()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) to insert a squiggly at a specific location.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Squiggly
+The PDF Viewer supports deleting existing annotations through both the UI and API.
+For detailed behavior, supported deletion workflows, and API reference, see [**Delete Annotation**](../remove-annotations)
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to squiggly annotations.
+It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation‑related notes within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+Set properties for individual squiggly annotations at the time of creation using the [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) API.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable TextMarkup Annotation
+Disable text markup annotations (including squiggly) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Squiggly Events
+The PDF viewer provides annotation life‑cycle events that notify when squiggly annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer.
+For full details on supported formats and steps to export or import annotations, see [**Export and Import annotations**](../export-import-annotations)
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/stamp-annotation.md
new file mode 100644
index 0000000000..10f308df33
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/stamp-annotation.md
@@ -0,0 +1,364 @@
+---
+layout: post
+title: Stamp Annotation in Vue PDF Viewer | Syncfusion
+description: Learn how to add, customize, and manage stamp annotations in the Syncfusion Vue PDF Viewer with various stamp types.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Stamp Annotation in Vue PDF Viewer
+
+Stamp annotations display predefined or custom stamps in PDF documents. The Vue PDF Viewer supports several stamp types: **Sign Here**, **Witness**, **Approved**, **AsIs**, **Expired**, **NotApproved**, **NotForPublicRelease**, **Confidential**, **TopSecret**, **ForComment**, **Recommended**, and **Custom stamps**.
+
+## Enable Stamp in the Viewer
+
+To enable Stamp annotations, inject the following modules:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Stamp Annotation
+
+### Add Stamp Using the Toolbar
+
+1. Click the **Stamp** tool in the toolbar.
+2. Select a stamp type from the dropdown.
+3. Click on the PDF page to place the stamp.
+
+
+
+### Add Stamp Using the Context Menu
+
+Right-click on the PDF page → select **Stamp** → choose a stamp type.
+
+### Enable Stamp Mode
+
+Switch the viewer to stamp mode using `setAnnotationMode()`:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Stamp Programmatically
+
+Use [`addAnnotation()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) to insert stamps at specific locations.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Custom Stamp
+
+Create custom stamps with base64-encoded images. Set up the custom stamp array via [`stampSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#stampsettings):
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Supported image format for custom stamps: **JPEG**. Only the base64-encoded image source is supported; local file paths are not supported.
+
+## Customize Stamp Appearance
+
+Configure default stamp settings using [`stampSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#stampsettings):
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Stamp (Edit, Delete)
+
+### Edit Stamp
+
+#### Edit Stamp in UI
+- Select a stamp and drag to move it.
+- Resize by dragging the corner handles.
+- Use the right-click context menu for additional options.
+
+#### Edit Stamp Programmatically
+
+Modify an existing stamp using `editAnnotation()`:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Stamp
+
+#### Delete in UI
+- Right-click the stamp → **Delete**
+- Press the **Delete** key while the stamp is selected
+
+#### Delete Programmatically
+
+Use `deleteAnnotationById()` to remove a stamp:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Stamp Events
+
+The PDF viewer provides annotation life-cycle events for stamps. For a complete list of events and details, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations, including stamps. For full details on export/import formats and procedures, see [**Export and Import Annotations**](../export-import-annotations)
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Annotation Events](../annotation-event)
+- [Export and Import Annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/sticky-notes.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/sticky-notes.md
new file mode 100644
index 0000000000..f8e2f67c44
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/sticky-notes.md
@@ -0,0 +1,362 @@
+---
+layout: post
+title: Sticky Notes Annotation in Vue PDF Viewer | Syncfusion
+description: Learn how to add, edit, and manage sticky note comments in the Syncfusion Vue PDF Viewer with threaded discussions.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Sticky Notes Annotation in Vue PDF Viewer
+
+Sticky Notes annotations are popup comments placed on PDF pages. Users can click to open a popup, add notes, and engage in threaded discussions via the **Comments panel** for collaborative feedback and review workflows.
+
+## Enable Sticky Notes in the Viewer
+
+To enable Sticky Notes annotations, inject the following modules:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Sticky Note Annotation
+
+### Add Sticky Note Using the Toolbar
+
+1. Click the **Sticky Note** icon in the toolbar.
+2. Click on any location on the PDF page to place a note marker.
+3. A comment popup appears where you can type your note.
+
+
+
+### Add Sticky Note Using the Context Menu
+
+Right-click on the PDF page → select **Add Sticky Note** (if enabled in context menu).
+
+### Enable Sticky Note Mode
+
+Switch to sticky note mode using `setAnnotationMode()`:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Sticky Note Programmatically
+
+Use [`addAnnotation()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) to insert sticky notes at specific locations:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Sticky Note Appearance
+
+Configure default sticky note settings using [`stickyNotesSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#stickynotes):
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Sticky Notes (Edit, Delete, Lock)
+
+### Edit Sticky Note
+
+#### Edit Sticky Note in UI
+- Click a sticky note icon to open the comment popup.
+- Edit the comment text directly in the popup.
+- Use the context menu for additional options like **Note Icon** selection.
+
+
+
+#### Edit Sticky Note Programmatically
+
+Use `editAnnotation()` to modify sticky note properties:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Sticky Note
+
+#### Delete in UI
+- Right-click the sticky note → **Delete**
+- Select the note and press the **Delete** key
+
+#### Delete Programmatically
+
+Use `deleteAnnotationById()` to remove a sticky note:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Lock Sticky Note
+
+Prevent editing of a sticky note by setting the `isLock` property to `true`:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Comments Panel
+
+Sticky notes integrate with the [**Comments panel**](../comments) for threaded discussions. Users can:
+- View all sticky notes for a document
+- Add and reply to comments
+- Track conversation threads
+- Filter comments by annotation type or author
+
+For detailed information on the Comments panel UI, workflows, and configuration, see [**Comments Panel**](../comments)
+
+## Handle Sticky Note Events
+
+The PDF viewer provides annotation life-cycle events for sticky notes. For a complete list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations, including sticky notes. For full details on export/import formats and procedures, see [**Export and Import Annotations**](../export-import-annotations)
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import Annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/strikethrough-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/strikethrough-annotation.md
new file mode 100644
index 0000000000..106253e360
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/strikethrough-annotation.md
@@ -0,0 +1,408 @@
+---
+layout: post
+title: Strikethrough Annotation (Text Markup) in Vue PDF Viewer | Syncfusion
+description: Learn how to apply, customize, and manage strikethrough text markup annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Strikethrough Annotation (Text Markup) in Vue PDF Viewer
+
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Strikethrough* text markup annotations in the Syncfusion **Vue PDF Viewer**.
+You can draw strikethrough lines through text from the toolbar or context menu, programmatically invoke strikethrough mode, customize default settings, handle events, and export the PDF with annotations.
+
+## Enable Strikethrough in the Viewer
+
+To enable Strikethrough annotations, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like text selection and strikethrough markup.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Strikethrough Annotation
+
+### Add Strikethrough Using the Toolbar
+
+1. Select the text you want to annotate.
+2. Click the **Strikethrough** icon in the annotation toolbar.
+ - If **Pan Mode** is active, the viewer automatically switches to **Text Selection** mode.
+
+
+
+### Add Strikethrough Using the Context Menu
+
+Right-click a selected text region → select **Strikethrough**.
+
+To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+
+### Enable Strikethrough Mode
+
+Switch the viewer into strikethrough mode using `setAnnotationMode('Strikethrough')`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Strikethrough Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Strikethrough Programmatically
+
+Use [`addAnnotation()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) to insert a strikethrough at a specific location.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Strikethrough
+
+The PDF Viewer supports deleting existing annotations through both the UI and API.
+For detailed behavior, supported deletion workflows, and API reference, see [**Delete Annotation**](../remove-annotations)
+
+### Comments
+
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to strikethrough annotations.
+It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation‑related notes within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+
+Set properties for individual strikethrough annotations at the time of creation using the [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) API.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable TextMarkup Annotation
+
+Disable text markup annotations (including strikethrough) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Strikethrough Events
+
+The PDF viewer provides annotation life-cycle events that notify when strikethrough annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer.
+For full details on supported formats and steps to export or import annotations, see [**Export and Import annotations**](../export-import-annotations)
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/underline-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/underline-annotation.md
new file mode 100644
index 0000000000..d3187813c4
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/underline-annotation.md
@@ -0,0 +1,408 @@
+---
+layout: post
+title: Underline Annotation (Text Markup) in Vue PDF Viewer | Syncfusion
+description: Learn how to apply, customize, and manage underline text markup annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Underline Annotation (Text Markup) in Vue PDF Viewer
+
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Underline* text markup annotations in the Syncfusion **Vue PDF Viewer**.
+You can apply underlines to text from the toolbar or context menu, programmatically invoke underline mode, customize default settings, handle events, and export the PDF with annotations.
+
+## Enable Underline in the Viewer
+
+To enable Underline annotations, inject the following modules into the Vue PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like text selection and underline markup.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Underline Annotation
+
+### Add Underline Using the Toolbar
+
+1. Select the text you want to annotate.
+2. Click the **Underline** icon in the annotation toolbar.
+ - If **Pan Mode** is active, the viewer automatically switches to **Text Selection** mode.
+
+
+
+### Add Underline Using the Context Menu
+
+Right-click a selected text region → select **Underline**.
+
+To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+
+### Enable Underline Mode
+
+Switch the viewer into underline mode using `setAnnotationMode('Underline')`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Underline Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Underline Programmatically
+
+Use [`addAnnotation()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) to insert an underline at a specific location.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Underline
+
+The PDF Viewer supports deleting existing annotations through both the UI and API.
+For detailed behavior, supported deletion workflows, and API reference, see [**Delete Annotation**](../remove-annotations)
+
+### Comments
+
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to underline annotations.
+It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation‑related notes within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+
+Set properties for individual underline annotations at the time of creation using the [`addAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) API.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable TextMarkup Annotation
+
+Disable text markup annotations (including underline) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Underline Events
+
+The PDF viewer provides annotation life-cycle events that notify when underline annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer.
+For full details on supported formats and steps to export or import annotations, see [**Export and Import annotations**](../export-import-annotations)
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/volume-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/volume-annotation.md
new file mode 100644
index 0000000000..a4aa83be1e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-types/volume-annotation.md
@@ -0,0 +1,398 @@
+---
+layout: post
+title: Volume Annotation in Vue PDF Viewer | Syncfusion
+description: Learn to add and customize volume measurement annotations in the Syncfusion Vue PDF Viewer for cubic and volumetric calculations.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Volume Annotation in Vue PDF Viewer
+
+Volume annotations calculate the volume of cubic shapes for technical drawings and architectural plans. They measure circular regions using width and height properties, with scale ratio configuration and unit conversion support.
+
+
+
+## Enable Volume Annotation
+
+To enable Volume annotations, inject the following modules:
+
+- [**Annotation**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Volume Annotation
+
+### Add Volume Using the Toolbar
+
+1. Click the **Volume** tool in the measurement toolbar.
+2. Click and drag on the PDF to define the cubic region (width and height).
+3. The volume is automatically calculated and displayed.
+
+### Enable Volume Mode
+
+Switch the viewer to volume mode using `setAnnotationMode()`:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Volume Programmatically
+
+Use [`addAnnotation()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#addannotation) to insert volume measurements at specific locations:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Volume Appearance
+
+Configure default volume settings such as **color**, **opacity**, and **thickness** using [`volumeSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#volumesettings):
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Scale Ratio Configuration
+
+Set a scale ratio to adjust measurement calculations for the PDF's drawing scale. Access via the **Scale Ratio dialog** (double-click a volume annotation):
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Volume (Edit, Delete)
+
+### Edit Volume
+
+#### Edit Volume in UI
+- Select a volume annotation and drag to move it.
+- Resize by dragging corner/edge handles.
+- Double-click to open the Scale Ratio dialog.
+- Use the context menu for additional options.
+
+#### Edit Volume Programmatically
+
+Modify an existing volume using `editAnnotation()`:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Volume
+
+#### Delete in UI
+- Right-click the volume annotation → **Delete**
+- Select the annotation and press the **Delete** key
+
+#### Delete Programmatically
+
+Use `deleteAnnotationById()` to remove a volume:
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Measurement Units
+
+Volume measurements support multiple unit conversions. Configure via [`measurementSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#measurementsettings):
+
+**Supported Units:**
+- Inch (in)
+- Millimeter (mm)
+- Centimeter (cm)
+- Point (pt)
+- Pica (pc)
+- Feet (ft)
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Volume Events
+
+The PDF viewer provides annotation life-cycle events for volume measurements. For a complete list of events and details, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations, including volume measurements. For full details on export/import formats and procedures, see [**Export and Import Annotations**](../export-import-annotations)
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Distance Annotation](distance-annotation)
+- [Radius Annotation](radius-annotation)
+- [Annotation Events](../annotation-event)
+- [Export and Import Annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-api.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-api.md
new file mode 100644
index 0000000000..36c3c25264
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-api.md
@@ -0,0 +1,216 @@
+---
+layout: post
+title: Annotations API in Vue PDF Viewer | Syncfusion
+description: Learn here all about how to read and configure annotations using APIs in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Annotations API in Vue
+
+The PDF Viewer provides APIs to read the loaded annotations and to configure global defaults for creating/editing annotations.
+
+| API | Description |
+|---|---|
+| [annotationCollection](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotationcollection) | Gets the loaded document annotation collection. |
+| [annotationDrawingOptions](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotationdrawingoptions) | Options to configure line-type annotation drawing behavior. |
+| [annotationSelectorSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotationselectorsettings) | Configures the annotation selector (selection UI). |
+| [annotationSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#annotationsettings) | Global defaults for all annotations. |
+| [areaSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#areasettings) | Defaults for Area annotations. |
+| [arrowSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#arrowsettings) | Defaults for Arrow annotations. |
+| [circleSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#circlesettings) | Defaults for Circle annotations. |
+| [customStamp](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#customstamp) | Defines custom stamp items. |
+| [customStampSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#customstampsettings) | Defaults for Custom Stamp annotations. |
+| [distanceSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#distancesettings) | Defaults for Distance annotations. |
+
+## annotationCollection
+
+Read the loaded document annotation collection from the viewer instance.
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation-types)
+- [Create and Modify Annotation](./create-modify-annotation)
+- [Annotation Toolbar](../toolbar-customization)
+- [Customize Annotation](./customize-annotation)
+- [Export and Import Annotation](../export-import)
+- [Annotation Events](./annotation-event)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-undo-redo.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-undo-redo.md
new file mode 100644
index 0000000000..085d4d1b79
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-undo-redo.md
@@ -0,0 +1,94 @@
+---
+layout: post
+title: Undo and Redo annotation in Vue PDF Viewer | Syncfusion
+description: Learn to undo and redo annotations changes in Syncfusion Vue PDF Viewer, with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Undo and redo annotations in Vue PDF Viewer
+
+The PDF Viewer supports undo and redo for annotations.
+
+
+
+Undo and redo actions can be performed by using either of the following methods:
+
+1. Using keyboard shortcuts (desktop):
+ After performing an annotation action, press `Ctrl+Z` to undo and `Ctrl+Y` to redo on Windows and Linux. On macOS, use `Command+Z` to undo and `Command+Shift+Z` to redo.
+2. Using the toolbar:
+ Use the **Undo** and **Redo** tools in the toolbar.
+
+Refer to the following code snippet to call undo and redo actions from the client side.
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation-types)
+- [Annotation Toolbar](../toolbar-customization)
+- [Create and Modify Annotation](./create-modify-annotation)
+- [Customize Annotation](./customize-annotation)
+- [Remove Annotation](./delete-annotation)
+- [Handwritten Signature](../signature-annotation)
+- [Export and Import Annotation](../export-import)
+- [Annotation in Mobile View](./annotations-in-mobile-view)
+- [Annotation Events](./annotation-event)
+- [Annotations API](./annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md
index 55b6d48de9..9cb5ed65f8 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md
@@ -1,115 +1,294 @@
---
layout: post
-title: Comments in Vue PDF Viewer component | Syncfusion
-description: Learn about comments, replies, and status in the Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more.
-control: PDF Viewer
+title: Comments in Vue PDF Viewer | Syncfusion
+description: Learn how to add, reply to, edit, set status for, delete, and read comments for annotations in the Syncfusion Vue PDF Viewer.
platform: document-processing
+control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# Comments in Vue PDF Viewer control
+# Comments in Vue PDF Viewer
+
+The PDF Viewer lets you add, edit, reply to, set status for, and delete comments on the following annotation types:
+
+* Shape annotation
+* Stamp annotation
+* Sticky note annotation
+* Measurement annotation
+* Text markup annotation
+* Free text annotation
+* Ink annotation
-The PDF Viewer control provides options to add, edit, and delete comments for the following annotations in PDF documents:
+
-* Shape annotation
-* Stamp annotation
-* Sticky note annotation
-* Measurement annotation
-* Text markup annotation
-* Free text annotation
-* Ink annotation
+## Add a comment to an annotation (UI)
-
+Use the **Comments panel** to manage annotation comments, replies, and status.
-## Adding a comment to the annotation
+### Open the Comments panel
+Open the panel in any of these ways:
-Annotation comments, replies, and status can be managed in the PDF document using the comment panel.
+1. **Annotation toolbar**
+ * Click **Edit Annotation** in the toolbar to show the secondary toolbar.
+ * Click **Comment Panel** to open the panel.
+2. **Context menu**
+ * Select an annotation and **right-click** it.
+ * Choose **Comment** from the context menu.
+3. **Double-click**
+ * Select the annotation and **double-click** it to open the panel.
-### Comment panel
+If the panel is already open, selecting an annotation highlights its thread so you can view or add comments.
-Annotation comments can be added to the PDF using the comment panel. The comment panel can be opened in the following ways:
+### Add comments and replies
+- Select the annotation in the PDF.
+- The corresponding thread is highlighted in the Comments panel.
+- Add comments and any number of replies in the panel.
-1. Using the annotation menu
+
- * Click the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it.
- * Click the Comment Panel button. The comment panel opens.
+### Set comment or reply status
+- Select a comment in the panel.
+- Click **More options** on the comment or reply container.
+- Choose **Set Status**, then pick a status.
-2. Using Context menu
+
- * Select the annotation in the PDF document and right-click it.
- * Select Comment from the context menu.
+### Edit comments and replies
+You can edit comments in two ways:
-3. Using the Mouse click
+1. **Context menu**
+ * Select the comment in the panel and click **More options**.
+ * Choose **Edit** to switch to an editable text box.
+2. **Mouse double-click**
+ * Double-click the comment or reply to edit its content.
- * Select the annotation in the PDF document and double-click it. The comment panel opens.
+
-If the comment panel is already open, select the annotation and add comments using the panel.
+### Delete comments or replies
+- Select the comment in the panel.
+- Click **More options** → **Delete**.
-### Adding comments
+
-* Select the annotation in the PDF document.
-* The corresponding comment thread is highlighted in the comment panel.
-* Add comments and replies using the comment panel.
+> Deleting the **root** comment from the Comments panel also deletes the associated annotation.
-
+---
-### Adding Comment Replies
+## Add Comments to the annotation Programmatically
-* Multiple replies can be added to a comment.
-* After adding a comment, add replies as needed.
+### Add comments and replies programmatically
-### Adding Comment or Reply Status
+Comments can be added to the PDF document programmatically using the `editAnnotation` property.
-* Select the annotation comment in the comment panel.
-* Click More options in the comment or reply container.
-* Select Set Status from the context menu.
-* Choose a status for the comment.
+The following example shows how to add comments and reply in response to a button click.
-
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-### Editing the comments and comments replies of the annotations
+
+
+
+
+
+
+
+
+
-Comments, replies, and status can be edited using the comment panel.
+
-Edit comments and replies in the following ways:
+{% endhighlight %}
+{% endtabs %}
-1. Using the Context menu
+N> When using a server-backed configuration, add the `serviceUrl` property to the `` tag and remove the `resourceUrl` property. Replace `serviceUrl` with the URL of your hosted PDF Viewer Server backend.
- * Select the annotation comment in the comment panel.
- * Click More options in the comment or reply container.
- * Select Edit from the context menu.
- * An editable text box appears. Change the content of the comment or reply.
+### Edit comments and replies programmatically
-2. Using the Mouse Click
+Comments can be edited in the PDF document programmatically using the `editAnnotation` property.
- * Select the annotation comment in the comment panel.
- * Double-click the comment or reply content.
- * An editable text box appears. Change the content of the comment or reply.
+The following example shows how to edit comments and reply in response to a button click.
-### Editing Comment or Reply Status
+{% tabs %}
+{% highlight html tabtitle="Standalone" %}
-* Select the annotation comment in the comment panel.
-* Click More options in the comment or reply container.
-* Select Set Status from the context menu.
-* Choose a status for the comment.
-* None is the default state. Selecting None clears the status indicator; the comment or reply remains visible.
+
+
+
+
+
+
+
+
+
+
+
-
+
-N> Deleting the root comment from the comment panel also deletes the associated annotation.
+{% endhighlight %}
+{% endtabs %}
-## How to check the comments added by the user
+### Read comments added by users
Comments added to the PDF document can be read using the annotation's `comments` property.
@@ -119,62 +298,148 @@ The following example logs comments in response to a button click.
{% highlight html tabtitle="Standalone" %}
-
-
-
-
+
+
+
+
+
+
-
+
+{% endhighlight %}
+{% endtabs %}
-const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+## Annotation and Review Workflow Patterns
-provide('PdfViewer', [
- Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
- Annotation, ThumbnailView, Print, TextSelection, TextSearch,
- FormFields, FormDesigner, PageOrganizer
-]);
+The PDF Viewer supports review workflows by combining [annotations](./overview), [comments](./comments), and threaded [replies](./comments#add-comments-and-replies). These capabilities help reviewers mark content, discuss changes, and navigate feedback efficiently during document review cycles.
-const documentLoad = () => {
- const viewer = pdfviewer.value.ej2Instances;
- document.getElementById('checkComments')?.addEventListener('click', () => {
- const annotationCollections = viewer.annotationCollection || [];
+### Understanding Review Workflows
- for (let x = 0; x < annotationCollections.length; x++) {
- const ann = annotationCollections[x];
- console.log('annotation Id : ' + ann.annotationId);
+Annotations act as visual markers during review—such as [highlights](./annotation-types/highlight-annotation), [shapes](./annotation-types/area-annotation), [stamps](./annotation-types/stamp-annotation), or [sticky notes](./annotation-types/sticky-notes) while [comments](./comments) provide a communication space attached to each annotation. Multiple reviewers can participate in these annotation threads, making the review process more organized and traceable.
- const comments = ann.comments || [];
- for (let y = 0; y < comments.length; y++) {
- const comment = comments[y];
- console.log(`comment[${y}] : ${comment.note}`);
- }
- if (ann.note) {
- console.log('note : ' + ann.note);
- }
- }
- });
-};
-
+During a review cycle, users typically:
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
+- Add annotations to indicate a change, highlight text, or mark an issue.
+
+- Use comments to explain the purpose of the annotation.
+
+- Reply to comments to maintain a review discussion thread.
+- Navigate between comments and related annotations for clarity.
+- Finalize review by addressing or resolving each thread.
+### Using Comments in Review Workflows
+Comments are a key part of review workflows. They allow reviewers to communicate directly on annotations without altering the underlying PDF content.
-{% endhighlight %}
-{% endtabs %}
+Key behaviors in review workflows:
+
+- Comments allow multiple reviewers to discuss changes directly on annotations.
+- Replies help maintain a threaded discussion during review.
+- Selecting a comment highlights the related annotation, improving navigation.
+- Comments can be combined with Sticky Notes, Highlights, Shapes, Stamps, and other annotation types.
+
+
+
+### Why Review Workflow Patterns Matter
+
+Review workflows help teams:
+
+- Centralize feedback inside the PDF document itself.
+- Maintain a clear discussion history on each annotation.
+- Avoid duplicated or conflicting feedback.
+- Navigate long documents quickly using comment threads.
+- Improve clarity when multiple reviewers participate.
+
+These review patterns are especially useful in content editing, design review, legal documentation, product validation, and quality control workflows.
->The annotation will be deleted on deleting the comment using comment panel.
+## See also
+- [Annotation Overview](./overview)
+- [Annotation Types](./annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](./create-modify-annotation)
+- [Customize Annotation](./customize-annotation)
+- [Remove Annotation](./delete-annotation)
+- [Handwritten Signature](./signature-annotation)
+- [Export and Import Annotation](../export-import/export-annotation)
+- [Annotation Permission](./annotation-permission)
+- [Annotation in Mobile View](./annotations-in-mobile-view)
+- [Annotation Events](./annotation-event)
+- [Annotation API](./annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/create-modify-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/create-modify-annotation.md
new file mode 100644
index 0000000000..0f97f1fa77
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/create-modify-annotation.md
@@ -0,0 +1,243 @@
+---
+layout: post
+title: Create and modify annotations in Vue PDF Viewer | Syncfusion
+description: Learn how to create and modify annotations in Syncfusion Vue PDF Viewer with UI and programmatic examples, plus quick links to all annotation types.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Create and modify annotations in Vue
+
+The PDF Viewer annotation tools add, edit, and manage markups across documents. This page provides an overview with quick navigation to each annotation type and common creation and modification workflows.
+
+## Quick navigation to annotation types
+
+Jump directly to a specific annotation type for detailed usage and examples:
+
+TextMarkup annotations:
+
+- Highlight: [Highlight annotation](../annotation-types/highlight-annotation)
+- Strikethrough: [Strikethrough annotation](../annotation-types/strikethrough-annotation)
+- Underline: [Underline annotation](../annotation-types/underline-annotation)
+- Squiggly: [Squiggly annotation](../annotation-types/squiggly-annotation)
+
+Shape annotations:
+
+- Line: [Line annotation](../annotation-types/line-annotation)
+- Arrow: [Arrow annotation](../annotation-types/arrow-annotation)
+- Rectangle: [Rectangle annotation](../annotation-types/rectangle-annotation)
+- Circle: [Circle annotation](../annotation-types/circle-annotation)
+- Polygon: [Polygon annotation](../annotation-types/polygon-annotation)
+
+Measurement annotations:
+
+- Distance: [Distance annotation](../annotation-types/distance-annotation)
+- Perimeter: [Perimeter annotation](../annotation-types/perimeter-annotation)
+- Area: [Area annotation](../annotation-types/area-annotation)
+- Radius: [Radius annotation](../annotation-types/radius-annotation)
+- Volume: [Volume annotation](../annotation-types/volume-annotation)
+
+Other annotations:
+
+- Redaction: [Redaction annotation](../annotation-types/redaction-annotation)
+- Free Text: [Free text annotation](../annotation-types/free-text-annotation)
+- Ink (Freehand): [Ink annotation](../annotation-types/ink-annotation)
+- Stamp: [Stamp annotation](../annotation-types/stamp-annotation)
+- Sticky Notes: [Sticky notes annotation](../annotation-types/sticky-notes-annotation)
+
+N> Each annotation type page includes both UI steps and programmatic examples specific to that type.
+
+## Create annotations
+
+### Create via UI
+
+- Open the annotation toolbar in the PDF Viewer.
+- Choose the required tool (for example, Shape, Free text, Ink, Stamp, Redaction).
+- Click or drag on the page to place the annotation.
+
+
+
+Note:
+- When pan mode is active and a shape or stamp tool is selected, the viewer switches to text select mode automatically.
+- Property pickers in the annotation toolbar let users choose color, stroke color, thickness, and opacity while drawing.
+
+### Create programmatically
+
+Annotations can be created programmatically by calling the `addAnnotation()` method on the annotation module. You must provide the annotation object with all required properties.
+
+Example: Create a Rectangle annotation programmatically
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Modify annotations
+
+### Modify via UI
+
+- Select the annotation on the page.
+- Use the annotation toolbar to change properties (color, opacity, thickness).
+- Right-click for a context menu with additional options like Properties or Delete.
+- Drag or resize the annotation to change its position or dimensions.
+
+### Modify programmatically
+
+Retrieve an annotation, modify its properties, and apply changes using `editAnnotation()`.
+
+Example: Modify an annotation's color and opacity
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> For type-specific edit examples (for example, editing line endings, moving stamps, or updating sticky note bounds), see the corresponding annotation type page linked above.
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation-types)
+- [Annotation Toolbar](../toolbar-customization)
+- [Customize Annotation](./customize-annotation)
+- [Delete Annotation](./delete-annotation)
+- [Annotation Permission](./annotation-permission)
+- [Annotation Events](./annotation-event)
+- [Annotations API](./annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/custom-data.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/custom-data.md
new file mode 100644
index 0000000000..30c619c600
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/custom-data.md
@@ -0,0 +1,219 @@
+---
+layout: post
+title: Custom Data in annotations in Vue PDF Viewer | Syncfusion
+description: Learn here all about how to use add custom Data in annotation in Syncfusion Vue PDF Viewer Component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Custom data in annotations in Vue
+
+Annotations can include custom key–value data via the `customData` property. This is supported at two levels:
+
+- Default level via `annotationSettings`: applies to all annotations created through the UI.
+- Per-annotation-type level: provide `customData` inside specific annotation-type settings (for example, `highlightSettings`, `rectangleSettings`).
+
+The `customData` value can be any JSON-serializable object. It is preserved during annotation export/import and is available at runtime on the annotation object.
+
+## Default custom data (annotationSettings)
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Custom data for Individual Annotation
+
+Provide customData inside individual annotation-type settings when you want specific payloads for different tools.
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Retrieve custom data at runtime
+
+You can access the customData for any annotation through the viewer's annotationCollection. For example, wire a button click to iterate all annotations and read their custom payloads.
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Note
+
+- `customData` can be any JSON-serializable object and is stored with the annotation.
+- Custom data persists during export and import operations.
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation-types)
+- [Create and Modify Annotation](./create-modify-annotation)
+- [Customize Annotation](./customize-annotation)
+- [Annotation Events](./annotation-event)
+- [Annotations API](./annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/custom-tools.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/custom-tools.md
new file mode 100644
index 0000000000..ac2eb7e4af
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/custom-tools.md
@@ -0,0 +1,180 @@
+---
+layout: post
+title: Custom annotation tools in Vue PDF Viewer | Syncfusion
+description: Learn how to build a custom toolbar for Syncfusion Vue PDF Viewer and switch annotation tools programmatically using setAnnotationMode.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Custom annotation tools in Vue PDF Viewer
+
+The PDF Viewer supports adding a custom toolbar and toggling annotation tools programmatically using the `setAnnotationMode` method. The viewer can enable tools such as Highlight, Underline, Rectangle, Circle, Arrow, Free Text, Ink, and measurement annotations (Distance, Perimeter, Area, Radius).
+
+Follow these steps to build a minimal custom annotation toolbar.
+
+## Step 1: Start from a basic PDF Viewer sample
+
+Refer to the [Getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a basic sample.
+
+## Step 2: Add a lightweight custom toolbar with Vue buttons
+
+Add buttons for the tools to expose. The sample below uses plain Vue buttons for simplicity; replace with a Syncfusion ToolbarComponent for a richer UI if desired.
+
+## Step 3: Import and inject modules
+
+Ensure the `Annotation` module is injected. Include text selection and search modules if those capabilities are required.
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Custom tools using Syncfusion Toolbar for a richer UI
+
+Replace the plain buttons with a Syncfusion `ToolbarComponent` and icons for a richer UI. Add the `@syncfusion/ej2-vue-navigations` package and wire each item's `clicked` handler to `setAnnotationMode`.
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation-types)
+- [Create and Modify Annotation](./create-modify-annotation)
+- [Customize Annotation](./customize-annotation)
+- [Annotation Toolbar](../toolbar-customization)
+- [Annotation Events](./annotation-event)
+- [Annotations API](./annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/customize-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/customize-annotation.md
new file mode 100644
index 0000000000..7bbfc61b8d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/customize-annotation.md
@@ -0,0 +1,298 @@
+---
+layout: post
+title: Customize annotations in Vue PDF Viewer | Syncfusion
+description: Learn how to customize PDF annotations in Syncfusion Vue 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 Vue
+
+Annotation appearance and behavior (for example color, stroke color, thickness, and opacity) can be customized using the built‑in UI or programmatically. 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 or line color for shapes and lines types.
+
+- Edit thickness: adjusts border or 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
+
+Set defaults for specific annotation types when creating the `PdfViewer` instance. Configure properties such as author, subject, color, and opacity using annotation settings. The examples below reference settings used on the annotation type pages.
+
+Text markup annotations:
+
+- Highlight: Set default properties before creating the control using [`highlightSettings`](../annotation-types/highlight-annotation)
+- Strikethrough: Use [`strikethroughSettings`](../annotation-types/strikethrough-annotation)
+- Underline: Use [`underlineSettings`](../annotation-types/underline-annotation)
+- Squiggly: Use [`squigglySettings`](../annotation-types/squiggly-annotation)
+
+Shape annotations:
+
+- Line: Use [`lineSettings`](../annotation-types/line-annotation)
+- Arrow: Use [`arrowSettings`](../annotation-types/arrow-annotation)
+- Rectangle: Use [`rectangleSettings`](../annotation-types/rectangle-annotation)
+- Circle: Use [`circleSettings`](../annotation-types/circle-annotation)
+- Polygon: Use [`polygonSettings`](../annotation-types/polygon-annotation)
+
+Measurement annotations:
+
+- Distance: Use [`distanceSettings`](../annotation-types/distance-annotation)
+- Perimeter: Use [`perimeterSettings`](../annotation-types/perimeter-annotation)
+- Area: Use [`areaSettings`](../annotation-types/area-annotation)
+- Radius: Use [`radiusSettings`](../annotation-types/radius-annotation)
+- Volume: Use [`volumeSettings`](../annotation-types/volume-annotation)
+
+Other annotations:
+
+- Free Text: Use [`freeTextSettings`](../annotation-types/free-text-annotation)
+- Ink: Use [`inkSettings`](../annotation-types/ink-annotation)
+- Stamp: Use [`stampSettings`](../annotation-types/stamp-annotation)
+- Sticky Notes: Use [`stickyNotesSettings`](../annotation-types/sticky-notes-annotation)
+- Redaction: Use [`redactionSettings`](../annotation-types/redaction-annotation)
+
+### Example: Set highlight defaults
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Example: Set shape defaults (Rectangle and Circle)
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Modify annotation at runtime
+
+Annotations can be modified programmatically after they are created. Retrieve an annotation from the collection, update its properties, and apply the changes using `editAnnotation()`.
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation-types)
+- [Create and Modify Annotation](./create-modify-annotation)
+- [Annotation Toolbar](../toolbar-customization)
+- [Delete Annotation](./delete-annotation)
+- [Annotation Events](./annotation-event)
+- [Annotations API](./annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/delete-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/delete-annotation.md
new file mode 100644
index 0000000000..5deffb2cc2
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/delete-annotation.md
@@ -0,0 +1,107 @@
+---
+layout: post
+title: Remove annotations in Vue PDF Viewer | Syncfusion
+description: Learn how to remove/delete PDF annotations in Syncfusion Vue 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 Vue
+
+Annotations can be removed using the built-in UI or programmatically. This page shows common methods to delete annotations in the viewer.
+
+## Delete via UI
+
+A selected annotation can be deleted in three ways:
+
+- Context menu: right-click the annotation and choose Delete.
+
+- Annotation toolbar: select the annotation and click the Delete button on the annotation toolbar.
+
+- Keyboard: select the annotation and press the `Delete` key.
+
+## Delete programmatically
+
+Annotations can be deleted programmatically either by removing the currently selected annotation or by specifying an annotation id.
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Deleting via the 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/vue-pdf-viewer-examples)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation-types)
+- [Annotation Toolbar](../toolbar-customization)
+- [Create and Modify Annotation](./create-modify-annotation)
+- [Customize Annotation](./customize-annotation)
+- [Handwritten Signature](../signature-annotation)
+- [Export and Import Annotation](../export-import)
+- [Annotation Permission](./annotation-permission)
+- [Annotation in Mobile View](./annotations-in-mobile-view)
+- [Annotation Events](./annotation-event)
+- [Annotations API](./annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/export-import/export-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/export-import/export-annotation.md
new file mode 100644
index 0000000000..647b82d5f2
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/export-import/export-annotation.md
@@ -0,0 +1,141 @@
+---
+layout: post
+title: Export annotations in Vue PDF Viewer | Syncfusion
+description: Learn how to Export annotations in Syncfusion Vue PDF Viewer using UI options and programmatic APIs.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Export annotations in Vue 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 file, XFDF file, or as a JSON string 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/vue/documentation/api/pdfviewer#exportannotation), [exportAnnotationsAsObject](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#exportannotationsasobject) and [exportAnnotationsAsBase64String](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#exportannotationsasbase64string) APIs.
+
+Use the following example to initialize the viewer and export annotations as JSON, XFDF, or as an object.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+{% raw %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+N> The exported annotations can be stored in a database or sent to a server for persistence. Use the appropriate API based on your storage and serialization requirements.
+
+## Common use cases
+
+- Export annotations for archival and long-term storage
+- Share reviewer feedback and comments with other users
+- Create audit trails and compliance records
+- Archive annotation data before document disposal
+
+## See also
+
+- [Import Annotation](./import-annotation)
+- [Import/Export Events](./export-import-events)
+- [Annotation Types](../annotation-types/area-annotation)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/export-import/export-import-events.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/export-import/export-import-events.md
new file mode 100644
index 0000000000..445a9cb55b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/export-import/export-import-events.md
@@ -0,0 +1,181 @@
+---
+layout: post
+title: Import/Export events in Vue PDF Viewer | Syncfusion
+description: Learn how to handle Import/Export events for PDF Annotations in the Syncfusion Vue PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Import/Export events in Vue PDF Viewer
+
+Import/export events let developers monitor and control annotation data as it flows into and out of the PDF Viewer. These events enable validation, progress reporting, audit logging, and conditional blocking of import/export operations.
+
+Common use cases:
+- Progress UI and user feedback
+- Validation and sanitization of imported annotation data
+- Audit logging and telemetry
+- Blocking or altering operations based on business rules
+
+Each event exposes typed event-args: `ImportStartEventArgs`, `ImportSuccessEventArgs`, `ImportFailureEventArgs`, `ExportStartEventArgs`, `ExportSuccessEventArgs`, and `ExportFailureEventArgs` that describe the operation context.
+
+## Import events
+- [`importStart`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#importstart): Triggers when an import operation starts.
+- [`importSuccess`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#importsuccess): Triggers when annotations are successfully imported.
+- [`importFailed`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#importfailed): Triggers when importing annotations fails.
+
+## Handle import events
+Example: handle import events by wiring event props on `PdfViewerComponent`.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+{% raw %}
+
+
+
+
+
+
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Export events
+- [`exportStart`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#exportstart): Triggers when an export operation starts.
+- [`exportSuccess`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#exportsuccess): Triggers when annotations are successfully exported.
+- [`exportFailed`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#exportfailed): Triggers when exporting annotations fails.
+
+## Handle export events
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+{% raw %}
+
+
+
+
+
+
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+N> `importStart`, `importSuccess`, and `importFailed` cover the lifecycle of annotation imports; `exportStart`, `exportSuccess`, and `exportFailed` cover the lifecycle of annotation exports.
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Export Annotation](./export-annotation)
+- [Import Annotation](./import-annotation)
+- [Annotation Types](../annotation-types/area-annotation)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/export-import/import-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/export-import/import-annotation.md
new file mode 100644
index 0000000000..c23f277af6
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/export-import/import-annotation.md
@@ -0,0 +1,127 @@
+---
+layout: post
+title: Import annotations in Vue PDF Viewer | Syncfusion
+description: Learn how to import annotations in Syncfusion Vue PDF Viewer using UI options and programmatic APIs.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Import annotations in Vue PDF Viewer
+
+Annotations can be imported into the PDF Viewer using the built-in UI or programmatically. The UI accepts JSON and XFDF files from the Comments panel; programmatic import accepts a JSON string previously exported by 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 the appropriate import option and select the file.
+
+All annotations in the selected file are applied to the current document.
+
+
+
+## Import programmatically (from JSON)
+
+Import annotations from a JSON string previously exported using `exportAnnotationsAsObject()`. Only the JSON string produced by the viewer can be re-imported with the [`importAnnotation`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#importannotation) API.
+
+Example: export annotations as a JSON string and import them back into the viewer.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+{% raw %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+N> Only objects produced by the viewer (for example, by `exportAnnotationsAsObject()`) are compatible with `importAnnotation`. Persist exported objects in a safe storage location (database or API) and validate them before import.
+
+## Common use cases
+
+- Restore annotations saved earlier (for example, 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
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Export Annotation](./export-annotation)
+- [Import/Export Events](./export-import-events)
+- [Annotation Types](../annotation-types/area-annotation)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/flatten-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/flatten-annotation.md
new file mode 100644
index 0000000000..586bc93874
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/flatten-annotation.md
@@ -0,0 +1,162 @@
+---
+layout: post
+title: Flatten Annotations in the Syncfusion Vue PDF Viewer
+description: Learn how to flatten annotations and form fields before saving a PDF in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Flatten Annotations in Vue PDF Viewer
+
+Flattening takes the visual appearance of annotations and embeds them into each page's content stream. The visual result remains visible, but the annotation objects and interactive form field structures are removed or converted so they can no longer be selected, edited, or filled.
+
+Flattening annotations permanently merges them into the PDF content. Once flattened:
+- Annotations are **no longer editable** in any PDF viewer.
+- Useful for **secure sharing**, preventing modifications.
+- Ideal when **finalizing markup** before distribution.
+
+## How to Flatten Annotations
+
+You can flatten annotations either when a document is loaded (preprocessing) or when exporting/saving the file. Flattening on load makes the viewer display a flattened version immediately; flattening on export preserves the original viewer session while producing a flattened output file.
+
+Typical export-time steps:
+- Save the viewer contents to a Blob.
+- Create a `PdfDocument` from the saved bytes.
+- Enable `document.flatten = true` to merge annotations and form field appearances.
+- Save the resulting PDF.
+
+Use the example below to flatten at export time (on download).
+
+{% tabs %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To flatten documents when they are uploaded/loaded into the viewer, see [Flatten on Load](../document-handling/preprocess-pdf#flatten-on-load).
+
+## Notes
+
+- Flattening applies to **all annotation types**: text markup, shapes, stamps, notes, ink, and form fields.
+- Once flattened, annotations **cannot be edited or removed**.
+- Use flattening **only at export time**, not during regular document interactions.
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation-types)
+- [Annotation Toolbar](../toolbar-customization)
+- [Create and Modify Annotation](./create-modify-annotation)
+- [Customize Annotation](./customize-annotation)
+- [Handwritten Signature](../signature-annotation)
+- [Export and Import Annotation](../export-import)
+- [Annotation Permission](./annotation-permission)
+- [Annotation in Mobile View](./annotations-in-mobile-view)
+- [Annotation Events](./annotation-event)
+- [Annotations API](./annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/free-text-annotation.md
deleted file mode 100644
index be3740f1c8..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/free-text-annotation.md
+++ /dev/null
@@ -1,800 +0,0 @@
----
-layout: post
-title: Free text annotation in Vue PDF viewer component | Syncfusion
-description: Learn about free text annotations in the Syncfusion Vue PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Free text annotation in Vue PDF Viewer control
-
-The PDF Viewer control supports adding, editing, and deleting free text annotations. This article explains how to add free text annotations using the toolbar and programmatically, modify their properties, and manage selection and focus.
-
-## Add a free text annotation to the PDF document
-
-Free text annotations can be added to the PDF document using the annotation toolbar.
-
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
-* Select the **Free Text Annotation** button to enable free text annotation mode.
-* Add text anywhere on the pages of the PDF document.
-
-When in pan mode, selecting free text annotation switches the PDF Viewer to text-selection mode.
-
-
-
-The following example switches to free text annotation mode using a button click.
-
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add a free text annotation programmatically to the PDF document
-
-The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#annotation) method.
-
-Here is an example of adding a free text annotation programmatically using addAnnotation():
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Change the content of an existing free text annotation programmatically
-
-To change the content of an existing free text annotation programmatically, use the editAnnotation() method.
-
-Here is an example of changing the content of a free text annotation using editAnnotation():
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> The current version of the PDF Viewer does not edit existing document text. New free text annotations can be added and modified within the document.
-
-## Edit free text annotation properties
-
-Free text annotation properties that can be modified using the annotation toolbar include font family, font size, font styles, font color, text alignment, fill color, stroke color, border thickness, and opacity. The toolbar provides dedicated controls for each of these settings.
-
-## Font family
-
-Choose a font family from the Font Family tool to update the annotation text.
-
-
-
-### Font size
-
-Choose a size from the Font Size tool to update the annotation text size.
-
-
-
-### Font color
-
-Select a color from the Font Color palette to change the font color.
-
-
-
-### Text alignment
-
-Use the Text Align tool to set the annotation text alignment.
-
-
-
-### Font styles
-
-Enable bold, italic, or underline using the Font Style tool.
-
-
-
-### Fill color
-
-Set the annotation background using the Edit Color tool.
-
-
-
-### Stroke color
-
-Set the annotation border color using the Edit Stroke Color tool.
-
-
-
-### Thickness
-
-Adjust border thickness with the Edit Thickness slider.
-
-
-
-### Opacity
-
-Adjust annotation opacity with the Edit Opacity slider.
-
-
-
-## Set default properties during control initialization
-
-Default properties for free text annotations can be set before creating the control using FreeTextSettings.
-
-After changing default values, the selected values are applied. The following example sets default free text annotation settings.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md
deleted file mode 100644
index b9ad69bcff..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md
+++ /dev/null
@@ -1,743 +0,0 @@
----
-layout: post
-title: Ink annotation in Vue PDF viewer component | Syncfusion
-description: Explore ink annotations in the Syncfusion Vue PDF Viewer (Essential JS 2): add, edit, delete, and configure default settings.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Ink annotation in Vue PDF viewer component
-
-The PDF Viewer control provides options to add, edit, and delete ink annotations.
-
-
-
-## Add an ink annotation to the PDF document
-
-Ink annotations can be added to the PDF document using the annotation toolbar.
-
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
-* Select the **Draw Ink** button to enable ink annotation mode.
-* Draw on any page of the PDF document.
-
-
-
-The following example switches to ink annotation mode.
-
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add an Ink annotation programmatically to the PDF document
-
-The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
-
-Here is an example of adding an ink annotation programmatically using addAnnotation():
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit an existing ink annotation programmatically
-
-To modify an existing ink annotation programmatically, use the editAnnotation() method.
-
-Here is an example of using editAnnotation():
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-
-
-## Set default properties during control initialization
-
-Default properties for ink annotations can be set before creating the control using InkAnnotationSettings.
-
-After changing default values, the new defaults are applied to subsequently created ink annotations. Refer to the following code sample to set the default ink annotation settings.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md
index 3d5327fa3f..e956685e3d 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md
@@ -11,7 +11,10 @@ documentation: ug
The PDF Viewer control provides angle-constraint functionality for line-type annotations. When enabled, drawing operations snap to configured angle increments, improving accuracy and consistency for technical drawings and measurements.
+
+
## Enable line angle constraints
+
Configure the `enableLineAngleConstraints` property within `annotationDrawingOptions`. When enabled, supported line-type annotations snap to fixed angles.
The following code demonstrates how to enable line angle constraints:
@@ -77,6 +80,33 @@ export default {
{% endhighlight %}
{% endtabs %}
+## Work with constrained annotations
+
+### Drawing behavior
+
+When angle constraints are enabled:
+
+- Begin drawing a supported annotation (Line, Arrow, Polyline, Distance, or Perimeter).
+- The segment snaps to the nearest allowed angle according to `restrictLineAngleTo`.
+- A visual indicator displays the current snapping angle in real time.
+- Release to finalize the annotation.
+
+### Keyboard shortcuts
+
+Desktop platforms:
+
+- `Shift` + drag: toggles snapping during the drag operation. If constraints are disabled, `Shift` temporarily enables snapping; if enabled, `Shift` enforces snapping.
+
+### Modifying constrained annotations
+
+When editing existing line annotations with selectors:
+
+- Constraints apply relative to the annotation's current orientation (the line's direction is the 0° reference).
+- Constraint snapping during modification is supported for Line and Arrow annotations.
+- Adjustments snap according to the configured `restrictLineAngleTo` increment.
+
+N> Refer to the Vue PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/vue-pdf-viewer) for highlights. See additional [Vue PDF Viewer examples](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples)
+
## Configuration Properties
### enableLineAngleConstraints
@@ -113,29 +143,17 @@ Examples:
- `restrictLineAngleTo: 45` → snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°
- `restrictLineAngleTo: 100` → snapped angles: 0°, 100°, 200°, 300°, 360°
-## Work with constrained annotations
-
-### Drawing behavior
-
-When angle constraints are enabled:
-
-- Begin drawing a supported annotation (Line, Arrow, Polyline, Distance, or Perimeter).
-- The segment snaps to the nearest allowed angle according to `restrictLineAngleTo`.
-- A visual indicator displays the current snapping angle in real time.
-- Release to finalize the annotation.
-
-### Keyboard shortcuts
-
-Desktop platforms:
-
-- `Shift` + drag: toggles snapping during the drag operation. If constraints are disabled, `Shift` temporarily enables snapping; if enabled, `Shift` enforces snapping.
-
-### Modifying constrained annotations
-
-When editing existing line annotations with selectors:
-
-- Constraints apply relative to the annotation's current orientation (the line's direction is the 0° reference).
-- Constraint snapping during modification is supported for Line and Arrow annotations.
-- Adjustments snap according to the configured `restrictLineAngleTo` increment.
-
-N> Refer to the Vue PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/vue-pdf-viewer) for highlights. See additional [Vue PDF Viewer examples](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples)
\ No newline at end of file
+## See also
+
+- [Annotation Overview](./overview)
+- [Annotation Types](./annotation/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](./create-modify-annotation)
+- [Customize Annotation](./customize-annotation)
+- [Remove Annotation](./delete-annotation)
+- [Handwritten Signature](./signature-annotation)
+- [Export and Import Annotation](./export-import/export-annotation)
+- [Annotation Permission](./annotation-permission)
+- [Annotation in Mobile View](./annotations-in-mobile-view)
+- [Annotation Events](./annotation-event)
+- [Annotation API](./annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md
deleted file mode 100644
index b91e799b21..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md
+++ /dev/null
@@ -1,1290 +0,0 @@
----
-layout: post
-title: Measurement annotation in Vue PDF Viewer control | Syncfusion
-description: Learn about measurement annotations in the Syncfusion Vue PDF Viewer (Essential JS 2): distance, perimeter, area, radius, and volume.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Measurement annotation in Vue PDF Viewer control
-
-The PDF Viewer provides options to add measurement annotations. The supported measurement annotations are:
-
-* Distance
-* Perimeter
-* Area
-* Radius
-* Volume
-
-
-
-## Adding measurement annotations to the PDF document
-
-Measurement annotations can be added to the PDF document using the annotation toolbar.
-
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Measurement Annotation** drop-down button. The pop-up lists available measurement annotation types.
-* Select a measurement type to enable its annotation mode.
-* Measure and add annotations on the pages of the PDF document.
-
-When the viewer is in pan mode, selecting a measurement annotation switches it to text selection mode.
-
-
-
-The following example switches to distance annotation mode.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add a measurement annotation to the PDF document programmatically
-
-The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
-
-Here is an example showing how to add measurement annotations programmatically using addAnnotation():
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit an existing measurement annotation programmatically
-
-To modify an existing measurement annotation programmatically, use the editAnnotation() method.
-
-Here is an example of using editAnnotation():
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit the properties of measurement 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 the line properties
-
-Line-based measurement annotations (distance and perimeter) have additional options in the Line Properties window. Open it by right-clicking the annotation and selecting Properties from the context menu.
-
-
-
-## Set default properties during control initialization
-
-Default properties for measurement annotations can be set before creating the control using `distanceSettings`, `perimeterSettings`, `areaSettings`, `radiusSettings`, and `volumeSettings`.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Editing scale ratio and unit of the 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 PDF Viewer supports the following measurement units:
-
-* 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 html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/overview.md
new file mode 100644
index 0000000000..6b300bd8de
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/overview.md
@@ -0,0 +1,51 @@
+---
+layout: post
+title: Overview of Annotation in Vue PDF Viewer | Syncfusion
+description: Learn about Annotations and how to add, edit, delete, and configure Annotations in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Annotations overview in Vue
+
+Annotations in the PDF Viewer are interactive elements that allow users to add notes, highlights, or text boxes directly to a PDF document. These annotations add context and feedback to PDF files, simplifying collaboration during document reviews.
+
+The PDF Viewer provides a complete set of annotation tools for reviewing, measuring, and marking up PDFs in Vue.
+
+## Supported annotations
+
+- Text markup: [Highlight](../annotation-types/highlight-annotation), [Underline](../annotation-types/underline-annotation), [Squiggly](../annotation-types/squiggly-annotation), [Strikethrough](../annotation-types/strikethrough-annotation)
+- Shapes: [Line](../annotation-types/line-annotation), [Arrow](../annotation-types/arrow-annotation), [Rectangle](../annotation-types/rectangle-annotation), [Circle](../annotation-types/circle-annotation), [Polygon](../annotation-types/polygon-annotation)
+- Text boxes: [Free Text](../annotation-types/free-text-annotation)
+- Drawing: [Ink](../annotation-types/ink-annotation) (freehand)
+- Stamps: [Standard and custom stamps](../annotation-types/stamp-annotation)
+- Notes: [Sticky Notes](../annotation-types/sticky-notes-annotation) (comments)
+- Redaction: Mark and apply [redactions](../annotation-types/redaction-annotation)
+- Measurement: [Distance](../annotation-types/distance-annotation), [Perimeter](../annotation-types/perimeter-annotation), [Area](../annotation-types/area-annotation), [Radius](../annotation-types/radius-annotation), [Volume](../annotation-types/volume-annotation)
+
+## Annotation manipulation capabilities
+
+- [Create 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](./create-modify-annotation): Modify existing annotations by moving, resizing, or updating text and style properties like color, opacity, and thickness.
+- [Customize 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-undo-redo): Revert or reapply annotation actions (add, edit, delete) using toolbar buttons or corresponding APIs.
+- [Import and export annotations](../export-import): Save and load annotations in JSON or XFDF formats to persist markups across sessions or share them with others.
+- Set [Permissions](./annotation-permission): Enable or disable annotation permission, ensuring compliance with document permissions.
+- Add and manage [comments](./comments): Insert, edit, and delete comments or sticky notes attached to annotations for clearer feedback and collaboration.
+
+## See also
+
+- [Annotation Types](../annotation-types)
+- [Annotation Toolbar](../toolbar-customization)
+- [Create and Modify Annotation](./create-modify-annotation)
+- [Customize Annotation](./customize-annotation)
+- [Remove Annotation](./delete-annotation)
+- [Handwritten Signature](../signature-annotation)
+- [Export and Import Annotation](../export-import)
+- [Annotation Permission](./annotation-permission)
+- [Annotation in Mobile View](./annotations-in-mobile-view)
+- [Annotation Events](./annotation-event)
+- [Annotation Undo Redo](./annotations-undo-redo)
+- [Annotation API](./annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md
deleted file mode 100644
index 2497bbc6ab..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md
+++ /dev/null
@@ -1,1127 +0,0 @@
----
-layout: post
-title: Shape annotation in Vue PDF Viewer component | Syncfusion
-description: Learn how to add, edit, and customize shape annotations like line, arrow, rectangle, circle, and polygon in the Vue PDF Viewer.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Shape annotation in Vue PDF Viewer control
-
-The PDF Viewer provides options to add, edit, and delete shape annotations. Supported shape annotation types include:
-
-* Line
-* Arrow
-* Rectangle
-* Circle
-* Polygon
-
-
-
-## Adding a shape annotation to the PDF document
-
-Shape annotations can be added to the PDF document using the annotation toolbar.
-
-* Select the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
-* Open the **Shape Annotation** drop-down to view available shape types.
-* Select a shape type to enable its annotation mode, then draw the shape on the page.
-
-N> When the PDF Viewer is in pan mode and a shape annotation tool is selected, the viewer automatically switches to text select mode to ensure a smooth interaction experience.
-
-
-
-Use the following sample to switch the viewer to circle annotation mode.
-
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add a shape annotation to the PDF document programmatically
-
-The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
-
-Here is an example showing how to add shape annotations programmatically using addAnnotation():
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit an existing shape annotation programmatically
-
-To modify an existing shape annotation programmatically, use the editAnnotation() method.
-
-Here is an example of using editAnnotation():
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit an 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 and 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.
-
-Refer to the following code sample to set the default annotation settings.
-
-
-
-## Set default properties during control initialization
-
-Default properties for shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md
index 1f8dde0928..0e63db428d 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md
@@ -205,7 +205,7 @@ export default {
The following example enables or disables the handwritten signature in the PDF Viewer. Setting the value to `false` disables the feature.
{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
+{% highlight html tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md
deleted file mode 100644
index 5c65c5b4cf..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md
+++ /dev/null
@@ -1,867 +0,0 @@
----
-layout: post
-title: Stamp annotation in Vue PDF Viewer control | Syncfusion
-description: Learn about stamp annotations in the Syncfusion Vue PDF Viewer (Essential JS 2): dynamic, sign here, standard business, and custom stamps.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Stamp annotation in Vue PDF Viewer control
-
-The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotations in PDF documents:
-
-* Dynamic
-* Sign Here
-* Standard Business
-* Custom Stamp
-
-
-
-## Add stamp annotations to the PDF document
-
-The stamp annotations can be added to the PDF document using the annotation toolbar.
-
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types.
-
-
-
-* Select a stamp type to enable its annotation mode.
-
-
-
-* Place the stamp on the pages of the PDF document.
-
-N> When in pan mode and a stamp annotation tool is selected, the PDF Viewer switches to text select mode automatically for a smooth interaction experience.
-
-The following examples switch to stamp annotation modes.
-
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Adding a Stamp annotation to the PDF document programmatically
-
-With the PDF Viewer library, you can add a Stamp annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
-
-Here's an example of how you can utilize the **addAnnotation()** method to include a Stamp annotation programmatically:
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit the existing stamp annotation programmatically
-
-To modify an existing stamp annotation in the PDF Viewer programmatically, use the **editAnnotation()** method.
-
-Here is an example of using editAnnotation():
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add a custom stamp to the PDF document
-
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types.
-* Click the Custom Stamp button.
-
-
-
-* In the file explorer dialog, choose an image and add it to the PDF page.
-
-N> Only JPG and JPEG image formats are supported for custom stamp annotations.
-
-## Setting default properties during control initialization
-
-Default properties for stamp annotations can be set before creating the control using StampSettings.
-
-After changing the default opacity using the Edit Opacity tool, the selected value is applied to subsequent stamps. The following example shows how to set default stamp annotation settings.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/sticky-notes-annotation.md
deleted file mode 100644
index 03f0f33bad..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/sticky-notes-annotation.md
+++ /dev/null
@@ -1,696 +0,0 @@
----
-layout: post
-title: Sticky notes in Vue PDF Viewer control | Syncfusion
-description: Learn about sticky note annotations in the Syncfusion Vue PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Sticky note annotation in Vue PDF Viewer control
-
-The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document.
-
-
-
-## Add a sticky note annotation to the PDF document
-
-Sticky note annotations can be added to the PDF document using the annotation toolbar.
-
-* Click the **Comments** button in the PDF Viewer toolbar to open the annotation toolbar.
-* Click the position where the sticky note annotation should be added.
-* The sticky note annotation appears at the selected position.
-
-
-
-Annotation comments can be added using the comment panel.
-
-* Select a sticky note annotation in the PDF document and right-click it.
-* Choose Comment from the context menu.
-* Add comments, replies, and status using the comment panel.
-
-
-
-## Add a sticky note annotation to the PDF document programmatically
-
-The PDF Viewer library allows adding a sticky note annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
-
-The following example shows how to add a sticky note annotation programmatically using `addAnnotation()`:
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit an existing sticky note annotation programmatically
-
-To modify an existing sticky note annotation programmatically, use the editAnnotation() method.
-
-The following example shows how to modify an existing sticky note annotation using `editAnnotation()`:
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit the properties of sticky note annotations
-
-### Editing opacity
-
-Edit opacity using the range slider in the Edit Opacity tool.
-
-
-
-### Editing comments
-
-Comment text, replies, and status can be edited in the comment panel.
-
-* Open the comment panel using the Comment Panel button in the annotation toolbar.
-
-
-
-Modify or delete comments or replies, and change status using the menu options in the comment panel.
-
-
-
-## Set default properties during control initialization
-
-Default properties for sticky note annotations can be set before creating the control using `StickyNotesSettings`.
-
-After changing default opacity with the Edit Opacity tool, the selected value is applied to new sticky note annotations. The following example sets default sticky note annotation properties.
-
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Disable sticky note annotations
-
-The PDF Viewer control provides an option to disable sticky note annotations. The following example shows how to disable the feature.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/text-markup-annotation.md
deleted file mode 100644
index d34d482f28..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/text-markup-annotation.md
+++ /dev/null
@@ -1,2752 +0,0 @@
----
-layout: post
-title: Text markup annotation in Vue PDF Viewer | Syncfusion
-description: Learn to add, edit, delete, and customize text markup annotations like highlight, underline, and squiggly in Syncfusion Vue PDF Viewer.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Text markup annotation in Vue PDF Viewer
-
-The PDF Viewer provides options to add, edit, and delete text markup annotations, including highlight, underline, strikethrough, and squiggly.
-
-
-
-## Highlight text
-
-There are two ways to highlight text:
-
-1.Using the context menu
- * Select text in the PDF document and right-click it.
- * Select **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**.
-
- 
-
-When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection.
-
-Refer to the following code snippet to switch to highlight mode.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-Refer to the following code snippet to switch back to normal mode from highlight mode.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Highlight text programmatically
-
-Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
-
-Example:
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Underline text
-
-There are two ways to underline text:
-
-1.Using the context menu
- * Select text in the PDF document and right-click it.
- * Select **Underline** 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 **Underline** to enable underline mode.
- * Select text to add the underline annotation.
- * Alternatively, select text first and then click **Underline**.
-
- 
-
-In pan mode, if the underline mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for underlining the text.
-
-Refer to the following code snippet to switch to underline mode.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-Refer to the following code snippet to switch back to normal mode from underline mode.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Underline a text programmatically
-
-Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
-
-Example:
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Strikethrough text
-
-There are two ways to strikethrough text:
-
-1.Using the context menu
- * Select text in the PDF document and right-click it.
- * Select **Strikethrough** 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 **Strikethrough** to enable strikethrough mode.
- * Select text to add the strikethrough annotation.
- * Alternatively, select text first and then click **Strikethrough**.
-
- 
-
-N> While in pan mode, clicking the strikethrough button switches the viewer to text select mode so text can be selected for annotation.
-
-Refer to the following code snippet to switch to strikethrough mode.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-Refer to the following code snippet to switch back to normal mode from strikethrough mode.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Strikethrough text programmatically
-
-Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
-
-Here's an example of how you can use the **addAnnotation()** method to apply Strikethrough programmatically:
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add squiggly to text
-
-There are two ways to add squiggly to text:
-
-1.Using the context menu
- * Select text in the PDF document and right-click it.
- * Select **Squiggly** in the context menu.
-
- 
-
-
-2.Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Squiggly** button in the annotation toolbar. It enables the squiggly mode.
- * Select the text and the squiggly annotation will be added.
- * You can also select the text and apply the squiggly annotation using the **Squiggly** button.
-
- 
-
-N> While in pan mode, clicking the squiggly button switches the viewer to text select mode so text can be selected for annotation.
-
-Refer to the following code snippet to switch to squiggly mode.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-Refer to the following code snippet to switch back to normal mode from squiggly mode.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Squiggly a text programmatically
-
-The PDF Viewer library enables you to programmatically Squiggly text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
-
-Here's an example of how you can use the **addAnnotation()** method to apply Squiggly programmatically:
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Deleting a text markup annotation
-
-The selected annotation can be deleted by the following ways:
-
-1.Using Delete key
- * Select the annotation to be deleted.
- * Click the Delete key in the keyboard. The selected annotation will be deleted.
-
-2.Using the annotation toolbar
- * Select the annotation to be deleted.
- * Click the **Delete Annotation** button in the annotation toolbar. The selected annotation will be deleted.
-
- 
-
-## Edit text markup annotation properties
-
-The color and opacity of text markup annotations can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar.
-
-### Edit color
-
-Use the color palette in the Edit Color tool to change the annotation color.
-
-
-
-### Edit opacity
-
-Use the range slider in the Edit Opacity tool to change annotation opacity.
-
-
-
-## Set default properties during control initialization
-
-The properties of the text markup annotation can be set before creating the control using highlightSettings, underlineSettings, strikethroughSettings, squigglySettings.
-
-N> After editing default color and opacity with the Edit Color and Edit Opacity tools, the default values update to the selected settings.
-
-Refer to the following code snippet to set the default annotation settings.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Performing undo and redo
-
-The PDF Viewer performs undo and redo for the changes made in the PDF document. In text markup annotation, undo and redo actions are provided for:
-
-* Inclusion of the text markup annotations.
-* Deletion of the text markup annotations.
-* Change of either color or opacity of the text markup annotations.
-
-Undo and redo actions can be done by the following ways:
-
-1.Using keyboard shortcuts:
- After performing a text markup annotation action, you can undo it by using Ctrl + Z shortcut and redo by using Ctrl + Y shortcut.
-2.Using toolbar:
- Undo and redo can be done using the **Undo** tool and **Redo** tool provided in the toolbar.
-
-Refer to the following code snippet for calling undo and redo actions from the client-side.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Saving the text markup annotation
-
-When you click the download tool in the toolbar, the text markup annotations will be saved in the PDF document. This action will not affect the original document.
-
-## Printing the text markup annotation
-
-When the print tool is selected in the toolbar, the PDF document will be printed along with the text markup annotations added to the pages. This action will not affect the original document.
-
-## Disabling text markup annotation
-
-The PDF Viewer control provides an option to disable the text markup annotation feature. The code snippet for disabling the feature is as follows.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## See also
-
-* [Toolbar items](../toolbar)
-* [Feature Modules](../feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/how-to/import-annotations.md b/Document-Processing/PDF/PDF-Viewer/vue/how-to/import-annotations.md
index e894446976..2c728dc9cb 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/how-to/import-annotations.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/how-to/import-annotations.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Import annotations in Vue PDF Viewer | Syncfusion
+title: Import Annotations Programmatically in Vue PDF Viewer | Syncfusion
description: Learn how to import annotations in the Syncfusion Vue PDF Viewer using the importAnnotations method.
platform: document-processing
control: PDF Viewer
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Import annotations in Vue PDF Viewer
+# Import Annotations Programmatically in Vue PDF Viewer
Use the [`importAnnotations()`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#importannotation) method to import annotations from a file or a string when loading a PDF document.