| Platform(s) | +NuGet Package | + +
|---|---|
|
+Windows Forms +Console Application (Targeting .NET Framework) + |
++{{'[Syncfusion.SmartDataExtractor.WinForms.nupkg]'| markdownify }} + | +
| +WPF + | ++{{'[Syncfusion.SmartDataExtractor.Wpf.nupkg]'| markdownify }} + | +
| +ASP.NET MVC5 + | ++{{'[Syncfusion.SmartDataExtractor.AspNet.Mvc5.nupkg]'| markdownify }} + | +
|
+ASP.NET Core (Targeting NET Core) +Console Application (Targeting .NET Core) +Blazor + |
++{{'[Syncfusion.SmartDataExtractor.Net.Core.nupkg]'| markdownify }} + | +
|
+Windows UI (WinUI) +.NET Multi-platform App UI (.NET MAUI) + |
++{{'[Syncfusion.SmartDataExtractor.NET.nupkg]'| markdownify }} + | +
| Platform(s) | +Assembly | +Dependent Assemblies | +
|---|---|---|
| Windows Forms, WPF and ASP.NET MVC5 | +Syncfusion.SmartFormRecognizer.Base | +
+
|
+
| Blazor, .NET Core and .NET Platforms | +Syncfusion.SmartFormRecognizer.Portable | +
+
|
+
| Syncfusion.SmartFormRecognizer.NET | +
+
|
+
| Platform(s) | +NuGet Package | + +
|---|---|
| +Windows Forms + | ++{{'[Syncfusion.SmartFormRecognizer.WinForms.nupkg]'| markdownify }} + | +
| +WPF + | ++{{'[Syncfusion.SmartFormRecognizer.WPF.nupkg]'| markdownify }} + | +
| Blazor, .NET Core and .NET Platforms | ++{{'[Syncfusion.SmartFormRecognizer.NET.nupkg]'| markdownify }} + | +
| +{{'[Syncfusion.SmartFormRecognizer.Net.Core.nupkg]'| markdownify }} + | +|
| +ASP.NET MVC5 + | ++{{'[Syncfusion.SmartFormRecognizer.AspNet.MVC5.nupkg]'| markdownify }} + | +
| Platform(s) | +NuGet Package | + +
|---|---|
| +Windows Forms + | ++{{'[Syncfusion.SmartFormRecognizer.WinForms.nupkg]'| markdownify }} + | +
| +WPF + | ++{{'[Syncfusion.SmartFormRecognizer.WPF.nupkg]'| markdownify }} + | +
| Blazor, .NET Core and .NET Platforms | ++{{'[Syncfusion.SmartFormRecognizer.NET.nupkg]'| markdownify }} + | +
| +{{'[Syncfusion.SmartFormRecognizer.Net.Core.nupkg]'| markdownify }} + | +|
| +ASP.NET MVC5 + | ++{{'[Syncfusion.SmartFormRecognizer.AspNet.MVC5.nupkg]'| markdownify }} + | +
| Platform(s) | +Assembly | +
|---|---|
| + {{'[WPF]'| markdownify }}, + {{'[Windows Forms]'| markdownify }} and {{'[ASP.NET MVC]'| markdownify }} + | +
+ Syncfusion.Compression.Base + Syncfusion.ImagePreProcessor.Base + Syncfusion.OCRProcessor.Base + Syncfusion.Pdf.Base + Syncfusion.PdfToImageConverter.Base + |
+
| + {{'[Blazor]'| markdownify }}, + {{'[.NET Core]'| markdownify }} + and {{'[.NET Platforms]'| markdownify }} + | +
+ Syncfusion.Compression.Portable + Syncfusion.ImagePreProcessor.Portable + Syncfusion.OCRProcessor.Portable + Syncfusion.Pdf.Imaging.Portable + Syncfusion.Pdf.Portable + Syncfusion.PdfToImageConverter.Portable + |
+
| + {{'[.NET Multi-platform App UI (.NET MAUI)]'| markdownify }} + | +
+ Syncfusion.Compression.NET + Syncfusion.ImagePreProcessor.NET + Syncfusion.OCRProcessor.NET + Syncfusion.Pdf.Imaging.NET + Syncfusion.Pdf.NET + Syncfusion.PdfToImageConverter.NET + |
+
| Platform(s) | +NuGet Package | + +
|---|---|
|
+Windows Forms +Console Application (Targeting .NET Framework) + |
++{{'[Syncfusion.SmartTableExtractor.WinForms.nupkg]'| markdownify }} + | +
| +WPF + | ++{{'[Syncfusion.SmartTableExtractor.Wpf.nupkg]'| markdownify }} + | +
| +ASP.NET MVC5 + | ++{{'[Syncfusion.SmartTableExtractor.AspNet.Mvc5.nupkg]'| markdownify }} + | +
|
+ASP.NET Core (Targeting NET Core) +Console Application (Targeting .NET Core) +Blazor + |
++{{'[Syncfusion.SmartTableExtractor.Net.Core.nupkg]'| markdownify }} + | +
|
+Windows UI (WinUI) +.NET Multi-platform App UI (.NET MAUI) + |
++{{'[Syncfusion.SmartTableExtractor.NET.nupkg]'| markdownify }} + | +
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit/Update form field programmatically
-
-Use the updateFormField method to modify a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it as the first parameter. Provide the properties to update as the second parameter. The following example updates the background color of a Textbox field.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Delete form field programmatically
-
-Use the deleteFormField method to remove a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it to deleteFormField. The following example deletes the first form field.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Save form fields
-
-Selecting the Download icon on the toolbar saves the form fields in the exported PDF without modifying the original document. See the following GIF for reference.
-
-
-
-You can invoke the download action using the following code snippet.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Print form fields
-
-Selecting the Print icon on the toolbar prints the PDF with the added form fields. This action does not modify the original document. See the following GIF for reference.
-
-
-
-You can invoke the print action using the following code snippet:
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Open an existing PDF document
-
-Open a PDF that already contains form fields by clicking the Open icon on the toolbar. See the following GIF for reference.
-
-
-
-## Validate form fields
-
-Form fields are validated when `enableFormFieldsValidation` is set to true and the validateFormFields event is handled. The event triggers during download or print if required fields are not filled. The non-filled fields are available in the `nonFillableFields` property of the event arguments.
-
-Add the following code to validate form fields:
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Export and import form fields
-
-The PDF Viewer component supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods in the following formats:
-
-- FDF
-- XFDF
-- JSON
-
-### Export and import as FDF
-
-Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters:
-
-- The first parameter is the destination path for the exported data. If the path is not specified, a location is requested during export.
-- The second parameter specifies the format type for the form data.
-
-The following code exports and imports form field data as FDF.
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### Export and import as XFDF
-
-The following code exports and imports form field data as XFDF.
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### Export and import as JSON
-
-The following code exports and imports form field data as JSON.
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### Export and import as Object
-
-The PDF Viewer component supports exporting the form field data as an object and importing that data back into the current PDF document.
-
-The following example shows how to export the form field data as an object and import the form field data from that object into the current PDF document via a button click.
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## Form field properties
-
-Form field properties allow customization and interaction with fields embedded in PDF documents. The following sections outline the supported field types and their configurable settings.
-
-- Textbox
-- Password
-- CheckBox
-- RadioButton
-- ListBox
-- DropDown
-- Signature field
-- Initial field
-
-### Signature and initial fields settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following code example explains how to update the signature field properties on a button click.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a signature field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-The following code shows how to configure default properties for an initial field added from the Form Designer toolbar.
-
-
-
-
-
-### Textbox field settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following example updates Textbox field properties on a button click.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a Textbox field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### Password field settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following example updates Password field properties on a button click.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a Password field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### CheckBox field settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following example updates CheckBox field properties on a button click.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a CheckBox field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### RadioButton field settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following example updates RadioButton field properties on a button click.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a RadioButton field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### ListBox field settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following example updates ListBox field properties on a button click.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a ListBox field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### DropDown field settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following example updates DropDown field properties on a button click.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a DropDown field added from the Form Designer toolbar.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-designer/create-with-user-interface-interaction.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-designer/create-with-user-interface-interaction.md
deleted file mode 100644
index b497244e58..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-designer/create-with-user-interface-interaction.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-layout: post
-title: Design form fields in the ASP.NET Core PDF Viewer | Syncfusion
-description: Learn how to add, drag, resize, edit, and manage form fields using the UI in the Syncfusion ASP.NET Core PDF Viewer component.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
----
-
-# Design form fields with UI interaction in ASP.NET Core PDF Viewer
-
-The PDF Viewer component supports interactive form field design, including drawing, dragging, and resizing fields directly on the page. Click the Form Field icon on the toolbar to add a field and place it on the document. Supported form field types include:
-
-- Textbox
-- Password
-- CheckBox
-- RadioButton
-- ListBox
-- DropDown
-- Signature field
-- Initial field
-
-## Enable or Disable form designer toolbar
-
-Inject the FormDesigner module and set enableFormDesignerToolbar to true to display the Form Designer icon on the toolbar. The default value is true. Use the following code to enable the toolbar option.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add the form field dynamically
-
-Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference.
-
-
-
-## Drag the form field
-
-Drag the selected form field to reposition it within the PDF document. See the following GIF for reference.
-
-
-
-## Resize the form field
-
-Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference.
-
-
-
-## Edit or Update the form field dynamically
-
-Edit form field properties using the Form Field Properties dialog. Open it by right-clicking a form field and selecting Properties from the context menu. The following images show examples of available settings.
-
-
-
-
-
-
-
-## Clipboard operation with form field
-
-The PDF Viewer supports clipboard operations such as cut, copy, and paste for form fields. Right-click a form field to open the context menu and choose the desired clipboard action. The following image shows the available options.
-
-
-
-## Undo and Redo
-
-Undo and redo actions are supported for runtime changes made to form fields. Use the following code to perform undo and redo operations.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-designer/form-field-events.md
deleted file mode 100644
index c7474d8646..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-designer/form-field-events.md
+++ /dev/null
@@ -1,607 +0,0 @@
----
-layout: post
-title: Form field events in ASP.NET Core PDF Viewer | Syncfusion
-description: Learn about form field events supported in the Syncfusion ASP.NET Core PDF Viewer component and how to handle them.
-platform: document-processing
-control: Form Field Events
-documentation: ug
----
-
-# PDF Viewer Form Field events in ASP.NET CORE
-
-The PDF Viewer component provides support for various form field events. The following events are available:
-
-| Form field events | Description |
-|---|---|
-| formFieldAdd | Triggered when a form field is added. |
-| formFieldClick | Triggered when a form field is clicked. |
-| formFieldDoubleClick | Triggered when a form field is double-clicked. |
-| formFieldFocusOut | Triggered when focus moves out of a form field. |
-| formFieldMouseLeave | Triggered when the mouse cursor leaves a form field. |
-| formFieldMouseOver | Triggered when the mouse cursor is over a form field. |
-| formFieldMove | Triggered when a form field is moved. |
-| formFieldPropertiesChange | Triggered when a form field property changes. |
-| formFieldRemove | Triggered when a form field is removed. |
-| formFieldResize | Triggered when a form field is resized. |
-| formFieldSelect | Triggered when a form field is selected. |
-| formFieldUnselect | Triggered when a form field is unselected. |
-| validateFormFields | Triggered when validation fails. |
-
-## formFieldAdd event
-
-The [formFieldAdd](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldAdd) event is triggered when a new form field is added, either programmatically or through user interaction. The event arguments provide details about the added form field.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldClick event
-
-The [formFieldClick](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldClick) event is triggered when a form field is clicked. The event arguments provide details about the clicked form field.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldDoubleClick event
-
-The [formFieldDoubleClick](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldDoubleClick) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldFocusOut event
-
-The [formFieldFocusOut](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldFocusOut) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMouseLeave event
-
-The [formFieldMouseLeave](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseLeave) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMouseOver event
-
-The [formFieldMouseOver](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseover) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMove event
-
-The [formFieldMove](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMove) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldPropertiesChange event
-
-The [formFieldPropertiesChange](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldPropertiesChange) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldRemove event
-
-The [formFieldRemove](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldRemove) event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldResize event
-
-The [formFieldResize](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldResize) events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldSelect event
-
-The [formFieldSelect](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldSelect) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldUnselect event
-
-The [formFieldUnselect](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldUnselect) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## validateFormFields event
-
-The [ValidateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-filling.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-filling.md
deleted file mode 100644
index 866c86ed67..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/form-filling.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-layout: post
-title: Form filling in ASP.NET Core PDF Viewer control | Syncfusion
-description: Learn how to view, fill, export, and import PDF form fields with ASP.NET Core PDF Viewer control of Syncfusion Essential JS 2 and more details.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
----
-
-# Form filling in ASP.NET Core PDF Viewer Component
-
-The PDF Viewer component displays existing form fields in a PDF document and enables filling and downloading filled data.
-
-The form fields displayed in the PDF Viewer are:
-
-* Textbox
-* Password
-* CheckBox
-* RadioButton
-* ListBox
-* DropDown
-* SignatureField
-* InitialField
-
-
-
-## Disabling form fields
-
-The PDF Viewer control provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Standalone" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight cshtml tabtitle="Server-Backed" %}
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## How to draw handwritten signature in the signature field
-
-Add a handwritten signature to a Signature field by following these steps:
-
-* Click the signature field in the PDF document to open the signature panel.
-
-
-
-* Draw the signature in the signature panel.
-
-
-
-* Click the **CREATE** button. The drawn signature is added to the signature field.
-
-
-
-## Delete the signature inside the signature field
-
-Delete a signature placed in a signature field by using the Delete option in the annotation toolbar.
-
-
-
-## Export and import form fields
-
-The PDF Viewer control provides the support to export and import the form field data in the following formats using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods.
-
-* FDF
-* XFDF
-* JSON
-
-For detailed information about exporting and importing form fields, please refer to the [Form Fields documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/form-designer/create-programmatically#export-and-import-form-fields).
-
-## See also
-
-* [Handwritten Signature in ASP.NET Core PDF Viewer Component](./annotation/signature-annotation)
-* [Form Designer](./form-designer/form-field-events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/custom-data.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/custom-data.md
new file mode 100644
index 0000000000..a6eb7d0086
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/custom-data.md
@@ -0,0 +1,166 @@
+---
+layout: post
+title: Add custom data to form fields in ASP.NET Core Pdf Viewer | Syncfusion
+description: Learn how to attach, update, and read custom Data on PDF form fields using the Form Designer UI and APIs in the Syncfusion ASP.NET Core PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Add Custom Data to PDF Form Fields in ASP.NET Core PDF Viewer
+
+The Syncfusion ASP.NET Core PDF Viewer allows attaching custom application-specific data to form fields using the **customData** property. This enables associating business identifiers, tags, validation hints, or workflow metadata with form fields.
+
+Custom data remains linked to the form field throughout the viewer session and can be accessed or updated whenever the field is queried or modified.
+
+This page explains:
+- [Adding custom data when creating form fields](#add-custom-data-while-creating-pdf-form-fields)
+- [Defining default custom data for fields created using the UI](#set-default-custom-data-for-pdf-form-fields-added-using-ui)
+- [Updating or replacing custom data for existing fields](#update-or-replace-pdf-form-field-custom-data)
+- [Reading custom data from form fields](#read-custom-data-from-pdf-form-fields)
+- [Applying best practices when using custom data](#best-practices)
+
+**Key Points**
+- **customData** is a free-form object; its structure is defined by the application.
+- Use only serializable values such as objects, arrays, strings, numbers, and booleans.
+- Custom data does not affect field appearance or behavior unless consumed by application logic.
+
+## Add Custom Data While Creating PDF Form Fields
+
+Custom data can be attached at the time of field creation by passing a **customData** object in the settings parameter of **addFormField()**.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set Default Custom Data for PDF Form Fields Added Using UI
+
+When users add form fields using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar), default **customData** can be defined so that newly created fields automatically inherit it. Default custom data can be configured using per-field settings objects such as:
+
+- [textFieldSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_TextFieldSettings)
+- [passwordFieldSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_PasswordFieldSettings)
+- [checkBoxFieldSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_CheckBoxFieldSettings)
+- [radioButtonFieldSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_RadioButtonFieldSettings)
+- [listBoxFieldSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ListBoxFieldSettings)
+- [dropDownFieldSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_DropDownFieldSettings)
+- [signatureFieldSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_SignatureFieldSettings)
+- [initialFieldSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_InitialFieldSettings)
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Update or Replace PDF Form Field Custom Data
+
+The **customData** of an existing form field can be modified using the [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) method. The field can be identified using its object reference or field ID.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**Tip:**
+New values should be merged with the existing **customData** object before calling [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data.
+
+## Read Custom Data from PDF Form Fields
+
+The **customData** property can be accessed from any form field at any point in the application flow, such as:
+- After the document is loaded.
+- During save or submit operations.
+- While performing validation or conditional routing.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Best Practices
+
+- Treat **customData** as application metadata, not display data.
+- Use it to drive business rules, validation logic, and workflow decisions.
+- Keep data minimal and structured for easy processing.
+- When cloning or copying form fields, ensure **customData** is copied or updated as required.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples)
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./overview-create-forms)
+- [Group form fields](./group-form-fields)
+- [Form flags](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-constrain.md
new file mode 100644
index 0000000000..da0206f82d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-constrain.md
@@ -0,0 +1,277 @@
+---
+layout: post
+title: PDF form field flags in ASP.NET Core PDF Viewer | Syncfusion
+description: Learn how to apply isReadOnly, isRequired, and isPrint flags to PDF form fields in the Syncfusion ASP.NET Core PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# PDF Form Field Flags in ASP.NET Core PDF Viewer
+
+The Syncfusion ASP.NET Core PDF Viewer allows controlling how users interact with form fields and how those fields behave during validation and printing by applying form field flags. These flags define whether a form field can be modified, whether it is mandatory, and whether it appears in printed output.
+
+This topic explains:
+- [Supported form field flags](#supported-pdf-form-field-flags)
+- [How each constraint affects field behavior](#key-actions)
+- [How to apply flags during field creation](#apply-pdf-form-field-flags-using-the-ui)
+- [How to update flags on existing fields](#update-flags-on-existing-fields-programmatically)
+- [How flags work with validation and printing](#control-print-behavior)
+
+## Supported PDF Form Field Flags
+
+The following flags are supported in the PDF Viewer:
+
+- [isReadOnly](#make-fields-read-only)
+ Prevents users from modifying the form field in the UI while still allowing updates through APIs.
+
+- [isRequired](#mark-fields-as-required)
+ Marks the form field as mandatory and includes it in form field validation.
+
+- [isPrint](#control-print-behavior)
+ Controls whether the form field appears when the document is printed.
+
+## Key Actions
+
+### Make Fields Read Only
+
+The **isReadOnly** property prevents users from modifying a form field through the UI. This is useful for displaying prefilled or calculated values that should not be changed.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Mark Fields as Required
+
+The **isRequired** property marks form fields as mandatory. To enforce this constraint, enable form field validation and validate fields before allowing actions such as printing or downloading.
+
+- Enable validation using [enableFormFieldsValidation](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation)
+- [Validate fields](./form-validation) using [validateFormFields()](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields)
+
+When required fields are empty, validation can prevent further actions.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Control Print Behavior
+
+The **isPrint** property controls whether a form field appears in the printed output of the PDF document.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Printing can be triggered programmatically using **pdfviewer.print()**. Form fields with **isPrint: false** are excluded from the printed output.
+
+## Apply PDF Form Field Flags Using the UI
+
+**Steps**
+1. Enable Form Designer mode in the PDF Viewer.
+2. Select an existing form field on the PDF page.
+3. Right-click to open the context menu and select Properties.
+4. Configure the required constraint options.
+5. Click OK to close the properties popover and apply changes.
+
+Changes are reflected immediately in the viewer.
+
+
+
+## Apply PDF Form Field Flags Programmatically
+
+Form field flags can be applied or modified in the following ways.
+
+### Apply Flags When Creating Fields
+
+Flags properties can be passed in the settings object when creating form fields using **addFormField()**.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Update Flags on Existing Fields Programmatically
+
+The [updateFormField()](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) method modifies constraint values on existing form fields.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Set Default Flags for New PDF Form Fields
+
+Default flag values can be configured so that form fields added using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar) automatically inherit them. This ensures consistent behavior for all newly created fields.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to PDF form fields](./custom-data)
+- [Form Validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-designer.md
new file mode 100644
index 0000000000..6754edb807
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-designer.md
@@ -0,0 +1,229 @@
+---
+layout: post
+title: Form Designer and Toolbar Customization in ASP.NET Core | Syncfusion
+description: Learn here all about form designer and toolbar in Syncfusion ASP.NET Core PDF Viewer Component and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Designer in ASP.NET Core PDF Viewer
+
+When **Form Designer mode** is enabled in the Syncfusion ASP.NET Core PDF Viewer, a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/asp-net-core/pdfviewer/formdesigner#/tailwind3) is displayed. This UI includes a built in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields.
+
+Form fields can be placed on the PDF, moved and resized, configured with field and widget properties, previewed, and removed as needed. The Form Designer toolbar can be shown, hidden, and customized to control available tools based on application requirements, enabling flexible and interactive form design directly within the viewer.
+
+## Key Features
+
+**Add Form Fields**
+
+The following form fields can be added to the PDF:
+
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
+
+**Edit Form Fields**
+
+Form fields can be moved, resized, aligned, distributed, copied, pasted, and changes can be undone or redone.
+
+**Set Field Properties**
+
+Field properties such as name, value, font, color, border, alignment, visibility, tab order, and required or read-only state can be configured.
+
+**Control Field Behavior**
+
+Read-only mode can be enabled or disabled, fields can be shown or hidden, and visibility during printing can be controlled.
+
+**Manage Form Fields**
+
+Form fields can be selected, grouped or ungrouped, reordered, and deleted as needed.
+
+**Save and Print Forms**
+
+Designed form fields can be saved to the PDF document and printed with their appearances.
+
+## Enable Form Designer
+
+Form design features are enabled using the ASP.NET Core TagHelper for the PDF Viewer. The TagHelper renders the client component and loads the EJ2 bundle (via `resourceUrl`), which provides the Form Designer modules at runtime.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+@page "{handler?}"
+@model IndexModel
+@{
+ ViewData["Title"] = "Home page";
+}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Form Designer UI
+
+When Form Designer mode is enabled in the Syncfusion ASP.NET Core PDF Viewer, a default [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/asp-net-core/pdfviewer/formdesigner#/tailwind3) is displayed. This UI provides a built-in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop-down lists, and signature fields. Fields can be placed on the PDF, selected, resized or moved, and configured using available editing options, enabling interactive form creation directly within the viewer.
+
+
+
+{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
+
+For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) documentation.
+
+## Form Designer Toolbar
+
+The Form Designer toolbar appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as:
+
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
+
+Each toolbar item allows placing the corresponding form field by selecting the tool and clicking the desired location in the PDF document.
+
+
+
+The following code snippet enables Form Designer using the ASP.NET Core TagHelper:
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+@page "{handler?}"
+@model IndexModel
+@{
+ ViewData["Title"] = "Home page";
+}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) documentation.
+
+## Show or Hide the Built-in Form Designer Toolbar
+
+The visibility of the Form Designer toolbar can be controlled using the [isFormDesignerToolbarVisible()](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_IsFormDesignerToolbarVisible) method. This allows displaying or hiding the Form Designer tools based on application requirements.
+
+**Use this method to:**
+- Show the Form Designer toolbar when form design is required.
+- Hide the toolbar to provide a cleaner viewing experience.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize the Built-in Form Designer Toolbar
+
+The Form Designer toolbar can be customized by specifying the tools to display and arranging them in the required order using the [FormDesignerToolbarItems](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormDesignerToolbar) property. This customization limits available tools and simplifies the user interface.
+
+**Key Points**
+- Include only the toolbar items needed, in the exact order specified.
+- Toolbar items not listed remain hidden, resulting in a cleaner, more focused UI.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Move, Resize, and Edit Form Fields
+
+Existing form fields can be moved, resized, and edited directly in the PDF Viewer using the Form Designer.
+
+- Move a field by selecting it and dragging it to the required position.
+- Resize a field using the handles displayed on the field boundary.
+
+
+
+- Edit a field by selecting it to open the Form Field Properties popover. The popover allows modifying form field and widget annotation properties. Changes are reflected immediately and saved when the properties popover is closed. For more information, see [Editing Form Fields](./manage-form-fields/modify-form-fields).
+
+## Deleting Form Fields
+
+Form fields can be removed from the PDF document by selecting the field and using one of the following methods:
+- Click the Delete option in the Form Designer UI.
+- Press the Delete key after selecting the form field.
+
+The selected form field and its associated widget annotation are permanently removed from the page. For more information, see [Deleting Form Fields](./manage-form-fields/remove-form-fields).
+
+## See Also
+
+- [Filling PDF Forms](./form-filling)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/style-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields
+- [Grouping form fields](./group-form-fields)
+- [Form Constrains](./form-constrain)
+- [Form Validation](./form-validation)
+- [Custom Data](./custom-data)
+- [Import](./import-export-form-fields/import-form-fields)/[Export Form Data](./import-export-form-fields/export-form-fields)
+- [Form field events](./form-field-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-field-events.md
new file mode 100644
index 0000000000..afc9324a84
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-field-events.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: Form Field Events in ASP.NET Core PDF Viewer control | Syncfusion
+description: Learn here all about different form field events in the Syncfusion ASP.NET Core PDF Viewer component and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# PDF Viewer Form Field Events in ASP.NET Core
+
+The Syncfusion ASP.NET Core PDF Viewer provides comprehensive form field events for tracking user interactions, responding to form changes, and implementing custom business logic. Events support scenarios such as [validation](./form-validation), UI updates, logging, and workflow automation.
+
+Form field events are triggered when adding, selecting, modifying, moving, resizing, and removing form fields.
+
+## Supported PDF Form Field Events
+
+The following table lists all supported form field events and their descriptions:
+
+| Form Field events | Description |
+|---|---|
+| [formFieldAdd](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldAdd) | Triggered when a new form field is added, either through the Form Designer UI or programmatically. |
+| [formFieldClick](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldClick) | Fired when a form field is clicked in the viewer. |
+| [formFieldDoubleClick](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldDoubleClick) | Fired when a form field is double clicked. |
+| [formFieldFocusOut](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldFocusOut) | Triggered when a form field loses focus after editing. |
+| [formFieldMouseLeave](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseLeave) | Fired when the mouse pointer leaves a form field. |
+| [formFieldMouseOver](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseover) | Fired when the mouse pointer moves over a form field. |
+| [formFieldMove](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMove) | Triggered when a form field is moved to a new position. |
+| [formFieldPropertiesChange](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldPropertiesChange) | Fired when any form field property changes, such as font, color, or constraint values. |
+| [formFieldRemove](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldRemove) | Triggered when a form field is deleted from the document. |
+| [formFieldResize](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldResize) | Fired when a form field is resized. |
+| [formFieldSelect](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldSelect) | Fired when a form field is selected in the Form Designer. |
+| [formFieldUnselect](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldUnselect) | Fired when a previously selected form field is unselected. |
+| [validateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) | Fired when form field validation fails during print or download actions. |
+
+**Common Use Cases**
+
+Form field events support:
+- Validating form data before printing or downloading.
+- Tracking user interactions with form fields.
+- Updating UI elements dynamically.
+- Logging form changes for auditing.
+- Triggering workflow actions based on field changes.
+- Enforcing business rules during form editing.
+
+## Handle PDF Form Field Events
+
+Form field events can be wired on the PDF Viewer instance to execute custom logic when specific actions occur.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**Event Behavior Notes**
+
+- Events triggered through the UI and programmatic APIs use the same event handlers.
+- Property-related events are raised immediately when changes occur.
+- Validation events are triggered only during print or download operations.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Edit form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Field Flags](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-fields-api.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-fields-api.md
new file mode 100644
index 0000000000..cf5c4287f1
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-fields-api.md
@@ -0,0 +1,446 @@
+---
+layout: post
+title: Form Fields API in ASP.NET Core PDF Viewer | Syncfusion
+description: Learn how to use Form Fields API to enable, update, retrieve and clear in the Syncfusion ASP.NET Core PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Fields API in ASP.NET Core PDF Viewer
+
+The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The table below lists the available APIs:
+
+| API | Description |
+|---|---|
+| [updateFormFieldsValue](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) | Updates the value for one or more form fields.|
+| [updateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) | Updates the properties of one or more form fields.|
+| [retrieveFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#retrieveformfields) | Retrieves all form fields or by specific criteria.|
+| [resetFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#resetformfields) | Resets the specified or all form fields to their default values.|
+| [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields) | Imports values and states for form fields from a JSON object or file stream.|
+| [focusFormField](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#focusformfield) | Sets focus to a form field by name or ID.|
+| [exportFormFieldsAsObject](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject) | Exports form fields as a JSON object.|
+| [exportFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfields) | Exports form fields as a downloadable file.|
+| [clearFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#clearformfields) | Clears values of specified or all form fields without removing them.|
+| [isFormFieldDocument](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_IsFormFieldDocument) | Indicates whether the loaded document contains form fields.|
+| [isFormDesignerToolbarVisible](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_IsFormDesignerToolbarVisible) | Gets whether the Form Designer toolbar is currently visible.|
+| [formFieldCollections](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#formfieldcollections) | Gets the collection of current form fields with their properties.|
+| [enableFormFieldsValidation](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation) | Enables or disables form field validation.|
+| [enableFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFields) | Enables or disables interaction with form fields.|
+| [enableFormDesignerToolbar](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormDesignerToolbar) | Shows or hides the Form Designer toolbar.|
+
+## updateFormFieldsValue
+
+Form field values can be updated programmatically using this API.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## updateFormFields
+
+Form field properties such as bounds, color, font, isReadOnly, required, and more can be updated using this API.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## retrieveFormFields
+
+All form fields and their properties can be retrieved, or results can be filtered by type or name.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## resetFormFields
+
+Specified form fields or all fields can be reset to their default values.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## importFormFields
+
+Form field data can be imported from an object or file into the current document.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## focusFormField
+
+Focus can be moved to a form field by name or ID.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## exportFormFieldsAsObject
+
+Current form field values and states can be exported as a JSON object.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## exportFormFields
+
+Form field data can be exported to a file for download.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## clearFormFields
+
+Values of specified or all fields can be cleared without removing the fields.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## isFormFieldDocument
+
+Returns true if the loaded document contains form fields.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## isFormDesignerToolbarVisible
+
+Gets the visibility status of the Form Designer toolbar.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## formFieldCollections
+
+The current collection of form fields with their properties can be retrieved from the viewer instance.
+
+```html
+
+```
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormFieldsValidation
+
+Built-in validation for required and constrained fields can be enabled or disabled.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormFields
+
+User interaction with form fields can be enabled or disabled globally.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormDesignerToolbar
+
+The Form Designer toolbar can be shown or hidden at runtime.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Edit form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form fields Validation](./form-validation)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-filling.md
new file mode 100644
index 0000000000..5b4a8b33d7
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-filling.md
@@ -0,0 +1,177 @@
+---
+layout: post
+title: Form filling in ASP.NET Core PDF Viewer Control | Syncfusion
+description: Learn to view, fill, export, and import PDF form fields in Syncfusion ASP.NET Core PDF Viewer, including disabling interaction and handling signatures.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Filling PDF Forms in ASP.NET Core PDF Viewer
+
+The Syncfusion PDF Viewer supports three form-filling methods:
+
+1. [Filling form fields programmatically](#fill-pdf-forms-programmatically)
+
+ Form fields can be filled or updated programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This approach is useful when form data must be set dynamically based on application logic.
+
+2. [Form filling through the user interface](#fill-pdf-forms-through-the-user-interface)
+
+ Users can fill PDF form fields directly through the UI by typing, selecting, or interacting with supported form elements.
+
+3. [Importing form field data](#fill-pdf-forms-through-import-data)
+
+ The PDF Viewer supports importing form field data into an existing document to prefill forms from external data sources.
+
+## Fill PDF forms programmatically
+
+Form field values can be updated programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This method allows setting or modifying values dynamically, without user interaction.
+
+The following example demonstrates how to update PDF form field values programmatically:
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Fill PDF forms through the User Interface
+
+Users can fill PDF form fields directly through the UI. Clicking a form field enables entering or selecting values according to the field type.
+
+
+
+The PDF Viewer supports common form fields such as text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Filled values can be edited at any time, and the entered data is retained during the viewing session.
+
+{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
+
+## Fill PDF forms through Import Data
+
+The PDF Viewer supports importing form field data into an existing document using the [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields) API. Imported data is mapped to corresponding form fields by name and displayed in the viewer; values can be edited through the UI if required.
+
+```html
+
+```
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+For more details, see [Import Form Data](./import-export-form-fields/import-form-fields).
+
+## How to get the filled data and store it to a backing system
+
+Export filled form data from the PDF Viewer and store it in a backing system such as a database or file storage. Exported data can be re-imported later to restore form state.
+
+For more details, see [Export Form Data](./import-export-form-fields/export-form-fields).
+
+## How to Validate Form Fields using `validateFormFields` Event
+
+The [validateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) event in the Syncfusion PDF Viewer is triggered when a user tries to download or submit a form while validation is enabled. You can use the [retrieveFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#retrieveformfields) API to get all the form fields and check them one by one to see if any form fields values are empty.
+
+Validation applies to all form field types. A textbox is empty if no text is entered, a list box or dropdown is empty if no item is selected, a signature or initial field is empty if not signed, and radio buttons or checkboxes are empty if none are chosen.
+
+Enable [enableFormFieldsValidation](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation) and wire the event to inspect each field and cancel actions when required fields are not filled.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/customize-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields
+- [Edit form fields](./manage-form-fields/edit-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-validation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-validation.md
new file mode 100644
index 0000000000..e6b153b306
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-validation.md
@@ -0,0 +1,138 @@
+---
+layout: post
+title: Form validation in the ASP.NET Core PDF Viewer component | Syncfusion
+description: Learn how to enable built in form field validation and validate missing required fields in the Syncfusion ASP.NET Core PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Validate PDF Form Fields in ASP.NET Core PDF Viewer
+
+The Syncfusion **ASP.NET Core PDF Viewer** provides built-in support for validating form fields before printing, downloading, or submitting a PDF document. Validation ensures all required form fields are filled, helping enforce data completeness and improving the reliability of collected data.
+
+## How PDF Form Validation Works
+
+Form field validation follows this flow:
+- Enable validation using the [enableFormFieldsValidation](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation) property.
+- Handle the [validateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) event to determine which required fields remain unfilled.
+- When validation is enabled and the user attempts to print, download, or submit:
+ - The [validateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) event is triggered.
+ - Unfilled required fields are listed in args.nonFillableFields.
+ - Cancel the action, show an error message, or focus an invalid field as needed.
+
+## Enable PDF Form Field Validation
+
+To enable validation, set the [enableFormFieldsValidation](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation) property to true and wire the validateFormFields event.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Mark Fields as Required
+
+Only fields marked as required participate in validation. Use the **isRequired** property when creating or updating form fields.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle PDF Form Validation Results
+
+In the [validateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) event, control the behavior when fields are missing. Typical actions include:
+- Cancel the print or download operation.
+- Display an error message to the user.
+- Focus the first unfilled required field.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Tips
+
+- Use **isRequired** to mark mandatory fields clearly.
+- Validation is triggered only during [print](../print), [download](../download), or submit actions.
+- For custom validation logic (such as validating email format):
+ - Retrieve all form fields using [retrieveFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#retrieveformfields).
+ - Apply custom checks before allowing the action to proceed.
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to PDF form fields](./custom-data)
+- [Form flags](./form-constrain)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/group-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/group-form-fields.md
new file mode 100644
index 0000000000..cb8931d4e9
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/group-form-fields.md
@@ -0,0 +1,125 @@
+---
+layout: post
+title: Group form fields in the Core PDF Viewer component | Syncfusion
+description: Learn how to group PDF form fields in the Syncfusion ASP.NET Core PDF Viewer by assigning the same name to multiple widgets.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Group Form Fields in ASP.NET Core PDF Viewer
+
+The Syncfusion ASP.NET Core PDF Viewer allows grouping multiple form fields into a single logical field by assigning the same Name. Grouped fields share values and states automatically based on field type. Form field grouping can be done using the Form Designer UI or programmatically via APIs.
+
+This page covers:
+- [How form field grouping works](#how-grouping-works)
+- [Field behavior based on type](#field-behavior-by-type)
+- [How to group form fields using the UI](#group-using-the-form-designer-ui)
+- [How to group form fields programmatically](#group-pdf-form-fields-programmatically)
+- [Example scenarios](#example-scenarios)
+
+## How Grouping Works
+
+In a PDF form, multiple PDF Form Fields can represent the same logical form field. When fields share the same Name, they are treated as a group and remain synchronized.
+
+## Field Behavior by Type
+
+- **Textbox and Password** — Text entered in one widget appears in all widgets with the same Name.
+- **CheckBox** — Checking one widget sets the checked state for all checkboxes with the same Name.
+- **RadioButton** — Widgets with the same Name form a radio group; only one option can be selected.
+- **ListBox and DropDown** — The selected value is shared across widgets with the same Name.
+- **Signature and Initial fields** — Applied signatures or initials are mirrored across grouped widgets.
+
+N> Form field grouping is controlled by the Name property. Widget position is determined only by bounds; grouping is unaffected by location.
+
+## Group Using the Form Designer UI
+
+**Steps**
+1. Enable the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar).
+2. Add the form fields to group.
+3. Select a form field, open Properties, and set the Name value.
+4. Assign the same Name to all PDF Form Fields in the group.
+5. Apply changes and verify that updates in one widget reflect in others.
+
+
+
+
+
+## Group PDF Form Fields Programmatically
+
+Form fields can be grouped during creation by assigning the same Name through code.
+
+### Example Scenarios
+- Two textboxes named EmployeeId share the same value.
+- A radio button group named Gender allows single selection.
+- Two checkboxes named Subscribe share the checked state.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/export-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/export-form-fields.md
new file mode 100644
index 0000000000..1ce1b366fc
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/export-form-fields.md
@@ -0,0 +1,153 @@
+---
+layout: post
+title: Export form data in the ASP.NET Core PDF Viewer component | Syncfusion
+description: Learn how to export PDF form field data (FDF, XFDF, JSON, and as an object) using the Syncfusion ASP.NET Core PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Export PDF Form Data from ASP.NET Core PDF Viewer
+
+The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats:
+
+- [FDF](#export-as-fdf)
+- [XFDF](#export-as-xfdf)
+- [JSON](#export-as-json)
+- [JavaScript Object](#export-as-object) (for custom persistence)
+
+## Available methods
+
+- [exportFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfields)(destination?, format) — Exports data to a file in the specified format.
+- [exportFormFieldsAsObject](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject)(format) — Exports data as a JavaScript object for custom handling.
+- [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) — Import data back into the PDF.
+
+## How to export
+
+Use [exportFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfields) with an optional destination path and the format type.
+
+### Export as FDF
+The following example exports form field data as FDF.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Export as XFDF
+The following example exports form field data as XFDF.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Export as JSON
+The following example exports form field data as JSON.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Export as Object
+
+Use [exportFormFieldsAsObject()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject) to obtain form data as a JavaScript object for database or API integration.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Common Use Cases
+
+- Save user-entered data to your server without altering the original PDF.
+- Export as JSON for REST API integration.
+- Export as FDF/XFDF for compatibility with other PDF tools.
+- Export as Object to merge with app state or store securely.
+- Automate exports after [validation](../form-validation) using [validateFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#validateformfields)
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Import form fields](./import-form-fields)
+- [Import Export Events](./import-export-events)
+- [Create form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-export-events.md
new file mode 100644
index 0000000000..d807c6e18b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-export-events.md
@@ -0,0 +1,107 @@
+---
+layout: post
+title: Import/Export events in the ASP.NET Core PDF Viewer | Syncfusion
+description: Learn how to handle Import/Export events for PDF form fields in the Syncfusion ASP.NET Core PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# PDF Form Import and Export Events in ASP.NET Core
+
+Import/Export events let you **track and customize the entire life cycle** of form data being imported into or exported from the PDF Viewer.
+Use these events to:
+- Validate inputs before processing.
+- Show progress indicators.
+- Log audit trails.
+- Block operations based on business rules.
+
+Each event provides detailed context through typed event arguments such as [ImportStartEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/importstarteventargs), [ImportSuccessEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/importsuccesseventargs), [ImportFailureEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/importfailureeventargs), [ExportStartEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/exportstarteventargs), [ExportSuccessEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/exportsuccesseventargs), and [ExportFailureEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/exportfailureeventargs).
+
+## Import Events
+- [importStart](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportStart) — Fires when an import begins.
+- [importSuccess](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportSuccess) — Fires when form fields are successfully imported.
+- [importFailed](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportFailed) — Fires if the import fails.
+
+**Example: Handle Import Events**
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Export Events
+- [exportStart](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ExportStart) — Fires when an export begins.
+- [exportSuccess](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ExportSuccess) — Fires when form fields are successfully exported.
+- [exportFailed](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ExportFailed) — Fires if the export fails.
+
+**Example: Handle Export Events**
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Key Notes
+- importStart, importSuccess, importFailed cover the full import life cycle.
+- exportStart, exportSuccess, exportFailed cover the full export life cycle.
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Import form fields](./import-form-fields)
+- [Export form fields](./export-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-form-fields.md
new file mode 100644
index 0000000000..accab91343
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-form-fields.md
@@ -0,0 +1,110 @@
+---
+layout: post
+title: Import form data in the ASP.NET Core PDF Viewer component | Syncfusion
+description: Learn how to import PDF form field data (FDF, XFDF, JSON, and from an object) using the Syncfusion ASP.NET Core PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Import PDF Form Data into ASP.NET Core PDF Viewer
+
+The **PDF Viewer** lets you import values into interactive form fields in the currently loaded PDF. You can import data from these formats:
+
+- [FDF](#import-as-fdf)
+- [XFDF](#import-xfdf)
+- [JSON](#import-json)
+
+## API to use
+- [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format)
+
+N>If you’re using a **server-backed viewer**, set serviceUrl before importing.
+
+### Import FDF
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Import XFDF
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Import JSON
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Common Use Cases
+
+- Pre-fill application forms from a database using JSON.
+- Migrate data from other PDF tools using FDF/XFDF.
+- Restore user progress saved locally or on the server.
+- Combine with validation to block print/download until required fields are completed.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Export form fields](./export-form-fields)
+- [Import Export Events](./import-export-events)
+- [Create Edit form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/create-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/create-form-fields.md
new file mode 100644
index 0000000000..b4e67123be
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/create-form-fields.md
@@ -0,0 +1,392 @@
+---
+layout: post
+title: Create form fields in the ASP.NET Core PDF Viewer | Syncfusion
+description: Learn how to add each PDF form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion ASP.NET Core PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Create PDF Form Fields in ASP.NET Core PDF Viewer
+
+You can create or add new form fields either visually using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/asp-net-core/pdfviewer/formdesigner#/tailwind3) or dynamically using APIs.
+
+## Create Form Fields Using the Form Designer UI
+Use this approach when you want to design forms manually without writing code.
+
+**Steps:**
+
+1. Enable [Form Designer](../form-designer) mode in the PDF Viewer.
+2. Click a form field type (Textbox, Checkbox, Dropdown, etc.) from the toolbar.
+3. Click on the PDF page to place the form field.
+4. Move or resize the field as required.
+5. Configure field properties using the **Properties** panel.
+
+
+
+## Add Form Fields Programmatically (API)
+
+Use this approach when you want to generate form fields dynamically based on data or application logic.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**Use programmatic creation when:**
+
+- Building dynamic forms
+- Pre-filling forms from databases
+- Automating form creation workflows
+
+## PDF Form Field Types and How to Add Them
+Each field can be added via the **Form Designer** or **programmatically**.
+
+### Textbox
+
+**Add via Toolbar (UI)**
+- Open **Form Designer** → select **Textbox** → click on the page → configure in **Properties**.
+
+
+**Add Programmatically (API)**
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Password
+
+**Add via Toolbar (UI)**
+- Select **Password** → place it → configure tooltip, required, max length.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### CheckBox
+**Add via Toolbar (UI)**
+- Select **CheckBox** → click to place → duplicate for options → set isChecked, tooltip, appearance.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### RadioButton
+**Add via Toolbar (UI)**
+- Select **RadioButton** → place buttons with the **same Name** to group → configure selection/colors.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### ListBox
+**Add via Toolbar (UI)**
+- Select **ListBox** → place → add items in **Properties**.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### DropDown
+**Add via Toolbar (UI)**
+- Select **DropDown** → place → add items → set default value.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Signature Field
+**Add via Toolbar (UI)**
+- Select **Signature Field** → place where signing is required → configure indicator text, thickness, tooltip, required.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Initial Field
+**Add via Toolbar (UI)**
+- Select **Initial Field** → place where initials are needed → configure text and required state.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Fields Dynamically with setFormFieldMode
+
+Use **setFormFieldMode()** to add fields on the fly based on user actions.
+
+### Edit Form Fields in ASP.NET Core PDF Viewer
+You can edit form fields using the UI or API.
+
+#### Edit Using the UI
+- Right click a field → **Properties** to update settings. (Image here)
+- Drag to move; use handles to resize.
+- Use the toolbar to toggle field mode or add new fields.
+
+#### Edit Programmatically
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples)
+
+## See Also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Modify form fields](./modify-form-fields)
+- [Style form fields](./style-form-fields)
+- [Remove form fields](./remove-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form Fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/customize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/customize-form-fields.md
new file mode 100644
index 0000000000..432a9a12f9
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/customize-form-fields.md
@@ -0,0 +1,112 @@
+---
+layout: post
+title: Customize form fields in the ASP.NET Core PDF Viewer | Syncfusion
+description: Learn how to customize PDF form fields using the UI and programmatically with APIs in the Syncfusion ASP.NET Core PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Customize the appearance of PDF Form Fields in ASP.NET Core PDF Viewer
+
+**Styling** customizes appearance only (font, color, alignment, border, background, indicator text).
+
+## Customize Appearance of Form Fields Using the UI
+Use the **Properties** panel to adjust:
+- Font family/size, text color, alignment
+- Border color/thickness
+- Background color
+
+
+## Customize appearance Form Fields Programmatically
+Use [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to apply styles.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set Default Styles for New Form Fields
+Define defaults so fields added from the toolbar inherit styles.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Modify form fields](./modify-form-fields)
+- [Remove form fields](./remove-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/modify-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/modify-form-fields.md
new file mode 100644
index 0000000000..71e59298a6
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/modify-form-fields.md
@@ -0,0 +1,361 @@
+---
+layout: post
+title: Modify form fields in the ASP.NET Core PDF Viewer | Syncfusion
+description: Learn how to modify PDF form fields using the UI and programmatically with APIs in the Syncfusion ASP.NET Core PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Modify PDF Form Field Properties in ASP.NET Core PDF Viewer
+You can modify form fields using the **UI** or **API**.
+
+## Modify PDF Form Field Properties using the UI
+- Right click a field → **Properties** to update settings.
+
+- Drag to move; use handles to resize.
+- Use the toolbar to toggle field mode or add new fields.
+
+## Modify PDF Form Field Properties programmatically
+Use [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to change behavior/data (including position and size).
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Modify PDF Form Field Properties by Field type
+
+### Textbox
+- UI: Update value, font, size, colors, border thickness, alignment, max length, multiline.
+
+- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for value, typography, alignment, colors, borders.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Password
+
+- UI: Tooltip, required, max length, font, appearance.
+
+- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, validation flags, typography, colors, alignment, borders.
+
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### CheckBox
+- UI: Toggle checked state.
+
+- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for isChecked, tooltip, colors, borders.
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### RadioButton
+• UI: Set selected item in a group (same Name).
+
+• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to set selected value and border appearance.
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### ListBox
+• UI: Add/remove items, set selection, adjust fonts/colors.
+
+• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, selection, borders.
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### DropDown
+• UI: Add/remove items, default value, appearance.
+
+• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders.
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Signature Field
+• UI: Tooltip, thickness, indicator text, required/visibility.
+
+• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders.
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Initial Field
+• UI: Tooltip, indicator text, thickness, required/visibility.
+
+• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders.
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Remove form Fields](./remove-form-fields)
+- [Style form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/move-resize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/move-resize-form-fields.md
new file mode 100644
index 0000000000..2e0906e5b9
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/move-resize-form-fields.md
@@ -0,0 +1,56 @@
+---
+layout: post
+title: Move and Resize form fields in the Core PDF Viewer | Syncfusion
+description: Learn how to move and resize PDF form fields using the UI and programmatically with APIs in the Syncfusion ASP.NET Core PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Move and Resize PDF Form Fields in ASP.NET Core PDF Viewer
+- **Move**: Drag the form field to reposition it.
+- **Resize**: Use the resize handles to change width and height.
+
+
+
+## Move and Resize Fields Programmatically (API)
+You can set absolute bounds or move fields by a delta.
+
+**Set absolute bounds**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Remove form Fields](./remove-form-fields)
+- [Customize form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/remove-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/remove-form-fields.md
new file mode 100644
index 0000000000..24aeb50229
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/remove-form-fields.md
@@ -0,0 +1,63 @@
+---
+layout: post
+title: Remove form fields in the Core PDF Viewer component | Syncfusion
+description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion ASP.NET Core PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Remove PDF Form Fields in ASP.NET Core PDF Viewer
+
+## Remove Form Fields Using the UI
+**Steps:**
+1. Enable **Form Designer mode**.
+2. Select the form field.
+3. Click **Delete** in the toolbar or press the **Delete** key.
+
+
+## Remove Form Fields Programmatically
+Use **deleteFormField()** with a field reference or ID.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Modify form fields](./modify-form-fields)
+- [Customize form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/overview-create-forms.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/overview-create-forms.md
new file mode 100644
index 0000000000..aa9424099c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/overview-create-forms.md
@@ -0,0 +1,20 @@
+---
+layout: post
+title: Overview of Create form fields in ASP.NET Core PDF Viewer | Syncfusion
+description: Learn how to create edit each form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion ASP.NET Core PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+
+# Create, Edit, Style, and Remove Form Fields in ASP.NET Core PDF Viewer
+
+The [ASP.NET Core PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/overview) enables creating interactive PDF form fields, updating their behavior and appearance, and removing them as needed. Form field operations can be performed using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/asp-net-core/pdfviewer/formdesigner#/tailwind3) or [ASP.NET Core APIs](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html).
+
+This section explains how to:
+
+- [Create PDF form fields](./manage-form-fields/create-form-fields)
+- [Edit form field behavior and values](./manage-form-fields/modify-form-fields)
+- [Style form field appearance](./manage-form-fields/customize-form-fields)
+- [Remove form fields from PDF documents](./manage-form-fields/remove-form-fields)
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/overview.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/overview.md
new file mode 100644
index 0000000000..f3bea62aeb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/overview.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: Overview of Forms in ASP.NET Core PDF Viewer | Syncfusion
+description: Learn what the Form Designer in Syncfusion Core PDF Viewer offers, supported field types, and how the topics are organized.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Overview of Forms in ASP.NET Core PDF Viewer
+
+The Syncfusion PDF Viewer provides a complete, easy-to-use PDF forms experience. Form fields can be read, filled, added, edited, and deleted directly within PDF documents through the intuitive UI and powerful programmatic APIs. The viewer includes smooth import and export support for form data, enabling effortless integration. Developers gain extensive API control while end users enjoy a clean interface for seamless form-filling.
+
+## Filling PDF Forms
+
+PDF forms can be filled effortlessly through a clean, intuitive UI or automated workflows via powerful APIs. Flexible form data import and export support ensures smooth operations.
+
+See the [Filling PDF Forms](./form-filling) page for full details.
+
+Use the following code-snippet to enable form-filling by using the ASP.NET Core `ejs-pdfviewer` markup.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+1. [Programmatically Form fill](./form-filling#fill-pdf-forms-programmatically)
+2. [Form Fill Using UI](./form-filling#fill-pdf-forms-through-the-user-interface)
+3. [Import the Form data](./form-filling#fill-pdf-forms-through-import-data)
+
+## Form Designer
+
+A built-in Form Designer enables quick addition, editing, moving, and deletion of form fields. PDF forms can be designed interactively using built-in tools or customized form designer solutions.
+
+See the [Form Designer](./form-designer) page for full details.
+
+Use the following Code-snippet to enable Form Designer using the ASP.NET Core `ejs-pdfviewer` markup.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+Interactive fields can be created and customized directly on the PDF page.
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), or [remove](./manage-form-fields/remove-form-fields) forms
+- [Add signature fields](./manage-form-fields/create-form-fields#add-signature-field)
+- [Edit form fields](./manage-form-fields/modify-form-fields)
+- [Remove form fields](./manage-form-fields/remove-form-fields)
+- [Form field constraints](./form-constrain)
+
+## Supported form field types
+
+- [Textbox](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password](../forms/manage-form-fields/create-form-fields#add-password)
+- [CheckBox](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [RadioButton](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [ListBox](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [DropDown](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/getting-started-with-server-backed.md
index f7c8bbd8d7..96753bbbeb 100644
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/getting-started-with-server-backed.md
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/getting-started-with-server-backed.md
@@ -1,43 +1,54 @@
---
layout: post
-title: Getting Started with EJ2 ASP.NET Core PDF Viewer Control | Syncfusion
-description: Learn how to getting started with PDF Viewer control in ASP.NET Core application. You can view and comment on PDFs in ease and also can fill forms.
+title: Getting Started with Server-Backed EJ2 ASP.NET Core PDF Viewer | Syncfusion
+description: Learn how to integrate the server-backed PDF Viewer control in an ASP.NET Core application. View, annotate, and fill PDF forms with server-side rendering and processing.
platform: document-processing
control: PDF Viewer
documentation: ug
---
-# Getting Started with ASP.NET Core PDF Viewer control
+# Getting Started with Server-Backed ASP.NET Core PDF Viewer
-The [ASP.NET Core PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) control is used for viewing and printing PDF files in web applications. It provides a rich viewing experience with core interactions such as zooming, scrolling, text search, text selection, and text copying. Built-in thumbnail, bookmark, hyperlink, and table of contents support enables easy navigation within and across PDF files.
-
-This section briefly explains how to integrate the ASP.NET Core PDF Viewer control into an ASP.NET Core application using Visual Studio.
+The [ASP.NET Core PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) control is a server-backed solution for viewing, printing, and interacting with PDF files in web applications. Unlike the standalone PDF Viewer that performs client-side rendering, the server-backed variant processes and renders PDFs on the server, providing enhanced performance and security for enterprise applications. The control delivers a rich viewing experience with core interactions such as zooming, scrolling, text search, text selection, and text copying. Built-in support for thumbnails, bookmarks, hyperlinks, and tables of contents enables seamless navigation within and across PDF documents. Users can also annotate documents and fill form fields directly within the viewer.
## Prerequisites
-[System requirements for ASP.NET Core controls](https://help.syncfusion.com/document-processing/system-requirements)
+Before starting the setup, ensure the following requirements are met:
-For production apps, ensure that a valid Syncfusion license key is registered in the application as described in the [ASP.NET Core licensing](https://ej2.syncfusion.com/aspnetcore/documentation/licensing/overview) documentation.
+- **System Requirements**: Review the [system requirements for ASP.NET Core controls](https://help.syncfusion.com/document-processing/system-requirements)
+- **License**: For production applications, a valid Syncfusion license key must be registered as described in the [ASP.NET Core licensing documentation](https://ej2.syncfusion.com/aspnetcore/documentation/licensing/overview)
## Integrate PDF Viewer into an ASP.NET Core application
+### Step 1: Create a new ASP.NET Core project
+
1. Start Visual Studio and select **Create a new project**.
2. In the **Create a new project** dialog, select **ASP.NET Core Web App**.
-
+
3. In the **Configure your new project** dialog, enter the project name and select **Next**.
-
-4. In the **Additional information** dialog, select **.NET 6.0 (Long-term Support)** or a later LTS version (such as .NET 8), and then select **Create**.
-
+
+4. In the **Additional information** dialog, select **.NET 6.0 (Long-term Support)** or a later LTS version (such as .NET 8.0), and then select **Create**.
+
## ASP.NET Core PDF Viewer NuGet package installation
-To add the ASP.NET Core PDF Viewer control, the following NuGet package needs to be installed in the ASP.NET Core application:
+### Step 2: Install required NuGet packages
+
+To add Syncfusion ASP.NET Core controls to the application, use the NuGet package manager. Open the Package Manager Console or use the NuGet Package Manager UI in Visual Studio and install the [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core/) package.
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }}
-* Use [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core/)
+{% endhighlight %}
+{% endtabs %}
## Add Syncfusion® ASP.NET Core Tag Helper
-Open `~/Pages/_ViewImports.cshtml` and import the `Syncfusion.EJ2` Tag Helper.
+### Step 3: Import the Tag Helper
+
+Open `~/Pages/_ViewImports.cshtml` and add the Syncfusion EJ2 Tag Helper import. This makes all Syncfusion tag helpers available throughout the application.
{% tabs %}
{% highlight c# tabtitle="~/_ViewImports.cshtml" %}
@@ -49,7 +60,9 @@ Open `~/Pages/_ViewImports.cshtml` and import the `Syncfusion.EJ2` Tag Helper.
## Add style sheet
-Reference the theme using the CDN inside the `` of `~/Pages/Shared/_Layout.cshtml`:
+### Step 4: Add component styles
+
+Reference the Syncfusion theme using the CDN inside the `` of `~/Pages/Shared/_Layout.cshtml`. This stylesheet provides styling for all Syncfusion components including the PDF Viewer.
{% tabs %}
{% highlight c# tabtitle="~/_Layout.cshtml" %}
@@ -67,7 +80,9 @@ N> See the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentation/ap
## Add script reference
-Add the required scripts using the CDN inside the `` of `~/Pages/Shared/_Layout.cshtml`:
+### Step 5: Add component scripts
+
+Add the Syncfusion JavaScript library using the CDN inside the `` of `~/Pages/Shared/_Layout.cshtml`. This script provides the core functionality for all Syncfusion components.
{% tabs %}
{% highlight c# tabtitle="~/_Layout.cshtml" %}
@@ -83,7 +98,9 @@ Add the required scripts using the CDN inside the `` of `~/Pages/Shared/_L
## Register Syncfusion® Script Manager
-Open `~/Pages/Shared/_Layout.cshtml` and register the script manager in the ASP.NET Core application:
+### Step 6: Register the script manager
+
+Open `~/Pages/Shared/_Layout.cshtml` and register the script manager at the end of the `` tag. The script manager initializes Syncfusion components and manages their lifecycle.
{% tabs %}
{% highlight c# tabtitle="~/_Layout.cshtml" %}
@@ -102,7 +119,9 @@ N> Add the script manager `
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").DocumentLoad("documentLoad").DownloadEnd("documentLoad").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## Edit/Update form field programmatically
-
-Use the updateFormField method to modify a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it as the first parameter. Provide the properties to update as the second parameter. The following example updates the background color of a Textbox field.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").DocumentLoad("documentLoad").DownloadEnd("documentLoad").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").DocumentLoad("documentLoad").DownloadEnd("documentLoad").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## Delete form field programmatically
-
-Use the deleteFormField method to remove a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it to deleteFormField. The following example deletes the first form field.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").DocumentLoad("documentLoad").DownloadEnd("documentLoad").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").DocumentLoad("documentLoad").DownloadEnd("documentLoad").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## Save form fields
-
-Selecting the Download icon on the toolbar saves the form fields in the exported PDF without modifying the original document. See the following GIF for reference.
-
-
-
-You can invoke the download action using the following code snippet.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentLoad("download").EnableDownload(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
-
-
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentLoad("download").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableDownload(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
-
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## Print form fields
-
-Selecting the Print icon on the toolbar prints the PDF with the added form fields. This action does not modify the original document. See the following GIF for reference.
-
-
-
-You can invoke the print action using the following code snippet:
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").EnablePrint(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
-
-
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnablePrint(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
-
-
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## Open an existing PDF document
-
-Open a PDF that already contains form fields by clicking the Open icon on the toolbar. See the following GIF for reference.
-
-
-
-## Validate form fields
-
-Form fields are validated when `enableFormFieldsValidation` is set to true and the validateFormFields event is handled. The event triggers during download or print if required fields are not filled. The non-filled fields are available in the `nonFillableFields` property of the event arguments.
-
-Add the following code to validate form fields:
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").ValidateFormFields("validateFormFields").EnableFormFieldsValidation(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
-
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).ValidateFormFields("validateFormFields").EnableFormFieldsValidation(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
-
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## Export and import form fields
-
-The PDF Viewer component supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods in the following formats:
-
-- FDF
-- XFDF
-- JSON
-
-### Export and import as FDF
-
-Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters:
-
-- The first parameter is the destination path for the exported data. If the path is not specified, a location is requested during export.
-- The second parameter specifies the format type for the form data.
-
-The following code exports and imports form field data as FDF.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-### Export and import as XFDF
-
-The following code exports and imports form field data as XFDF.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-### Export and import as JSON
-
-The following code exports and imports form field data as JSON.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-### Export and import as Object
-
-The PDF Viewer component supports exporting the form field data as an object and importing that data back into the current PDF document.
-
-The following example shows how to export the form field data as an object and import the form field data from that object into the current PDF document via a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## Form field properties
-
-Form field properties allow customization and interaction with fields embedded in PDF documents. The following sections outline the supported field types and their configurable settings.
-
-- Textbox
-- Password
-- CheckBox
-- RadioButton
-- ListBox
-- DropDown
-- Signature field
-- Initial field
-
-### Signature and initial fields settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following code example explains how to update the signature field properties on a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a signature field added from the Form Designer toolbar.
-
-```html
-
-```
-
-
-
-The following code shows how to configure default properties for an initial field added from the Form Designer toolbar.
-
-```html
-
-```
-
-
-
-### Textbox field settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following example updates Textbox field properties on a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a Textbox field added from the Form Designer toolbar.
-
-```html
-
-```
-
-
-
-### Password field settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following example updates Password field properties on a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("PDF_Succinctly.pdf").Render()
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("PDF_Succinctly.pdf").Render()
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a Password field added from the Form Designer toolbar.
-
-```html
-
-```
-
-
-
-### CheckBox field settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following example updates CheckBox field properties on a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a CheckBox field added from the Form Designer toolbar.
-
-```html
-
-```
-
-
-
-### RadioButton field settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following example updates RadioButton field properties on a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a RadioButton field added from the Form Designer toolbar.
-
-```html
-
-```
-
-
-
-### ListBox field settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following example updates ListBox field properties on a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a ListBox field added from the Form Designer toolbar.
-
-```html
-
-```
-
-
-
-### DropDown field settings
-
-Use the `updateFormField` method to modify form fields programmatically.
-
-The following example updates DropDown field properties on a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code shows how to configure default properties for a DropDown field added from the Form Designer toolbar.
-
-```html
-
-```
-
-
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-designer/create-with-user-interface-interaction.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-designer/create-with-user-interface-interaction.md
deleted file mode 100644
index 8050f97e61..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-designer/create-with-user-interface-interaction.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-layout: post
-title: Design form fields in the ASP.NET MVC PDF Viewer | Syncfusion
-description: Learn how to add, drag, resize, edit, and manage form fields using the UI in the Syncfusion ASP.NET MVC PDF Viewer component.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
----
-
-# Design form fields with UI interaction in ASP.NET MVC PDF Viewer
-
-The PDF Viewer component supports interactive form field design, including drawing, dragging, and resizing fields directly on the page. Click the Form Field icon on the toolbar to add a field and place it on the document. Supported form field types include:
-
-- Textbox
-- Password
-- CheckBox
-- RadioButton
-- ListBox
-- DropDown
-- SignatureField
-- InitialField
-
-## Enable or Disable form designer toolbar
-
-Inject the FormDesigner module and set enableFormDesignerToolbar to true to display the Form Designer icon on the toolbar. The default value is true. Use the following code to enable the toolbar option.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").EnableFormDesignerToolbar(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableFormDesignerToolbar(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## Add the form field dynamically
-
-Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference.
-
-
-
-## Drag the form field
-
-Drag the selected form field to reposition it within the PDF document. See the following GIF for reference.
-
-
-
-## Resize the form field
-
-Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference.
-
-
-
-## Edit or Update the form field dynamically
-
-Edit form field properties using the Form Field Properties dialog. Open it by right-clicking a form field and selecting Properties from the context menu. The following images show examples of available settings.
-
-
-
-
-
-
-
-## Clipboard operation with form field
-
-The PDF Viewer supports clipboard operations such as cut, copy, and paste for form fields. Right-click a form field to open the context menu and choose the desired clipboard action. The following image shows the available options.
-
-
-
-## Undo and Redo
-
-Undo and redo actions are supported for runtime changes made to form fields. Use the following code to perform undo and redo operations.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-designer/form-field-events.md
deleted file mode 100644
index 6717f64486..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-designer/form-field-events.md
+++ /dev/null
@@ -1,543 +0,0 @@
----
-layout: post
-title: Form field events in ASP.NET MVC PDF Viewer | Syncfusion
-description: Learn about form field events supported in the Syncfusion ASP.NET MVC PDF Viewer component and how to handle them.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
----
-
-# Form field events in ASP.NET MVC PDF Viewer
-
-The PDF Viewer component provides support for various form field events. The following events are available:
-
-| Form field events | Description |
-|---|---|
-| formFieldAdd | Triggered when a form field is added. |
-| formFieldClick | Triggered when a form field is clicked. |
-| formFieldDoubleClick | Triggered when a form field is double-clicked. |
-| formFieldFocusOut | Triggered when focus moves out of a form field. |
-| formFieldMouseLeave | Triggered when the mouse cursor leaves a form field. |
-| formFieldMouseOver | Triggered when the mouse cursor is over a form field. |
-| formFieldMove | Triggered when a form field is moved. |
-| formFieldPropertiesChange | Triggered when a form field property changes. |
-| formFieldRemove | Triggered when a form field is removed. |
-| formFieldResize | Triggered when a form field is resized. |
-| formFieldSelect | Triggered when a form field is selected. |
-| formFieldUnselect | Triggered when a form field is unselected. |
-| validateFormFields | Triggered when validation fails. |
-
-## formFieldAdd event
-
-The [formFieldAdd](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldAdd) event is triggered when a new form field is added, either programmatically or through user interaction. The event arguments provide details about the added form field.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldAdd("formFieldAdded").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldAdd("formFieldAdded").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldClick("formFieldClicked").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldDoubleClick("formFieldDoubleClicked").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldFocusOut("FormFieldFocusOuted").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldMouseLeave("FormFieldMouseLeaved").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldMouseover("FormFieldMouseovered").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMove event
-
-The [formFieldMove](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMove) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldMove("FormFieldMoved").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldMove("FormFieldMoved").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldPropertiesChange event
-
-The [formFieldPropertiesChange](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldPropertiesChange) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldPropertiesChange("FormFieldPropertiesChanged").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldPropertiesChange("FormFieldPropertiesChanged").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldRemove event
-
-The [formFieldRemove](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldRemove) event is triggered when a form field is removed from the PDF. The event arguments provide details about the removed field.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldRemove("FormFieldRemoved").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldRemove("FormFieldRemoved").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldResize event
-
-The [formFieldResize](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldResize) event is triggered when a form field is resized. The event arguments include current and previous positions.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldResize("FormFieldResized").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldResize("FormFieldResized").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldSelect event
-
-The [formFieldSelect](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldSelect) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldSelect("FormFieldSelected").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldSelect("FormFieldSelected").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldUnselect event
-
-The [formFieldUnselect](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldUnselect) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldUnselect("FormFieldUnselected").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").FormFieldUnselect("FormFieldUnselected").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## validateFormFields event
-
-The [ValidateFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").ValidateFormFields("ValidateFormField").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").ValidateFormFields("ValidateFormField").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-filling.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-filling.md
deleted file mode 100644
index f76b29e4b8..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/form-filling.md
+++ /dev/null
@@ -1,136 +0,0 @@
----
-layout: post
-title: Form filling in ASP.NET MVC PDF Viewer control | Syncfusion
-description: Learn how to view, fill, export, and import PDF form fields with ASP.NET MVC PDF Viewer control of Syncfusion Essential JS 2 and more details.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
----
-
-# Form filling in ASP.NET MVC PDF Viewer Component
-
-The PDF Viewer component displays existing form fields in a PDF document and enables filling and downloading filled data.
-
-The form fields displayed in the PDF Viewer are:
-
-* TextBox
-* Password
-* CheckBox
-* RadioButton
-* ListBox
-* DropDown
-* SignatureField
-* InitialField
-
-
-
-## Disabling form fields
-
-The PDF Viewer control provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").EnableFormFields(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).EnableFormFields(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## How to draw handwritten signature in the signature field
-
-Add a handwritten signature to a Signature field by following these steps:
-
-* Click the signature field in the PDF document to open the signature panel.
-
-
-
-* Draw the signature in the signature panel.
-
-
-
-* Click the **CREATE** button. The drawn signature is added to the signature field.
-
-
-
-## Delete the signature inside the signature field
-
-Delete a signature placed in a signature field by using the Delete option in the annotation toolbar.
-
-
-
-## Export and import form fields
-
-The PDF Viewer control provides the support to export and import the form field data in the following formats using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods.
-
-* FDF
-* XFDF
-* JSON
-
-## Importing form fields using PDF Viewer API
-
-You can import the form fields using JSON file or JSON object in code behind like the below code sample.
-
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
-
-
-```
-
-N>The JSON file for importing the form fields should be placed in the desired location and the path should be provided correctly.
-
-## Exporting form fields from the PDF document using PDF Viewer API
-
-You can export the form fields as JSON file in code behind as the following code sample.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
-
-
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-```html
-
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
-
-
-```
-{% endhighlight %}
-{% endtabs %}
-
-## See also
-
-* [Handwritten Signature in ASP.NET MVC PDF Viewer Component](./annotation/signature-annotation)
-* [Form Designer](./form-designer/form-field-events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/custom-data.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/custom-data.md
new file mode 100644
index 0000000000..de75a7fcfc
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/custom-data.md
@@ -0,0 +1,177 @@
+---
+layout: post
+title: Add custom data to form fields in MVC PDF Viewer | Syncfusion
+description: Learn how to attach, update, and read custom data on PDF form fields using the Form Designer UI and APIs in the Syncfusion MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Add Custom Data to PDF Form Fields in MVC PDF Viewer
+
+The **Syncfusion MVC PDF Viewer** allows you to attach **custom application-specific data** to form fields by using the customData property. This enables you to associate business identifiers, tags, validation hints, or workflow metadata with form fields.
+
+The custom data remains linked to the form field throughout the viewer session and can be accessed or updated whenever the field is queried or modified.
+
+This page explains how to:
+- [Add custom data when creating form fields](#add-custom-data-while-creating-pdf-form-fields)
+- [Define default custom data for fields created using the UI](#set-default-custom-data-for-pdf-form-fields-added-using-ui)
+- [Update or replace custom data for existing fields](#update-or-replace-pdf-form-field-custom-data)
+- [Read custom data from form fields](#read-custom-data-from-pdf-form-fields)
+- [Apply best practices when using custom data](#best-practices)
+
+**Key Points**
+- customData is a **free form object**; you control its structure.
+- Use only **serializable values** such as objects, arrays, strings, numbers, and booleans.
+- Custom data does not affect the field appearance or behavior unless consumed by your application logic.
+
+## Add Custom Data While Creating PDF Form Fields
+
+You can attach custom data at the time of field creation by passing a **customData** object in the settings parameter of **addFormField()**.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set Default Custom Data for PDF Form Fields Added Using UI
+
+When users add form fields using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar), you can define default customData so that newly created fields automatically inherit it. Default custom data can be configured using per-field settings objects such as:
+
+- [textFieldSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_TextFieldSettings)
+- [passwordFieldSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_PasswordFieldSettings)
+- [checkBoxFieldSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_CheckBoxFieldSettings)
+- [radioButtonFieldSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_RadioButtonFieldSettings)
+- [listBoxFieldSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ListBoxFieldSettings)
+- [dropDownFieldSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_DropDownFieldSettings)
+- [signatureFieldSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_SignatureFieldSettings)
+- [initialFieldSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_InitialFieldSettings)
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Update or Replace PDF Form Field Custom Data
+
+You can modify the customData of an existing form field by using the [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) method. The field can be identified using either its object reference or field ID.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**Tip:**
+Merge new values with the existing customData object before calling [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) to avoid overwriting previously stored data.
+
+## Read Custom Data from PDF Form Fields
+
+You can access the customData property from any form field at any point in your application flow, such as:
+- After the document is loaded
+- During save or submit operations
+- While performing validation or conditional routing
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Best Practices
+
+- Treat customData as application metadata, not display data.
+- Use it to drive business rules, validation logic, and workflow decisions.
+- Keep the data minimal and structured for easy processing.
+- When cloning or copying form fields, ensure customData is copied or updated as required.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples)
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form flags](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-constrain.md
new file mode 100644
index 0000000000..52ce373320
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-constrain.md
@@ -0,0 +1,289 @@
+---
+layout: post
+title: PDF form field flags in MVC PDF Viewer | Syncfusion
+description: Learn how to apply isReadOnly, isRequired, and isPrint flags to PDF form fields in the Syncfusion MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# PDF form field flags in MVC PDF Viewer
+
+The Syncfusion **MVC PDF Viewer** allows you to control how users interact with form fields and how those fields behave during validation and printing by applying **form field flags**. These flags define whether a form field can be modified, whether it is mandatory, and whether it appears in printed output.
+
+This topic explains:
+- [Supported form field flags](#supported-pdf-form-field-flags)
+- [How each constraint affects field behavior](#key-actions)
+- [How to apply flags during field creation](#apply-pdf-form-field-flags-using-the-ui)
+- [How to update flags on existing fields](#update-flags-on-existing-fields-programmatically)
+- [How flags work with validation and printing](#control-print-behavior)
+
+## Supported PDF Form Field Flags
+
+The following flags are supported in the PDF Viewer:
+
+- [isReadOnly](#make-fields-read-only)
+ Prevents users from modifying the form field in the UI while still allowing updates through APIs.
+
+- [isRequired](#mark-fields-as-required)
+ Marks the form field as mandatory and includes it in form field validation.
+
+- [isPrint](#control-print-behavior)
+ Controls whether the form field appears when the document is printed.
+
+## Key Actions
+
+### Make Fields Read Only
+Use the **isReadOnly** property to prevent users from modifying a form field through the UI. This is useful for displaying pre-filled or calculated values that should not be changed by the user.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Mark Fields as Required
+Use the **isRequired** property to mark form fields as mandatory. To enforce this constraint, enable form field validation and validate fields before allowing actions such as printing or downloading.
+
+- Enable validation using [enableFormFieldsValidation](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#enableFormFieldsValidation)
+- [Validate fields](./form-validation) using [validateFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#validateFormFields)
+
+If required fields are empty, validation can prevent further actions.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Control Print Behavior
+Use the **isPrint** property to control whether a form field appears in the printed output of the PDF document.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Printing can be triggered programmatically using **pdfviewer.print()**. Form fields with **isPrint: false** are excluded from the printed output.
+
+## Apply PDF Form Field Flags Using the UI
+
+**Steps**
+1. Enable **Form Designer** mode in the PDF Viewer.
+2. Select an existing form field on the PDF page.
+3. The **Right click To open context menu - > Properties** popover is displayed.
+4. Configure the required constraint options.
+5. Click “Ok” and Close the properties popover to apply the changes.
+
+Changes are reflected immediately in the viewer.
+
+[Applying form field flags using the UI](../../javascript-es6/images/formfields-flag.gif)
+
+## Apply PDF Form Field Flags Programmatically
+
+You can apply or modify form field flags in the following ways.
+
+### Apply flags When Creating Fields
+Pass the flags properties in the settings object when creating form fields using **addFormField()**.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Update flags on Existing Fields programmatically
+Use the [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) method to modify constraint values on existing form fields.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Set Default Flags for New PDF Form Fields
+You can configure default flag values so that form fields added using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar) automatically inherit them. This helps ensure consistent behavior for all newly created fields.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to PDF form fields](./custom-data)
+- [Form Validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-designer.md
new file mode 100644
index 0000000000..10b53c5533
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-designer.md
@@ -0,0 +1,215 @@
+---
+layout: post
+title: Form Designer and Toolbar Customization in MVC | Syncfusion
+description: Learn here all about form designer and toolbar in Syncfusion MVC PDF Viewer of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Designer in MVC PDF Viewer
+
+When **Form Designer mode** is enabled in the Syncfusion MVC PDF Viewer, a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/asp-net-mvc/pdfviewer/default#/tailwind3) is displayed. This UI includes a built in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields.
+
+Using the Form Designer UI, users can place form fields on the PDF, move and resize them, configure field and widget properties, preview the designed form, and remove fields when required. The Form Designer toolbar can also be shown or hidden and customized to control the available tools based on application requirements, enabling flexible and interactive form design directly within the viewer.
+
+## Key Features
+
+**Add Form Fields**
+You can add the following form fields to the PDF:
+
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
+
+**Edit Form Fields**
+You can move, resize, align, distribute, copy, paste, and undo or redo changes to form fields.
+
+**Set Field Properties**
+You can configure field properties such as name, value, font, color, border, alignment, visibility, tab order, and required or read only state.
+
+**Control Field Behavior**
+You can enable or disable read only mode, show or hide fields, and control whether fields appear when printing the document.
+
+**Manage Form Fields**
+You can select, group or ungroup, reorder, and delete form fields as needed.
+
+**Save and Print Forms**
+Designed form fields can be saved into the PDF document and printed with their appearances.
+
+## Enable Form Designer
+
+To enable form design features, use the MVC PDF Viewer helper to render the viewer and control the `enableFormDesigner` option. After rendering, set `enableFormDesigner` via the viewer instance or in the server-side helper.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Form Designer UI
+
+When Form Designer mode is enabled in the Syncfusion MVC PDF Viewer, a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/asp-net-mvc/pdfviewer/default#/tailwind3) is displayed. This UI provides a built in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer.
+
+
+
+For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) in MVC PDF Viewer documentation.
+
+## Form Designer Toolbar
+
+The **Form Designer toolbar** appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as:
+
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
+
+Each toolbar item allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document.
+
+
+
+Use the following example to render the MVC PDF Viewer and enable/disable the Form Designer option.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation in MVC PDF Viewer documentation](./manage-form-fields/create-form-fields).
+
+
+## Show or Hide the Built-in Form Designer Toolbar
+
+You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_IsFormDesignerToolbarVisible) property on the viewer instance. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements.
+
+**Use this method to:**
+- Show the Form Designer toolbar when form design is required
+- Hide the toolbar to provide cleaner viewing experience
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize the Built-in Form Designer Toolbar
+
+You can customize the Form Designer toolbar by specifying the tools to display and arranging them in the required order using the [FormDesignerToolbarItems](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormDesignerToolbarItems) property.
+
+This customization helps you limit the available tools and simplify the user interface.
+
+**Key Points**
+- Include only the toolbar items you need, in the exact order you specify.
+- Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Move, Resize, and Edit Form Fields
+
+You can move, resize, and edit an existing form field directly in the PDF Viewer using the Form Designer.
+
+- Move a field by selecting it and dragging it to the required position.
+
+- Resize a field using the handles displayed on the field boundary.
+
+
+
+- Edit a field by selecting it to open the Form Field Properties popover. The popover allows you to modify the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed.
+For more information, see Editing Form Fields
+
+## Deleting Form Fields
+
+You can remove a form field from the PDF document by selecting the field and using one of the following methods:
+- Click the `Delete option` in the Form Designer UI.
+- Press the `Delete key` on the keyboard after selecting the form field.
+
+The selected form field and its associated widget annotation are permanently removed from the page.
+For more information, see [Deleting Form Fields](./manage-form-fields/remove-form-fields)
+
+## See Also
+
+- [Filling PDF Forms](./form-filling)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/style-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields
+- [Grouping form fields](./group-form-fields)
+- [Form Constrains](./form-constrain)
+- [Form Validation](./form-validation)
+- [Custom Data](./custom-data)
+- [Import](./import-export-form-fields/import-form-fields)/[Export Form Data](./import-export-form-fields/export-form-fields)
+- [Form field events](./form-field-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-field-events.md
new file mode 100644
index 0000000000..10a1b17109
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-field-events.md
@@ -0,0 +1,111 @@
+---
+layout: post
+title: Form Field Events in MVC PDF Viewer control | Syncfusion
+description: Learn here all about different form field events in Syncfusion ASP.NET MVC PDF Viewer component and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# PDF Viewer Form Field Events in MVC
+
+The Syncfusion **MVC PDF Viewer** provides a comprehensive set of **form field events** that allow developers to track user interactions, respond to form changes, and implement custom business logic. These events can be used for scenarios such as [validation](./form-validation), **UI updates**, **logging**, and **workflow automation**.
+
+Form field events are triggered during actions such as adding, selecting, modifying, moving, resizing, and removing form fields.
+
+## Supported PDF Form Field Events
+
+The following table lists all supported form field events and their descriptions:
+
+| Form Field events | Description |
+|---|---|
+| [formFieldAdd](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Triggered when a new form field is added, either through the Form Designer UI or programmatically. |
+| [formFieldClick](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when a form field is clicked in the viewer. |
+| [formFieldDoubleClick](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when a form field is double clicked. |
+| [formFieldFocusOut](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Triggered when a form field loses focus after editing. |
+| [formFieldMouseLeave](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when the mouse pointer leaves a form field. |
+| [formFieldMouseOver](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when the mouse pointer moves over a form field. |
+| [formFieldMove](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Triggered when a form field is moved to a new position. |
+| [formFieldPropertiesChange](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when any form field property changes, such as font, color, or constraint values. |
+| [formFieldRemove](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Triggered when a form field is deleted from the document. |
+| [formFieldResize](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when a form field is resized. |
+| [formFieldSelect](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when a form field is selected in the Form Designer. |
+| [formFieldUnselect](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when a previously selected form field is unselected. |
+| [validateFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) | Fired when form field validation fails during print or download actions. |
+
+**Common Use Cases**
+
+Form field events can be used to:
+- Validate form data before printing or downloading
+- Track user interaction with form fields
+- Update UI elements dynamically
+- Log form changes for auditing
+- Trigger workflow actions based on field changes
+- Enforce business rules during form editing
+
+## Handle PDF Form Field Events
+
+You can wire up form field events on the PDF Viewer instance to execute custom logic when specific actions occur.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**Event Behavior Notes**
+
+- Events triggered through the UI and programmatic APIs use the same event handlers.
+- Property related events are raised immediately when changes occur.
+- Validation events are triggered only during print or download operations.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Edit form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Field Flags](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-fields-api.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-fields-api.md
new file mode 100644
index 0000000000..f002a1c9bc
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-fields-api.md
@@ -0,0 +1,447 @@
+---
+layout: post
+title: Form Fields API in MVC PDF Viewer | Syncfusion
+description: Learn How to use Form Fields API to enable, update, retrieve and clear in the Syncfusion MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Fields API in MVC PDF Viewer
+
+The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available:
+
+| API | Description |
+|---|---|
+| [updateFormFieldsValue](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_UpdateFormFieldsValue) | Updates the value for one or more form fields.|
+| [updateFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_UpdateFormFields) | Updates the properties of one or more form fields.|
+| [retrieveFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_RetrieveFormFields) | Retrieves all form fields or by specific criteria.|
+| [resetFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResetFormFields) | Resets the specified or all form fields to their default values.|
+| [importFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportFormFields) | Imports values and states for form fields from a JSON object or file stream.|
+| [focusFormField](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FocusFormField) | Sets focus to a form field by name or ID.|
+| [exportFormFieldsAsObject](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ExportFormFieldsAsObject) | Exports form fields as a JSON object.|
+| [exportFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ExportFormFields) | Exports form fields as a downloadable file.|
+| [clearFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ClearFormFields) | Clears values of specified or all form fields without removing them.|
+| [isFormFieldDocument](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_IsFormFieldDocument) | Indicates whether the loaded document contains form fields.|
+| [isFormDesignerToolbarVisible](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_IsFormDesignerToolbarVisible) | Gets whether the Form Designer toolbar is currently visible.|
+| [formFieldCollections](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldCollections) | Gets the collection of current form fields with their properties.|
+| [enableFormFieldsValidation](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation) | Enables or disables form field validation.|
+| [enableFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFields) | Enables or disables interaction with form fields.|
+| [enableFormDesignerToolbar](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormDesignerToolbar) | Shows or hides the Form Designer toolbar.|
+
+## updateFormFieldsValue
+
+Updates the value of one or more form fields programmatically.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## updateFormFields
+
+Updates form field properties such as bounds, color, font, isReadOnly, required, and more.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## retrieveFormFields
+
+Retrieves all form fields and their properties or filters by type/name.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## resetFormFields
+
+Resets specified form fields or all fields to their default values.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## importFormFields
+
+Imports form field data from an object or file into the current document.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## focusFormField
+
+Moves focus to a form field by name or ID.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## exportFormFieldsAsObject
+
+Exports current form field values and states as a JSON object.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## exportFormFields
+
+Exports form field data to a file for download.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## clearFormFields
+
+Clears values of specified or all fields without removing the fields themselves.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## isFormFieldDocument
+
+Returns true if the loaded document contains one or more form fields.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## isFormDesignerToolbarVisible
+
+Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially
+and get the form designer Toolbar Visible status.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## formFieldCollections
+
+Gets the current collection of form fields with their properties from the viewer instance.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormFieldsValidation
+
+Enables or disables built-in validation for required and constrained fields.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormFields
+
+Enables or disables user interaction with form fields globally.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormDesignerToolbar
+
+Shows or hides the Form Designer toolbar at runtime.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Edit form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form fields Validation](./form-validation)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-filling.md
new file mode 100644
index 0000000000..d4483c05b7
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-filling.md
@@ -0,0 +1,170 @@
+---
+layout: post
+title: Form filling in MVC PDF Viewer Control | Syncfusion
+description: Learn to view, fill, export, and import PDF form fields in Syncfusion MVC PDF Viewer, including disabling interaction and handling signatures.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Filling PDF Forms in MVC PDF Viewer
+
+The Syncfusion PDF Viewer supports three types of form-filling:
+
+1. [Filling Form Fields Programmatically](#fill-pdf-forms-programmatically)
+
+ You can fill or update PDF form fields programmatically using the [updateFormFieldsValue](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_UpdateFormFieldsValue) APIs. This approach is useful when form data needs to be set dynamically based on application logic.
+
+2. [Form Filling Through User Interface](#fill-pdf-forms-through-the-user-interface)
+
+ Users can fill in PDF form fields directly through the PDF Viewer user interface by typing text, selecting options, or interacting with supported form elements.
+
+3. [Importing Form Field Data](#fill-pdf-forms-through-import-data)
+
+ The PDF Viewer allows you to import form field data into an existing PDF document. This enables pre filled forms using external data sources.
+
+## Fill PDF forms programmatically
+
+You can update the values of PDF form fields programmatically using the [updateFormFieldsValue](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_UpdateFormFieldsValue) API. This method allows you to set or modify form field values dynamically based on application logic, without user interaction.
+
+The following example demonstrates how to update PDF form field values programmatically:
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Fill PDF forms through the User Interface
+
+The Syncfusion PDF Viewer allows users to fill PDF form fields directly through the user interface without using code. Users can click on form fields and enter or select values based on the field type.
+
+
+
+The PDF Viewer supports common form fields such as text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Filled values can be edited at any time, and the entered data is retained during the viewing session.
+
+## Fill PDF forms through Import Data
+
+The PDF Viewer allows you to import form field data into an existing PDF document using the [importFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportFormFields) API. This feature enables you to pre-fill form fields using data from an external source without requiring manual user input.
+
+Imported form field data is automatically mapped to the corresponding form fields in the PDF document based on the field names. Once the data is imported, the populated values are displayed in the PDF Viewer and can be edited through the user interface if required.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("viewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+For more details, see [Import Form Data](./import-export-form-fields/import-form-fields).
+
+## How to get the filled data and store it to a backing system
+
+You can export the filled form field data from the PDF Viewer and store it in a backing system such as a database or file storage. The exported data can later be imported to restore the form state.
+
+For more details, see [Export Form Data](./import-export-form-fields/export-form-fields).
+
+## How to Validate Form Fields using `validateFormFields` Event
+
+The [validateFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) event in the Syncfusion PDF Viewer is triggered when a user tries to download or submit a form while validation is enabled. You can use the [retrieveFormFields()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_RetrieveFormFields) API to get all the form fields and check them one by one to see if any form fields values are empty.
+
+This validation applies to all form field types in the PDF Viewer. A textbox is empty if no text is entered, a list box or dropdown is empty if no item is selected, a signature or initial field is empty if the user has not signed, and radio buttons or checkboxes are empty if none are chosen.
+By enabling [enableFormFieldsValidation](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation) and wiring the event, you can go through each field and stop the action if required fields are not filled.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/customize-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields
+- [Edit form fields](./manage-form-fields/edit-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-validation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-validation.md
new file mode 100644
index 0000000000..8a01367bbb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/form-validation.md
@@ -0,0 +1,146 @@
+---
+layout: post
+title: Form validation in the MVC PDF Viewer component | Syncfusion
+description: Learn how to enable built in form field validation and validate missing required fields in the Syncfusion MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Validate PDF Form Fields in MVC PDF Viewer
+
+The Syncfusion **MVC PDF Viewer** provides built in support for **validating form fields** before users perform actions such as **printing**, **downloading**, or **submitting** a PDF document. Validation ensures that all required form fields are filled before allowing these actions to complete.
+This feature helps enforce data completeness and improves the reliability of collected form data.
+
+## How PDF Form Validation Works
+
+Form field validation follows this flow:
+- Enable validation using the [enableFormFieldsValidation](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation) property.
+- Handle the [validateFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) event to determine which required fields are not filled.
+- When validation is enabled and a user attempts to print, download, or submit the document:
+ - The [validateFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) event is triggered.
+ - Unfilled required fields are listed in args.nonFillableFields.
+ - You can cancel the action, show an error message, or move focus to an invalid field.
+
+## Enable PDF Form Field Validation
+
+To enable validation, set the [enableFormFieldsValidation](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation) property to true and wire the validateFormFields event.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfViewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Mark Fields as Required
+
+Only fields marked as **required** participate in validation. Use the **isRequired** property when creating or updating a form field.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfViewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle PDF Form Validation Results
+
+In the [validateFormFields](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) event, you can control the behavior when fields are missing. Typical actions include:
+- Cancel the print or download operation
+- Display an error message to the user
+- Set focus to the first unfilled required field
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfViewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Tips
+
+- Use isRequired to clearly mark mandatory fields.
+- Validation is triggered only during [print](../print), [download](../download), or **submit** actions.
+- For custom validation logic (such as validating an email format):
+ - Retrieve all form fields using [retrieveFormFields()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_RetrieveFormFields).
+ - Apply custom checks before allowing the action to proceed.
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to PDF form fields](./custom-data)
+- [Form flags](./form-constrain)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/group-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/group-form-fields.md
new file mode 100644
index 0000000000..d4b8d9bc10
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/group-form-fields.md
@@ -0,0 +1,124 @@
+---
+layout: post
+title: Group form fields in the MVC PDF Viewer component | Syncfusion
+description: Learn how to group PDF form fields in the Syncfusion MVC PDF Viewer by assigning the same name to multiple widgets.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Group form fields in MVC PDF Viewer
+
+The Syncfusion **MVC PDF Viewer** allows you to **group multiple form fields into a single logical field** by assigning the **same Name** to them. Grouped form fields share their values and states automatically based on the field type. You can group form fields using the **Form Designer UI** or **programmatically using APIs**, making it easy to keep related fields synchronized across the PDF document.
+
+This page covers:
+- [How form field grouping works](#how-grouping-works)
+- [Field behavior based on type](#field-behavior-by-type)
+- [How to group form fields using the UI](#group-using-the-form-designer-ui)
+- [How to group form fields programmatically](#group-pdf-form-fields-programmatically)
+- [Related references and samples](#example-scenarios)
+
+
+## How grouping works
+
+In a PDF form, multiple PDF Form Fields can represent the same logical form field. When PDF Form Fields share the same **Name**, they are treated as a group and stay synchronized.
+
+## Field behavior by type
+
+- **Textbox and Password** — Text entered in one widget appears in all widgets with the same Name.
+- **CheckBox** — Checking one widget sets the checked state for all checkboxes with the same Name.
+- **RadioButton** — Widgets with the same Name form a radio group; only one option can be selected.
+- **ListBox and DropDown** — The selected value is shared across widgets with the same Name.
+- **Signature and Initial fields** — Applied signature/initial is mirrored across grouped widgets.
+
+N>Form field grouping is controlled by the **Name** property. The position of each widget is determined only by its bounds; grouping is not affected by location.
+
+## Group using the Form Designer UI
+
+**Steps**
+1. Enable the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar).
+2. Add the form fields you want to group.
+3. Select a form field, open **Properties**, and set the **Name** value.
+4. Assign the same **Name** to all PDF Form Field that belong to the group.
+5. Apply the changes and verify that updates in one widget reflect in the others.
+
+
+
+
+
+## Group PDF Form Fields Programmatically
+
+You can also group form fields during creation by assigning the same **Name** through code.
+
+### Example Scenarios
+- Two textboxes named **EmployeeId** share the same value.
+- A radio button group named **Gender** allows single selection.
+- Two checkboxes named **Subscribe** share the checked state.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/export-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/export-form-fields.md
new file mode 100644
index 0000000000..3efb2c0a62
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/export-form-fields.md
@@ -0,0 +1,143 @@
+---
+layout: post
+title: Export form data in MVC PDF Viewer | Syncfusion
+description: Learn how to export PDF form field data (FDF, XFDF, JSON, and as an object) using the Syncfusion MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Export PDF Form Data from MVC PDF Viewer
+
+The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats:
+
+- [FDF](#export-as-fdf)
+- [XFDF](#export-as-xfdf)
+- [JSON](#export-as-json)
+- [JavaScript Object](#export-as-object) (for custom persistence)
+
+## Available methods
+
+- [exportFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportformfields)(destination?, format) — Exports data to a file in the specified format.
+- [exportFormFieldsAsObject](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportformfieldsasobject)(format) — Exports data as a JavaScript object for custom handling.
+- [importFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) — Import data back into the PDF.
+
+## How to export
+
+Use [exportFormFields()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportformfields) with an optional destination path and the format type.
+
+### Export as FDF
+The following example exports form field data as FDF.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Export as XFDF
+The following example exports form field data as XFDF.
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Export as JSON
+The following example exports form field data as JSON.
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Export as Object
+
+Use [exportFormFieldsAsObject()](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportformfieldsasobject) to obtain form data as a JavaScript object for database or API integration.
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Common Use Cases
+
+- Save user-entered data to your server without altering the original PDF.
+- Export as JSON for REST API integration.
+- Export as FDF/XFDF for compatibility with other PDF tools.
+- Export as Object to merge with app state or store securely.
+- Automate exports after [validation](../form-validation) using [validateFormFields()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields)
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Import form fields](./import-form-fields)
+- [Import Export Events](./import-export-events)
+- [Create form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/import-export-events.md
new file mode 100644
index 0000000000..84ec7e81e3
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/import-export-events.md
@@ -0,0 +1,103 @@
+---
+layout: post
+title: Import/Export events in MVC PDF Viewer | Syncfusion
+description: Learn how to handle Import/Export events for PDF form fields in the Syncfusion ASP.NET MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# PDF Form Import and Export Events in MVC
+
+Import/Export events let you **track and customize the entire life cycle** of form data being imported into or exported from the PDF Viewer.
+Use these events to:
+- Validate inputs before processing.
+- Show progress indicators.
+- Log audit trails.
+- Block operations based on business rules.
+
+Each event provides detailed context through typed event arguments such as [ImportStartEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/importstarteventargs), [ImportSuccessEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/importsuccesseventargs), [ImportFailureEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/importfailureeventargs), [ExportStartEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/exportstarteventargs), [ExportSuccessEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/exportsuccesseventargs), and [ExportFailureEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/exportfailureeventargs).
+
+## Import Events
+- [importStart](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportStart) — Fires when an import begins.
+- [importSuccess](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportSuccess) — Fires when form fields are successfully imported.
+- [importFailed](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportFailed) — Fires if the import fails.
+
+**Example: Handle Import Events**
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Export Events
+- [exportStart](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ExportStart) — Fires when an export begins.
+- [exportSuccess](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ExportSuccess) — Fires when form fields are successfully exported.
+- [exportFailed](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ExportFailed) — Fires if the export fails.
+
+**Example: Handle Export Events**
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Key Notes
+- importStart, importSuccess, importFailed cover the full import life cycle.
+- exportStart, exportSuccess, exportFailed cover the full export life cycle.
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Import form fields](./import-form-fields)
+- [Export form fields](./export-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/import-form-fields.md
new file mode 100644
index 0000000000..90749ecbc8
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/import-form-fields.md
@@ -0,0 +1,106 @@
+---
+layout: post
+title: Import form data in MVC PDF Viewer | Syncfusion
+description: Learn how to import PDF form field data (FDF, XFDF, JSON) using the Syncfusion ASP.NET MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Import PDF Form Data into MVC PDF Viewer
+
+The **PDF Viewer** lets you import values into interactive form fields in the currently loaded PDF. You can import data from these formats:
+
+- [FDF](#import-as-fdf)
+- [XFDF](#import-xfdf)
+- [JSON](#import-json)
+
+## API to use
+- [importFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format)
+
+Note: If you’re using a **server-backed viewer**, include `.ServiceUrl(...)` in the helper so the viewer can access server APIs during import/export.
+
+### Import FDF
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ServiceUrl("https://ej2services.syncfusion.com/production/web-services/api/pdfviewer").Render()
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Import XFDF
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ServiceUrl("https://ej2services.syncfusion.com/production/web-services/api/pdfviewer").Render()
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Import JSON
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ServiceUrl("https://ej2services.syncfusion.com/production/web-services/api/pdfviewer").Render()
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Common Use Cases
+
+- Pre-fill application forms from a database using JSON.
+- Migrate data from other PDF tools using FDF/XFDF.
+- Restore user progress saved locally or on the server.
+- Combine with validation to block print/download until required fields are completed.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Export form fields](./export-form-fields)
+- [Import Export Events](./import-export-events)
+- [Create Edit form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/create-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/create-form-fields.md
new file mode 100644
index 0000000000..becdb47e35
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/create-form-fields.md
@@ -0,0 +1,400 @@
+---
+layout: post
+title: Create form fields in MVC PDF Viewer | Syncfusion
+description: Learn how to add each PDF form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Create PDF Form Fields in MVC PDF Viewer
+
+You can create or add new form fields either visually using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) or dynamically using APIs.
+
+## Create Form Fields Using the Form Designer UI
+Use this approach when you want to design forms manually without writing code.
+
+**Steps:**
+
+1. Enable [Form Designer](../form-designer) mode in the PDF Viewer.
+2. Click a form field type (Textbox, Checkbox, Dropdown, etc.) from the toolbar.
+3. Click on the PDF page to place the form field.
+4. Move or resize the field as required.
+5. Configure field properties using the **Properties** panel.
+
+
+
+## Add Form Fields Programmatically (API)
+
+Use this approach when you want to generate form fields dynamically based on data or application logic.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**Use programmatic creation when:**
+
+- Building dynamic forms
+- Pre-filling forms from databases
+- Automating form creation workflows
+
+## PDF Form Field Types and How to Add Them
+Each field can be added via the **Form Designer** or **programmatically**.
+
+### Textbox
+
+**Add via Toolbar (UI)**
+- Open **Form Designer** → select **Textbox** → click on the page → configure in **Properties**.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Password
+
+**Add via Toolbar (UI)**
+- Select **Password** → place it → configure tooltip, required, max length.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### CheckBox
+**Add via Toolbar (UI)**
+- Select **CheckBox** → click to place → duplicate for options → set isChecked, tooltip, appearance.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### RadioButton
+**Add via Toolbar (UI)**
+- Select **RadioButton** → place buttons with the **same Name** to group → configure selection/colors.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### ListBox
+**Add via Toolbar (UI)**
+- Select **ListBox** → place → add items in **Properties**.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### DropDown
+**Add via Toolbar (UI)**
+- Select **DropDown** → place → add items → set default value.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Signature Field
+**Add via Toolbar (UI)**
+- Select **Signature Field** → place where signing is required → configure indicator text, thickness, tooltip, required.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Initial Field
+**Add via Toolbar (UI)**
+- Select **Initial Field** → place where initials are needed → configure text and required state.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Fields Dynamically with setFormFieldMode
+
+Use **setFormFieldMode()** to add fields on the fly based on user actions.
+
+### Edit Form Fields in MVC PDF Viewer
+You can edit form fields using the UI or API.
+
+#### Edit Using the UI
+- Right click a field → **Properties** to update settings. (Image here)
+- Drag to move; use handles to resize.
+- Use the toolbar to toggle field mode or add new fields.
+
+#### Edit Programmatically
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples)
+
+## See Also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Modify form fields](./modify-form-fields)
+- [Style form fields](./style-form-fields)
+- [Remove form fields](./remove-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form Fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/customize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/customize-form-fields.md
new file mode 100644
index 0000000000..8f784d8a54
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/customize-form-fields.md
@@ -0,0 +1,113 @@
+---
+layout: post
+title: Customize form fields in MVC PDF Viewer | Syncfusion
+description: Learn how to customize PDF form fields using the UI and programmatically with APIs in the Syncfusion MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Customize the appearance of PDF Form Fields in MVC PDF Viewer
+
+**Styling** customizes appearance only (font, color, alignment, border, background, indicator text).
+
+## Customize Appearance of Form Fields Using the UI
+Use the **Properties** panel to adjust:
+- Font family/size, text color, alignment
+- Border color/thickness
+- Background color
+
+
+## Customize appearance Form Fields Programmatically
+Use [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) to apply styles:
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set Default Styles for New Form Fields
+Define defaults so fields added from the toolbar inherit styles.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Modify form fields](./modify-form-fields)
+- [Remove form fields](./remove-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/modify-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/modify-form-fields.md
new file mode 100644
index 0000000000..ae6c098471
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/modify-form-fields.md
@@ -0,0 +1,399 @@
+---
+layout: post
+title: Modify form fields in MVC PDF Viewer | Syncfusion
+description: Learn how to modify PDF form fields using the UI and programmatically with APIs in the Syncfusion MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Modify PDF Form Field Properties in MVC PDF Viewer
+You can modify form fields using the **UI** or **API**.
+
+## Modify PDF Form Field Properties using the UI
+- Right click a field → **Properties** to update settings.
+
+- Drag to move; use handles to resize.
+- Use the toolbar to toggle field mode or add new fields.
+
+## Modify PDF Form Field Properties programmatically
+Use [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) to change behavior/data (including position and size):
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Modify PDF Form Field Properties by Field type
+
+### Textbox
+- UI: Update value, font, size, colors, border thickness, alignment, max length, multiline.
+
+- API: [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) for value, typography, alignment, colors, borders.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Password
+
+- UI: Tooltip, required, max length, font, appearance.
+
+- API: [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) for tooltip, validation flags, typography, colors, alignment, borders.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### CheckBox
+- UI: Toggle checked state.
+
+- API: [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) for isChecked, tooltip, colors, borders.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### RadioButton
+• UI: Set selected item in a group (same Name).
+
+• API: [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) to set selected value and border appearance.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### ListBox
+• UI: Add/remove items, set selection, adjust fonts/colors.
+
+• API: [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) for items, selection, borders.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### DropDown
+• UI: Add/remove items, default value, appearance.
+
+• API: [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) for items, value, borders.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Signature Field
+• UI: Tooltip, thickness, indicator text, required/visibility.
+
+• API: [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) for tooltip, required, colors, borders.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Initial Field
+• UI: Tooltip, indicator text, thickness, required/visibility.
+
+• API: [updateFormField()](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#updateFormField) for tooltip, required, colors, borders.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Remove form Fields](./remove-form-fields)
+- [Style form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/move-resize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/move-resize-form-fields.md
new file mode 100644
index 0000000000..a234fd76b0
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/move-resize-form-fields.md
@@ -0,0 +1,60 @@
+---
+layout: post
+title: Move and Resize form fields in MVC PDF Viewer | Syncfusion
+description: Learn how to move and resize PDF form fields using the UI and programmatically with APIs in the Syncfusion MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Move and Resize PDF Form Fields in MVC PDF Viewer
+- **Move**: Drag the form field to reposition it.
+- **Resize**: Use the resize handles to change width and height.
+
+
+
+## Move and Resize Fields Programmatically (API)
+You can set absolute bounds or move fields by a delta.
+
+**Set absolute bounds**
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Remove form Fields](./remove-form-fields)
+- [Customize form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/remove-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/remove-form-fields.md
new file mode 100644
index 0000000000..54812a55f9
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/manage-form-fields/remove-form-fields.md
@@ -0,0 +1,64 @@
+---
+layout: post
+title: Remove form fields in MVC PDF Viewer | Syncfusion
+description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Remove PDF Form Fields from a PDF in MVC
+
+## Remove Form Fields Using the UI
+**Steps:**
+1. Enable **Form Designer mode**.
+2. Select the form field.
+3. Click **Delete** in the toolbar or press the **Delete** key.
+
+
+## Remove Form Fields Programmatically
+Use **deleteFormField()** with a field reference or ID.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Modify form fields](./modify-form-fields)
+- [Customize form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/overview-create-forms.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/overview-create-forms.md
new file mode 100644
index 0000000000..e2bf18d754
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/overview-create-forms.md
@@ -0,0 +1,20 @@
+---
+layout: post
+title: Overview of Create form fields in MVC PDF Viewer | Syncfusion
+description: Learn how to create edit each form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion MVC PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Create, Edit, Style, and Remove Form Fields in MVC PDF Viewer
+
+The [MVC PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/overview) allows you to create interactive PDF form fields, update their behavior and appearance, and remove them when they are no longer needed.
+All form field operations can be performed using either the [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/asp-net-mvc/pdfviewer/formdesigner#/tailwind3) or [MVC APIs.](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.pdfviewer.pdfviewer.html)
+
+This section explains how to:
+
+- [Create PDF form fields](./manage-form-fields/create-form-fields)
+- [Edit form field behavior and values](./manage-form-fields/modify-form-fields)
+- [Style the appearance of form fields](./manage-form-fields/customize-form-fields)
+- [Remove form fields from a PDF document](./manage-form-fields/remove-form-fields)
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/overview.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/overview.md
new file mode 100644
index 0000000000..cbf4a953f0
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/overview.md
@@ -0,0 +1,76 @@
+---
+layout: post
+title: Overview of Forms in MVC PDF Viewer Control | Syncfusion
+description: Learn what the Form Designer in Syncfusion MVC PDF Viewer offers, supported field types, and how the topics are organized.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Overview of Forms in MVC PDF Viewer
+
+The Syncfusion PDF Viewer delivers a complete, easy-to-use PDF forms experience. You can read, fill, add, edit, and delete form fields directly within your PDF documents. These actions are supported through both the intuitive user interface and powerful programmatic APIs.
+
+The viewer also includes smooth import and export support for form data, making integration effortless. Developers benefit from extensive API control, while end users enjoy a clean and simple interface designed for a seamless and stress-free form-filling experience.
+
+## Filling PDF Forms
+
+Experience effortless PDF form filling through a clean, intuitive UI or automated workflows using powerful APIs. Flexible form data import and export support ensures smooth and efficient operations when working with PDF forms.
+
+See the [Filling PDF Forms](./form-filling) page for full details.
+
+Use the following ASP.NET MVC code-snippet to enable basic PDF Viewer rendering.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+1. [Programmatically Form fill](./form-filling#fill-pdf-forms-programmatically)
+2. [Form Fill Using UI](./form-filling#fill-pdf-forms-through-the-user-interface)
+3. [Import the Form data](./form-filling#fill-pdf-forms-through-import-data)
+
+## Form Designer
+
+A built in Form Designer lets you quickly add, edit, move, and delete form fields in the PDF documents. This viewer allows you to design fillable PDF forms interactively either using the built-in form designer tools or building your own customized form designer tools.
+
+See the [Form Designer](./form-designer) page for full details.
+
+Use the following ASP.NET MVC code-snippet to enable the Form Designer rendering.
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+
+
+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+Create and customize interactive fields directly on the PDF page.
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), or [remove](./manage-form-fields/remove-form-fields) forms
+- [Add a Signature Field](./manage-form-fields/create-form-fields#add-signature-field)
+- [Edit Form Field](./manage-form-fields/modify-form-fields)
+- [Remove Form Field](./manage-form-fields/remove-form-fields)
+- [Form Field Constraints](./form-constrain)
+
+## Supported form field types
+
+- [Textbox](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password](../forms/manage-form-fields/create-form-fields#add-password)
+- [CheckBox](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [RadioButton](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [ListBox](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [DropDown](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/custom-fonts.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/custom-fonts.md
index 7de673a263..6965f8fcfd 100644
--- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/custom-fonts.md
+++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/custom-fonts.md
@@ -1,22 +1,46 @@
---
layout: post
-title: Add custom fonts in ASP.NET MVC PDF Viewer | Syncfusion
-description: Learn how to add and load custom TTF fonts for documents displayed in the Syncfusion ASP.NET MVC PDF Viewer using the customFonts property.
+title: Add custom fonts in MVC PDF Viewer | Syncfusion
+description: Learn how to add and load custom TTF fonts for documents displayed in the MVC PDF Viewer using the customFonts property.
platform: document-processing
control: PDF Viewer
-publishingplatform: ASP.NET MVC
documentation: ug
+domainurl: ##DomainURL##
---
-# Add custom fonts in the ASP.NET MVC PDF Viewer
+# Add Custom Fonts to PDF Forms in MVC PDF Viewer
-To use custom fonts in the Syncfusion ASP.NET MVC PDF Viewer, add the custom TTF files to the resource URL directory and configure the viewer to load them. Specify font file names using the `customFonts` property as an array of names.
+The Syncfusion **MVC PDF Viewer** supports loading, editing, and saving **custom fonts** in form fields such as [TextBox](../forms/manage-form-fields/create-form-fields#textbox), [ListBox](../forms/manage-form-fields/create-form-fields#listbox), and [DropDown](../forms/manage-form-fields/create-form-fields#dropdown) fields using the customFonts property. This ensures consistent text rendering even when the required fonts are not installed on the user’s system.
+Custom fonts are embedded and preserved when form fields are modified or saved, making the PDF display correctly across environments.
-## Steps to add custom fonts
+## When dynamic fonts are used
+Dynamic fonts are currently used in the following scenarios:
+- **Text annotations** — When users enter text annotations that use non standard fonts, the viewer dynamically loads the required fonts to ensure correct character rendering.
+- **PDF forms** — When users fill form fields that rely on fonts not included by default, dynamic font loading ensures the entered text is rendered correctly.
-**Step 1:** Add custom TTF font files to the resource URL path referenced in the application. For example, place the TTF files in the ej2-pdfviewer-lib folder that serves as the resource URL path.
+## How Custom Fonts Work
+The custom font workflow in the PDF Viewer is as follows:
+- Place the required **TrueType Font (TTF)** files in the resource directory used by the viewer.
+- Specify the font names using the customFonts property.
+- The specified fonts become available for:
+ - Rendering form field content
+ - Editing text in form fields
+ - Saving and downloading the PDF with embedded fonts
-**Step 2:** Use the following code to configure custom fonts in the PDF Viewer.
+## Steps to Add Custom Fonts
+
+### Add TTF Font Files
+1. Place the TTF font files in the resource path used by the PDF Viewer (for example, the ej2-pdfviewer-lib folder).
+2. Fonts can be referenced in either of the following ways:
+ - **Relative path**
+ Example:
+ calibri.ttf
+ fallback-fonts/calibri.ttf
+ - **Absolute URL**
+ Fonts can be hosted on a server and referenced using a fully qualified URL. Ensure that the hosting server has **CORS** enabled.
+
+### Configure Custom Fonts in the PDF Viewer
+Specify the required font names in the customFonts property.
{% tabs %}
{% highlight html tabtitle="Standalone" %}
@@ -41,4 +65,18 @@ To use custom fonts in the Syncfusion ASP.NET MVC PDF Viewer, add the custom TTF
{% endhighlight %}
{% endtabs %}
-These steps integrate custom fonts into PDF documents displayed in the PDF Viewer.
+N>Ensure that the font file names match the specified font names.
+
+## Supported Form Fields
+Custom fonts can be applied to the following form field types:
+- [TextBox](../forms/manage-form-fields/create-form-fields#textbox)
+- [ListBox](../forms/manage-form-fields/create-form-fields#listbox)
+- [DropDown](../forms/manage-form-fields/create-form-fields#dropdown)
+
+## Notes and Limitations
+- If text rendered using a custom font exceeds the form field’s bounds, the downloaded PDF may render incorrectly in some third party PDF viewers.
+- The same content displays correctly in the **Syncfusion PDF Viewer**.
+
+## To avoid rendering issues:
+- Use an appropriate font size that fits within the form field.
+- Increase the size of the form field before saving or downloading the PDF.
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md b/Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md
index bcfab5c1ab..b505dbd241 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/accessibility.md
@@ -37,29 +37,29 @@ The accessibility compliance for the Blazor SfPdfViewer component is outlined be
## WAI-ARIA attributes
-[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to enhance the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used in the Blazor SfPdfViewer component:
+[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to enhance the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are commonly applied in the SfPdfViewer component:
| Attributes | Purpose |
| --- | --- |
-| `aria-disabled`| Indicates whether the Blazor SfPdfViewer component is in a disabled state or not.|
-| `aria-expanded`| Indicates whether the suggestion list has expanded or not. |
-| `aria-readonly` | Indicates the readonly state of the Blazor SfPdfViewer element. |
-| `aria-haspopup` | Indicates whether the Blazor SfPdfViewer input element has a suggestion list or not. |
-| `aria-label` | Indicates the breadcrumb item text. |
-| `aria-labelledby` | Provides a label for the SfPdfViewer. Typically, the "aria-labelledby" attribute will contain the id of the element used as the Blazor SfPdfViewer's title. |
-| `aria-describedby` | This attribute points to the Blazor SfPdfViewer element describing the one it's set on. |
-| `aria-orientation` | Indicates whether the Blazor SfPdfViewer element is oriented horizontally or vertically. |
-| `aria-valuetext` | Returns the current text of the SfPdfViewer. |
-| `aria-valuemax` | Indicates the Maximum value of the SfPdfViewer. |
-| `aria-valuemin` | Indicates the Minimum value of the SfPdfViewer. |
-| `aria-valuenow` | Indicates the current value of the SfPdfViewer. |
-| `aria-controls` | Attribute is set to the button and it points to the corresponding content. |
+| `aria-disabled` | Indicates whether an interactive control (for example, a toolbar button) is disabled and not operable. |
+| `aria-expanded` | Indicates whether an expandable element (for example, a panel or toolbar menu) is currently expanded. |
+| `aria-readonly` | Indicates that the element is read-only and user input is not expected. |
+| `aria-haspopup` | Identifies that the element opens a popup (menu, dialog, or toolbar). |
+| `aria-label` | Provides an accessible name for controls or regions when a visible label is not available. |
+| `aria-labelledby` | Identifies the element that labels this element by referencing that element's id. |
+| `aria-describedby` | Identifies the element that provides a description for this element by referencing that element's id. |
+| `aria-orientation` | Indicates the orientation (horizontal or vertical) of widgets such as sliders or splitters. |
+| `aria-valuetext` | Provides a human-readable text alternative of the current value (for example, a zoom level). |
+| `aria-valuemax` | Indicates the maximum value for range widgets (for example, maximum zoom). |
+| `aria-valuemin` | Indicates the minimum value for range widgets (for example, minimum zoom). |
+| `aria-valuenow` | Indicates the current numeric value for range widgets (for example, current zoom). |
+| `aria-controls` | Identifies the element or region controlled by this element (for example, a button that opens a panel). |
## Keyboard interaction
The Blazor SfPdfViewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it accessible to users who rely on assistive technologies (AT) and keyboard navigation. The following keyboard shortcuts are supported by the SfPdfViewer component.
-| Windows | Mac | Actions |
+| Windows | Mac | Action |
| --- | --- | --- |
|||**Shortcuts for page navigation**|
| Ctrl + ← / Ctrl + ↑ | ⌘ + ← / ⌘ + ↑ |Navigate to the first page |
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md b/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md
index d1c6ec8805..c597669ec4 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/accessible-pdf-reading.md
@@ -16,7 +16,7 @@ This accessible PDF reading feature supports two approaches:
2. Windows Speech Synthesis API
The following demo illustrates both supported approaches:
-- [Blazor PDF Viewer example -Accessible PDF Reading](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/accessible-pdf-reading?theme=fluent2)
+- [Blazor PDF Viewer example - Accessible PDF Reading](https://document.syncfusion.com/demos/pdf-viewer/blazor-server/pdf-viewer/accessible-pdf-reading?theme=fluent2)
## Microsoft Edge’s Screen Reader
@@ -917,7 +917,7 @@ function clearAllHighlights() {
{% endhighlight %}
{% endtabs %}
-
+
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Accessible/WebSynthesis)
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/annotations-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/annotations-in-mobile-view.md
index 722714e680..ee8ba6517d 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/annotations-in-mobile-view.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/annotations-in-mobile-view.md
@@ -9,37 +9,37 @@ documentation: ug
# Annotations in mobile view
-This article explains how to work with annotations in the mobile view of the Blazor SfPdfViewer. It covers opening the annotation toolbar, adding each annotation type, adjusting properties, deleting annotations, and using the comments panel.
+This topic explains how to work with annotations in the mobile view of the Blazor `SfPdfViewer`. It covers opening the annotation toolbar, adding annotation types, adjusting properties, deleting annotations, and using the comments panel.
-## To open the annotation toolbar
+## Open the annotation toolbar
-To open the annotation toolbar, tap the **Edit Annotation** option in the mobile primary toolbar. The annotation toolbar appears at the bottom of the viewer.
+Open the annotation toolbar by tapping the **Edit Annotation** option in the mobile primary toolbar. The annotation toolbar appears at the bottom of the viewer.
-## To add sticky notes annotation
+## Add a sticky note annotation
Tap the **Sticky Note Annotation** icon, then tap anywhere in the viewer to place the note.
-The comments panel opens so the comment for the sticky note can be entered.
+The comments panel opens to enter the comment associated with the sticky note.
-## To add text markup annotation
+## Add a text markup annotation
-Long-press to select text in the PDF, then tap a **Text Markup Annotation** in the toolbar (for example, highlight, underline, strikethrough, or squiggly).
+Long-press to select text in the PDF, then tap a **Text Markup Annotation** option in the toolbar (for example, highlight, underline, strikethrough, or squiggly).
-The toolbar then shows the available properties for the chosen annotation (such as color and opacity).
+The toolbar then shows properties for the chosen annotation (such as color and opacity).
-## To add shape annotation
+## Add a shape annotation
-Tap the **Shape Annotation** icon in the toolbar to view the available shapes.
+Tap the **Shape Annotation** icon in the toolbar to view available shapes.
@@ -47,11 +47,11 @@ Choose a shape, then tap and drag in the viewer to draw it.
-After placement, the toolbar switches to the properties toolbar for the added annotation, where options such as fill color, stroke color, thickness, and opacity can be adjusted.
+After placement, the toolbar switches to the properties toolbar for the added annotation; adjust options such as fill color, stroke color, thickness, and opacity.
-## To add measure annotation
+## Add a measurement annotation
Tap the **Measure Annotation** icon in the toolbar to view supported measurement types.
@@ -65,7 +65,7 @@ After placement, the properties toolbar appears with options relevant to the mea
-## To add free text annotation
+## Add a free text annotation
Tap the **Free Text Annotation** icon in the toolbar. The properties toolbar appears with options for text formatting (such as font size, color, and opacity).
@@ -75,7 +75,7 @@ Tap anywhere in the viewer to insert the free text annotation.
-## To add stamp annotation
+## Add a stamp annotation
Tap the **Stamp Annotation** icon, then choose a stamp from the available list.
@@ -85,7 +85,7 @@ Tap anywhere in the viewer to place the stamp. The properties toolbar then appea
-## To add signature
+## Add a signature
Tap the **Handwritten Signature** icon to open the signature dialog.
@@ -99,7 +99,7 @@ Tap anywhere in the viewer to place the signature. The properties toolbar then a
-## To add ink annotation
+## Add an ink annotation
Tap the **Ink Annotation** icon, then draw directly in the viewer.
@@ -111,25 +111,25 @@ When finished, tap the Ink Annotation icon again to exit drawing mode. The prope
## Change annotation properties before adding
-Annotation properties can be configured before placement. For example, tap the rectangle shape to show its properties toolbar, adjust the settings, and then tap and drag to place the annotation. The annotation is added using the modified properties.
+Annotation properties can be configured before placement. For example, tap a shape to show its properties toolbar, adjust the settings, then tap and drag to place the annotation. The annotation is added with the modified properties.
## Change annotation properties after adding
-After placement, select the annotation to display its properties toolbar. Adjust the required properties; the changes are applied immediately to the selected annotation.
+After placement, select the annotation to display its properties toolbar. Adjust required properties; the changes are applied immediately to the selected annotation.
-## Delete Annotation
+## Delete an annotation
Select the annotation to delete. In the properties toolbar, tap the Delete icon. The annotation is removed from the PDF, and any associated comment is also deleted.
-## Open and Close Comment Panel
+## Open and close the comments panel
-Open the comments panel from the **more option** menu at the right end of the mobile primary toolbar.
+Open the comments panel from the More options menu at the right end of the mobile primary toolbar.
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/comments.md
index e9eb6dde24..8efcad93d0 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/comments.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/comments.md
@@ -9,7 +9,7 @@ documentation: ug
# Comments in Blazor SfPdfViewer Component
-The SfPdfViewer component provides options to add, edit, and delete comments for the following annotation types in PDF documents:
+The `SfPdfViewer` component provides options to add, edit, and delete comments for the following annotation types in PDF documents:
* Shape annotation
* Stamp annotation
@@ -20,7 +20,7 @@ The SfPdfViewer component provides options to add, edit, and delete comments for
-## Adding a comment to the annotation
+## Add a comment to an annotation
Comments, replies, and status can be added to a PDF document using the comment panel.
@@ -28,17 +28,17 @@ Comments, replies, and status can be added to a PDF document using the comment p
Annotation comments can be added using the comment panel. Open the comment panel in any of the following ways:
-1. Using the annotation menu.
+1. From the annotation menu
- * Click the Edit Annotation button in the SfPdfViewer toolbar. A toolbar appears below it.
+ * Click the Edit Annotation button in the `SfPdfViewer` toolbar. A toolbar appears below it.
* Click the Comment panel button. The comment panel opens.
-2. Using the context menu.
+2. From the context menu
* Select an annotation in the PDF document and right-click it.
* Select the Comment option in the context menu.
-3. Using mouse click.
+3. Using double-click
* Select an annotation in the PDF document and double-click it to open the comment panel.
@@ -52,12 +52,12 @@ If the comment panel is already open, select an annotation and add a comment usi
-### Adding Comment Replies
+### Adding comment replies
-* The SfPdfViewer supports adding multiple replies to a comment.
+* The `SfPdfViewer` supports adding multiple replies to a comment.
* After adding an annotation comment, add one or more replies as needed.
-### Adding Comment or Reply Status
+### Adding comment or reply status
* Select the annotation comment in the comment panel.
* Click the More options button in the comment or reply container.
@@ -66,38 +66,38 @@ If the comment panel is already open, select an annotation and add a comment usi
-### Editing the comments and comments replies of the annotations
+### Edit comments and replies
Edit the comment, its replies, and the status of an annotation using the comment panel.
-### Editing Comment or Comment Replies
+### Editing comments or replies
Edit comments and replies in the following ways:
-1. Using the context menu.
+1. From the context menu
* Select the annotation comment in the comment panel.
* Click the More options button in the comment or reply container.
* Select Edit in the context menu.
* An editable text box appears to change the content of the comment or reply.
-2. Using mouse click.
+2. Using double-click
* Select the annotation comment in the comment panel.
* Double-click the comment or reply content.
* An editable text box appears to change the content of the comment or reply.
-### Editing Comment or Reply Status
+### Editing comment or reply status
* Select the annotation comment in the comment panel.
* Click the More options button in the comment or reply container.
* Select Set status in the context menu.
* Choose the required status for the annotation comment.
-* Status 'None' is the default. Choosing 'None' removes the status indicator from the comment or reply.
+* Status `None` is the default. Choosing `None` removes the status indicator from the comment or reply.
-### Delete Comment or Comment Replies
+### Delete a comment or reply
* Select the annotation comment in the comment panel.
* Click the More options button in the comment or reply container.
@@ -150,11 +150,11 @@ The following code snippet explains how to show the comment panel.
```
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Comment%20Panel/Show%20or%20hide%20comment%20panel).
-## Add Comments and Reply Comments Programmatically
+## Add comments and replies programmatically
-The Blazor SfPdfViewer supports programmatically adding a line annotation with a comment and reply comments using the [AddAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) method.
+The `SfPdfViewer` supports programmatically adding a line annotation with a comment and replies using the [AddAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) method.
-The following example demonstrates how to add a line annotation with a comment and reply comments to a PDF document:
+The following example demonstrates how to add a line annotation with a comment and replies to a PDF document:
```cshtml
@@ -242,17 +242,17 @@ The following example demonstrates how to add a line annotation with a comment a
```
-This code adds a line annotation with a comment and reply comments to the first page of the PDF document.
+This code adds a line annotation with a comment and replies to the first page of the PDF document.
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Programmatic%20Support/Comment/Add).
-## Edit Comments and Reply Comments Programmatically
+## Edit comments and replies programmatically
-The Blazor SfPdfViewer supports programmatically editing the comment and reply comments of an annotation using the [EditAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EditAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) method.
+The `SfPdfViewer` supports programmatically editing the comment and replies of an annotation using the [EditAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EditAnnotationAsync_Syncfusion_Blazor_SfPdfViewer_PdfAnnotation_) method.
-The following example demonstrates how to edit the comment and reply comments programmatically:
+The following example demonstrates how to edit the comment and replies programmatically:
```cshtml
@@ -296,13 +296,13 @@ The following example demonstrates how to edit the comment and reply comments pr
}
```
-This code edits the comment and reply comments programmatically within the SfPdfViewer control.
+This code edits the comment and replies programmatically within the `SfPdfViewer` control.
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Programmatic%20Support/Comment/Edit).
-## Customizing DateTime Format
+## Customizing date and time format
The PDF Viewer supports customizing the date and time format displayed in the comment panel using the [PdfViewerCommentPanelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerCommentPanelSettings.html). This feature tailors the appearance of date and time according to preferences or regional standards.
@@ -358,7 +358,7 @@ This code implements date and time formatting for the comment panel of the PDF V
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Comment%20Panel/Customize%20DateTimeFormat).
-## Enabling Multiline Support
+## Enabling multiline support
Multiline support in the comment panel allows users to input and display comments that span multiple lines. Enable multiline support using the [PdfViewerCommentPanelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerCommentPanelSettings.html).
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/events.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/events.md
index 9347d4535b..aacb4eca63 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/events.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/events.md
@@ -13,38 +13,38 @@ Annotation events notify the application when annotations are added, selected, m
|Name|Description|
|---|---|
-|AddSignature|Triggers when a signature is added to a page in the PDF document.|
-|AnnotationAdded|Triggers when an annotation is added to a page in the PDF document.|
-|AnnotationMouseover|Triggers when the mouse pointer moves over an annotation object.|
-|AnnotationMoved|Triggers when an annotation is moved on a page in the PDF document.|
-|AnnotationPropertiesChanged|Triggers when annotation properties are modified on a PDF page.|
-|AnnotationRemoved|Triggers when an annotation is removed from a page in the PDF document.|
-|AnnotationResized|Triggers when an annotation is resized on a page in the PDF document.|
-|AnnotationSelected|Triggers when an annotation is selected on a page in the PDF document.|
-|AnnotationUnselected|Triggers when an annotation is unselected on a page in the PDF document.|
-|ExportFailed|Triggers when exporting annotations fails in the SfPdfViewer.|
-|ExportStarted|Triggers when exporting annotations starts in the SfPdfViewer.|
-|ExportSucceed|Triggers when exporting annotations succeeds in the SfPdfViewer.|
-|ImportFailed|Triggers when importing annotations fails in the PDF document.|
-|ImportStarted|Triggers when importing annotations starts in the PDF document.|
-|ImportSucceed|Triggers when importing annotations succeeds in the PDF document.|
-|MoveSignature|Triggers when a signature is moved on a page in the PDF document.|
-|OnAnnotationDoubleClick|Triggers when an annotation is double-clicked.|
-|RemoveSignature|Triggers when a signature is removed from a page in the PDF document.|
-|ResizeSignature|Triggers when a signature is resized on a page in the PDF document.|
-|SignaturePropertiesChange|Triggers when the properties of a signature are changed on a page in the PDF document.|
-|SignatureSelected|Triggers when a signature is selected on a page in the PDF document.|
-|SignatureUnselected|Triggers when a signature is unselected on a page in the PDF document.|
-
-## AddSignature Event
-
-The [AddSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AddSignature) event triggers when a signature is added to a page in the PDF document.
-
-#### Event Arguments
-
-For event data, see [AddSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AddSignatureEventArgs.html) for properties such as Id, PageNumber, and Bounds.
-
-The following example illustrates how to handle the AddSignature event.
+|AddSignature|Triggers when a signature is added to a page.|
+|AnnotationAdded|Triggers when an annotation is added to a page.|
+|AnnotationMouseover|Triggers when the mouse pointer moves over an annotation.|
+|AnnotationMoved|Triggers when an annotation is moved on a page.|
+|AnnotationPropertiesChanged|Triggers when annotation properties are modified.|
+|AnnotationRemoved|Triggers when an annotation is removed from a page.|
+|AnnotationResized|Triggers when an annotation is resized on a page.|
+|AnnotationSelected|Triggers when an annotation is selected on a page.|
+|AnnotationUnselected|Triggers when an annotation is unselected on a page.|
+|ExportFailed|Triggers when an annotation export fails.|
+|ExportStarted|Triggers when annotation export starts.|
+|ExportSucceed|Triggers when annotation export succeeds.|
+|ImportFailed|Triggers when an annotation import fails.|
+|ImportStarted|Triggers when annotation import starts.|
+|ImportSucceed|Triggers when annotation import succeeds.|
+|MoveSignature|Triggers when a signature is moved on a page.|
+|OnAnnotationDoubleClick|Triggers when an annotation is double-clicked.|
+|RemoveSignature|Triggers when a signature is removed from a page.|
+|ResizeSignature|Triggers when a signature is resized on a page.|
+|SignaturePropertiesChange|Triggers when signature properties are changed on a page.|
+|SignatureSelected|Triggers when a signature is selected on a page.|
+|SignatureUnselected|Triggers when a signature is unselected on a page.|
+
+## AddSignature event
+
+The [AddSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AddSignature) event triggers when a signature is added to a page.
+
+#### Event arguments
+
+See [AddSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AddSignatureEventArgs.html) for properties such as `Id`, `PageNumber`, and `Bounds`.
+
+The following example illustrates handling the `AddSignature` event.
```cshtml
@@ -64,15 +64,15 @@ The following example illustrates how to handle the AddSignature event.
```
-## AnnotationAdded Event
+## AnnotationAdded event
-The [AnnotationAdded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationAdded) event triggers when an annotation is added to a page in the PDF document.
+The [AnnotationAdded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationAdded) event triggers when an annotation is added to a page.
-#### Event Arguments
+#### Event arguments
-See [AnnotationAddedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationAddedEventArgs.html) for details such as AnnotationId, AnnotationType, PageNumber, and Bounds.
+See [AnnotationAddedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationAddedEventArgs.html) for details such as `AnnotationId`, `AnnotationType`, `PageNumber`, and `Bounds`.
-The following example illustrates how to handle the AnnotationAdded event.
+The following example illustrates handling the `AnnotationAdded` event.
```cshtml
@@ -92,15 +92,15 @@ The following example illustrates how to handle the AnnotationAdded event.
```
-## AnnotationMouseover Event
+## AnnotationMouseover event
-The [AnnotationMouseover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationMouseover) event triggers when the mouse pointer moves over an annotation object.
+The [AnnotationMouseover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationMouseover) event triggers when the mouse pointer moves over an annotation.
-#### Event Arguments
+#### Event arguments
-See [AnnotationMouseoverEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationMouseoverEventArgs.html) for details such as AnnotationId, AnnotationType, PageNumber, and cursor position.
+See [AnnotationMouseoverEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationMouseoverEventArgs.html) for details such as `AnnotationId`, `AnnotationType`, `PageNumber`, and cursor position.
-The following example illustrates how to handle the AnnotationMouseover event.
+The following example illustrates handling the `AnnotationMouseover` event.
```cshtml
@@ -120,15 +120,15 @@ The following example illustrates how to handle the AnnotationMouseover event.
```
-## AnnotationMoved Event
+## AnnotationMoved event
-The [AnnotationMoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationMoved) event triggers when an annotation is moved on a page in the PDF document.
+The [AnnotationMoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationMoved) event triggers when an annotation is moved on a page.
-#### Event Arguments
+#### Event arguments
-See [AnnotationMovedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationMovedEventArgs.html) for details such as AnnotationId, PageNumber, PreviousBounds, and Bounds.
+See [AnnotationMovedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationMovedEventArgs.html) for details such as `AnnotationId`, `PageNumber`, `PreviousBounds`, and `Bounds`.
-The following example illustrates how to handle the AnnotationMoved event.
+The following example illustrates handling the `AnnotationMoved` event.
```cshtml
@@ -148,15 +148,15 @@ The following example illustrates how to handle the AnnotationMoved event.
```
-## AnnotationPropertiesChanged Event
+## AnnotationPropertiesChanged event
-The [AnnotationPropertiesChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationPropertiesChanged) event triggers when annotation properties are modified on a PDF page.
+The [AnnotationPropertiesChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationPropertiesChanged) event triggers when annotation properties are modified on a page.
-#### Event Arguments
+#### Event arguments
-See [AnnotationPropertiesChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationPropertiesChangedEventArgs.html) for details such as AnnotationId, PageNumber, changed property names, and old/new values.
+See [AnnotationPropertiesChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationPropertiesChangedEventArgs.html) for details such as `AnnotationId`, `PageNumber`, changed property names, and old/new values.
-The following example illustrates how to handle the AnnotationPropertiesChanged event.
+The following example illustrates handling the `AnnotationPropertiesChanged` event.
```cshtml
@@ -176,15 +176,15 @@ The following example illustrates how to handle the AnnotationPropertiesChanged
```
-## AnnotationRemoved Event
+## AnnotationRemoved event
-The [AnnotationRemoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationRemoved) event triggers when an annotation is removed from a page in the PDF document.
+The [AnnotationRemoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationRemoved) event triggers when an annotation is removed from a page.
-#### Event Arguments
+#### Event arguments
-See [AnnotationRemovedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationRemovedEventArgs.html) for details such as AnnotationId, AnnotationType, and PageNumber.
+See [AnnotationRemovedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationRemovedEventArgs.html) for details such as `AnnotationId`, `AnnotationType`, and `PageNumber`.
-The following example illustrates how to handle the AnnotationRemoved event.
+The following example illustrates handling the `AnnotationRemoved` event.
```cshtml
@@ -204,15 +204,15 @@ The following example illustrates how to handle the AnnotationRemoved event.
```
-## AnnotationResized Event
+## AnnotationResized event
-The [AnnotationResized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationResized) event triggers when an annotation is resized on a page in the PDF document.
+The [AnnotationResized](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationResized) event triggers when an annotation is resized on a page.
-#### Event Arguments
+#### Event arguments
-See [AnnotationResizedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationResizedEventArgs.html) for details such as AnnotationId, PageNumber, PreviousBounds, and Bounds.
+See [AnnotationResizedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationResizedEventArgs.html) for details such as `AnnotationId`, `PageNumber`, `PreviousBounds`, and `Bounds`.
-The following example illustrates how to handle the AnnotationResized event.
+The following example illustrates handling the `AnnotationResized` event.
```cshtml
@@ -232,15 +232,15 @@ The following example illustrates how to handle the AnnotationResized event.
```
-## AnnotationSelected Event
+## AnnotationSelected event
-The [AnnotationSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationSelected) event triggers when an annotation is selected on a page in the PDF document.
+The [AnnotationSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationSelected) event triggers when an annotation is selected on a page.
-#### Event Arguments
+#### Event arguments
-See [AnnotationSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationSelectedEventArgs.html) for details such as AnnotationId, AnnotationType, and PageNumber.
+See [AnnotationSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationSelectedEventArgs.html) for details such as `AnnotationId`, `AnnotationType`, and `PageNumber`.
-The following example illustrates how to handle the AnnotationSelected event.
+The following example illustrates handling the `AnnotationSelected` event.
```cshtml
@@ -260,15 +260,15 @@ The following example illustrates how to handle the AnnotationSelected event.
```
-## AnnotationUnselected Event
+## AnnotationUnselected event
-The [AnnotationUnselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationUnselected) event triggers when an annotation is unselected on a page in the PDF document.
+The [AnnotationUnselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_AnnotationUnselected) event triggers when an annotation is unselected on a page.
-#### Event Arguments
+#### Event arguments
-See [AnnotationUnselectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationUnselectedEventArgs.html) for details such as AnnotationId, AnnotationType, and PageNumber.
+See [AnnotationUnselectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationUnselectedEventArgs.html) for details such as `AnnotationId`, `AnnotationType`, and `PageNumber`.
-The following example illustrates how to handle the AnnotationUnselected event.
+The following example illustrates handling the `AnnotationUnselected` event.
```cshtml
@@ -288,15 +288,15 @@ The following example illustrates how to handle the AnnotationUnselected event.
```
-## ExportFailed Event
+## ExportFailed event
-The [ExportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportFailed) event triggers when an export annotations failed in the PDF Viewer.
+The [ExportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportFailed) event triggers when annotation export fails.
-#### Event Arguments
+#### Event arguments
-See [ExportFailureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ExportFailureEventArgs.html) for details such as ErrorDetails.
+See [ExportFailureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ExportFailureEventArgs.html) for details such as `ErrorDetails`.
-The following example illustrates how to handle the ExportFailed event.
+The following example illustrates handling the `ExportFailed` event.
```cshtml
@@ -316,15 +316,15 @@ The following example illustrates how to handle the ExportFailed event.
```
-## ExportStarted Event
+## ExportStarted event
-The [ExportStarted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportStarted) event triggers when an exported annotations started in the PDF Viewer.
+The [ExportStarted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportStarted) event triggers when annotation export starts.
-#### Event Arguments
+#### Event arguments
-See [ExportStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ExportStartEventArgs.html) triggers when an exported annotations started in the PDF Viewer.
+See [ExportStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ExportStartEventArgs.html) for details about the export start event.
-The following example illustrates how to handle the ExportStarted event.
+The following example illustrates handling the `ExportStarted` event.
```cshtml
@@ -344,15 +344,15 @@ The following example illustrates how to handle the ExportStarted event.
```
-## ExportSucceed Event
+## ExportSucceed event
-The [ExportSucceed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportSucceed) event triggers when an export annotations succeed in the PDF Viewer.
+The [ExportSucceed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ExportSucceed) event triggers when annotation export succeeds.
-#### Event Arguments
+#### Event arguments
-See [ExportSuccessEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ExportSuccessEventArgs.html) for details such as FileName.
+See [ExportSuccessEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ExportSuccessEventArgs.html) for details such as `FileName`.
-The following example illustrates how to handle the ExportSucceed event.
+The following example illustrates handling the `ExportSucceed` event.
```cshtml
@@ -372,15 +372,15 @@ The following example illustrates how to handle the ExportSucceed event.
```
-## ImportFailed Event
+## ImportFailed event
-The [ImportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportFailed) event triggers when an imports annotations failed in the PDF document.
+The [ImportFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportFailed) event triggers when annotation import fails.
-#### Event Arguments
+#### Event arguments
-See [ImportFailureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ImportFailureEventArgs.html) for details such as ErrorDetails.
+See [ImportFailureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ImportFailureEventArgs.html) for details such as `ErrorDetails`.
-The following example illustrates how to handle the ImportFailed event.
+The following example illustrates handling the `ImportFailed` event.
```cshtml
@@ -400,15 +400,15 @@ The following example illustrates how to handle the ImportFailed event.
```
-## ImportStarted Event
+## ImportStarted event
-The [ImportStarted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportStarted) event triggers when an imported annotations started in the PDF document.
+The [ImportStarted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportStarted) event triggers when annotation import starts.
-#### Event Arguments
+#### Event arguments
-See [ImportStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ImportStartEventArgs.html) triggers when an imported annotations started in the PDF document.
+See [ImportStartEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ImportStartEventArgs.html) for details about the import start event.
-The following example illustrates how to handle the ImportStarted event.
+The following example illustrates handling the `ImportStarted` event.
```cshtml
@@ -428,15 +428,15 @@ The following example illustrates how to handle the ImportStarted event.
```
-## ImportSucceed Event
+## ImportSucceed event
-The [ImportSucceed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportSucceed) event triggers when an imports annotations succeed in the PDF document.
+The [ImportSucceed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ImportSucceed) event triggers when annotation import succeeds.
-#### Event Arguments
+#### Event arguments
-See [ImportSuccessEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ImportSuccessEventArgs.html) triggers when an imports annotations succeed in the PDF document.
+See [ImportSuccessEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ImportSuccessEventArgs.html) for details about successful import.
-The following example illustrates how to handle the ImportSucceed event.
+The following example illustrates handling the `ImportSucceed` event.
```cshtml
@@ -456,15 +456,15 @@ The following example illustrates how to handle the ImportSucceed event.
```
-## MoveSignature Event
+## MoveSignature event
-The [MoveSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_MoveSignature) event triggers when a signature is moved on a page in the PDF document.
+The [MoveSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_MoveSignature) event triggers when a signature is moved on a page.
-#### Event Arguments
+#### Event arguments
-See [MoveSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.MoveSignatureEventArgs.html) for details such as Id, PageNumber, PreviousBounds, and Bounds.
+See [MoveSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.MoveSignatureEventArgs.html) for details such as `Id`, `PageNumber`, `PreviousBounds`, and `Bounds`.
-The following example illustrates how to handle the MoveSignature event.
+The following example illustrates handling the `MoveSignature` event.
```cshtml
@@ -484,15 +484,15 @@ The following example illustrates how to handle the MoveSignature event.
```
-## OnAnnotationDoubleClick Event
+## OnAnnotationDoubleClick event
The [OnAnnotationDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_OnAnnotationDoubleClick) event triggers when an annotation is double-clicked.
-#### Event Arguments
+#### Event arguments
-See [AnnotationDoubleClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationDoubleClickEventArgs.html) for details such as AnnotationId, AnnotationType, PageNumber, and mouse position.
+See [AnnotationDoubleClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.AnnotationDoubleClickEventArgs.html) for details such as `AnnotationId`, `AnnotationType`, `PageNumber`, and mouse position.
-The following example illustrates how to handle the OnAnnotationDoubleClick event.
+The following example illustrates handling the `OnAnnotationDoubleClick` event.
```cshtml
@@ -512,15 +512,15 @@ The following example illustrates how to handle the OnAnnotationDoubleClick even
```
-## RemoveSignature Event
+## RemoveSignature event
-The [RemoveSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_RemoveSignature) event triggers when a signature is removed from a page in the PDF document.
+The [RemoveSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_RemoveSignature) event triggers when a signature is removed from a page.
-#### Event Arguments
+#### Event arguments
-See [RemoveSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RemoveSignatureEventArgs.html) for details such as Id and PageNumber.
+See [RemoveSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RemoveSignatureEventArgs.html) for details such as `Id` and `PageNumber`.
-The following example illustrates how to handle the RemoveSignature event.
+The following example illustrates handling the `RemoveSignature` event.
```cshtml
@@ -540,15 +540,15 @@ The following example illustrates how to handle the RemoveSignature event.
```
-## ResizeSignature Event
+## ResizeSignature event
-The [ResizeSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ResizeSignature) event triggers when a signature is resized on a page in the PDF document.
+The [ResizeSignature](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_ResizeSignature) event triggers when a signature is resized on a page.
-#### Event Arguments
+#### Event arguments
-See [ResizeSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ResizeSignatureEventArgs.html) for details such as Id, PageNumber, PreviousBounds, and Bounds.
+See [ResizeSignatureEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ResizeSignatureEventArgs.html) for details such as `Id`, `PageNumber`, `PreviousBounds`, and `Bounds`.
-The following example illustrates how to handle the ResizeSignature event.
+The following example illustrates handling the `ResizeSignature` event.
```cshtml
@@ -568,15 +568,15 @@ The following example illustrates how to handle the ResizeSignature event.
```
-## SignaturePropertiesChange Event
+## SignaturePropertiesChange event
-The [SignaturePropertiesChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignaturePropertiesChange) event triggers when the properties of a signature are changed on a page in the PDF document.
+The [SignaturePropertiesChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignaturePropertiesChange) event triggers when signature properties are changed on a page.
-#### Event Arguments
+#### Event arguments
-See [SignaturePropertiesChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignaturePropertiesChangeEventArgs.html) for details such as Id, PageNumber, and changed property values.
+See [SignaturePropertiesChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignaturePropertiesChangeEventArgs.html) for details such as `Id`, `PageNumber`, and changed property values.
-The following example illustrates how to handle the SignaturePropertiesChange event.
+The following example illustrates handling the `SignaturePropertiesChange` event.
```cshtml
@@ -596,15 +596,15 @@ The following example illustrates how to handle the SignaturePropertiesChange ev
```
-## SignatureSelected Event
+## SignatureSelected event
-The [SignatureSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignatureSelected) event triggers when a signature is selected on a page in the PDF document.
+The [SignatureSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignatureSelected) event triggers when a signature is selected on a page.
-#### Event Arguments
+#### Event arguments
-See [SignatureSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureSelectedEventArgs.html) for details such as Id and PageNumber.
+See [SignatureSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureSelectedEventArgs.html) for details such as `Id` and `PageNumber`.
-The following example illustrates how to handle the SignatureSelected event.
+The following example illustrates handling the `SignatureSelected` event.
```cshtml
@@ -624,15 +624,15 @@ The following example illustrates how to handle the SignatureSelected event.
```
-## SignatureUnselected Event
+## SignatureUnselected event
-The [SignatureUnselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignatureUnselected) event triggers when a signature is unselected on a page in the PDF document.
+The [SignatureUnselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerEvents.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerEvents_SignatureUnselected) event triggers when a signature is unselected on a page.
-#### Event Arguments
+#### Event arguments
-See [SignatureUnselectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureUnselectedEventArgs.html) for details such as Id and PageNumber.
+See [SignatureUnselectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureUnselectedEventArgs.html) for details such as `Id` and `PageNumber`.
-The following example illustrates how to handle the SignatureUnselected event.
+The following example illustrates handling the `SignatureUnselected` event.
```cshtml
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/import-export-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/import-export-annotation.md
index 760d192609..8120064188 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/import-export-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/import-export-annotation.md
@@ -80,7 +80,7 @@ Supported formats:
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Import-Export/Annotations%20as%20JSON%20object).
-N> Ensure that the JSON file used for importing annotations is available at the specified path. Paths are case-sensitive in some hosting environments.
+N> Ensure that the JSON file used for importing annotations is available at the specified path. Paths can be case-sensitive in some hosting environments.
## Exporting annotation from the PDF document
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/ink-annotation.md
index d18c5dcd7e..ff8723fb0c 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/ink-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/ink-annotation.md
@@ -116,7 +116,7 @@ Below is an example demonstrating how to add an ink annotation to a PDF document
PdfAnnotation annotation = new PdfAnnotation();
// Set the annotation type of Ink
annotation.Type = AnnotationType.Ink;
- // Set the PageNumber starts from 0. So, if set 0 it repersent the page 1.
+ // Page numbers start from 0. So, if set to 0 it represents page 1.
annotation.PageNumber = 0;
// Bound of the Ink annotation
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/measurement-annotation.md
index 7ee13844f5..c8606668f3 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/measurement-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/measurement-annotation.md
@@ -24,11 +24,11 @@ The SfPdfViewer provides options to add and work with measurement annotations. U
Measurement annotations can be added using the annotation toolbar.
* Click the **Edit Annotation** button in the SfPdfViewer toolbar. A toolbar appears below it.
-* Click the **measurement Annotation** dropdown button. A dropdown pop-up appears with the available measurement annotation types.
+* Click the **measurement Annotation** dropdown button. A dropdown appears with the available measurement annotation types.
* Select a measurement type to enable that annotation mode.
* Click on the page to add and measure using the selected annotation.
-When a measurement mode is enabled while in Pan mode, the SfPdfViewer switches to Text Select mode.
+When a measurement mode is enabled while in Pan mode, the viewer automatically switches to Text Select mode.
@@ -219,7 +219,7 @@ The following example demonstrates adding a measurement annotation to a PDF docu
PdfAnnotation annotation = new PdfAnnotation();
// Set the annotation type of measurement annotation like radius, distance, perimeter, area, volume
annotation.Type = AnnotationType.Radius;
- // Set the PageNumber starts from 0. So, if set 0 it represents the page 1.
+ // Page numbers start from 0. So, if set to 0 it represents page 1.
annotation.PageNumber = 0;
// Bound of the radius annotation
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/shape-annotation.md
index f841b2833f..d8aa6f5ba9 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/annotation/shape-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/annotation/shape-annotation.md
@@ -28,7 +28,7 @@ Shape annotations can be added from the annotation toolbar.
* Choose a shape type to enable the corresponding drawing mode.
* Draw the selected shape on the PDF page.
-When the viewer is in pan mode and a shape drawing mode is activated, the control switches to text selection mode to enable drawing.
+When the viewer is in Pan mode and a shape drawing mode is activated, the viewer switches to Text Select mode.
@@ -161,7 +161,7 @@ The appearance of an annotation’s selector can be customized using [Annotation
+
ArrowSettings controls the default arrow head styles for annotations created using the toolbar or programmatically. Set LineHeadStartStyle and LineHeadEndStyle to LineHeadStyle.None to remove heads. Other common values include LineHeadStyle.Closed, LineHeadStyle.Round, LineHeadStyle.Square, LineHeadStyle.ClosedArrow, LineHeadStyle.Diamond and LineHeadStyle.Open.
+N> ArrowSettings controls the default arrow head styles for annotations created using the toolbar or programmatically. Set `LineHeadStartStyle` and `LineHeadEndStyle` to `LineHeadStyle.None` to remove heads. Other common values include `LineHeadStyle.Closed`, `LineHeadStyle.Round`, `LineHeadStyle.Square`, `LineHeadStyle.ClosedArrow`, `LineHeadStyle.Diamond`, and `LineHeadStyle.Open`.
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Shapes/Remove%20arrow%20annotation%20heads).
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md
index 6cb3bd4f9a..706fdd5c69 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-deploy-maui-using-android-emulator.md
@@ -77,7 +77,7 @@ N> For emulator issues, see Troubleshooting Android Emulator: https://learn.micr
->[View sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/MAUI%20Blazor%20App/MauiBlazorAndroid).
+N> [View sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20.NET%20MAUI/MauiBlazorAndroid).
## See also
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md
index 22eea852d6..a375f54f70 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-extract-particular-text-and-highlight.md
@@ -17,7 +17,7 @@ The following code example demonstrates how to extract text from a PDF document
```cshtml
@page "/"
-@using Microsoft.Extensions.Caching.Memory
+@using Microsoft.Extensions.Caching.Memory;
@using Syncfusion.Blazor.Popups;
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.Navigations;
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample.md
index fdbfe00683..2b108bb216 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-desired-pdf-for-initial-loading-in-hosted-sample.md
@@ -15,7 +15,7 @@ Load a specific PDF on initial display and change the document at runtime in the
@inject HttpClient Http;
@using Syncfusion.Blazor.Buttons;
-@using Syncfusion.Blazor.SfPdfViewer
+@using Syncfusion.Blazor.SfPdfViewer;
Load Another Document
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-office-files.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-office-files.md
index ab0cd41fd1..273c773c0a 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-office-files.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-load-office-files.md
@@ -19,8 +19,8 @@ In the following example, a Word document is converted to a PDF and then loaded
```cshtml
@page "/"
-@using Syncfusion.Blazor.SfPdfViewer
-@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.SfPdfViewer;
+@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Pdf;
@using Syncfusion.Pdf.Graphics;
@using Syncfusion.Pdf.Interactive;
@@ -32,7 +32,7 @@ In the following example, a Word document is converted to a PDF and then loaded
@using Syncfusion.Presentation;
@using Syncfusion.PresentationRenderer;
@using Syncfusion.XlsIO;
-@using Syncfusion.XlsIORenderer
+@using Syncfusion.XlsIORenderer;
@using Syncfusion.DocIORenderer;
@using System.IO;
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-ej2-pdf-viewer-in-blazor.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-ej2-pdf-viewer-in-blazor.md
index 2d7f6f9a67..3091e9078e 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-ej2-pdf-viewer-in-blazor.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-render-ej2-pdf-viewer-in-blazor.md
@@ -13,7 +13,7 @@ The Syncfusion® Blazor SfPdfViewer component supports rendering the EJ2 Java
The following steps show how to embed the JavaScript PDF Viewer in a Blazor component.
->Note: Ensure that the EJ2 PDF Viewer scripts and styles are referenced in the application, and that the serviceUrl points to a reachable EJ2 PDF Viewer web service endpoint.
+N> Ensure that the EJ2 PDF Viewer scripts and styles are referenced in the application, and that the serviceUrl points to a reachable EJ2 PDF Viewer web service endpoint.
**Step 1:** Add a JavaScript file to the application and reference it in the head element.
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-show-or-hide-sfpdfviewer-dynamically.md b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-show-or-hide-sfpdfviewer-dynamically.md
index f8f8fa378d..8614e7425e 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-show-or-hide-sfpdfviewer-dynamically.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/faqs/how-to-show-or-hide-sfpdfviewer-dynamically.md
@@ -13,7 +13,7 @@ The following example initializes the PDF Viewer hidden and toggles its visibili
```cshtml
-@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.SfPdfViewer;
@using System.Net;
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md
index 3df735ab23..8674c8d791 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/create-programmatically.md
@@ -9,15 +9,15 @@ documentation: ug
# Programmatic Support for Form Designer in Blazor PDF Viewer
-The Blazor SfPdfViewer component provides programmatic control over PDF form fields, enabling creation, update, and management entirely through code for automated and reliable form workflows.
+The Blazor SfPdfViewer component provides programmatic APIs to create, update, and manage PDF form fields, enabling automated and reliable form workflows.
-N> Programmatic operations do not require enabling the Form Designer UI. Ensure a document is loaded and an instance reference (for example, SfPdfViewer2 via @ref) is available before invoking API methods.
+N> Programmatic operations do not require the Form Designer UI. Ensure a document is loaded and an instance reference (for example, `SfPdfViewer2` via `@ref`) is available before invoking API methods.
## Adding Form Fields Programmatically
-The Blazor SfPdfViewer offers a way to add form fields programmatically using the [AddFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) method. This method accepts a list of [FormFieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html) objects, where each object represents a form field (for example, ButtonField, TextBoxField, PasswordField, CheckBoxField, RadioButtonField, DropDownField, ListBoxField, SignatureField) with specific properties and [Bound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.Bound.html) coordinates.
+The [AddFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AddFormFieldsAsync_System_Collections_Generic_List_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo__) API accepts a list of [FormFieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html) instances. Each instance defines a form field type (for example, `ButtonField`, `TextBoxField`, `PasswordField`, `CheckBoxField`, `RadioButtonField`, `DropDownField`, `ListBoxField`, `SignatureField`) and its [Bound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.Bound.html) coordinates.
-The example below demonstrates how to add form fields in the SfPdfViewer2 component:
+The example below demonstrates adding form fields to the SfPdfViewer2 component:
```cshtml
@page "/"
@@ -68,9 +68,7 @@ N> Form fields can also be added interactively using the Form Designer UI for an
## Form Field Settings
-The Blazor SfPdfViewer provides [FormFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html) to configure form field appearance, including borders, background, text styles, and related properties.
-
-The example below demonstrates configuring [thickness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_Thickness). Additional options include [background color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_BackgroundColor), [border color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_BorderColor), [text color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_Color), [font family](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_FontFamily), [font size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_FontSize), and [font style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_FontStyle).
+The Blazor SfPdfViewer provides [FormFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html) to configure form field appearance, including border thickness, background color, text color, font family, and font size. The example below demonstrates adjusting [thickness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldSettings.html#Syncfusion_Blazor_SfPdfViewer_FormFieldSettings_Thickness); additional appearance options are available.
```cshtml
@page "/"
@@ -168,10 +166,10 @@ The following image illustrates setting and clearing the form field mode in Blaz
## Update Form Fields
-Form fields can be modified dynamically by retrieving them with [GetFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetFormFieldsAsync) and applying changes using [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormField_). Use null/empty checks and batch updates to efficiently apply multiple changes.
+Form fields can be retrieved with [GetFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetFormFieldsAsync) and updated with [UpdateFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_UpdateFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormField_). Use null/empty checks and batch updates to apply multiple changes efficiently.
### Appearance Properties
-Controls the visual aspects of form fields, including [background color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_BackgroundColor), [border color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_BorderColor), [text color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Color), [thickness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Thickness), [maxLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_MaxLength), [visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Visibility), [font size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontSize), [font family](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontFamily), [font style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontStyle), and [text alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_TextAlignment). These properties customize the visual presentation of fields.
+Appearance properties control the visual aspects of form fields, including [background color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_BackgroundColor), [border color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_BorderColor), [text color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Color), [thickness](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Thickness), [maxLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_MaxLength), [visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Visibility), [font size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontSize), [font family](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontFamily), [font style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_FontStyle), and [text alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_TextAlignment). These properties allow precise control over field presentation.
```cshtml
@page "/"
@@ -216,7 +214,7 @@ The following image illustrates updating the appearance of a button form field i
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/UpdateApperanceProperties.razor).
### Identification & Metadata Properties
-Use [name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListItem.html#Syncfusion_Blazor_SfPdfViewer_ListItem_Name) (identifier) and [value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListItem.html#Syncfusion_Blazor_SfPdfViewer_ListItem_Value) (display/value data) on dropdown [ListItem] entries to define item metadata. These properties help organize options and manage related form fields effectively.
+Use [name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListItem.html#Syncfusion_Blazor_SfPdfViewer_ListItem_Name) (identifier) and [value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListItem.html#Syncfusion_Blazor_SfPdfViewer_ListItem_Value) (display/value data) on dropdown [ListItem] entries to define item metadata. These values improve option organization and facilitate management of related form fields.
```cshtml
@page "/"
@@ -258,7 +256,7 @@ The following image illustrates updating the metadata of a dropdown field in Bla
### Grouping and Synchronizing Form Fields Properties
-When multiple fields share the same name, changes apply to all linked fields. Updates to [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_Value), [Required](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_IsRequired), [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_IsReadOnly), [Multiline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_IsMultiline), and [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_TooltipText) reflect instantly. This ensures consistency across the document.
+When multiple fields share the same name, updates apply to all linked fields. Changes to [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_Value), [Required](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_IsRequired), [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_IsReadOnly), [Multiline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html#Syncfusion_Blazor_SfPdfViewer_TextBoxField_IsMultiline), and [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_TooltipText) propagate instantly, ensuring document-wide consistency.
```cshtml
@page "/"
@@ -294,7 +292,7 @@ N> Users can also update form fields through the UI in SfPdfViewer for an intuit
## Delete Form Fields
-The [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Boolean_) method enables the removal of form fields from the document, allowing users to manage and modify form structures efficiently.
+The [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Boolean_) method removes form fields from the document, enabling efficient management of form structures.
### Delete All Form Fields
Removes all form fields from the document using [DeleteFormFieldsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DeleteFormFieldsAsync_System_Boolean_) , clearing all interactive elements at once.
@@ -404,7 +402,7 @@ N> Users can also delete form fields through the UI in SfPdfViewer for an intuit
## Select Form Field
-Form fields can be programmatically selected using the [SelectFormFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SelectFormFieldAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_) method. Selection is supported either by unique ID or by passing the form field object reference.
+Form fields can be selected programmatically using [SelectFormFieldAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_SelectFormFieldAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_). Selection supports either the field's unique ID or its object reference.
### Select Form Field by ID
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md
index f57b7d4b57..191fd39846 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/custom-font.md
@@ -9,11 +9,11 @@ documentation: ug
# Custom Font Support for Form Fields
-The Blazor SfPdfViewer supports loading, editing, and saving custom fonts in form fields such as text boxes, list boxes, and drop-downs by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [FontFamilies](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FontFamilies) properties.
+The Blazor SfPdfViewer supports loading, using, and saving custom fonts for form fields (TextBox, ListBox, DropDown) via the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and `FontFamilies` properties.
## Integrating Custom Font Collections into Form Fields in SfPdfViewer
-To ensure proper rendering and saving of form fields that use custom fonts, especially when the fonts are not installed on the system, set the FallbackFontCollection property. Additionally, load custom fonts (TTF files) and expose them in the Font Family drop-down of the property dialog by using the FontFamilies property (string array). These fonts can then be used seamlessly in form fields for loading, editing, and saving.
+To ensure correct rendering and saving of form fields that use custom fonts (especially when fonts are not installed on the host system), set the `FallbackFontCollection` property and load the TTF files the application can access. Add those font family names to the `FontFamilies` (string[]) property so the fonts appear in the Font Family dropdown in the property dialog. Ensure TTF files are available at the configured path (for example, `wwwroot/Data`) and that font licenses permit distribution with the application.
```cshtml
@page "/"
@@ -44,15 +44,15 @@ To ensure proper rendering and saving of form fields that use custom fonts, espe
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20FormFields).
->**Note:** If a form field (TextBox, ListBox, DropDown) using a custom font has text larger than the field’s bounds, the downloaded PDF may render incorrectly in browsers or third‑party viewers. It displays correctly in the Syncfusion SfPdfViewer. To avoid this, use a font size that fits within the field or enlarge the field before saving/downloading.
+N> If a form field (TextBox, ListBox, DropDown) using a custom font contains text larger than the field’s bounds, the downloaded PDF may render differently in some browsers or third‑party viewers. The Syncfusion SfPdfViewer renders these fields correctly. To avoid rendering issues, use a font size that fits the field, enlarge the field prior to saving, or adjust layout before downloading.
## Custom Font Support for Signature Fields
-The Blazor SfPdfViewer allows loading, editing, and saving custom fonts in signature fields by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [SignatureFonts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerSignatureDialogSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerSignatureDialogSettings_SignatureFonts) properties.
+The Blazor SfPdfViewer allows loading, editing, and saving custom fonts for signature fields by using the [FallbackFontCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_FallbackFontCollection) and [SignatureFonts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerSignatureDialogSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerSignatureDialogSettings_SignatureFonts) properties.
### Integrating Custom Font Collections into Signature Fields in SfPdfViewer
-To ensure proper rendering and saving of signatures that use custom fonts, especially when the fonts are not installed on the system, set the FallbackFontCollection property. Additionally, load custom fonts (TTF files), add them to the signature dialog by using the SignatureFonts property (string array), and use them seamlessly in signature fields for loading, editing, and saving.
+To ensure correct rendering and saving of signatures that use custom fonts (especially when those fonts are not installed on the host system), set the `FallbackFontCollection` property and load the TTF files the application can access. Add the font family names to the `SignatureFonts` (string[]) property so they appear in the signature dialog. Verify that the font files are reachable at the configured path (for example, `wwwroot/Data`) and that licensing allows distribution.
```cshtml
@page "/"
@@ -68,7 +68,7 @@ To ensure proper rendering and saving of signatures that use custom fonts, espec
private string DocumentPath { get; set; } = "wwwroot/Data/With_Four_Signature_Fields.pdf";
// Use the FontFamilies property to add custom font families to the Font Family dropdown in the annotation toolbar
- public string[] signatureFonts = { "Allura", "Tangerine, "Sacramento", "Inspiration" };
+ public string[] signatureFonts = { "Allura", "Tangerine", "Sacramento", "Inspiration" };
public void Created()
{
@@ -85,7 +85,7 @@ To ensure proper rendering and saving of signatures that use custom fonts, espec
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Custom%20Font%20Support%20For%20Signature%20Field).
-When using Google Fonts or other externally hosted fonts with the PDF Viewer, load the fonts in the application to ensure consistent rendering. This is required because FreeText annotations render directly onto the canvas and need the fonts to be available in the hosting environment.
+When using Google Fonts or other externally hosted fonts with the PDF Viewer, load the fonts in the application to ensure consistent rendering. This is required because FreeText annotations render directly onto the canvas and need the fonts available in the hosting environment.
The following example illustrates how to load custom fonts in FreeText annotations using fonts from Google Fonts or other external sources.
@@ -105,7 +105,7 @@ The following example illustrates how to load custom fonts in FreeText annotatio
```
->**Note:** If external fonts are not loaded in the environment, importing and rendering FreeText annotations that reference those fonts may show minor differences. This typically occurs only with fonts referenced from web-based sources.
+N> If external fonts are not loaded in the environment, importing and rendering FreeText annotations that reference those fonts may show minor differences. This typically occurs only with fonts referenced from web-based sources.
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/FreeText/Load%20Custom%20Font%20From%20External%20Links).
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md
index 4c9be1b9f4..4e3e4e4d6d 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/events.md
@@ -8,10 +8,10 @@ documentation: ug
---
# Form Designer events in Blazor PDF Viewer
-The Blazor PDF Viewer includes Form Designer events to handle form field interactions. These events enable tracking and customizing behaviors such as adding, deleting, selecting, resizing, validating, importing, and exporting form fields.
+The Blazor SfPdfViewer exposes Form Designer events for handling form field interactions. These events let applications track, validate, and customize behaviors such as adding, deleting, selecting, resizing, validating, importing, and exporting form fields.
-## Event List
-Below are the key events provided by the Form Designer to handle form field interactions in the PDF Viewer.
+## Event list
+The table below lists key Form Designer events available in the PDF Viewer and their purpose.
| Event Name | Description |
|---------------------------|-------------|
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md
index 433b08bcf3..c426ac6b1c 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/form-designer-in-mobile-view.md
@@ -9,85 +9,85 @@ documentation: ug
# To open the form designer toolbar
-This topic explains how to design and manage PDF form fields in mobile view using the Blazor SfPdfViewer.
+This topic explains how to design and manage PDF form fields in mobile view using the Blazor `SfPdfViewer`.
-Prerequisites:
-- Form designer must be enabled for the viewer instance.
+**Prerequisites**
+- Form Designer must be enabled for the viewer instance.
- Use a supported mobile browser.
-To open the form designer toolbar, tap the **Form Designer** option in the primary toolbar on mobile. The form designer toolbar opens at the bottom of the viewer.
+To open the form designer toolbar, tap the **Form Designer** option in the primary toolbar. The form designer toolbar opens at the bottom of the viewer.
-## To add text box
+## Add a text box
-Tap the **Text Box** icon in the toolbar, then tap anywhere in the viewer to place the text box form field.
+Tap the **Text Box** icon in the toolbar, then tap anywhere in the viewer to place a text box form field.
-## To add password box
+## Add a password box
-Tap the **Password Box** icon in the toolbar, then tap anywhere in the viewer to place the password box.
+Tap the **Password Box** icon in the toolbar, then tap anywhere in the viewer to place a password box.
-## To add check box
+## Add a check box
-Tap the **Check Box** icon in the toolbar, then tap anywhere in the viewer to place the check box.
+Tap the **Check Box** icon in the toolbar, then tap anywhere in the viewer to place a check box.
-## To add radio button
+## Add a radio button
-Tap the **Radio Button** icon in the toolbar, then tap anywhere in the viewer to place the radio button.
+Tap the **Radio Button** icon in the toolbar, then tap anywhere in the viewer to place a radio button.
-## To add list box
+## Add a list box
-Tap the **List Box** icon in the toolbar, then tap anywhere in the viewer to place the list box.
+Tap the **List Box** icon in the toolbar, then tap anywhere in the viewer to place a list box.
-## To add dropdown field
+## Add a dropdown field
-Tap the **Dropdown** icon in the toolbar, then tap anywhere in the viewer to place the dropdown field.
+Tap the **Dropdown** icon in the toolbar, then tap anywhere in the viewer to place a dropdown field.
-## To add signature field
+## Add a signature field
-Tap the **Signature Field** icon in the toolbar, then tap anywhere in the viewer to place the signature field.
+Tap the **Signature Field** icon in the toolbar, then tap anywhere in the viewer to place a signature field.
-## To add button
+## Add a button
-Tap the **Button** icon in the toolbar, then tap anywhere in the viewer to place the button.
+Tap the **Button** icon in the toolbar, then tap anywhere in the viewer to place a button.
-## Modify Form Field Properties
+## Modify form field properties
-Form field properties can be configured as needed. To edit a field on mobile, select the form field while the form designer toolbar is open to display the properties dialog, then adjust the required options:
+Configure form field properties as required. To edit a field on mobile, select the field while the form designer toolbar is open to display the properties dialog, then update the needed options:
- **Name**: Unique identifier for the form field.
-- **Tooltip value**: Text shown as a tooltip for the field.
+- **Tooltip**: Text displayed as a tooltip for the field.
- **Value**: Default value assigned during design.
-- **Form field visibility**: Display behavior — Visible, Visible but doesn’t print, Hidden, or Hidden but printable.
+- **Visibility**: Display behavior — Visible, Visible but does not print, Hidden, or Hidden but printable.
- **Read-only**: Prevents users from editing the field.
-- **Required**: Marks the field as mandatory for input.
-- **Appearance**: Visual settings such as background color, border color and style, and font family and size.
+- **Required**: Marks the field as mandatory.
+- **Appearance**: Visual settings such as background color, border color and style, font family, and font size.
-Tap Save to apply the changes to the selected form field. On mobile, drag the field or its resize handles to reposition or resize; minimum field sizes may apply, and snapping occurs within page bounds where supported.
+Tap Save to apply changes to the selected form field. On mobile, drag the field or its resize handles to reposition or resize; minimum field sizes may apply, and snapping occurs within page bounds where supported.
-## Delete Form Field
+## Delete a form field
-To delete a form field, select the field to remove. The Delete icon appears in the form designer toolbar; tap it to remove the field from the PDF. Alternatively, press the Delete key after selecting the form field.
+To delete a form field, select it. The Delete icon appears in the form designer toolbar; tap it to remove the field from the PDF. Alternatively, press the Delete key after selecting the form field.
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/overview.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/overview.md
index 2fb4c55b4a..9c8a3dd47a 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/overview.md
@@ -9,54 +9,54 @@ documentation: ug
# Overview of the Form Designer in Blazor SfPdfViewer Component
-The Form Designer in [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) enables creating, editing, and managing interactive form fields. It supports dynamic availability in the UI, so the designer can be shown or hidden while updating related toolbar elements. Form fields such as [Textbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html), [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PasswordField.html), [Radio Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RadioButtonField.html), [Check Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CheckBoxField.html), [Dropdown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.DropDownField.html), [List Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListBoxField.html), [Signature Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureField.html), and [Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ButtonField.html) can be added with custom names, grouping, and consistent data across pages.
+The Form Designer in `SfPdfViewer` enables creation, editing, and management of interactive form fields. The designer can be shown or hidden dynamically and updates related toolbar elements. Supported form fields include [TextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html), [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PasswordField.html), [Radio Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RadioButtonField.html), [Check Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CheckBoxField.html), [DropDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.DropDownField.html), [List Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListBoxField.html), [Signature Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureField.html), and [Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ButtonField.html). These fields support custom names, grouping, and consistent data across document pages.
-Fields retain their properties when downloaded or reloaded, even in large documents. Essential operations like cut, copy, paste, zoom, and resize work smoothly while preserving data integrity. Additional features include read-only and required field modes, validation, extensive customization, undo/redo functionality, and form submission controls.
+Fields retain their properties and data when a document is downloaded or reloaded, including large documents. Core editing operations such as cut, copy, paste, zoom, and resize preserve field state. Additional capabilities include read-only and required field modes, validation, appearance customization, undo/redo, and form submission controls.
-## Supported Form Fields
+## Supported form fields
-SfPdfViewer supports a range of interactive form fields for structured and dynamic data collection:
+`SfPdfViewer` supports the following interactive form fields used for structured data collection:
-1. [Textbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html)
-2. [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PasswordField.html)
+1. [TextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.TextBoxField.html)
+2. [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PasswordField.html)
3. [Check Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CheckBoxField.html)
4. [Radio Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.RadioButtonField.html)
5. [List Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ListBoxField.html)
-6. [Dropdown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.DropDownField.html)
+6. [DropDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.DropDownField.html)
7. [Signature Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SignatureField.html)
8. [Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.ButtonField.html)
-These fields ensure seamless interaction, customization, and data consistency, enabling the creation of well-structured and user-friendly PDF forms.
+These fields support customization and consistent data across documents, enabling well-structured, user-friendly PDF forms.
-## Form Field Management
+## Form field management
-The [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) enables efficient form field management by supporting opening, saving, and printing PDFs while maintaining field integrity.
+The `SfPdfViewer` supports opening, saving, and printing PDFs while preserving form field data and properties.
-### Open the PDF Documents with Interactive Form Fields
+### Open PDF documents with interactive form fields
-The [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) component loads PDFs with interactive form fields while preserving properties and data. This enables modifications, validation, and data retention, even in large documents. A saved PDF with form fields can be opened using the Open icon in the toolbar. See the image below.
+`SfPdfViewer` preserves interactive form fields and their properties when loading a PDF. This enables in-viewer modifications, validation, and data retention even in large documents. Use the Open icon in the toolbar to load a saved PDF containing form fields.
-Also, see [Open PDF files in SfPdfViewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/opening-pdf-file) for more details.
+See [Open PDF files in SfPdfViewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/opening-pdf-file) for additional details.
-### Saving Form Fields
+### Saving form fields
-The [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) saves form fields within the PDF without modifying the original file. Selecting the Download icon preserves all field data and properties for future use. See the image below.
+`SfPdfViewer` preserves form fields and their properties when exporting or downloading a document. Use the Download icon to save a PDF that retains field data and appearance for future use.
-Also, see [Saving PDF file in Blazor SfPdfViewer component](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/saving-pdf-file) for more details.
+See [Saving PDF file in Blazor SfPdfViewer component](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/saving-pdf-file) for more details.
-### Printing Form Fields
+### Printing form fields
-In [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html), form fields can have different visibility modes that control their appearance in the viewer and printed documents.
+`SfPdfViewer` supports multiple visibility modes to control whether form fields appear in the viewer and in printed output.
To control the [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.FormFieldInfo.html#Syncfusion_Blazor_SfPdfViewer_FormFieldInfo_Visibility) of form fields in print mode, the [VisibilityMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html) enum provides the following options:
-#### Available Visibility Modes
+#### Available visibility modes
| **Mode** | **Behavior** |
|--------------------------|-------------|
@@ -65,9 +65,9 @@ To control the [Visibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla
| [VisibleNotPrintable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_VisibleNotPrintable) | Visible in viewer but excluded from printing. |
| [HiddenPrintable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_HiddenPrintable) | Hidden in viewer but appears in print. |
-N> The [**Visible**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_Visible) mode is the **default** mode for form fields in [**SfPdfViewer**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html).
+N> The [**Visible**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.VisibilityMode.html#Syncfusion_Blazor_SfPdfViewer_VisibilityMode_Visible) mode is the **default** for form fields in `SfPdfViewer`.
-This flexibility ensures precise control over which form fields are displayed or printed as needed.
+This flexibility enables precise control over which form fields are visible in the viewer and in print output.
The following code snippet shows how to add a form field that is visible in the viewer but excluded from printing in the SfPdfViewer component.
@@ -111,19 +111,17 @@ The following image shows the print preview.
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/Visibility.razor).
-### Enable or Disable Form Designer Module in SfPdfViewer
+### Enable or disable Form Designer
-The Form Designer module in [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) allows users to add and modify form fields within a PDF document.
+The Form Designer module allows users to add and modify form fields inside a PDF document.
-To show the Form Designer icon on the toolbar in [SfPdfViewer2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.SfPdfViewer2.html), set the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) property to `true`. No manual module injection is required in SfPdfViewer2.
+To show the Form Designer icon on the toolbar in `SfPdfViewer2`, set the [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) property to `true`. No manual module injection is required for `SfPdfViewer2`.
-If set to `false`, the PDF Viewer remains in Form Filling mode only, and the Form Designer feature is disabled.
+If `EnableFormDesigner` is `false`, the viewer operates in form-filling mode only and the Form Designer UI is not available.
-N> By default, [EnableFormDesigner](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableFormDesigner) is `true`.
+N> By default, `EnableFormDesigner` is `true`.
-#### Example code for Injecting Form Designer Module
-
-The following code snippet shows enabling the Form Designer toolbar in SfPdfViewer.
+#### Example: enable the Form Designer toolbar
```cshtml
@using Syncfusion.Blazor.SfPdfViewer;
@@ -139,15 +137,15 @@ The following code snippet shows enabling the Form Designer toolbar in SfPdfView
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/EnableFormDesigner.razor).
-### Enable or Disable Designer Mode in Form Designer
+### Enable or disable Designer Mode
-The Designer Mode in [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) allows users to interact with form field design elements.
+Designer Mode allows direct interaction with form field design elements.
-When Designer Mode is enabled, users can edit, move, and manipulate form fields within the PDF Viewer. If disabled, form fields remain static and can only be filled.
+When Designer Mode is enabled, users can edit, move, and manipulate form fields. When disabled, fields remain editable only for form filling.
-N> By default, [IsDesignerMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsDesignerMode) is set to `false`, meaning form fields can be filled but not modified.
+N> By default, [IsDesignerMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsDesignerMode) is `false` (fields can be filled but not modified).
-The following example demonstrates how to Enable Designer Mode using SfButton components.
+The following example demonstrates how to enable Designer Mode using `SfPdfViewer2`.
```cshtml
@using Syncfusion.Blazor.SfPdfViewer;
@@ -165,23 +163,21 @@ The following example demonstrates how to Enable Designer Mode using SfButton co
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/InteractionMode.razor).
-## Export and Import Form Fields Data
-
-The [SfPdfViewer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.html) control supports exporting and importing form field data in multiple formats.
+## Export and import form field data
-This functionality allows saving, transferring, or restoring form field values efficiently using the following supported formats:
+The `SfPdfViewer` control supports exporting and importing form field data in multiple formats. This enables saving, transferring, or restoring form field values using the following formats:
1. XML
-2. FDF
-3. XFDF
+2. FDF
+3. XFDF
4. JSON
5. Object-based
-The [ExportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ExportFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) and [ImportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ImportFormFieldsAsync_System_IO_Stream_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) methods allow you to export the form field data as a stream, which can later be used to import the saved data into another PDF document.
+The [ExportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ExportFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) and [ImportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ImportFormFieldsAsync_System_IO_Stream_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) methods export or import form field data as a stream, which can be applied to another PDF document.
### Types of Form Fields Export and Import
-#### Export and Import as XML
+#### Export and import as XML
Exports form field data in XML format and allows importing the same data back into a PDF document.
@@ -242,7 +238,7 @@ The following code shows how to export the form fields as an XML data stream and
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/XMLFormat.razor).
-#### Export and Import as FDF
+#### Export and import as FDF
Exports form field data in Forms Data Format (FDF) and allows importing the same data back into a PDF document.
@@ -300,7 +296,7 @@ The following code demonstrates exporting form fields as FDF to a stream and imp
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/FDFFormat.razor).
-#### Export and Import as XFDF
+#### Export and import as XFDF
Similar to FDF, but in XML-based format, XFDF ensures structured data handling for form fields.
@@ -357,7 +353,7 @@ The following code shows how to export the form fields as an XFDF data stream an
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/XFDFFormat.razor).
-#### Export and Import as JSON
+#### Export and import as JSON
Exports form field data in JSON format, which can be easily read and imported back into the PDF Viewer.
@@ -415,7 +411,7 @@ The following code demonstrates exporting form fields as JSON to a stream and im
[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/blob/master/Form%20Designer/Components/Pages/JSONFormat.razor).
-#### Export and Import as an Object
+#### Export and import as an object
The Form fields can be exported and imported as an object, which is useful for in-memory processing and quick data manipulation.
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/ui-interactions.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/ui-interactions.md
index f1932a8505..51b2e19b14 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/ui-interactions.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-designer/ui-interactions.md
@@ -9,17 +9,17 @@ documentation: ug
# Form Designer UI Interactions in Blazor PDF Viewer
-The Form Designer in the Blazor PDF Viewer enables adding, editing, and manipulating form fields directly within a PDF document. It provides an intuitive interface to design interactive forms efficiently.
+The Form Designer in `SfPdfViewer` enables adding, editing, and manipulating form fields directly within a PDF document. It provides an intuitive interface for designing interactive forms efficiently.
## Form Field Interactions
### Adding Form Fields
-Click the **Edit Form Fields** icon on the toolbar, choose the required form field, and place it on the PDF document.
+Click the **Edit Form Fields** icon in the toolbar, select the desired field type, and place it on the PDF document.
-N> Form fields can also be added programmatically in SfPdfViewer for advanced scenarios.
+N> Form fields can also be added programmatically in `SfPdfViewer` for advanced scenarios.
[See Add form fields programmatically](./create-programmatically).
### Dragging Form Fields
@@ -40,7 +40,7 @@ Edit form fields using the Form Field Properties panel. Open the panel by select
The Form Field Properties panel consists of three tabs that provide customization options. Available options may vary by field type.
-N> Edit form fields can also be performed programmatically in SfPdfViewer for precise customization.
+N> Editing form fields can also be performed programmatically in `SfPdfViewer` for precise customization.
[See Edit form fields programmatically](./create-programmatically).
#### General Tab
@@ -88,7 +88,7 @@ Remove form fields by selecting the desired field and clicking the Delete icon i
-N> Form fields can also be deleted programmatically in SfPdfViewer.
+N> Form fields can also be deleted programmatically in `SfPdfViewer`.
[See Delete form fields programmatically](./create-programmatically).
## See also
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/form-filling.md b/Document-Processing/PDF/PDF-Viewer/blazor/form-filling.md
index e91770bd4f..6498a132a0 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/form-filling.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/form-filling.md
@@ -9,7 +9,7 @@ documentation: ug
# Form filling in Blazor SfPdfViewer Component
-The SfPdfViewer component displays existing form fields in a PDF document and enables filling and downloading filled data.
+The SfPdfViewer component displays existing form fields in a PDF document and enables filling and downloading filled form data.
The form fields displayed in the SfPdfViewer are:
@@ -25,7 +25,7 @@ The form fields displayed in the SfPdfViewer are:
## Disabling form fields
-The SfPdfViewer control provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer.
+The SfPdfViewer component provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer.
```cshtml
@@ -58,22 +58,22 @@ Add a handwritten signature to a Signature field by following these steps:
-## Delete the signature inside the signature field
+## Delete a signature from the signature field
-Delete a signature placed in a signature field by using the Delete option in the annotation toolbar.
+Remove a signature placed in a signature field using the Delete option in the annotation toolbar.
## Export and import form fields
-The SfPdfViewer control supports exporting and importing form field data in the following formats using the [ImportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ImportFormFieldsAsync_System_Collections_Generic_Dictionary_System_String_System_String__) and [ExportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ExportFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) methods:
+The SfPdfViewer component supports exporting and importing form field data in the following formats using the [ImportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ImportFormFieldsAsync_System_Collections_Generic_Dictionary_System_String_System_String__) and [ExportFormFieldsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ExportFormFieldsAsync_Syncfusion_Blazor_SfPdfViewer_FormFieldDataFormat_) methods:
* XML
* FDF
* XFDF
* JSON
-N> Form field data is exported as a stream, and that stream can be imported back into the current PDF document.
+Note: Form field data is exported as a stream, and that stream can be imported back into the current PDF document.
### Export and import as XML
@@ -155,7 +155,7 @@ The following example exports the form fields as an FDF data stream and imports
```
-### Export and import as XFDF
+### Export and import as XFDF
The following example exports the form fields as an XFDF data stream and imports that data from the stream into the current PDF document via button clicks.
@@ -236,7 +236,7 @@ The following example exports the form fields as a JSON data stream and imports
```
-### Export form fields as Json file
+### Export form fields as JSON file
```cshtml
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md
index 254f9bbfea..25c867827e 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md
@@ -9,7 +9,7 @@ documentation: ug
# View PDF files using the PDF Viewer in a Blazor .NET MAUI app
-This article describes how to add the Syncfusion® Blazor PDF Viewer component to a Blazor .NET MAUI app and deploy it on Windows.
+This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor .NET MAUI app and deploy it on Windows.
## Prerequisites
@@ -17,18 +17,18 @@ To use the .NET MAUI project templates, install the Mobile development with .NET
## Create a new Blazor .NET MAUI app in Visual Studio
-Create a new Blazor .NET MAUI app and name it **PDFViewerGettingStarted**.
+Create a new Blazor .NET MAUI app named **PDFViewerGettingStarted**.
-N> The PDF Viewer component is supported on .NET 8.0 and later.
+N> The PDF Viewer supports .NET 8.0 and later.
-## Install PDF Viewer NuGet packages in the Blazor .NET MAUI app
+## Install PDF Viewer NuGet packages
-Add the following NuGet packages to the Blazor .NET MAUI app.
+Install the following NuGet packages in the Blazor .NET MAUI app.
-* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer)
+* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer)
* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
-## Register Syncfusion® Blazor Service
+## Register Syncfusion Blazor service
* In the **~/_Imports.razor** file, add the following namespaces:
@@ -41,7 +41,7 @@ Add the following NuGet packages to the Blazor .NET MAUI app.
{% endhighlight %}
{% endtabs %}
-* Register the Syncfusion® Blazor Service in the **~/MauiProgram.cs** file.
+* Register Syncfusion Blazor service in the **~/MauiProgram.cs** file.
{% tabs %}
{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="3 20 28" %}
@@ -81,9 +81,9 @@ public static class MauiProgram
{% endhighlight %}
{% endtabs %}
-## Adding stylesheet and script
+## Add stylesheet and script
-Add the following stylesheet and script to the head section of the **~/wwwroot/index.html** file.
+Add the following stylesheet and script to the head and body sections of **~/wwwroot/index.html**.
{% tabs %}
{% highlight html hl_lines="3 7" %}
@@ -102,7 +102,7 @@ Add the following stylesheet and script to the head section of the **~/wwwroot/i
## Add the PDF Viewer component
-Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~/Pages/Index.razor** file.
+Add the Syncfusion® PDF Viewer (Next-Gen) component to **~/Pages/Index.razor**.
{% tabs %}
{% highlight razor %}
@@ -123,11 +123,11 @@ Add the Syncfusion® PDF Viewer (Next-Gen) c
{% endhighlight %}
{% endtabs %}
-N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF document. Users can use the Open option in the toolbar to browse and open a PDF as needed.
+N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a document. Use the Open toolbar option to browse and open a PDF.
## Run on Windows
-Run the sample on a Windows machine to execute the Blazor .NET MAUI app.
+Run the app on Windows.
@@ -137,7 +137,7 @@ After the application launches, the PDF Viewer renders the specified PDF documen
## Run on Android
-To run the PDF Viewer in a Blazor .NET MAUI Android application using the Android emulator, follow these steps:
+To run the PDF Viewer on Android using the Android emulator, follow these steps:
@@ -147,7 +147,7 @@ N> If any errors occur while using the Android Emulator, see [Troubleshooting An
->[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20.NET%20MAUI/MauiBlazorWindow).
+N> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20.NET%20MAUI/MauiBlazorWindow).
## See also
diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md
index 444b3f3928..f69c7991f7 100644
--- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md
+++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md
@@ -9,7 +9,7 @@ documentation: ug
# View PDF files using the PDF Viewer in a Blazor Web App
-This article describes how to add the Syncfusion® Blazor PDF Viewer component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code.
+This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code.
{% tabcontents %}
@@ -28,11 +28,11 @@ You can create a Blazor Web App using Visual Studio 2022 via [Microsoft Template
Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating a Blazor Web App.
-## Install Blazor PDF Viewer NuGet package in Blazor Web App
+## Install Blazor PDF Viewer NuGet packages
-To add **Blazor PDF Viewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install
+To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install:
-* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer)
+* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer)
* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
If using the WebAssembly or Auto interactive render mode, install the NuGet packages in the client project to add the component to the Web App.
@@ -104,7 +104,7 @@ N> Syncfusion® uses [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/
{% endtabcontents %}
-## Register Syncfusion® Blazor Service
+## Register Syncfusion Blazor service
| Interactive Render Mode | Description |
| -- | -- |
@@ -116,13 +116,13 @@ N> Syncfusion® uses [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/
{% tabs %}
{% highlight razor tabtitle="~/_Imports.razor" %}
-@using Syncfusion.Blazor;
-@using Syncfusion.Blazor.SfPdfViewer;
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.SfPdfViewer
{% endhighlight %}
{% endtabs %}
-* Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+* Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App.
If the interactive render mode is set to WebAssembly or Auto, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App.
@@ -239,9 +239,9 @@ app.MapRazorComponents()
N> [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size)
-## Adding stylesheet and script
+## Add stylesheet and script
-Add the following stylesheet and script to the head section of the **~/Components/App.razor** file.
+Add the following stylesheet and script to the head section of **~/Components/App.razor**.
{% tabs %}
{% highlight html hl_lines="3 7" %}
@@ -258,9 +258,9 @@ Add the following stylesheet and script to the head section of the **~/Component
{% endhighlight %}
{% endtabs %}
-## Adding Blazor PDF Viewer Component
+## Add Blazor PDF Viewer component
-Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~Pages/.razor** file. If the interactivity location is set to Per page/component, define a render mode at the top of the **~Pages/.razor** component as follows:
+Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~/Pages/*.razor** file. If interactivity location is Per page/component, define a render mode at the top of the page as follows:
| Interactivity location | RenderMode | Code |
| --- | --- | --- |
@@ -281,8 +281,9 @@ N> If the interactivity location is set to Global and the render mode is set to
{% endtabs %}
N> If the interactivity location is set to Global, a render mode does not need to be specified per page. The interactivity mode applies to the entire app.
+
Enable interactivity only via client-side rendering (CSR) by using the WebAssembly or Auto option -Add the Syncfusion® PDF Viewer component in the **~/Pages/Index.razor** file. +Add the Syncfusion® PDF Viewer component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -296,15 +297,15 @@ Add the Syncfusion® PDF Viewer component in {% endhighlight %} {% endtabs %} -N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF document. Users can use the **Open** option in the toolbar to browse and open a PDF as needed. +N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF. Use the **Open** toolbar option to browse and open a PDF. -## Run the application +## Run the app -Run the application to display the PDF file in the Syncfusion® Blazor PDF Viewer component in the browser. +Run the app to display the PDF in the Syncfusion® Blazor PDF Viewer in the browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Web App SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png)" %} -N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WebApp). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WebAppServerMode). ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md index 861783645e..df4fd3c74a 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md @@ -9,7 +9,7 @@ documentation: ug # View PDF files using the PDF Viewer in a Blazor WebAssembly (WASM) app -This article describes how to add the Syncfusion® Blazor PDF Viewer component to a Blazor WebAssembly (WASM) app using Visual Studio or Visual Studio Code. A fully functional example project is available in the [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20WebAssembly). +This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor WebAssembly (WASM) app using Visual Studio or Visual Studio Code. A fully functional example project is available in the [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20WebAssembly). {% tabcontents %} @@ -19,21 +19,21 @@ This article describes how to add the Syncfusion® Blazor PDF Viewer componen * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* To use the PDF Viewer component in a Blazor WebAssembly application with SkiaSharp, ensure the required .NET workloads are installed by running the following commands: +* To use the PDF Viewer with SkiaSharp in a Blazor WebAssembly app, ensure the required .NET workloads are installed by running: * dotnet workload install wasm-tools - * dotnet workload install wasm-tools-net8 + * dotnet workload install wasm-tools-net8 (For .NET 8.0) or dotnet workload install wasm-tools-net9 (For .NET 9.0) or dotnet workload install wasm-tools-net10 (For .NET 10.0) ## Create a new Blazor App in Visual Studio You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -N> The PDF Viewer component is supported on .NET 8.0 and later. +N> The PDF Viewer supports .NET 8.0 and later. -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages in the app +## Install NuGet packages -To add the Blazor PDF Viewer component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install +To add the Blazor PDF Viewer, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install: -* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) * [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor) @@ -47,9 +47,9 @@ N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this vers * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* To use the PDF Viewer component in a Blazor WebAssembly application with SkiaSharp, make sure to have the required .NET workloads installed by executing the following commands in the command prompt. +* To use the PDF Viewer with SkiaSharp in a Blazor WebAssembly app, ensure the required .NET workloads are installed by running: * dotnet workload install wasm-tools - * dotnet workload install wasm-tools-net8 + * dotnet workload install wasm-tools-net8 (For .NET 8.0) or dotnet workload install wasm-tools-net9 (For .NET 9.0) or dotnet workload install wasm-tools-net10 (For .NET 10.0) ## Create a new Blazor App in Visual Studio Code @@ -68,13 +68,13 @@ cd BlazorApp {% endtabs %} -N> The PDF Viewer component is supported on .NET 8.0 and later. +N> The PDF Viewer supports .NET 8.0 and later. ## Install Syncfusion® Blazor NuGet packages in the app * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following commands to install the [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer), [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor) NuGet packages and ensure all dependencies are installed. +* Run the following commands to install the required NuGet packages and their dependencies. {% tabs %} @@ -104,13 +104,13 @@ N> Syncfusion® Blazor components are available on [nuget.org](https://www.nu {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} -@using Syncfusion.Blazor; -@using Syncfusion.Blazor.SfPdfViewer; +@using Syncfusion.Blazor +@using Syncfusion.Blazor.SfPdfViewer {% endhighlight %} {% endtabs %} -* Register the Syncfusion® Blazor Service in the **~/Program.cs** file. +* Register the Syncfusion® Blazor service in the **~/Program.cs** file. {% tabs %} {% highlight C# tabtitle=".NET 6 & .NET 7 (~/Program.cs)" hl_lines="3 9 13" %} @@ -133,9 +133,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Adding stylesheet and script +## Add stylesheet and script -Add the following stylesheet and script to the head section of the **wwwroot/index.html** file. +Add the following stylesheet and script to the head section of **wwwroot/index.html**. {% tabs %} {% highlight html hl_lines="3 7" %} @@ -152,9 +152,9 @@ Add the following stylesheet and script to the head section of the **wwwroot/ind {% endhighlight %} {% endtabs %} -## Adding Blazor PDF Viewer Component +## Add Blazor PDF Viewer component -Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~/Pages/Index.razor** file. +Add the Syncfusion® PDF Viewer (Next-Gen) component to **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -169,14 +169,16 @@ Add the Syncfusion® PDF Viewer (Next-Gen) c {% endhighlight %} {% endtabs %} -N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF document. Users can use the **Open** option in the toolbar to browse and open a PDF as needed. +N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF. Use the **Open** toolbar option to browse and open a PDF. -## Run the application +## Run the app -Run the application to display the PDF file in the Syncfusion® Blazor PDF Viewer component in the browser. +Run the app to display the PDF in the Syncfusion® Blazor PDF Viewer in the browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor WebAssembly SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png)" %} +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WasmStandalone). + ## See also * [Getting started with the Blazor PDF Viewer in a Blazor Web app Server app](./web-app) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md index a2d79446b9..494f7e9f51 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md @@ -9,7 +9,7 @@ documentation: ug # View PDF files using the PDF Viewer in a WinForms Blazor Hybrid App -This article explains how to add the Syncfusion® Blazor PDF Viewer component to a WinForms Blazor Hybrid App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop application (WinForms) that hosts Blazor UI inside a BlazorWebView control. +This article shows how to add the Syncfusion® Blazor PDF Viewer to a WinForms Blazor Hybrid app using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop (WinForms) application that hosts Blazor UI inside a BlazorWebView control. {% tabcontents %} @@ -21,17 +21,17 @@ This article explains how to add the Syncfusion® Blazor PDF Viewer component ## Create a new WinForms app in Visual Studio -Create a WinForms application using Visual Studio 2022 with the WinForms project template. The app will later host Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a WinForms app using Visual Studio 2022 with the WinForms project template. The app hosts Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install Blazor PDF Viewer NuGet package in WinForms App +## Install Blazor PDF Viewer NuGet packages -To add **Blazor PDF Viewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install +To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install: -* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) * [Microsoft.AspNetCore.Components.WebView.WindowsForms](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.WindowsForms) -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16`.  @@ -45,7 +45,7 @@ N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms ## Create a new WinForms app in Visual Studio Code -Create a WinForms desktop project (not a WinForms Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WinForms project will host Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a WinForms desktop project (not a WinForms Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WinForms project hosts Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). {% tabs %} {% highlight c# tabtitle="WinForms Blazor HybridApp" %} @@ -77,15 +77,15 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the list of available packages and component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for package details. -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16`. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor service +## Register Syncfusion Blazor service The WinForms project must target Windows and enable WinForms. A typical project file looks like the following. @@ -114,9 +114,9 @@ Create a **Component** folder, add an **_Imports.razor** file in it, and include ## Create wwwroot folder and index.html file -* Create a new folder named wwwroot in the WinForms project root. +* Create a new folder named `wwwroot` in the WinForms project root. -* Inside wwwroot, create an index.html host page for the Blazor UI. This host page is required by BlazorWebView to initialize the Blazor runtime and load static assets (themes and scripts). A basic index.html might look like the following: +* Inside `wwwroot`, create an `index.html` host page for the Blazor UI. This host page initializes the Blazor runtime and loads static assets (themes and scripts). A basic `index.html` might look like the following: {% tabs %} {% highlight html tabtitle="index.html" hl_lines="8 13" %} @@ -142,7 +142,7 @@ Create a **Component** folder, add an **_Imports.razor** file in it, and include N> Ensure that the PDF Viewer static assets (themes and scripts) are loaded properly. -Register Syncfusion Blazor services and BlazorWebView in **~/Form1.cs** so that the WinForms window can host Blazor components. +Register Syncfusion Blazor services and BlazorWebView in **~/Form1.cs** so the WinForms window can host Blazor components. {% tabs %} {% highlight c# tabtitle="Form1.cs (WinForms host)" hl_lines="2 3 4 5 9 10 11 12 13 14 15 16 17 18 19 21" %} @@ -175,7 +175,7 @@ using WinFormsBlazorHybridApp.Components; ## Adding Blazor PDF Viewer component -Create a Razor component (for example, PDFViewer.razor) in the project and add the Syncfusion® PDF Viewer component to it within the **Component** folder +Create a Razor component (for example, PDFViewer.razor) in the project and add the Syncfusion® PDF Viewer component to it within the **Component** folder. {% tabs %} {% highlight razor %} @@ -192,13 +192,13 @@ Create a Razor component (for example, PDFViewer.razor) in the project and add t N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a document. Users can use the **Open** toolbar option to browse and open a PDF. -## Run the application +## Run the app -Run the WinForms application. The Syncfusion® Blazor PDF Viewer renders inside the WinForms window. +Run the WinForms app. The Syncfusion® Blazor PDF Viewer renders inside the WinForms window.  ->[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WinForms). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WinForms). ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md index f1bbf29609..863c9fca34 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md @@ -9,7 +9,7 @@ documentation: ug # View PDF files using the PDF Viewer in a WPF Blazor Hybrid App -This article explains how to add the Syncfusion® Blazor PDF Viewer component to a WPF Blazor Hybrid App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop application (WPF) that hosts Blazor UI inside a BlazorWebView control. +This article shows how to add the Syncfusion® Blazor PDF Viewer to a WPF Blazor Hybrid app using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop (WPF) application that hosts Blazor UI inside a BlazorWebView control. {% tabcontents %} @@ -21,17 +21,18 @@ This article explains how to add the Syncfusion® Blazor PDF Viewer component ## Create a new WPF app in Visual Studio -Create a WPF application using Visual Studio 2022 with the WPF project template. The app will later host Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a WPF app using Visual Studio 2022 with the WPF project template. The app hosts Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install Blazor PDF Viewer NuGet package in WPF App -To add **Blazor PDF Viewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install +## Install Blazor PDF Viewer NuGet packages -* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) +To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install: + +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) * [Microsoft.AspNetCore.Components.WebView.Wpf](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.Wpf) -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.Wpf` is updated to version `8.0.16`.  @@ -45,7 +46,7 @@ N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` updated ## Create a new WPF app in Visual Studio Code -Create a WPF desktop project (not a WPF Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WPF project will host Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a WPF desktop project (not a WPF Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WPF project hosts Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). {% tabs %} {% highlight c# tabtitle="WPF Blazor HybridApp" %} @@ -61,7 +62,7 @@ Install the required NuGet packages in the WPF project that will host the Blazor * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the current directory contains the WPF project `.csproj` file. -* Run the following commands to install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer), [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and [Microsoft.AspNetCore.Components.WebView.Wpf](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.Wpf). This adds the PDF Viewer, theme, and the BlazorWebView host control. +* Run the following commands to install the required packages. This adds the PDF Viewer, theme, and the BlazorWebView host control. {% tabs %} @@ -76,15 +77,15 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the list of available packages and component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for package details. -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.Wpf` is updated to version `8.0.16`. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor service +## Register Syncfusion Blazor service The WPF project must target Windows and enable WPF. A typical project file looks like the following. @@ -134,9 +135,9 @@ using Syncfusion.Blazor; ## Create wwwroot folder and index.html file -* Create a new folder named wwwroot in the WPF project root. +* Create a new folder named `wwwroot` in the WPF project root. -* Inside wwwroot, create an index.html host page for the Blazor UI. This host page is required by BlazorWebView to initialize the Blazor runtime and load static assets (themes and scripts). A basic index.html might look like the following: +* Inside `wwwroot`, create an `index.html` host page for the Blazor UI. This host page initializes the Blazor runtime and loads static assets (themes and scripts). A basic `index.html` might look like the following: {% tabs %} @@ -165,7 +166,7 @@ N> Ensure that the PDF Viewer static assets (themes and scripts) are loaded prop ## Adding Blazor PDF Viewer component -Create a Razor component (for example, Main.razor) in the project and add the Syncfusion® PDF Viewer component to it. +Create a Razor component (for example, Main.razor) in the project and add the Syncfusion® PDF Viewer component to it. {% tabs %} {% highlight razor %} @@ -209,13 +210,13 @@ N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor {% endhighlight %} {% endtabs %} -## Run the application +## Run the app -Run the WPF application. The Syncfusion® Blazor PDF Viewer renders inside the WPF window. +Run the WPF app. The Syncfusion® Blazor PDF Viewer renders inside the WPF window.  ->[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WPF). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WPF). ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md b/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md index 40df107a84..1c86b9eaf2 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md @@ -14,15 +14,15 @@ documentation: ug The [Blazor SfPdfViewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) component can be localized to display culture-specific text. Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) guide for steps to add culture resource files, register localization services, and set the current culture. N> -* Provide localized string resources for the viewer’s UI texts (such as toolbar tooltips, dialog messages). -* Ensure the app culture (CurrentCulture and CurrentUICulture) is set before the component renders for correct resource lookup. -* Localization applies to the viewer UI; it does not translate the PDF document content. +* Provide localized string resources for the viewer’s UI text (for example, toolbar tooltips and dialog messages). +* Ensure the application culture (`CurrentCulture` and `CurrentUICulture`) is set before the component renders for correct resource lookup. +* Localization applies to the viewer UI only; it does not translate PDF document content. ## Right to Left -To enable right-to-left (RTL) rendering for the viewer UI, set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableRtl) property to true. This mirrors the layout and aligns UI elements for RTL languages such as Arabic, Hebrew, Azerbaijani, Persian, and Urdu. The following code snippet demonstrates how to enable RTL rendering. +To enable right-to-left (RTL) rendering for the viewer UI, set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableRtl) property to `true`. This mirrors the layout and aligns UI elements for RTL languages such as Arabic, Hebrew, Azerbaijani, Persian, and Urdu. The following code snippet demonstrates how to enable RTL rendering. -By setting EnableRtl to `true`, the control will adjust its layout and appearance to align text, icons, and other elements from right to left, providing an optimized user experience for RTL language users. +When `EnableRtl` is `true`, the component adjusts its layout and appearance to align text, icons, and other elements from right to left, providing an optimized experience for RTL language users. ```cshtml diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md b/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md index 10439651e5..65606b7b28 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md @@ -15,12 +15,12 @@ The SfPdfViewer component supports adding handwritten signatures to PDF document Add a handwritten signature using the annotation toolbar. -* Click the **Edit Annotation** in the SfPdfViewer toolbar to open the annotation toolbar. -* Select the **HandWritten Signature** tool to open the signature panel. +* Click the **Edit Annotation** button in the SfPdfViewer toolbar to open the annotation toolbar. +* Select the **Handwritten Signature** tool to open the signature panel.  -* Draw the signature in the signature panel using a mouse, or touch. +* Draw the signature in the signature panel using a mouse or touch input.  @@ -32,7 +32,7 @@ The added signature becomes part of the PDF annotations and is preserved when sa ## Editing the properties of handwritten signature -The stroke color, thickness, and opacity of a handwritten signature can be adjusted using the annotation toolbar’s edit stroke color tool, edit thickness tool, and edit opacity tools. Select the signature on the page to enable these property editors for that item. After placement, the signature can also be moved, resized, or removed like other annotations. +Stroke color, thickness, and opacity can be adjusted using the annotation toolbar’s property editors. Select the signature on the page to enable these editors. After placement, the signature can be moved, resized, or removed like other annotations.  diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md b/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md index 2e7ce6e421..6f3eadd012 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md @@ -9,7 +9,7 @@ documentation: ug # Interaction mode in Blazor SfPdfViewer Component -SfPdfViewer provides two user interaction options to control how the document responds to pointer input. By default, text selection is enabled and the interaction mode is Selection. +SfPdfViewer provides two user interaction options to control how the document responds to pointer input. By default, text selection is enabled and the interaction mode is `Selection`. The built-in toolbar of SfPdfViewer contains the following two interaction options: @@ -20,7 +20,7 @@ The built-in toolbar of SfPdfViewer contains the following two interaction optio In this mode, users can select and copy text from the PDF document loaded in SfPdfViewer. This is useful for extracting and sharing textual content. -N> In Selection mode, page panning by touch/drag is disabled. Scrolling is still available through the mouse wheel scrollbars, or keyboard shortcuts. +N> In Selection mode, page panning by touch/drag is disabled. Users can still scroll using the mouse wheel, scrollbars, or keyboard shortcuts. You can enable or disable text selection by setting the [EnableTextSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSelection) property. @@ -41,7 +41,7 @@ You can enable or disable text selection by setting the [EnableTextSelection](ht ## Panning mode -In this mode, users can pan and scroll pages in the loaded PDF document in the SfPdfViewer, but the text selection cannot be performed. +In this mode, users can pan and scroll pages in the loaded PDF document, but text selection is disabled. The interaction mode of the SfPdfViewer component can be modified using the [InteractionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_InteractionMode) property. This property supports runtime updates, and any changes are applied immediately to the viewer. @@ -59,11 +59,11 @@ The interaction mode of the SfPdfViewer component can be modified using the [Int } ``` -## Disable interaction with Annotations +## Disable annotation interaction -Annotation interactions such as dragging, resizing, and deleting can be disabled by setting the [IsLock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerAnnotationSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerAnnotationSettings_IsLock) property in the [AnnotationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AnnotationSettings) configuration. +Annotation interactions, such as dragging, resizing, and deleting, can be disabled by setting the [IsLock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerAnnotationSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerAnnotationSettings_IsLock) property in the [AnnotationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AnnotationSettings) configuration. -The following code illustrates how to disable the annotation interaction. +The following code illustrates how to lock annotation interactions. ```cshtml diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark.md index 4c8932cf0d..587f9100cb 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark.md @@ -9,13 +9,13 @@ documentation: ug # Bookmark navigation in SfPdfViewer -Use the bookmark panel to jump directly to labeled destinations in a PDF. +Use the bookmark panel to jump to labeled destinations in the PDF. -Bookmarks defined in the PDF document are automatically loaded and listed in the bookmark panel. Selecting a bookmark navigates to its target. Nested bookmarks are supported; if the document has no bookmarks, the panel appears empty. +Bookmarks embedded in the PDF are loaded automatically and listed in the bookmark panel. Selecting a bookmark navigates to its target. Nested bookmarks are supported. If a document has no bookmarks, the panel appears empty.  -Enable or disable the bookmark panel by setting the [EnableBookmarkPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableBookmarkPanel) property. This property only controls the panel’s visibility; bookmarks are read from the PDF. +Show or hide the bookmark panel by setting the [EnableBookmarkPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableBookmarkPanel) property. This property controls only the panel’s visibility; bookmarks are read from the PDF itself. ```cshtml @@ -29,6 +29,6 @@ Enable or disable the bookmark panel by setting the [EnableBookmarkPanel](https: ``` -## See Also +## See also * [Page thumbnail navigation in Blazor SfPdfViewer](./page-thumbnail) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink.md index 9c66e67e47..b377dc01ba 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink.md @@ -9,15 +9,15 @@ documentation: ug # Hyperlink navigation in SfPdfViewer -Use hyperlinks in a PDF to navigate either to external URLs or to destinations within the same document. Hyperlinks are detected from the PDF content and work by default. +Use hyperlinks in a PDF to navigate to external URLs or to destinations within the same document. Hyperlinks are extracted from the PDF and enabled by default. -- External links (HTTP/HTTPS, etc.) open in the browser according to browser security and settings (for example, a new tab or window). +- External links (HTTP/HTTPS, etc.) open in the browser according to browser settings (for example, in a new tab or window). - In-document links navigate directly to the referenced page or location in the viewer. -If a document does not contain hyperlinks, no link-specific highlighting appears. +If a document contains no hyperlinks, the viewer shows no link highlighting.  -## See Also +## See also * [Table of content navigation in Blazor SfPdfViewer](./table-of-content) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-panel.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-panel.md index 792e5780b5..ec8c2563a6 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-panel.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-panel.md @@ -9,12 +9,11 @@ documentation: ug # Modern navigation panel in SfPdfViewer -The modern navigation panel consolidates thumbnails, bookmarks, comments, and custom panels in a single, flexible side panel for a streamlined navigation experience. +The modern navigation panel consolidates thumbnails, bookmarks, comments, and custom panels into a single flexible side panel for streamlined navigation. -Enable the modern navigation panel using the [EnableNavigationPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationPanel) property. Visibility can be toggled from the UI or programmatically. - -The following example enables the modern navigation panel: +Enable the modern navigation panel by setting the [EnableNavigationPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationPanel) property. You can toggle its visibility from the UI or programmatically. +Example — enable the modern navigation panel: ```cshtml @using Syncfusion.Blazor.SfPdfViewer; @@ -41,7 +40,7 @@ The modern navigation panel contains the following built-in items: Use the [BuiltInItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarSettings_BuiltInItems) property, which accepts a list of [NavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarItem.html) enums. The viewer renders the navigation icons in the exact sequence provided. -The following example displays Thumbnails first, followed by Bookmarks and the Comment panel. +Example — display Thumbnails first, followed by Bookmarks and the Comment panel. ```cshtml @@ -72,8 +71,7 @@ The following example displays Thumbnails first, followed by Bookmarks and the C Open or close a navigation panel programmatically by calling the [ToggleItemByIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ToggleItemByIndex_System_Int32_) method. Indices are zero-based and apply to the combined sequence of built-in and custom items. -The following example toggles the visibility of the second item in the navigation panel (index 1). - +Example — toggle the navigation panel item at index 1: ```cshtml @using Syncfusion.Blazor.SfPdfViewer; @@ -101,7 +99,7 @@ The following example toggles the visibility of the second item in the navigatio ### Add custom items to the navigation panel -You can add custom items to the SfPdfViewer navigation toolbar. Create a list of [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html) objects and assign it to the [CustomItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarSettings_CustomItems) property. +You can add custom items to the SfPdfViewer navigation toolbar by creating a list of [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html) objects and assigning it to the [CustomItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarSettings_CustomItems) property. Each CustomNavigationToolbarItem object includes: - Index: Position of the item in the toolbar. @@ -116,7 +114,7 @@ Each CustomNavigationToolbarItem object includes: Define a custom UI for a navigation panel by assigning a RenderFragment to the `Template` property of a [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html). -The following example adds a default toolbar with a custom item containing a small, interactive panel with a customized UI. +Example — add a default toolbar with a custom item that contains a small interactive panel and customized UI: ```cshtml @@ -214,15 +212,15 @@ The following example adds a default toolbar with a custom item containing a sma  -### Demand rendering for the navigation panel +### Rendering strategies for the navigation panel -SfPdfViewer supports different loading strategies for navigation panel content to optimize performance. The available options are: +SfPdfViewer supports different loading strategies for navigation panel content to optimize performance: -* **Dynamic** : The content for a panel is only loaded into the DOM when that panel is selected. When you switch to a different panel, the previous content is removed and replaced. -* **Init** : The content for all navigation panels is rendered during the initial load and is always present in the DOM. -* **Demand** : The content for a panel is loaded into the DOM the first time it is selected. The content is then kept in the DOM, even if you navigate to other panels. +* **Dynamic**: Content for a panel is loaded into the DOM only when that panel is selected. Switching panels replaces the previous content. +* **Init**: Content for all navigation panels is rendered during the initial load and remains in the DOM. +* **Demand**: Content for a panel is loaded into the DOM the first time it is selected and then retained. -The following example sets the loading strategy to Demand. +Example — set the loading strategy to `Demand`: ```cshtml @@ -240,10 +238,10 @@ The following example sets the loading strategy to Demand. ### Modern navigation panel in mobile view -On mobile devices, the navigation toolbar collapses into a toggle menu to save space. Any custom items appear at the beginning of this menu. +On mobile devices the navigation toolbar collapses into a toggle menu to save space. Custom items appear at the beginning of this menu.  -## See Also +## See also * [Page navigation in Blazor SfPdfViewer](./pages) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail.md index b568c8d8ec..c345db1f34 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail.md @@ -9,11 +9,11 @@ documentation: ug # Page thumbnail navigation in SfPdfViewer -Use the thumbnail panel to preview pages and navigate quickly through a PDF. Each thumbnail represents a page; selecting one navigates to that page in the viewer. +Use the thumbnail panel to preview pages and quickly navigate a PDF. Each thumbnail represents a page — select one to jump to that page in the viewer.  -Enable or disable the thumbnail panel by setting the [EnableThumbnailPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableThumbnailPanel) property. This property enables the feature; visibility at load time is controlled separately. +Show or hide the thumbnail panel by setting the [EnableThumbnailPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableThumbnailPanel) property. This property enables the feature; initial visibility at load time is controlled separately. ```cshtml @@ -29,9 +29,9 @@ Enable or disable the thumbnail panel by setting the [EnableThumbnailPanel](http ## Open thumbnail panel programmatically -To show the thumbnail panel when the document loads, set the [IsThumbnailPanelOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsThumbnailPanelOpen) property to true. This controls initial visibility and works when the thumbnail feature is enabled. +To show the thumbnail panel when the document loads, set the [IsThumbnailPanelOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsThumbnailPanelOpen) property to `true`. This controls initial visibility and requires the thumbnail feature to be enabled. -The following example opens the thumbnail panel at initial render. +Example — open the thumbnail panel at initial render: ```cshtml @@ -56,6 +56,6 @@ The following example opens the thumbnail panel at initial render. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Thumbnail/Show%20thumbnail%20panel). -## See Also +## See also * [Hyperlink navigation in Blazor SfPdfViewer](./hyperlink) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/pages.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/pages.md index bc8206d0b3..fab64f7e7f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/pages.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/pages.md @@ -9,19 +9,19 @@ documentation: ug # Page navigation in SfPdfViewer -Move between pages using the built-in toolbar or programmatic APIs. +Navigate pages using the toolbar or programmatic APIs. -The built-in toolbar of SfPdfViewer contains the following page navigation tools: +SfPdfViewer's toolbar includes these page navigation tools: -* **First page**: Navigates to the first page in the document. -* **Previous page**: Scrolls backward one page at a time. -* **Next page**: Scrolls forward one page at a time. -* **Last page**: Navigates to the last page in the document. -* **Go to page**: Jumps to a specified page number. +* **First page**: Navigate to the first page. +* **Previous page**: Scroll backward one page. +* **Next page**: Scroll forward one page. +* **Last page**: Navigate to the last page. +* **Go to page**: Jump to a specified page number.  -The navigation tools appear in the primary toolbar. Enable or disable these buttons by setting the [EnableNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigation) property. This setting affects only the toolbar buttons; programmatic navigation APIs remain available regardless of this value. +These toolbar buttons are controlled by the [EnableNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigation) property. Programmatic navigation APIs remain available regardless. ```cshtml @@ -38,9 +38,9 @@ The navigation tools appear in the primary toolbar. Enable or disable these butt ``` -Page navigation can also be performed programmatically. The following example shows how to navigate between pages using APIs. +Navigate pages programmatically using the APIs shown in the example below. -N> GoToPageAsync expects a 1-based page number. +N> `GoToPageAsync` expects a 1‑based page number. ```cshtml @@ -108,7 +108,7 @@ N> GoToPageAsync expects a 1-based page number. ``` -## See Also +## See also * [Magnification in Blazor SfPdfViewer](../magnification) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content.md index 9d8db68aa6..232211f9e9 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content.md @@ -9,12 +9,11 @@ documentation: ug # Table of contents navigation in SfPdfViewer -Use the table of contents (TOC) to jump to sections within a PDF. Each TOC entry maps to a location in the document; selecting one navigates to that destination. +Use the table of contents (TOC) to jump to sections within a PDF. Each entry maps to a location in the document; selecting one navigates to that destination.  -Enable or disable both hyperlink and TOC navigation by setting the [EnableHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableHyperlink) property. TOC entries are parsed from the PDF; if the document has no TOC, no entries appear. - +Enable or disable hyperlink and TOC navigation by setting the [EnableHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableHyperlink) property. TOC entries are parsed from the PDF; if the document has no TOC, no entries appear. ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -27,7 +26,7 @@ Enable or disable both hyperlink and TOC navigation by setting the [EnableHyperl ``` -Control where external hyperlinks open by using the [HyperlinkOpenState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_HyperlinkOpenState) property (for example, a new tab). In-document TOC links always navigate within the viewer. +Control where external hyperlinks open using the [HyperlinkOpenState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_HyperlinkOpenState) property (for example, a new tab). In-document TOC links always navigate within the viewer. ```cshtml @@ -44,6 +43,6 @@ Control where external hyperlinks open by using the [HyperlinkOpenState](https:/ ``` -## See Also +## See also * [Modern navigation panel in Blazor SfPdfViewer](./modern-panel) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/migration.md b/Document-Processing/PDF/PDF-Viewer/blazor/migration.md index 4a230aab86..4474633f38 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/migration.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/migration.md @@ -11,18 +11,18 @@ documentation: ug ## Why PDF Viewer (Classic) to PDF Viewer control -Migrating to the PDF Viewer control delivers better performance and a simplified deployment model. Scrolling, page navigation, and printing are optimized for a smoother user experience. The newer viewer also removes the WebAssembly server service dependency required by the classic control, reducing app complexity and maintenance. +Migrating to SfPdfViewer delivers better performance and a simplified deployment model. Scrolling, page navigation, and printing are optimized for a smoother user experience. SfPdfViewer also removes the WebAssembly server service dependency required by the classic viewer, reducing app complexity and maintenance. * **Enhanced performance**: Experience faster scrolling, more responsive page navigation, and improved printing throughput for large documents. * **No server service dependency**: -The newer viewer does not require a separate ServiceUrl or server-side WebAssembly service; client-side rendering is handled by the component. +SfPdfViewer does not require a separate `ServiceUrl` or server-side WebAssembly service; client-side rendering is handled by the component. * **Unified package across platforms**: A single package supports Windows, macOS, and Linux, making installation consistent across environments. -### Nuget Package +### NuGet package To initialize the PDF Viewer component, add the following package references to the project **.csproj** file. @@ -71,7 +71,7 @@ To initialize the PDF Viewer component, add the following package references to To use the PDF Viewer component, add the corresponding script reference in the app host page (**Host.cshtml** or **Layout.cshtml**) based on the framework version. -N> The same script file is used for both `Server application` and `Web assembly application` for the PDF Viewer component. +N> The same script file is used for both `Server application` and `WebAssembly application` for the PDF Viewer component.
+
+## See Also
+- [Getting Started](../getting-started)
+- [Overview](../overview)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document-From-Base64String.md b/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document-From-Base64String.md
index cb88f7f86d..7b545484ad 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document-From-Base64String.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document-From-Base64String.md
@@ -1,13 +1,14 @@
---
layout: post
-title: Open a PDF From Base64 string in MAUI PDF Viewer control | Syncfusion
-description: Learn here about opening a PDF document from the Base64 string in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
+title: Open a PDF from a Base64 String in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to open a PDF document from a Base64 string in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
-# Open a Document from base64 string in .NET MAUI PDF Viewer (SfPdfViewer)
+# Open a Document from a Base64 String in .NET MAUI PDF Viewer (SfPdfViewer)
A PDF document can be opened in the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) from a given Base64 string by converting it to a byte[] and assigning it to the [DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentSource) property.
@@ -83,3 +84,8 @@ namespace PdfViewerExample
{% endtabs %}
The example project to open a PDF document from a Base64 string can be downloaded [here](https://github.com/SyncfusionExamples/maui-pdf-viewer-examples/tree/master/Open%20PDF%20From%20Base-64%20String).
+
+## See Also
+- [Open a Document](../open-a-document)
+- [Open from URL](../open-a-document-from-url)
+- [Open from Local Storage](../open-a-document-from-local-storage)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document-From-Local-Storage.md b/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document-From-Local-Storage.md
index 918a7a4b97..58d1756f85 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document-From-Local-Storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document-From-Local-Storage.md
@@ -1,10 +1,11 @@
---
layout: post
title: Open a PDF From Local Storage in .NET MAUI PDF Viewer | Syncfusion
-description: Learn here about opening a PDF document from local storage in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
+description: Learn how to open a PDF document from local storage in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
# Open a PDF from Local Storage in .NET MAUI PDF Viewer (SfPdfViewer)
@@ -168,3 +169,8 @@ namespace OpenLocalFile
{% endtabs %}
The example project to open a PDF document from local storage using `File Picker` can be downloaded [here](https://github.com/SyncfusionExamples/maui-pdf-viewer-examples).
+
+## See Also
+- [Open a Document](../open-a-document)
+- [Open from URL](../open-a-document-from-url)
+- [Document Load Notifications](../documentloadnotifications)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document-From-URL.md b/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document-From-URL.md
index 5589c258f5..612a2904bc 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document-From-URL.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document-From-URL.md
@@ -1,10 +1,11 @@
---
layout: post
-title: Open a Document From URL in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here about opening a PDF document from the URL in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
+title: Open a Document from URL in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to open a PDF document from a URL in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
# Open a Document from URL in .NET MAUI PDF Viewer (SfPdfViewer)
@@ -78,3 +79,8 @@ namespace PdfViewerExample
{% endtabs %}
The example project to open a PDF document from a given URL can be downloaded [here](https://github.com/SyncfusionExamples/maui-pdf-viewer-examples).
+
+## See Also
+- [Open a Document](../open-a-document)
+- [Open from Base64](../open-a-document-from-base64string)
+- [Document Load Notifications](../documentloadnotifications)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document.md b/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document.md
index e2941fc2cb..17d63216af 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Document.md
@@ -1,17 +1,29 @@
---
layout: post
-title: Open a Document in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about opening a PDF document in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control and more.
+title: Open a Document in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to open a PDF document in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control from various sources.
platform: document-processing
control: SfPdfViewer
documentation: ug
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
# Open a Document in .NET MAUI PDF Viewer (SfPdfViewer)
-The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to open PDF documents from various sources, like local storage or URLs. It also lets you view password-protected documents.
+The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to open PDF documents from various sources, such as local storage or URLs. It also supports viewing password-protected documents.
-This section walks you through the loading and unloading of documents in [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) and handling the load-specific events.
+This section walks you through loading and unloading documents in the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) and handling load-specific events.
+
+## In This Section
+
+| Topic | Description |
+|---|---|
+| [Open a Document](https://help.syncfusion.com/maui/pdf-viewer/open-a-document) | Load from a stream or byte array, unload documents, and handle loading events. |
+| [Open from a URL](https://help.syncfusion.com/maui/pdf-viewer/open-a-document-from-url) | Download and display a PDF directly from a remote URL. |
+| [Open from Local Storage](https://help.syncfusion.com/maui/pdf-viewer/open-a-document-from-local-storage) | Open a PDF from the device's file system using the file picker. |
+| [Open from Base64](https://help.syncfusion.com/maui/pdf-viewer/open-a-document-from-base64string) | Load a PDF encoded as a Base64 string. |
+| [Open a Password-Protected Document](https://help.syncfusion.com/maui/pdf-viewer/open-a-password-protected-document) | Display a password dialog and open encrypted PDF documents. |
+| [Document Load Notifications](https://help.syncfusion.com/maui/pdf-viewer/documentloadnotifications) | Subscribe to document and page load/unload events for custom logic. |
## Document and page loading indications
@@ -79,8 +91,30 @@ The .NET MAUI PDF Viewer does not currently support annotations comparable to Xa
N> * All the [LoadDocument](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_LoadDocument_System_IO_Stream_System_String_System_Nullable_Syncfusion_Maui_PdfViewer_FlattenOptions__) methods accept the flatten options parameter.
N> * Refer to this [section](https://help.syncfusion.com/maui/pdf-viewer/migration#upcoming-features) for the upcoming annotation features in the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html).
+## Optimizing document loading on Android
+
+When your application handles large images, complex graphics, or memory-intensive operations, the default heap size may not be sufficient, leading to performance issues or crashes. Enabling a larger heap allows the app to allocate more memory, ensuring smooth performance and preventing out-of-memory errors in such scenarios. You can enable this by adding the following highlighted attribute in your AndroidManifest.xml under the tag.
+
+{% tabs %}
+{% highlight xml hl_lines="4" %}
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
## Check other PDF opening options
* [Open a document from local storage](https://help.syncfusion.com/maui/pdf-viewer/open-a-document-from-local-storage)
* [Open a document from a URL](https://help.syncfusion.com/maui/pdf-viewer/open-a-document-from-url)
* [Open a password-protected document](https://help.syncfusion.com/maui/pdf-viewer/open-a-password-protected-document)
+
+## See Also
+- [Open from URL](../open-a-document-from-url)
+- [Open from Base64](../open-a-document-from-base64string)
+- [Open from Local Storage](../open-a-document-from-local-storage)
+- [Open a Password-Protected Document](../open-a-password-protected-document)
+- [Document Load Notifications](../documentloadnotifications)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Password-Protected-Document.md b/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Password-Protected-Document.md
index 9c8f299b3f..b899873887 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Password-Protected-Document.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Open-a-Password-Protected-Document.md
@@ -1,11 +1,11 @@
---
layout: post
title: Open a Password-Protected PDF in .NET MAUI PDF Viewer | Syncfusion
-description: Learn here about opening a password-protected document in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control and more.
+description: Learn how to open a password-protected PDF document in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
-keywords : .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
# Open a Password-Protected PDF in .NET MAUI PDF Viewer (SfPdfViewer)
@@ -388,3 +388,7 @@ If the entered password is correct, the document will be loaded into the PDF Vie
## GitHub example
The example project to open a password-protected document with a customized password request view can be downloaded [here](https://github.com/SyncfusionExamples/maui-pdf-viewer-examples).
+
+## See Also
+- [Open a Document](../open-a-document)
+- [Document Load Notifications](../documentloadnotifications)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Overview.md b/Document-Processing/PDF/PDF-Viewer/maui/Overview.md
index 85d21e8f8f..1386bede15 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Overview.md
@@ -1,20 +1,39 @@
---
layout: post
-title: About .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about introduction of Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control, its key features and more.
+title: Overview of .NET MAUI PDF Viewer control | Syncfusion
+description: Learn about the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control, its key features, and the problems it solves.
platform: document-processing
control: SfPdfViewer
documentation: ug
-keywords : .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
# .NET MAUI PDF Viewer (SfPdfViewer) Overview
-The [.NET MAUI PDF Viewer](https://www.syncfusion.com/maui-controls/maui-pdf-viewer) control lets you view PDF documents seamlessly and efficiently. It has highly interactive and customizable features such as magnification, page navigation, text selection, text search, document link navigation, hyperlink navigation, outline view, form filling, and the ability to review PDF files with annotations.
+Build powerful PDF experiences into your .NET MAUI app with the [SfPdfViewer](https://www.syncfusion.com/maui-controls/maui-pdf-viewer) control. Whether you need to display documents for review, let users fill out forms, redact sensitive data, or annotate content — the PDF Viewer gives you a full-featured, cross-platform solution that works on Android, iOS, macOS, and Windows from a single codebase.
-**Key Features**
+## In This Section
-* **Virtual scrolling** - Easily scroll through the pages in the document fluently. The pages are rendered only when required to increase the loading and scrolling performance.
+| Topic | Description |
+|---|---|
+| [Getting Started](https://help.syncfusion.com/maui/pdf-viewer/getting-started) | Install the package, configure the handler, and load your first PDF document. |
+| [Open a Document](https://help.syncfusion.com/maui/pdf-viewer/open-a-document) | Load documents from streams, local storage, URLs, Base64 strings, or password-protected files. |
+| [Annotations Overview](https://help.syncfusion.com/maui/pdf-viewer/annotations-overview) | Add, edit, import, and export highlights, shapes, ink, stamps, sticky notes, and more. |
+| [Form Filling Overview](https://help.syncfusion.com/maui/pdf-viewer/form-filling-overview) | Fill, edit, import, and export PDF form fields including text boxes, checkboxes, and signatures. |
+| [Text Search](https://help.syncfusion.com/maui/pdf-viewer/text-search) | Search for text and navigate all occurrences in a document. |
+| [Save a Document](https://help.syncfusion.com/maui/pdf-viewer/save-a-document) | Save modified documents to a file stream, with optional annotation flattening. |
+| [Toolbar](https://help.syncfusion.com/maui/pdf-viewer/toolbar) | Reference guide to all built-in toolbar names and toolbar item names. |
+| [Toolbar Customization](https://help.syncfusion.com/maui/pdf-viewer/toolbar-customization) | Show, hide, add, remove, and reorder toolbar items. |
+| [UI Customization](https://help.syncfusion.com/maui/pdf-viewer/ui-customization) | Customize the appearance of the PDF Viewer control. |
+| [Redaction](https://help.syncfusion.com/maui/pdf-viewer/redaction) | Permanently remove sensitive content from PDF documents. |
+| [Electronic Signature](https://help.syncfusion.com/maui/pdf-viewer/signature) | Add handwritten, typed, or image-based signatures. |
+| [Keyboard Shortcuts](https://help.syncfusion.com/maui/pdf-viewer/keyboard-shortcuts) | Keyboard shortcuts available on desktop platforms. |
+| [Localization](https://help.syncfusion.com/maui/pdf-viewer/localization) | Translate all built-in strings into any supported language. |
+| [Migration Guide](https://help.syncfusion.com/maui/pdf-viewer/migration) | Migrate from Xamarin.Forms SfPdfViewer to .NET MAUI SfPdfViewer. |
+
+## Key Features
+
+* **Virtual scrolling** - Easily scroll through the pages in the document fluently. Pages are rendered only when required to improve loading and scrolling performance.
* **Magnification** - The content of a PDF document can be efficiently zoomed in and out by pinching or changing the zoom factor programmatically.
* **Zoom modes** - Improve document readability by adjusting magnification to suit your viewing needs. Use *Fit to Page* to display the entire page without scrolling, ideal for quick overviews. Choose *Fit to Width* for optimal reading of content with narrow columns, such as newspapers or multi-column layouts.
* **Page navigation** - Navigate to the desired pages instantly using the page navigation option programmatically or by dragging the scroll head in the UI.
@@ -41,3 +60,8 @@ The [.NET MAUI PDF Viewer](https://www.syncfusion.com/maui-controls/maui-pdf-vie
* **Print** - Print the PDF files.
* **Coordinates conversion** - Obtain the PDF page coordinates relative to the PDF Viewer’s client coordinates and vice versa. It also helps to obtain the scroll point relative to the PDF page coordinates and bring the given region into view.
* **Localization** - All static text within the PDF Viewer can be localized to any supported language.
+
+## See Also
+- [Getting Started](../getting-started)
+- [Annotations Overview](../annotations-overview)
+- [Form Filling Overview](../form-filling-overview)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Page-Navigation.md b/Document-Processing/PDF/PDF-Viewer/maui/Page-Navigation.md
index a3cb75310f..211cee1f0b 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Page-Navigation.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Page-Navigation.md
@@ -1,10 +1,11 @@
---
layout: post
-title: Page Navigation in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about page navigation feature in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control and more.
+title: Page Navigation in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to navigate pages in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control programmatically and through the UI.
platform: document-processing
control: SfPdfViewer
documentation: ug
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
# Page Navigation in .NET MAUI PDF Viewer (SfPdfViewer)
@@ -29,7 +30,7 @@ To enable the continuous page layout mode, you can call the following code in a
// Enable or activate the Continuous Page Layout mode.
void EnableContinuousPageLayoutMode()
{
- // Set the PageLayout mode to Continuous using the `SfPdfViewer` instance.
+ // Set the PageLayoutMode to Continuous on the SfPdfViewer instance.
PdfViewer.PageLayoutMode = PageLayoutMode.Continuous;
}
@@ -47,7 +48,7 @@ To enable the single page layout mode, you can call the following code in a butt
// Enable or activate the Single Page Layout mode.
void EnableSinglePageLayoutMode()
{
- // Set the PageLayout mode to Single using the `SfPdfViewer` instance.
+ // Set the PageLayoutMode to Single on the SfPdfViewer instance.
PdfViewer.PageLayoutMode = PageLayoutMode.Single;
}
@@ -120,4 +121,10 @@ private void LastPageButton_Clicked(object sender, EventArgs e)
{% endhighlight %}
{% endtabs %}
-The example project with the page navigation functionalities can be downloaded [here](https://github.com/SyncfusionExamples/maui-pdf-viewer-examples).
\ No newline at end of file
+The example project with the page navigation functionalities can be downloaded [here](https://github.com/SyncfusionExamples/maui-pdf-viewer-examples).
+
+## See Also
+- [Scrolling](../scrolling)
+- [Document Link Annotations](../document-link-annotations)
+- [Document Outline](../document-outline)
+- [Hyperlink Navigation](../hyperlink-navigation)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Print-a-Document.md b/Document-Processing/PDF/PDF-Viewer/maui/Print-a-Document.md
index 8b0a968a7f..85cc5bce15 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Print-a-Document.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Print-a-Document.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Print a Document in .NET MAUI PDF Viewer Control | Syncfusion
-description: Learn here all about printing feature in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control and more.
+title: Print a Document in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to print a PDF document using the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
@@ -10,16 +10,19 @@ keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .ne
# Print a Document in .NET MAUI PDF Viewer (SfPdfViewer)
-The print feature of [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to effortlessly print PDF documents directly from your application code.
+Print PDFs directly from your app using the viewer's built-in print integration. This page shows how to trigger printing, provide optional print settings, and handle platform print dialogs so your users see familiar system UI.
-Moreover, when performing a print operation, the default device print dialog opens, providing users with familiar options and settings to customize their printing experience.
+N> Note: On some platforms the system print dialog controls options such as paper size and print quality — collect any user-specific print options in your UI and pass them to the print API where supported.
-To print a PDF programmatically, you can use the [PrintDocument](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_PrintDocument) method provided by [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html).Refer to the following code example.
+To print a PDF programmatically, use the [PrintDocument](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_PrintDocument) method. For example, call it from a toolbar or a Print button's click handler.
{% tabs %}
-{% highlight c# %}
-// Prints the PDF document.
-PdfViewer.PrintDocument();
+{% highlight c# tabtitle="MainPage.xaml.cs" %}
+// Call from a Print button's Clicked handler.
+private void PrintButton_Clicked(object sender, EventArgs e)
+{
+ PdfViewer.PrintDocument();
+}
{% endhighlight %}
{% endtabs %}
@@ -57,3 +60,8 @@ N> The [PrintQuality](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfVie
## Limitations
Currently, when printing a document that contains sticky note annotations, the sticky note icon always appears as the default [comment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.StickyNoteIcon.html#Syncfusion_Maui_PdfViewer_StickyNoteIcon_Comment) icon appearance in the printed document.
+
+## See Also
+- [Save a Document](../save-a-document)
+- [Annotations Overview](../annotations-overview)
+- [Form Filling Overview](../form-filling-overview)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Redaction.md b/Document-Processing/PDF/PDF-Viewer/maui/Redaction.md
index 4c0ad34444..8982ee2654 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Redaction.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Redaction.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Redaction in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about Redaction in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control and its functionalities.
+title: Redaction in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to redact sensitive content in a PDF document using the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
@@ -10,7 +10,7 @@ keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .ne
# Redaction in .NET MAUI PDF Viewer (SfPdfViewer)
-Redaction support of [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to conceal sensitive or confidential information in text and images within a PDF document. This ensures that private data, such as personal details or financial information, is securely hidden before sharing or publishing. Once redaction is applied and the document is resaved, the concealed content cannot be recovered.
+Before sharing a PDF externally, use redaction to permanently remove sensitive data — such as personal details, financial figures, or confidential text — from the document. Unlike simply covering content with a shape or annotation, redaction in [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) eliminates the underlying content entirely once the document is saved, making recovery impossible.
## Types of Redactions
@@ -170,4 +170,10 @@ void CustomizeDefaultRedactionSettings()
PdfViewer.RedactionSettings.IsRepeat = true; // Repeat overlay text across the redacted area.
}
{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
+{% endtabs %}
+
+## See Also
+- [Save a Document](../save-a-document)
+- [Text Search](../text-search)
+- [Annotations Overview](../annotations-overview)
+- [Undo and Redo](../undo-redo)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Right-To-Left.md b/Document-Processing/PDF/PDF-Viewer/maui/Right-To-Left.md
index f171a1b9a8..ea827ff4ac 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Right-To-Left.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Right-To-Left.md
@@ -1,14 +1,14 @@
---
layout: post
-title: Right to Left in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about the layouting Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control in right-to-left.
+title: Right-to-Left Layout in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to enable right-to-left layout in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
-# Right to left in .NET MAUI PDF Viewer (SfPdfViewer)
+# Right-to-Left Layout in .NET MAUI PDF Viewer (SfPdfViewer)
By default, the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control is laid out in the left-to-right flow direction. For the convenience of right-to-left language users, it enables changing the flow direction to right-to-left (RTL). This can be achieved by setting the [FlowDirection](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.iview.flowdirection?view=net-maui-7.0) property to `RightToLeft`.
Setting the [FlowDirection](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.iview.flowdirection?view=net-maui-7.0) property to `RightToLeft` on the SfPdfViewer sets the alignment to the right, and layouts the built-in controls used in the SfPdfViewer to flow from right-to-left. Refer to the following code example to apply the same.
@@ -28,4 +28,8 @@ PdfViewer.FlowDirection = FlowDirection.RightToLeft;
{% endhighlight %}
{% endtabs %}
-N> Right-to-Left language users can also refer to this [section](https://help.syncfusion.com/maui/pdf-viewer/migration#upcoming-features) for information on how to localize the static text used in the PDF reader to other languages.
\ No newline at end of file
+N> Right-to-Left language users can also refer to this [section](https://help.syncfusion.com/maui/pdf-viewer/migration#upcoming-features) for information on how to localize the static text used in the PDF reader to other languages.
+
+## See Also
+- [Localization](../localization)
+- [Getting Started](../getting-started)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Save-a-Document.md b/Document-Processing/PDF/PDF-Viewer/maui/Save-a-Document.md
index 12dfd23ac9..56636893ba 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Save-a-Document.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Save-a-Document.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Save a Document in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about saving a PDF document in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control to prevent the work from being lost.
+title: Save a Document in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to save a modified PDF document in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
@@ -10,25 +10,52 @@ keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .ne
# Save a Document in .NET MAUI PDF Viewer (SfPdfViewer)
-The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to save a modified document to the specified file stream. It helps you to prevent your work from being lost. You need to provide the PDF file stream as a parameter to the [SaveDocument](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_SaveDocument_System_IO_Stream_) method of the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html). The modified document will be saved to the given file stream.
+After annotating, filling forms, or applying redactions, use the PDF Viewer's save methods to persist all changes back to a file stream. You can save synchronously with [SaveDocument](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_SaveDocument_System_IO_Stream_) or asynchronously with [SaveDocumentAsync](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_SaveDocumentAsync_System_IO_Stream_System_Threading_CancellationToken_) — and optionally flatten annotations or form fields into static content at the same time.
The following example explains how to save the modified document if the document needs to be saved in the application’s data directory.
{% tabs %}
{% highlight c# %}
+private void SaveButton_Clicked(object sender, EventArgs e)
+{
+ SaveDocument();
+}
+
private void SaveDocument()
{
- // Create a file stream to save the PDF document. Here, a file named "ModifiedDocument.pdf" is created in the application's data directory.
- string fileName = Path.Combine(FileSystem.Current.AppDataDirectory, "ModifiedDocument.pdf");
- using FileStream fileStream = File.Create(fileName);
-
- // Save the PDF document.
- PdfViewer.SaveDocument(fileStream);
+ // Create a file stream to save the PDF document.
+ // The file "ModifiedDocument.pdf" is written to the app's sandboxed data directory.
+ string fileName = Path.Combine(FileSystem.Current.AppDataDirectory, "ModifiedDocument.pdf");
+ using FileStream fileStream = File.Create(fileName);
+
+ // Save the PDF document to the stream.
+ PdfViewer.SaveDocument(fileStream);
}
{% endhighlight %}
{% endtabs %}
-To save a document asynchronously, you may use the [SaveDocumentAsync](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_SaveDocumentAsync_System_IO_Stream_System_Threading_CancellationToken_) method of the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html).
+## Save a document asynchronously
+
+To save a document without blocking the UI thread, use the [SaveDocumentAsync](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_SaveDocumentAsync_System_IO_Stream_System_Threading_CancellationToken_) method. This is the recommended approach for saving from event handlers or UI interactions. An optional [CancellationToken](https://learn.microsoft.com/en-us/dotnet/api/system.threading.cancellationtoken) can be passed to cancel the operation if needed.
+
+{% tabs %}
+{% highlight c# %}
+private async void SaveButton_Clicked(object sender, EventArgs e)
+{
+ await SaveDocumentAsync();
+}
+
+private async Task SaveDocumentAsync()
+{
+ // Create a file stream to save the PDF document asynchronously.
+ string fileName = Path.Combine(FileSystem.Current.AppDataDirectory, "ModifiedDocument.pdf");
+ using FileStream fileStream = File.Create(fileName);
+
+ // Save the PDF document without blocking the UI thread.
+ await PdfViewer.SaveDocumentAsync(fileStream);
+}
+{% endhighlight %}
+{% endtabs %}
## Flatten annotations and form fields on save
@@ -66,4 +93,11 @@ formField.FlattenOnSave = true;
### Limitation
-Currently, when saving a document by flattening that contains sticky note annotations, the sticky note icon always appears as the default [comment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.StickyNoteIcon.html#Syncfusion_Maui_PdfViewer_StickyNoteIcon_Comment) icon appearance in the saved document.
\ No newline at end of file
+Currently, when saving a document by flattening that contains sticky note annotations, the sticky note icon always appears as the default [comment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.StickyNoteIcon.html#Syncfusion_Maui_PdfViewer_StickyNoteIcon_Comment) icon appearance in the saved document.
+
+## See Also
+- [Annotations Overview](../annotations-overview)
+- [Form Filling Overview](../form-filling-overview)
+- [Import and Export Annotations](../import-export-annotations)
+- [Redaction](../redaction)
+- [Electronic Signature](../signature)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Scrolling.md b/Document-Processing/PDF/PDF-Viewer/maui/Scrolling.md
index 0f0d1aab99..9fdf65f3c4 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Scrolling.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Scrolling.md
@@ -5,11 +5,12 @@ description: Explore scrolling features in .NET MAUI PDF Viewer, including how t
platform: document-processing
control: SfPdfViewer
documentation: ug
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
# Scrolling in .NET MAUI PDF Viewer (SfPdfViewer)
-The .NET MAUI PDF Viewer provides built-in scrolling capabilities that allow users to navigate through PDF content smoothly. This guide covers how to control scroll positions programmatically, detect scroll changes, and manage scroll-related UI elements.
+Keep document navigation smooth and predictable by using the PDF Viewer's built-in scrolling features. This guide shows how to programmatically control scroll position, respond to scroll events, and implement performance-friendly patterns (for example, avoid nesting the viewer inside other scrollable containers).
W> Since the PDF Viewer includes built-in scrolling, avoid placing it inside other scrollable containers like [ScrollView](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/scrollview?view=net-maui-8.0), as this may lead to unexpected behavior.
@@ -164,4 +165,9 @@ PdfViewer.LoadDocument("sample.pdf");
{% endtabs %}
N> - Use a reasonable OverscanCount value. Large values can cause memory spikes and app freezes.
-N> - Pages with very high resolution may still render slowly due to native rendering limitations.
\ No newline at end of file
+N> - Pages with very high resolution may still render slowly due to native rendering limitations.
+
+## See Also
+- [Page Navigation](../page-navigation)
+- [Magnification](../magnification)
+- [Gesture Events](../gesture-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Select-Deselect-Annotations.md b/Document-Processing/PDF/PDF-Viewer/maui/Select-Deselect-Annotations.md
index 7f004d27fc..cb9f57e77f 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Select-Deselect-Annotations.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Select-Deselect-Annotations.md
@@ -1,7 +1,7 @@
---
layout: post
title: Select and Deselect Annotations in .NET MAUI PDF Viewer | Syncfusion
-description: Learn here all about select and deselect annotations in PDF documents using the .NET MAUI PDF Viewer (SfPdfViewer) control and its settings customization.
+description: Learn how to select and deselect annotations in PDF documents using the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
@@ -174,4 +174,9 @@ private void OnAnnotationDeselected(object sender, AnnotationEventArgs e)
// You can handle your logics here…
}
{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
+{% endtabs %}
+
+## See Also
+- [Annotations Overview](../annotations-overview)
+- [Add, Remove, and Modify Annotations](../add-remove-modify-annotations)
+- [Lock and Unlock Annotations](../lock-unlock)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Shapes.md b/Document-Processing/PDF/PDF-Viewer/maui/Shapes.md
index d10883d2ba..dae2a1400e 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Shapes.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Shapes.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Shape Annotations in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about Shape Annotations in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control and its types.
+title: Shape Annotations in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to add and manage shape annotations in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
@@ -270,3 +270,8 @@ void AddCloudAnnotation()
{% endhighlight %}
{% endtabs %}
+
+## See Also
+- [Annotations Overview](../annotations-overview)
+- [Add, Remove, and Modify Annotations](../add-remove-modify-annotations)
+- [Undo and Redo](../undo-redo)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Show-Hide.md b/Document-Processing/PDF/PDF-Viewer/maui/Show-Hide.md
index 75eaefcf09..acd501b93e 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Show-Hide.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Show-Hide.md
@@ -1,13 +1,14 @@
---
layout: post
-title: Show and Hide annotations in .NET MAUI PDF Viewer | Syncfusion
-description: Learn here about showing and hiding annotations in a document in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control and more.
+title: Show and Hide Annotations in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to show and hide annotations in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
-# Show and Hide annotations in .NET MAUI PDF Viewer (SfPdfViewer)
+
+# Show and Hide Annotations in .NET MAUI PDF Viewer (SfPdfViewer)
You can manage the visibility of annotations using the `Hidden` property. It helps you to hide annotations containing confidential data when sharing documents externally or presenting documents, ensuring data privacy and security. Also, it makes it easier to read the documents that are cluttered with more annotations. Like other annotation properties, you can undo and redo the hiding or showing actions. Additionally, when an annotation is locked, it cannot be hidden. Annotations that are hidden will remain hidden during import, export, printing, and saving.
@@ -79,4 +80,9 @@ private void HideAnnotationButton_Clicked(object sender, EventArgs e)
* Similarly, to show the annotation, set the `Hidden` property value to `false`.
N> * On iOS and Mac, while printing a document containing hidden annotations, the hidden annotations will be visible in the print preview or the printed document.
-N> * When a document containing hidden annotations is loaded, it will not only disappear in the UI but also will not be added to the [SfPdfViewer.Annotations](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_Annotations) collection as well.
\ No newline at end of file
+N> * When a document containing hidden annotations is loaded, it will not only disappear in the UI but also will not be added to the [SfPdfViewer.Annotations](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_Annotations) collection as well.
+
+## See Also
+- [Annotations Overview](../annotations-overview)
+- [Lock and Unlock Annotations](../lock-unlock)
+- [Select and Deselect Annotations](../select-deselect-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Signature.md b/Document-Processing/PDF/PDF-Viewer/maui/Signature.md
index 1ba0a152da..a68cc84b44 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Signature.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Signature.md
@@ -1,11 +1,11 @@
---
layout: post
-title: Electronic Signature in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about Electronic Signature in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control and its types.
+title: Electronic Signature in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to add and manage electronic signatures in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
-keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view.
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
# Electronic Signature in .NET MAUI PDF Viewer (SfPdfViewer)
@@ -54,7 +54,7 @@ Similarly, refer to the following code to disable the signature mode.
{% tabs %}
{% highlight c# %}
-// Disable or deactivate the ink drawing mode.
+// Disable or deactivate the signature mode.
void DisableSignatureMode()
{
// Set the annotation mode to none using the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) instance.
@@ -223,3 +223,9 @@ private void PdfViewer_SignatureCreated(object? sender, SignatureCreatedEventArg
}
{% endhighlight %}
{% endtabs %}
+
+## See Also
+- [Electronic Signature (Form Field)](../form-filling-overview)
+- [Annotations Overview](../annotations-overview)
+- [Add, Remove, and Modify Annotations](../add-remove-modify-annotations)
+- [Save a Document](../save-a-document)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Stamps.md b/Document-Processing/PDF/PDF-Viewer/maui/Stamps.md
index 156e269e4c..d6d066cb5e 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Stamps.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Stamps.md
@@ -1,11 +1,11 @@
---
layout: post
-title: Stamp Annotations in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about Stamp Annotations in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control and its types.
+title: Stamp Annotations in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to add and manage stamp annotations in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
-keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view.
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
# Stamp Annotations in .NET MAUI PDF Viewer (SfPdfViewer)
@@ -178,6 +178,55 @@ void EditSelectedStampAnnotation(Annotation selectedAnnotation)
N> Changing the color of a stamp annotation after it has been added to a PDF is not supported due to the predefined nature of standard stamps. These stamps use fixed colors to ensure consistency and convey distinct meanings. As a work around, you can create a [Custom stamp](https://help.syncfusion.com/maui/pdf-viewer/stamps#add-custom-stamps-using-the-toolbar) which allows users to design stamps with user-defined colors and text.
+## Access Custom Stamp Annotation Views
+
+The view associated with a custom stamp annotation can be accessed and modified using the `CustomStampView` API available on the `StampAnnotation` class. This allows developers to retrieve and update the MAUI `View` that was originally used to create the custom stamp.
+
+N> * `CustomStampView` is supported only for custom stamp annotations created from a MAUI `View`.
+N> * Standard (built-in) stamp annotations or stamps created from images/text do not expose a view and return `null` for `CustomStampView`.
+
+### Retrieve the custom stamp annotation view
+
+You can retrieve the view used to create a custom stamp annotation by accessing the `CustomStampView` property. This is useful for previewing the stamp, inspecting its contents, or applying programmatic visual changes. The following example demonstrates accessing the custom stamp view using the `AnnotationSelected` event:
+
+{% tabs %}
+{% highlight c# %}
+pdfViewer.AnnotationSelected += PdfViewer_AnnotationSelected;
+
+private void PdfViewer_AnnotationSelected(object? sender, AnnotationEventArgs e)
+{
+ if (e.Annotation != null && e.Annotation is StampAnnotation stamp)
+ {
+ // Retrieve the MAUI view that was used to create this custom stamp annotation.
+ View? stampView = stamp.CustomStampView;
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Customize the custom stamp annotation view
+
+Once you obtain the custom stamp's view you can modify its content or styling. In the example below, the custom stamp was originally created from a `Button`, and its `Text` is updated when the annotation is selected.
+
+{% tabs %}
+{% highlight c# %}
+pdfViewer.AnnotationSelected += PdfViewer_AnnotationSelected;
+
+private void PdfViewer_AnnotationSelected_Customize(object? sender, AnnotationEventArgs e)
+{
+ if (e.Annotation != null && e.Annotation is StampAnnotation stamp)
+ {
+ if (stamp.CustomStampView is Button button)
+ {
+ // Modify the original view used for the custom stamp.
+ // In this example, update the button text dynamically.
+ button.Text = "Button Clicked";
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
## Custom stamp modal view
The custom stamp modal view appears when the user wants to create a custom stamp from a typed text. The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) notifies when the modal view is appearing and disappearing through events. The events help you in hiding and showing elements that are part of the app UI that are not necessary as long as the modal view is visible.
@@ -259,3 +308,8 @@ private void PdfViewer_Tapped(object sender, GestureEventArgs e)
{% endhighlight %}
{% endtabs %}
+
+## See Also
+- [Annotations Overview](../annotations-overview)
+- [Add, Remove, and Modify Annotations](../add-remove-modify-annotations)
+- [Undo and Redo](../undo-redo)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Sticky-Notes.md b/Document-Processing/PDF/PDF-Viewer/maui/Sticky-Notes.md
index e633d7ea60..cf7f4c68ea 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Sticky-Notes.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Sticky-Notes.md
@@ -1,14 +1,14 @@
---
layout: post
-title: Sticky Note Annotations in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about Sticky Note Annotations in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control and its functionalities.
+title: Sticky Note Annotations in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to add and manage sticky note annotations in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
-keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view.
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
-# Sticky Note Annotation in .NET MAUI PDF Viewer (SfPdfViewer)
+# Sticky Note Annotations in .NET MAUI PDF Viewer (SfPdfViewer)
The sticky note annotation feature of [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to add, remove, and modify sticky notes in a PDF document. This feature will help add comments or notes to specific parts of a document to clarify complex concepts, terms, or ideas. This section will cover the various functions available in [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) for working with sticky note annotations.
@@ -220,4 +220,9 @@ Private void customDialogOkButton_Clicked(object sender, EventArgs e)
{% endhighlight %}
{% endtabs %}
-N> For WinUI and MacCatalyst platforms, there is no separate modal view to receive text input from the users. As a result, the `StickyNoteModalViewAppearing` and `StickyNoteModalViewDisappearing` events are not applicable to these platforms.
\ No newline at end of file
+N> For WinUI and MacCatalyst platforms, there is no separate modal view to receive text input from the users. As a result, the `StickyNoteModalViewAppearing` and `StickyNoteModalViewDisappearing` events are not applicable to these platforms.
+
+## See Also
+- [Annotations Overview](../annotations-overview)
+- [Add, Remove, and Modify Annotations](../add-remove-modify-annotations)
+- [Annotation Comments](../annotations-comment)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Text-Markups.md b/Document-Processing/PDF/PDF-Viewer/maui/Text-Markups.md
index 96107f7b84..afb198ad96 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Text-Markups.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Text-Markups.md
@@ -1,11 +1,11 @@
---
layout: post
-title: Text Markup Annotations in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about Text Markup Annotations in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control and its types.
+title: Text Markup Annotations in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to add and manage text markup annotations in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
-keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view.
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
# Text Markup Annotations in .NET MAUI PDF Viewer (SfPdfViewer)
@@ -156,4 +156,9 @@ void EditSelectedHighlightAnnotation(Annotation selectedAnnotation)
}
}
{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
+{% endtabs %}
+
+## See Also
+- [Annotations Overview](../annotations-overview)
+- [Text Selection](../text-selection)
+- [Add, Remove, and Modify Annotations](../add-remove-modify-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Text-Search.md b/Document-Processing/PDF/PDF-Viewer/maui/Text-Search.md
index d722d2d20d..7692d5d424 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Text-Search.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Text-Search.md
@@ -1,19 +1,24 @@
---
layout: post
-title: Text Search in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about searching a text in the PDF documents using Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer).
+title: Text Search in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to search for text in PDF documents using the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
# Text Search in .NET MAUI PDF Viewer (SfPdfViewer)
-The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to search for text in a PDF document and navigate to all its occurrences.
+Quickly locate any word or phrase in a PDF document and jump between every occurrence — forward, backward, or directly to a specific match. The PDF Viewer's built-in text search highlights all results in real time as it scans the document, and exposes a result object so you can display match counts or build a custom search UI.
+
+You can also watch the video tutorial below to learn about text search.
+
+
## Initiate a text search
-The [SearchTextAsync](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_SearchTextAsync_System_String_TextSearchOptions_System_Threading_CancellationTokenSource_) method asynchronously searches the specified text throughout the PDF document and highlights each occurrence (match). To start the search, you need to call the method in a button click by passing the text to be searched as a parameter, as shown in the following example:
+The [SearchTextAsync](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_SearchTextAsync_System_String_TextSearchOptions_System_Threading_CancellationTokenSource_) method asynchronously searches the specified text throughout the PDF document and highlights each occurrence (match). To start the search, call the method from a button click handler and pass the text to search as a parameter.
{% tabs %}
{% highlight C# hl_lines="8" %}
@@ -25,7 +30,7 @@ private void SearchButtonClicked(object sender, EventArgs e)
async void SearchText(string text)
{
- await PdfViewer.SearchTextAsync(text);
+ await PdfViewer.SearchTextAsync(text);
}
{% endhighlight %}
@@ -230,4 +235,9 @@ PdfViewer.TextSearchSettings.CurrentMatchHighlightColor = Color.FromRgba("#8F00F
PdfViewer.TextSearchSettings.OtherMatchesHighlightColor= Color.FromRgba("#00FF0043");
{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
+{% endtabs %}
+
+## See Also
+- [Text Selection](../text-selection)
+- [Page Navigation](../page-navigation)
+- [Scrolling](../scrolling)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Text-Selection.md b/Document-Processing/PDF/PDF-Viewer/maui/Text-Selection.md
index a6fb5ff0b6..f4e6551498 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Text-Selection.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Text-Selection.md
@@ -1,13 +1,14 @@
---
layout: post
-title: Select text from a PDF document using .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about selecting text from PDF documents and copying it to the clipboard using Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer).
+title: Text Selection in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to select text from a PDF document and copy it to the clipboard using the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
-# Selecting text from a PDF document in .NET MAUI PDF Viewer (SfPdfViewer)
+# Text Selection in .NET MAUI PDF Viewer (SfPdfViewer)
Using [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html), you can select text from a PDF document and copy it to the clipboard. This process allows you to easily extract text from the PDF and paste it into other applications.
@@ -118,3 +119,8 @@ private void PdfViewer_TextSelectionChanged(object sender, TextSelectionChangedE
## Limitations
The text from the images cannot be selected and, the multiple-page text selection is not supported for now.
+
+## See Also
+- [Text Search](../text-search)
+- [Text Markups](../text-markups)
+- [Copy and Annotations from Selection](../add-remove-modify-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Toolbar-Customization.md b/Document-Processing/PDF/PDF-Viewer/maui/Toolbar-Customization.md
new file mode 100644
index 0000000000..326bc80916
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Toolbar-Customization.md
@@ -0,0 +1,267 @@
+---
+layout: post
+title: Customize the Toolbar in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to show, hide, add, remove, and reorder toolbars and toolbar items in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
+platform: document-processing
+control: SfPdfViewer
+documentation: ug
+keywords: .net maui pdf viewer, customize toolbar, show hide toolbar, add toolbar item, remove toolbar item, maui pdf viewer toolbar
+---
+
+# Toolbar Customization in .NET MAUI PDF Viewer (SfPdfViewer)
+
+The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to fully customize its built-in toolbars — including showing or hiding entire toolbars, and adding, removing, or reordering individual toolbar items. This flexibility lets you tailor the viewer's interface to match your application's workflow.
+
+For the list of toolbar names and toolbar item names, see [Toolbar](https://help.syncfusion.com/maui/pdf-viewer/toolbar).
+
+## Show and hide all toolbars
+
+The built-in toolbars are visible by default. In certain scenarios, you might want to hide all the toolbars in the PDF Viewer to display the document in full view or to use customized toolbars based on your application needs. You can do this by setting the [ShowToolbars](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_ShowToolbars) property to `false`. Set it back to `true` to restore the built-in toolbars.
+
+{% tabs %}
+{% highlight C# %}
+
+// Hide all toolbars
+public MainPage()
+{
+ SfPdfViewer pdfViewer = new SfPdfViewer();
+ pdfViewer.ShowToolbars = false;
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% tabs %}
+{% highlight XAML %}
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+You can find the sample project from the [link provided here](https://github.com/SyncfusionExamples/maui-pdf-viewer-examples/tree/master/Toolbar%20customization/HideToolbars).
+
+## Show and hide specific toolbars
+
+Sometimes, you might need to hide specific toolbars instead of all. This can be useful if you want to simplify the user interface by removing unnecessary tools or creating a more focused environment for certain tasks. The `Toolbars` collection property in the PDF Viewer allows you to hide a specific toolbar by using its index or name.
+
+### Hide specific toolbars by index
+
+If you know the position of the toolbar you want to hide within the `Toolbars` collection, you can access and hide it using its index. For example, the following code hides the first and second toolbars in the collection.
+
+{% tabs %}
+{% highlight C# %}
+if (pdfViewer?.Toolbars?.Count > 1)
+{
+ var firstToolbar = pdfViewer?.Toolbars[0];
+ if (firstToolbar != null)
+ firstToolbar.IsVisible = false; // Hide the first toolbar
+
+ var secondToolbar = pdfViewer?.Toolbars[1];
+ if (secondToolbar != null)
+ secondToolbar.IsVisible = false; // Hide the second toolbar
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Hide specific toolbars by name
+
+By using the [GetByName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItemCollection.html#Syncfusion_Maui_PdfViewer_ToolbarItemCollection_GetByName_System_String) method with a specified toolbar name, you can access and modify that toolbar's properties. The following example retrieves the `BottomToolbar` by name and hides it.
+
+{% tabs %}
+{% highlight C# %}
+// On mobile, access the bottom toolbar using the GetByName method.
+var toolbar = pdfViewer.Toolbars?.GetByName("BottomToolbar");
+if (toolbar != null)
+{
+ toolbar.IsVisible = false; // Hide the bottom toolbar
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> For the full list of toolbar names, see [Mobile toolbar names](https://help.syncfusion.com/maui/pdf-viewer/toolbar#mobile-toolbar-names) and [Desktop toolbar names](https://help.syncfusion.com/maui/pdf-viewer/toolbar#desktop-toolbar-names).
+
+## Manage toolbar items
+
+In addition to customizing the visibility of toolbars, you can customize the items within each toolbar. This includes adding new items, removing existing ones, or rearranging their order to suit your app's workflow better.
+
+N> All toolbar customization code should run **after** the PDF Viewer has been initialized and attached to the visual tree. The recommended place is the `DocumentLoaded` event handler or the page's `OnAppearing()` override — not the constructor, where the toolbar may not yet be populated.
+
+### Add a new toolbar item
+
+To add an item to a toolbar, first create the UI element you want to include, then convert it into a `ToolbarItem`, and finally add it to the toolbar using the `Add` method. The following example creates a button and adds it to the `PrimaryToolbar`.
+
+{% tabs %}
+{% highlight C# tabtitle="MainPage.xaml.cs" %}
+// Recommended: place inside the DocumentLoaded event handler or OnAppearing().
+// Create the button you want to add to the toolbar.
+Button fileOpenButton = new Button
+{
+ Text = "\ue712",
+ FontSize = 24,
+ IsEnabled = false,
+ FontFamily = "Maui Material Assets",
+ HorizontalOptions = LayoutOptions.Center,
+ VerticalOptions = LayoutOptions.Center,
+ BackgroundColor = Colors.Transparent,
+ BorderColor = Colors.Transparent,
+ Padding = 10,
+ Margin = new Thickness(5, 0, 0, 0),
+ Opacity = 0.5
+};
+
+// Access the PrimaryToolbar (desktop) and append the new item at the end.
+pdfViewer.Toolbars?.GetByName("PrimaryToolbar")?.Items?.Add(
+ new Syncfusion.Maui.PdfViewer.ToolbarItem(fileOpenButton, "FileOpenButton"));
+{% endhighlight %}
+{% endtabs %}
+
+### Add a toolbar item at a specific index
+
+To add an item at a specific index, use the [Insert](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItemCollection.html#Syncfusion_Maui_PdfViewer_ToolbarItemCollection_Insert_System_Int32_Syncfusion_Maui_PdfViewer_ToolbarItem) method. Use the [Index](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItem.html#Syncfusion_Maui_PdfViewer_ToolbarItem_Index) property to get the current index of an existing item, then insert the new item relative to it. The following example inserts a save button right after the `Print` button in the `PrimaryToolbar`.
+
+{% tabs %}
+{% highlight C# %}
+// Create a button you want to add.
+Button fileSaveButton = new Button
+{
+ Text = "\ue75f",
+ FontSize = 24,
+ FontFamily = "Maui Material Assets",
+ HorizontalOptions = LayoutOptions.Center,
+ VerticalOptions = LayoutOptions.Center,
+ BackgroundColor = Colors.Transparent,
+ BorderColor = Colors.Transparent,
+ IsEnabled = false,
+ Opacity = 0.5,
+ Padding = 10
+};
+
+// Access the Print item in PrimaryToolbar and insert the new button after it.
+var item = PdfViewer?.Toolbars?.GetByName("PrimaryToolbar")?.Items?.GetByName("Print");
+if (item != null)
+{
+ PdfViewer?.Toolbars?.GetByName("PrimaryToolbar")?.Items?.Insert(
+ item.Index + 1,
+ new Syncfusion.Maui.PdfViewer.ToolbarItem(fileSaveButton, "FileSaveButton"));
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Remove a toolbar item by index
+
+You can access a specific item using its index and remove it from the toolbar's `Items` collection using the `Remove` method. The following example retrieves and removes the first item from the `TopToolbar`.
+
+{% tabs %}
+{% highlight C# %}
+// Get the top toolbar on mobile platforms.
+Syncfusion.Maui.PdfViewer.Toolbar? topToolbar = PdfViewer.Toolbars?.GetByName("TopToolbar");
+if (topToolbar != null)
+{
+ // Get the first item from the toolbar.
+ Syncfusion.Maui.PdfViewer.ToolbarItem? firstItem = topToolbar.Items?[0];
+ if (firstItem != null)
+ {
+ // Remove the first item from the toolbar.
+ topToolbar?.Items?.Remove(firstItem);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Remove a toolbar item by name
+
+Use the [GetByName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItemCollection.html#Syncfusion_Maui_PdfViewer_ToolbarItemCollection_GetByName_System_String) method to access a specific item and then call [Remove](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItemCollection.html#Syncfusion_Maui_PdfViewer_ToolbarItemCollection_Remove_Syncfusion_Maui_PdfViewer_ToolbarItem) to remove it. The following example removes the `Outline` item from the `PrimaryToolbar`.
+
+{% tabs %}
+{% highlight C# %}
+// Access the Outline item in PrimaryToolbar and remove it.
+var item = pdfViewer.Toolbars?.GetByName("PrimaryToolbar")?.Items?.GetByName("Outline");
+if (item != null)
+{
+ pdfViewer.Toolbars?.GetByName("PrimaryToolbar")?.Items?.Remove(item);
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Remove an item from all toolbars
+
+Each toolbar in [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) operates independently — removing an item from one toolbar does not affect others. To remove an item from all toolbars, iterate through the `Toolbars` collection and remove the item from each. The following example removes the `StickyNote` item from all toolbars.
+
+{% tabs %}
+{% highlight C# %}
+// Iterate through all toolbars and remove the StickyNote item from each.
+for (int i = 0; i < pdfViewer?.Toolbars?.Count; i++)
+{
+ var item = pdfViewer.Toolbars?[i]?.Items?.GetByName("StickyNote");
+ if (item != null)
+ {
+ pdfViewer?.Toolbars?[i]?.Items?.Remove(item);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+You can find the sample project for removing an item from the desktop toolbar using the [link provided here](https://github.com/SyncfusionExamples/maui-pdf-viewer-examples/tree/master/Toolbar%20customization/RemoveToolbarItemDesktop).
+
+### Hide a toolbar item by index
+
+To hide a toolbar item by its index, access the item in the `Items` collection and set its [IsVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItem.html#Syncfusion_Maui_PdfViewer_ToolbarItem_IsVisible) property to `false`.
+
+{% tabs %}
+{% highlight C# %}
+int indexToHide = 2; // Replace with the actual index of the item you want to hide.
+
+var toolbar = pdfViewer.Toolbars?.GetByName("PrimaryToolbar");
+if (toolbar != null && indexToHide >= 0 && indexToHide < toolbar.Items?.Count)
+{
+ var item = toolbar.Items[indexToHide];
+ item.IsVisible = false; // Hide the item by index
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Hide a toolbar item by name
+
+Use the [GetByName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItemCollection.html#Syncfusion_Maui_PdfViewer_ToolbarItemCollection_GetByName_System_String) method to access a specific item, then set its [IsVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItem.html#Syncfusion_Maui_PdfViewer_ToolbarItem_IsVisible) property to `false`. The following example hides the `Search` item in the `PrimaryToolbar`.
+
+{% tabs %}
+{% highlight C# %}
+// On desktop, access the Search button in the PrimaryToolbar and hide it.
+var item = pdfViewer.Toolbars?.GetByName("PrimaryToolbar")?.Items?.GetByName("Search");
+if (item != null)
+{
+ item.IsVisible = false; // Hide the search item
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Hide an item in all toolbars
+
+Each toolbar operates independently, so hiding an item in one toolbar does not affect others. To hide an item across all toolbars, iterate through the `Toolbars` collection. The following example hides the `Signature` icon in every toolbar where it appears.
+
+{% tabs %}
+{% highlight C# %}
+// Iterate through all toolbars and hide the Signature item in each.
+for (int i = 0; i < pdfViewer?.Toolbars?.Count; i++)
+{
+ var item = pdfViewer.Toolbars[i]?.Items?.GetByName("Signature");
+ if (item != null)
+ {
+ item.IsVisible = false; // Hide the Signature item
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> You can identify items that appear in multiple toolbars by checking the availability column in [Mobile toolbar item names](https://help.syncfusion.com/maui/pdf-viewer/toolbar#mobile-toolbar-item-names) and [Desktop toolbar item names](https://help.syncfusion.com/maui/pdf-viewer/toolbar#desktop-toolbar-item-names).
+
+## See Also
+- [Toolbar](../toolbar)
+- [UI Customization](../ui-customization)
+- [Annotations Overview](../annotations-overview)
+- [Show or Hide Annotations](../show-hide)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md b/Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md
index 4da5cd2f0a..f8e0552ca7 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Toolbar.md
@@ -1,16 +1,16 @@
----
+---
layout: post
-title: Working with Toolbar in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about the toolbar in .NET MAUI PDF Viewer (SfPdfViewer) control, its functionalites and more.
+title: Working with the Toolbar in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to use, customize, and extend the built-in toolbar in the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
-keywords : .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
-# Working with Toolbar in .NET MAUI Pdf Viewer (SfPdfViewer)
+# Working with the Toolbar in .NET MAUI PDF Viewer (SfPdfViewer)
-The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) has a built-in toolbar, which enhances PDF viewing and editing capabilities, allowing you to perform operations such as adding and modifying annotations, searching text, and more.
+The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) includes a built-in toolbar that enhances PDF viewing and editing capabilities, allowing you to perform operations such as adding and modifying annotations, searching for text, and more.
## Toolbars structure
@@ -188,72 +188,9 @@ The names of these toolbars and their description are listed in the following se
-### Show/hide the toolbars
-
-The built-in toolbars are visible by default. In certain scenarios, you might want to hide all the toolbars in the PDF Viewer to display the document in full view or to use customized toolbars based on your application needs. You can do this by setting the [ShowToolbars](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_ShowToolbars) property of the PDF Viewer to `false`. And you can show the built-in toolbar by setting the [ShowToolbars](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_ShowToolbars) property of the PDF Viewer to `true`.
-
-{% tabs %}
-{% highlight C# %}
-
-//set the ShowToolbars to false
-public MainPage()
-{
- SfPdfViewer pdfViewer=new SfPdfViewer();
- pdfViewer.ShowToolbars = false;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% tabs %}
-{% highlight XAML %}
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-You can find the sample project from the [link provided here](https://github.com/SyncfusionExamples/maui-pdf-viewer-examples/tree/master/Toolbar customization/HideToolbars).
-
-### Customize the toolbar
-
-Sometimes, you might need to hide specific toolbars instead of all. This can be useful if you want to simplify the user interface by removing unnecessary tools or creating a more focused environment for certain tasks. The Toolbars collection property in the PDF Viewer allows you to hide a specific toolbar by using its index or name.
-
-#### Hide specific toolbars by index
-
-If you know the position of the toolbar you want to hide within the Toolbars collection, you can access and hide it using its index. For example, you can use the following code to hide the first and second toolbars in the collection.
-
-{% tabs %}
-{% highlight C# %}
-if (pdfViewer?.Toolbars?.Count > 1)
-{
- var firstToolbar = pdfViewer?.Toolbars[0];
- if (firstToolbar != null)
- firstToolbar.IsVisible = false; //Hide the first toolbar
- var secondToolbar= pdfViewer?.Toolbars[1];
- if (secondToolbar != null)
- secondToolbar.IsVisible = false; //Hide the second toolbar
-}
-{% endhighlight %}
-{% endtabs %}
-
-#### Hide specific toolbars by name
-
-By using the [GetByName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItemCollection.html#Syncfusion_Maui_PdfViewer_ToolbarItemCollection_GetByName_System_String) method with its specified toolbar names, you can access the properties of those toolbars. After accessing the toolbar, you can modify its visibility by setting the IsVisible property. Here, we retrieve the toolbar “BottomToolbar” using the GetByName method and hide it by setting its visibility to false.
+### Toolbar customization
-{% tabs %}
-{% highlight C# %}
-// On the mobile, we access the primary toolbar using the GetByName method.
-
- var toolbar = pdfViewer.Toolbars?.GetByName("BottomToolbar");
- if (toolbar != null)
- {
- toolbar.IsVisible = false; // Hide the bottom toolbar
- }
-{% endhighlight %}
-{% endtabs %}
+For details on showing, hiding, adding, removing, and reordering toolbars and toolbar items, see [Toolbar Customization](https://help.syncfusion.com/maui/pdf-viewer/toolbar-customization).
## Toolbar items
@@ -796,196 +733,8 @@ The names of these toolbar items, along with their descriptions and availability
-### Customize toolbar items
-
-In addition to customizing the visibility of toolbars, you can customize the items within each toolbar of the .NET MAUI PDF Viewer. This includes adding new items, removing existing ones, or rearranging their order to suit your app’s workflow better.
-
-#### Adding a new toolbar item
-
-To add an item to the toolbar in [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html), first, create the UI element you want to include. Then, convert that element into a ToolbarItem using the `ToolbarItem` method. Finally, add the newly created ToolbarItem to the toolbar using the `Add` method. Here we create the new button fileOpenButton and retrieve the "PrimaryToolbar" using the GetByName method. Add the new button to the "Primary Toolbar".
-
-{% tabs %}
-{% highlight C# %}
-//Create a button you want to add.
-
-Button fileOpenButton = new Button
- {
- Text = "\ue712",
- FontSize = 24,
- IsEnabled = false,
- FontFamily = "Maui Material Assets",
- HorizontalOptions = LayoutOptions.Center,
- VerticalOptions = LayoutOptions.Center,
- BackgroundColor = Colors.Transparent,
- BorderColor = Colors.Transparent,
- Padding = 10,
- Margin = new Thickness(5, 0, 0, 0),
- Opacity = 0.5
- };
-//We access the PrimaryToolbar on the desktop using the GetByName method and add the item you created to it.
-
-pdfViewer.Toolbars?.GetByName("PrimaryToolbar")?.Items?.Add(new Syncfusion.Maui.PdfViewer.ToolbarItem(fileOpenButton, "FileOpenButton"));
-{% endhighlight %}
-{% endtabs %}
-
-#### Adding a new toolbar item at a specific index
-
-To add an item at a specific index in the toolbar in [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html), first create the UI element you want to include. Then, convert that element into a ToolbarItem using the [ToolbarItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItem.html#Syncfusion_Maui_PdfViewer_ToolbarItem__ctor_Microsoft_Maui_Controls_View_System_String) method. Finally, add the newly created ToolbarItem to the toolbar using the [Insert](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItemCollection.html#Syncfusion_Maui_PdfViewer_ToolbarItemCollection_Insert_System_Int32_Syncfusion_Maui_PdfViewer_ToolbarItem) method. Use the [Index](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItem.html#Syncfusion_Maui_PdfViewer_ToolbarItem_Index) property to get the index of the item you want to add after, and insert the new item at a specific index. Here we create the button fileSaveButton and retrieve the index of the "Print" button in the "PrimaryToolbar". The new button is inserted into the toolbar right after the "Print" button.
-
-{% tabs %}
-{% highlight C# %}
-//Create a button you want to add.
-
-Button fileSaveButton = new Button
- {
- Text = "\ue75f",
- FontSize = 24,
- FontFamily = "Maui Material Assets",
- HorizontalOptions = LayoutOptions.Center,
- VerticalOptions = LayoutOptions.Center,
- BackgroundColor = Colors.Transparent,
- BorderColor = Colors.Transparent,
- IsEnabled = false,
- Opacity = 0.5,
- Padding = 10
- };
-
-// We access the PrimaryToolbar on the desktop using the GetByName method.
-var item = PdfViewer?.Toolbars?.GetByName("PrimaryToolbar")?.Items?.GetByName("Print");
-if (item != null)
-{
- // We accessed the PrimaryToolbar on the desktop using the GetByName method and inserted the item after the last item index.
- PdfViewer?.Toolbars?.GetByName("PrimaryToolbar")?.Items?.Insert(item.Index + 1, new Syncfusion.Maui.PdfViewer.ToolbarItem(fileSaveButton, "FileSaveButton"));
-}
-{% endhighlight %}
-{% endtabs %}
-
-#### Remove Items from the Toolbar
-
-If you need to remove specific items from the toolbar in [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html), you can do so from the Items collection. You can remove them either by index or by name.
-
-##### Remove Item by Index
-
-You can access the specific item using its index and then remove it from the toolbar’s item collection using the Remove method. Here we retrieve the first item from the “TopToolbar” using its index. If the item is found, it is removed from the toolbar.
-
-{% tabs %}
-{% highlight C# %}
-// Get the top toolbar of the PDF Viewer that contains annotation tools on mobile platforms.
-Syncfusion.Maui.PdfViewer.Toolbar? topToolbar = PdfViewer.Toolbars?.GetByName("TopToolbar");
-if (topToolbar != null)
-{
- // Get the first item from the toolbar.
- Syncfusion.Maui.PdfViewer.ToolbarItem? firstItem = topToolbar.Items?[0];
- if (firstItem != null)
- {
- // Remove the first item from the toolbar.
- topToolbar?.Items?.Remove(firstItem);
- }
-}
-{% endhighlight %}
-{% endtabs %}
-
-##### Remove Item by Name
-
-You can access the specific item using the [GetByName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItemCollection.html#Syncfusion_Maui_PdfViewer_ToolbarItemCollection_GetByName_System_String) method and then remove it from the toolbar's item collection using the [Remove](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItemCollection.html#Syncfusion_Maui_PdfViewer_ToolbarItemCollection_Remove_Syncfusion_Maui_PdfViewer_ToolbarItem) method. Here we retrieve the "Outline" item from the "PrimaryToolbar" using the GetByName method. If the item is found, it is removed from the toolbar.
-
-{% tabs %}
-{% highlight C# %}
-//We access the outline item in the PrimaryToolbar on the desktop using the GetByName method and remove it.
-
- var item = pdfViewer.Toolbars?.GetByName("PrimaryToolbar")?.Items?.GetByName("Outline");
- if (item != null)
- {
- pdfViewer.Toolbars?.GetByName("PrimaryToolbar")?.Items?.Remove(item); // Remove the outline item
- }
-{% endhighlight %}
-{% endtabs %}
-
-#### Remove the item from all toolbars
-
-In [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html), each toolbar operates independently. Removing an item from one toolbar does not affect others. For example, removing the Sticky note icon from the "AnnotationsToolbar" does not impact other toolbars.
-
-To remove an item from all toolbars, iterate through the toolbar collection and remove the item from each toolbar. Here’s how to remove the "Sticky note" item from all toolbars:
-
-{% tabs %}
-{% highlight C# %}
-// Iterate through the toolbar collection of the PDF Viewer
-for (int i = 0; i < pdfViewer?.Toolbars?.Count; i++)
-{
- // Get the toolbar item with the name "Sticky note" from the current toolbar
- var item = pdfViewer.Toolbars?[i]?.Items?.GetByName("Sticky note");
- if (item != null)
- {
- // Remove the "Sticky note" item
- pdfViewer?.Toolbars?[i]?.Items?.Remove(item);
- }
-}
-{% endhighlight %}
-{% endtabs %}
-
-You can find the sample project for removing an item from the desktop toolbar using the [link provided here](https://github.com/SyncfusionExamples/maui-pdf-viewer-examples/tree/master/Toolbar customization/RemoveToolbarItemDesktop).
-
-#### Hide items from the toolbar
-
-If you need to hide specific items in the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html), you can do so by modifying the visibility of the items. You can hide them either by index or by name.
-
-##### Hide Item by Index
-
-To hide a toolbar item by its index, you can directly access the item in the toolbar's Items collection using the index and then set its [IsVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItem.html#Syncfusion_Maui_PdfViewer_ToolbarItem_IsVisible) property to false. Here’s how you can do it:
-
-{% tabs %}
-{% highlight C# %}
-// Assuming you want to hide the item at a specific index in the PrimaryToolbar.
-int indexToHide = 2; // Replace with the actual index of the item you want to hide.
-
-var toolbar = pdfViewer.Toolbars?.GetByName("PrimaryToolbar");
-if (toolbar != null && indexToHide >= 0 && indexToHide < toolbar.Items?.Count)
-{
- var item = toolbar.Items[indexToHide];
- item.IsVisible = false; // Hide the item by index
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-##### Hide item by name
-
-By using the [GetByName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItemCollection.html#Syncfusion_Maui_PdfViewer_ToolbarItemCollection_GetByName_System_String) method with its specified toolbar names, you can access the items of those toolbars. After accessing the item, you can modify its visibility by setting the [IsVisible]https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.ToolbarItem.html#Syncfusion_Maui_PdfViewer_ToolbarItem_IsVisible property. Here, we retrieve the toolbar "PrimaryToolbar" and "Search" item using the GetByName method and hide the "Search" item by setting its visibility to false.
-
-{% tabs %}
-{% highlight C# %}
-// On the desktop, we access the search button located in the primary toolbar using the GetByName method.
-
-var item = pdfViewer.Toolbars?.GetByName("PrimaryToolbar")?.Items?.GetByName("Search");
-if (item != null)
-{
-item.IsVisible = false; // Hide the search item
-}
-{% endhighlight %}
-{% endtabs %}
-
-#### Hide the item in all toolbars
-
-In [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html), each toolbar operates independently. Hiding an item in one toolbar does not affect others. For example, changing the visibility of the signature icon in the "AnnotationsToolbar" does not impact other toolbars. You can identify an item present in multiple toolbars by referring to the availability toolbar column in the toolbar item availability topic under the table of [Mobile toolbar item names](https://help.syncfusion.com/maui/pdf-viewer/toolbar#mobile-toolbar-item-names) and [Desktop toolbar item names](https://help.syncfusion.com/maui/pdf-viewer/toolbar#desktop-toolbar-item-names).
-
-To hide an icon from all toolbars, iterate through the toolbar collection and adjust the visibility of the item in each toolbar. Here’s how to hide the "Signature" icon from all toolbars:
-
-{% tabs %}
-{% highlight C# %}
-// Iterate through the toolbar collection of the PDF Viewer
-for (int i = 0; i < pdfViewer?.Toolbars.Count; i++)
-{
- // Get the toolbar item with the name "Signature" from the current toolbar
- var item = pdfViewer.Toolbars[i]?.Items?.GetByName("Signature");
- // Check if the item exists in the toolbar
- if (item != null)
- {
- // Set the visibility of the "Signature" item to false, effectively hiding it
- item.IsVisible = false; // Hide the Signature
- }
-}
-{% endhighlight %}
-{% endtabs %}
-
-
+## See Also
+- [Toolbar Customization](../toolbar-customization)
+- [UI Customization](../ui-customization)
+- [Annotations Overview](../annotations-overview)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/UI-Customization.md b/Document-Processing/PDF/PDF-Viewer/maui/UI-Customization.md
index b5c720e697..7f92d8561f 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/UI-Customization.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/UI-Customization.md
@@ -1,10 +1,11 @@
---
layout: post
-title: UI Customization in .NET MAUI PDF Viewer control | Syncfusion
-description: Learn here all about the UI customization options in Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control and more.
+title: UI Customization in .NET MAUI PDF Viewer | Syncfusion
+description: Learn how to customize the UI of the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control, including the loading indicator and theming.
platform: document-processing
control: SfPdfViewer
documentation: ug
+keywords: .net maui pdf viewer, .net maui view pdf, pdf viewer in .net maui, .net maui open pdf, maui pdf viewer, maui pdf view
---
# UI Customization in .NET MAUI PDF Viewer (SfPdfViewer)
@@ -30,4 +31,9 @@ You can customize the loading indicator’s properties by applying a style with
{% endhighlight %}
{% endtabs %}
-N> For complete customization of the PDF Viewer, themes can be applied. Refer to the [theme user guide](https://help.syncfusion.com/maui/themes/themes) for detailed instructions. You can also explore the [sample project](https://github.com/SyncfusionExamples/maui-pdf-viewer-examples/tree/master/Styles/PDFViewerThemes), which demonstrates the custom theme implementation for the PDF Viewer in .NET MAUI applications.
\ No newline at end of file
+N> For complete customization of the PDF Viewer, themes can be applied. Refer to the [theme user guide](https://help.syncfusion.com/maui/themes/themes) for detailed instructions. You can also explore the [sample project](https://github.com/SyncfusionExamples/maui-pdf-viewer-examples/tree/master/Styles/PDFViewerThemes), which demonstrates the custom theme implementation for the PDF Viewer in .NET MAUI applications.
+
+## See Also
+- [Toolbar Customization](../toolbar-customization)
+- [Toolbar](../toolbar)
+- [Annotations Overview](../annotations-overview)
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Undo-Redo.md b/Document-Processing/PDF/PDF-Viewer/maui/Undo-Redo.md
index 663cb545b7..4bf10c3f3f 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/Undo-Redo.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/Undo-Redo.md
@@ -1,7 +1,7 @@
---
layout: post
title: Undo and Redo actions in .NET MAUI PDF Viewer | Syncfusion
-description: Learn here all about Undo and Redo actions on the annotations using Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
+description: Learn how to undo and redo annotation changes using the Syncfusion® .NET MAUI PDF Viewer (SfPdfViewer) control.
platform: document-processing
control: SfPdfViewer
documentation: ug
@@ -52,7 +52,7 @@ void PerformUndo()
## Redo
-You can perform redo to restore the last undone function using the [RedoCommand](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_RedoCommand) of the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html).. The following code examples explains how to bind the command to a button in XAML to perform the action on button click and also executing the command programmatically as well.
+You can perform redo to restore the last undone function using the [RedoCommand](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_RedoCommand) of the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html). The following code examples explain how to bind the command to a button in XAML to perform the action on button click, and also execute the command programmatically.
{% tabs %}
{% highlight XAML %}
@@ -65,4 +65,19 @@ void PerformRedo()
PdfViewer.RedoCommand.Execute(true);
}
{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
+{% endtabs %}
+
+## Limitations
+
+The undo and redo history covers annotation changes only. The following operations **cannot** be undone:
+
+* Saving a document using [SaveDocumentAsync](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_SaveDocumentAsync).
+* Applying redaction using [RedactAsync](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_RedactAsync_System_Threading_CancellationToken_).
+* Unloading a document using [UnloadDocument](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_UnloadDocument). Unloading clears the undo/redo history entirely.
+
+N> The undo/redo stack is also cleared when a new document is loaded.
+
+## See Also
+- [Annotations Overview](../annotations-overview)
+- [Add, Remove, and Modify Annotations](../add-remove-modify-annotations)
+- [Keyboard Shortcuts](../keyboard-shortcuts)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/maui/liquid-glass-effect.md b/Document-Processing/PDF/PDF-Viewer/maui/liquid-glass-effect.md
index 6e79c33500..d8c9a6eb76 100644
--- a/Document-Processing/PDF/PDF-Viewer/maui/liquid-glass-effect.md
+++ b/Document-Processing/PDF/PDF-Viewer/maui/liquid-glass-effect.md
@@ -96,4 +96,8 @@ this.Content = grid;
N>
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
-* This feature is available only in `.NET 10.`
\ No newline at end of file
+* This feature is available only in `.NET 10.`
+
+## See Also
+- [UI Customization](../ui-customization)
+- [Toolbar Customization](../toolbar-customization)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md
index c10795c987..241194efae 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md
@@ -7,196 +7,106 @@ control: PdfViewer
documentation: ug
---
-# Redaction in Mobile View in React PdfViewer Component
-
-The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the React PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices.
-
-
-
-N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens.
-
-## Adding Redaction in Mobile View
-
-To enable redaction functionality in your React application, configure the PDF Viewer with the following setup:
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-
-import * as ReactDOM from 'react-dom/client';
-import * as React from 'react';
-import './index.css';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
-export function App() {
- // includes RedactionEditTool
- const toolbarSettings = {
- toolbarItems: [
- 'OpenOption',
- 'UndoRedoTool',
- 'PageNavigationTool',
- 'MagnificationTool',
- 'PanTool',
- 'SelectionTool',
- 'CommentTool',
- 'SubmitForm',
- 'AnnotationEditTool',
- 'RedactionEditTool', // Redaction entry in the primary toolbar
- 'FormDesignerEditTool',
- 'SearchOption',
- 'PrintOption',
- 'DownloadOption'
- ]
- };
- return ( = useRef(null);
+ const documentPath: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ const resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ const toolbarSettings: ToolbarSettingsModel = {
+ toolbarItems: [
+ 'OpenOption', 'UndoRedoTool', 'PageNavigationTool', 'MagnificationTool', 'PanTool',
+ 'SelectionTool', 'CommentTool', 'AnnotationEditTool', 'RedactionEditTool', 'SearchOption',
+ 'PrintOption', 'DownloadOption'
+ ] as ToolbarItem[]
+ };
-You can configure default properties for redaction annotations (such as fill color, overlay text, and font) when adding them programmatically:
+ useEffect(() => {
+ if (!viewerRef.current) return;
+ // Set default redaction properties
+ viewerRef.current.redactionSettings = {
+ overlayText: 'Confidential',
+ markerFillColor: '#FF0000',
+ markerBorderColor: '#000000',
+ isRepeat: false,
+ fillColor: '#000000',
+ fontColor: '#FFFFFF',
+ fontSize: 12,
+ fontFamily: 'Helvetica',
+ textAlignment: 'Center'
+ };
+ }, []);
+
+ const addRedaction = (): void => {
+ const viewer = viewerRef.current as PdfViewerComponent;
+ if (!viewer) return;
+ viewer.annotation.addAnnotation('Redaction', {
+ bound: { x: 150, y: 400, width: 200, height: 40 },
+ pageNumber: 1,
+ overlayText: 'Confidential',
+ fillColor: '#000000',
+ fontColor: '#FFFFFF'
+ } as RedactionSettings);
+ };
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
+ const deleteFirstAnnotation = (): void => {
+ const viewer = viewerRef.current;
+ const id = viewer?.annotationCollection?.[0]?.annotationId;
+ if (id) viewer.annotationModule.deleteAnnotationById(id);
+ };
-import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
-import './index.css';
-import {
- PdfViewerComponent,
- Toolbar,
- Magnification,
- Navigation,
- LinkAnnotation,
- BookmarkView,
- ThumbnailView,
- Print,
- TextSelection,
- Annotation,
- TextSearch,
- FormFields,
- FormDesigner,
- Inject
-} from '@syncfusion/ej2-react-pdfviewer';
+ const editRedaction = (): void => {
+ const viewer = viewerRef.current;
+ const collection = viewer?.annotationCollection || [];
+ const annot = collection.find(a => a.subject === 'Redaction');
+ if (annot) {
+ annot.overlayText = 'Edited';
+ annot.fillColor = '#333333';
+ annot.fontSize = 14;
+ viewer.annotation.editAnnotation(annot);
+ }
+ };
-function App() {
- const viewerRef = React.useRef(null);
-
- 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';
-
- const toolbarSettings = {
- toolbarItems: [
- 'OpenOption',
- 'UndoRedoTool',
- 'PageNavigationTool',
- 'MagnificationTool',
- 'PanTool',
- 'SelectionTool',
- 'CommentTool',
- 'SubmitForm',
- 'AnnotationEditTool',
- 'RedactionEditTool',
- 'FormDesignerEditTool',
- 'SearchOption',
- 'PrintOption',
- 'DownloadOption'
- ]
- };
-
- React.useEffect(() => {
- if (!viewerRef.current) return;
- viewerRef.current.redactionSettings = {
- overlayText: 'Confidential',
- markerFillColor: '#FF0000',
- markerBorderColor: '#000000',
- isRepeat: false,
- fillColor: '#F8F8F8',
- fontColor: '#333333',
- fontSize: 14,
- fontFamily: 'Symbol',
- textAlign: 'Right'
+ const addPageRedactions = (): void => {
+ viewerRef.current.annotation.addPageRedactions([1]);
};
- }, []);
-
- return (
-
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% 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 Perimeter
+
+#### Edit Perimeter (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 js tabtitle="Standalone" %}
+{% raw %}
+function editAreaProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const ann of viewer.annotationCollection) {
+ if (ann.subject === 'Area calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.fillColor = '#FFFF00';
+ viewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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 Area using the [`areaSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#areasettings) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Set Properties While Adding Individual Annotation
+Pass per‑annotation values directly when calling [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addStyledArea() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Area', {
+ offset: { x: 210, y: 510 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 210, y: 510 },
+ { x: 300, y: 510 },
+ { x: 305, y: 560 },
+ { x: 210, y: 510 }
+ ],
+ strokeColor: '#EA580C',
+ fillColor: '#FEF3C7',
+ thickness: 2,
+ opacity: 0.85
+ });
+}
+{% endraw %}
+{% 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/react/documentation/api/pdfviewer/index-default#mesaurementsettings).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% 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/react/annotation/annotation-types/arrow-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/arrow-annotation.md
new file mode 100644
index 0000000000..1584c81f09
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/arrow-annotation.md
@@ -0,0 +1,259 @@
+---
+layout: post
+title: Arrow Annotation (Shape) in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Arrow annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Arrow Annotation (Shape) in React 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 React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% 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 js tabtitle="Standalone" %}
+{% raw %}
+function editArrowProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const annot of viewer.annotationCollection) {
+ if (annot.subject === 'Arrow') {
+ annot.strokeColor = '#0000ff';
+ annot.thickness = 2;
+ annot.fillColor = '#ffff00';
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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/react/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleArrows() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Arrow 1
+ viewer.annotation.addAnnotation('Arrow', {
+ offset: { x: 200, y: 230 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 230 },
+ { x: 350, y: 230 }
+ ],
+ fillColor: '#ffff00',
+ strokeColor: '#0066ff',
+ thickness: 2,
+ opacity: 0.9,
+ author: 'User 1'
+ });
+
+ // Arrow 2
+ viewer.annotation.addAnnotation('Arrow', {
+ offset: { x: 220, y: 300 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 220, y: 300 },
+ { x: 400, y: 300 }
+ ],
+ fillColor: '#ffef00',
+ strokeColor: '#ff1010',
+ thickness: 3,
+ opacity: 0.9,
+ author: 'User 2'
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Arrow Annotation
+
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% 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/react/annotation/annotation-types/circle-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/circle-annotation.md
new file mode 100644
index 0000000000..35e05b4ce1
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/circle-annotation.md
@@ -0,0 +1,253 @@
+---
+layout: post
+title: Circle Annotation (Shape) in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Circle annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Circle Annotation (Shape) in React 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 Line annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% 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 js tabtitle="Standalone" %}
+{% raw %}
+function editCircleProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const annot of viewer.annotationCollection) {
+ if (annot.subject === 'Circle') {
+ annot.strokeColor = '#0000ff';
+ annot.thickness = 2;
+ annot.fillColor = '#ffff00';
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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/react/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleCircles() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Circle 1
+ viewer.annotation.addAnnotation('Circle', {
+ offset: { x: 200, y: 620 },
+ pageNumber: 1,
+ width: 100,
+ height: 100,
+ opacity: 0.9,
+ strokeColor: '#ff6a00',
+ fillColor: '#ffa500',
+ author: 'User 1'
+ });
+
+ // Circle 2
+ viewer.annotation.addAnnotation('Circle', {
+ offset: { x: 340, y: 620 },
+ pageNumber: 1,
+ width: 80,
+ height: 80,
+ opacity: 0.85,
+ strokeColor: '#ff1010',
+ fillColor: '#ffe600',
+ author: 'User 2'
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Circle Annotation
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% 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/react/annotation/annotation-types/distance-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/distance-annotation.md
new file mode 100644
index 0000000000..aac4f084ff
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/distance-annotation.md
@@ -0,0 +1,255 @@
+---
+layout: post
+title: Add Distance Annotations in React PDF Viewer \ Syncfusion
+description: Learn how to enable, measure, customize, and manage Distance annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Distance Annotations in React 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 React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% 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 js tabtitle="Standalone" %}
+{% raw %}
+function editDistanceProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const ann of viewer.annotationCollection) {
+ if (ann.subject === 'Distance calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.opacity = 0.8;
+ viewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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/react/documentation/api/pdfviewer/index-default#distancesettings) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Set Properties While Adding Individual Annotation
+Pass per-annotation values directly when calling [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addStyledDistance() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Distance', {
+ offset: { x: 220, y: 260 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 220, y: 260 },
+ { x: 360, y: 260 }
+ ],
+ strokeColor: '#059669',
+ opacity: 0.9,
+ fillColor: '#D1FAE5',
+ thickness: 2
+ });
+}
+{% endraw %}
+{% 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 js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% 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/react/annotation/annotation-types/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/free-text-annotation.md
new file mode 100644
index 0000000000..c4816bc1e2
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/free-text-annotation.md
@@ -0,0 +1,248 @@
+---
+layout: post
+title: Add Free Text Annotations in React PDF Viewer | Syncfusion
+description: Learn how to enable, add, customize, and manage Free Text (text box) annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Free Text Annotations in React 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 ink annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% 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 js tabtitle="Standalone" %}
+{% raw %}
+function editFreeTextProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const ann of viewer.annotationCollection) {
+ if (ann.subject === 'Text Box') {
+ const { width, height } = ann.bounds;
+ ann.bounds = { x: 120, y: 120, width, height };
+ ann.dynamicText = 'Syncfusion (updated)';
+ viewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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/react/documentation/api/pdfviewer/index-default#inkannotationsettings) property. You can also enable **Auto‑fit** so the box expands with content.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% 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/react/annotation/annotation-types/highlight-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/highlight-annotation.md
new file mode 100644
index 0000000000..9a8e241c19
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/highlight-annotation.md
@@ -0,0 +1,264 @@
+---
+layout: post
+title: Highlight Text in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Highlight annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Highlight Annotation (Text Markup) in React PDF Viewer
+
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Highlight* text markup annotations in the Syncfusion **React 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 React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and highlighting.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import {
+ PdfViewerComponent,
+ Inject,
+ Toolbar,
+ Annotation,
+ TextSelection
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Highlight (Edit, Delete, Comment)
+
+### Edit Highlight
+
+#### Edit Highlight Appearance (UI)
+
+Use the annotation toolbar:
+- **Edit Color** tool
+
+
+- **Edit Opacity** slider
+
+
+#### Edit Highlight Programmatically
+
+Modify an existing highlight programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editHighlightProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ for (let annot of viewer.annotationCollection) {
+ if (annot.textMarkupAnnotationType === 'Highlight') {
+ annot.color = '#0000ff';
+ annot.opacity = 0.8;
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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 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 annotation before creating the control using [highlightSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#highlightsettings)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleHighlights() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Highlight 1
+ viewer.annotation.addAnnotation('Highlight', {
+ bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
+ pageNumber: 1,
+ author: 'User 1',
+ color: '#ffff00',
+ opacity: 0.9
+ });
+
+ // Highlight 2
+ viewer.annotation.addAnnotation('Highlight', {
+ bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
+ pageNumber: 1,
+ author: 'User 2',
+ color: '#ff1010',
+ opacity: 0.9
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable TextMarkup Annotation
+
+Disable text markup annotations (including highlight) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% 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/react/annotation/annotation-types/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/ink-annotation.md
new file mode 100644
index 0000000000..1041f7e212
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/ink-annotation.md
@@ -0,0 +1,189 @@
+---
+layout: post
+title: Add Freehand Drawing (Ink) Annotation in React PDF Viewer | Syncfusion
+description: Learn how to enable, draw, customize, and manage Ink (freehand) annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Freehand Drawing (Ink) Annotations in React 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 React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% 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 js tabtitle="Standalone" %}
+{% raw %}
+function editInkProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const ann of viewer.annotationCollection) {
+ if (ann.shapeAnnotationType === 'Ink') {
+ const { width, height } = ann.bounds;
+ ann.bounds = { x: 120, y: 120, width, height };
+ ann.strokeColor = '#ff0000';
+ ann.thickness = 4;
+ viewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Stamp
+
+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/react/annotation/annotation-types/line-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/line-annotation.md
new file mode 100644
index 0000000000..a982db450f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/line-annotation.md
@@ -0,0 +1,266 @@
+---
+layout: post
+title: Line Annotation (Shape) in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Line annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Line Annotation (Shape) in React 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 React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% 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 js tabtitle="Standalone" %}
+{% raw %}
+function editLineProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const annot of viewer.annotationCollection) {
+ if (annot.subject === 'Line') {
+ annot.strokeColor = '#ff0000';
+ annot.thickness = 3;
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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/react/documentation/api/pdfviewer/index-default#linesettings) API or by passing per‑annotation values during [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleLines() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Line 1
+ viewer.annotation.addAnnotation('Line', {
+ offset: { x: 200, y: 230 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 230 },
+ { x: 350, y: 230 }
+ ],
+ strokeColor: '#0066ff',
+ thickness: 2,
+ opacity: 0.9,
+ author: 'User 1'
+ });
+
+ // Line 2
+ viewer.annotation.addAnnotation('Line', {
+ offset: { x: 220, y: 300 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 220, y: 300 },
+ { x: 400, y: 300 }
+ ],
+ strokeColor: '#ff1010',
+ thickness: 3,
+ opacity: 0.9,
+ author: 'User 2'
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Line Annotation
+
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% 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/react/annotation/annotation-types/perimeter-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/perimeter-annotation.md
new file mode 100644
index 0000000000..8a7d785696
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/perimeter-annotation.md
@@ -0,0 +1,257 @@
+---
+layout: post
+title: Add Perimeter Measurement Annotations in React PDF Viewer \ Syncfusion
+description: Learn how to enable, draw, customize, and manage Perimeter measurement annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Perimeter Measurement Annotations in React 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 React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Perimeter (Move, Reshape, Edit, Delete)
+- **Move**: Drag inside the shape to reposition it.
+- **Reshape**: Drag any vertex handle to adjust points and shape.
+
+### Edit Perimeter
+
+#### Edit Perimeter (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 Perimeter Programmatically
+Update properties and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editPerimeterProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const ann of viewer.annotationCollection) {
+ if (ann.subject === 'Perimeter calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.fillColor = '#FFFF00';
+ viewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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 Perimeter using the [`perimeterSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#perimetersettings) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Set Properties While Adding Individual Annotation
+Pass per‑annotation values directly when calling [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addStyledPerimeter() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Perimeter', {
+ offset: { x: 240, y: 360 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 240, y: 360 },
+ { x: 320, y: 360 },
+ { x: 330, y: 410 }
+ ],
+ strokeColor: '#1D4ED8',
+ fillColor: '#DBEAFE',
+ thickness: 2,
+ opacity: 0.85
+ });
+}
+{% endraw %}
+{% 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/react/documentation/api/pdfviewer/index-default#measurementsettings).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Perimeter 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
+Perimeter 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/react/annotation/annotation-types/polygon-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/polygon-annotation.md
new file mode 100644
index 0000000000..3ca472b3e5
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/polygon-annotation.md
@@ -0,0 +1,267 @@
+---
+layout: post
+title: Polygon Annotation (Shape) in React PDF Viewer \ Syncfusion
+description: Learn how to enable, apply, customize, and manage Polygon annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Polygon Annotation (Shape) in React PDF Viewer
+Polygon annotations allow users to outline irregular regions, draw custom shapes, highlight non-rectangular areas, or create specialized callouts on PDFs for review and markup.
+
+
+
+## Enable Polygon Annotation in the Viewer
+
+To enable Line annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Polygon (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 Polygon Programmatically
+
+Modify an existing Circle programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editPolygonProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ for (const annot of viewer.annotationCollection) {
+ if (annot.subject === 'Polygon') {
+ annot.strokeColor = '#0000ff';
+ annot.thickness = 2;
+ annot.fillColor = '#ffff00';
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Polygon
+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 polygon annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+Configure per-annotation appearance while adding a polygon using [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation).
+
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultiplePolygons() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Polygon 1
+ viewer.annotation.addAnnotation('Polygon', {
+ offset: { x: 200, y: 800 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 800 }, { x: 242, y: 771 },
+ { x: 289, y: 799 }, { x: 278, y: 842 },
+ { x: 211, y: 842 }, { x: 200, y: 800 }
+ ],
+ fillColor: '#ffa5d8',
+ strokeColor: '#ff6a00',
+ thickness: 2,
+ opacity: 0.9,
+ author: 'User 1'
+ });
+
+ // Polygon 2
+ viewer.annotation.addAnnotation('Polygon', {
+ offset: { x: 360, y: 800 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 360, y: 800 }, { x: 410, y: 770 },
+ { x: 450, y: 810 }, { x: 430, y: 850 },
+ { x: 380, y: 850 }, { x: 360, y: 800 }
+ ],
+ fillColor: '#ffe600',
+ strokeColor: '#ff1010',
+ thickness: 3,
+ opacity: 0.85,
+ author: 'User 2'
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Shape Annotation
+Disable shape annotations (Polygon, Line, Rectangle, Circle, Arrow) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Polygon Events
+
+The PDF viewer provides annotation life-cycle events that notify when Polygon 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/react/annotation/annotation-types/radius-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/radius-annotation.md
new file mode 100644
index 0000000000..b56fb0b310
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/radius-annotation.md
@@ -0,0 +1,248 @@
+---
+layout: post
+title: Add Radius Measurement Annotations in React PDF Viewer \ Syncfusion
+description: Learn how to enable, draw, customize, and manage Radius measurement annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Radius Measurement Annotations in React PDF Viewer
+Radius measurement annotations allow users to draw circular regions and calculate the radius visually.
+
+
+
+## Enable Radius Measurement
+
+To enable Radius annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Toolbar, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% 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 js tabtitle="Standalone" %}
+{% raw %}
+function editRadiusProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const ann of viewer.annotationCollection) {
+ if (ann.subject === 'Radius calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.opacity = 0.8;
+ viewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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/react/documentation/api/pdfviewer/index-default#radiussettings) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Set Properties While Adding Individual Annotation
+Apply defaults for Area using the [`radiusSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#radiussettings) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addStyledRadius() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Radius', {
+ offset: { x: 200, y: 630 },
+ pageNumber: 1,
+ width: 90,
+ height: 90,
+ fillColor: 'orange',
+ opacity: 0.6,
+ strokeColor: 'pink'
+ });
+}
+{% endraw %}
+{% 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/react/documentation/api/pdfviewer/index-default#mesaurementsettings).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% 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/react/annotation/annotation-types/rectangle-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/rectangle-annotation.md
new file mode 100644
index 0000000000..3ec549cda0
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/rectangle-annotation.md
@@ -0,0 +1,248 @@
+---
+layout: post
+title: Rectangle Annotation (Shape) in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Rectangle annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Rectangle Annotation (Shape) in React 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 Line annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% 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 js tabtitle="Standalone" %}
+{% raw %}
+function editRectangleProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const annot of viewer.annotationCollection) {
+ if (annot.subject === 'Rectangle') {
+ annot.strokeColor = '#0000ff';
+ annot.thickness = 2;
+ annot.fillColor = '#ffff00';
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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/react/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleRectangles() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Rectangle 1
+ viewer.annotation.addAnnotation('Rectangle', {
+ offset: { x: 200, y: 480 },
+ pageNumber: 1,
+ width: 150,
+ height: 75,
+ opacity: 0.9,
+ strokeColor: '#ff6a00',
+ fillColor: '#ffff00',
+ author: 'User 1'
+ });
+
+ // Rectangle 2
+ viewer.annotation.addAnnotation('Rectangle', {
+ offset: { x: 380, y: 480 },
+ pageNumber: 1,
+ width: 120,
+ height: 60,
+ opacity: 0.85,
+ strokeColor: '#ff1010',
+ fillColor: '#ffe600',
+ author: 'User 2'
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Rectangle Annotation
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% 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/react/annotation/annotation-types/redaction-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/redaction-annotation.md
new file mode 100644
index 0000000000..b34fd2d3d0
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/redaction-annotation.md
@@ -0,0 +1,202 @@
+---
+layout: post
+title: PDF Redaction in React PDF Viewer | Syncfusion
+description: Learn to add, edit, delete, and apply redaction annotations in Syncfusion React PDF Viewer with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Redaction annotation in React 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 (React)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function getViewer(){ return document.getElementById('container').ej2_instances[0]; }
+
+function addRedactionProgrammatically(){
+ const viewer=getViewer();
+ viewer.annotation.addAnnotation('Redaction',{
+ bound:{x:200,y:480,width:150,height:75},
+ pageNumber:1,
+ markerFillColor:'#000',
+ markerBorderColor:'#fff',
+ fillColor:'#000',
+ overlayText:'Confidential',
+ fontColor:'#fff', fontFamily:'Times New Roman', fontSize:10,
+ beforeRedactionsApplied:false
+ });
+}
+
+function App(){
+ return(<>
+
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Squiggly (Edit, Delete, Comment)
+
+### Edit Squiggly
+
+#### Edit Squiggly Appearance (UI)
+
+Use the annotation toolbar:
+- **Edit Color** tool
+
+- **Edit Opacity** slider
+
+
+#### Edit Squiggly Programmatically
+Modify an existing squiggly programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editSquigglyProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let annot of viewer.annotationCollection) {
+ if (annot.textMarkupAnnotationType === 'Squiggly') {
+ annot.color = '#ff0000';
+ annot.opacity = 0.8;
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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/react/documentation/api/pdfviewer/index-default#addannotation) API.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleSquigglies() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ // Squiggly 1
+ viewer.annotation.addAnnotation('Squiggly', {
+ bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
+ pageNumber: 1,
+ author: 'User 1',
+ color: '#ffff00',
+ opacity: 0.9
+ });
+ // Squiggly 2
+ viewer.annotation.addAnnotation('Squiggly', {
+ bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
+ pageNumber: 1,
+ author: 'User 2',
+ color: '#ff1010',
+ opacity: 0.9
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable TextMarkup Annotation
+Disable text markup annotations (including squiggly) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% 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/react/annotation/annotation-types/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/stamp-annotation.md
new file mode 100644
index 0000000000..7cfc96be7b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/stamp-annotation.md
@@ -0,0 +1,240 @@
+---
+layout: post
+title: Stamp Annotation in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Stamp annotations (Dynamic, Sign Here, Standard Business, Custom) in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Stamp Annotations in React PDF Viewer
+Stamp annotations allow you to place predefined or custom stamps (such as **Dynamic**, **Sign Here**, **Standard Business**, or **Custom**) on a PDF to communicate review states, approvals, or instructions. You can add stamps from the toolbar, switch to specific stamp modes programmatically, customize defaults (e.g., opacity/author), edit or lock them, and export them with the document.
+
+
+
+## Enable Stamp Annotation in the Viewer
+
+To enable Stamp annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+N> After changing opacity via the **Edit Opacity** tool in the toolbar, the updated value becomes the working default for subsequent placements in the current session.
+
+## Manage Stamp (Move, Resize, Rotate, Lock/Unlock, Delete)
+
+### Edit Stamp Annotation
+
+#### Edit & Arrange (UI)
+- **Move**: drag the stamp to reposition it.
+- **Resize**: use corner handles to change size.
+- **Rotate**: use the rotation handle (where available) to rotate the stamp.
+- **Opacity**: adjust using the **Edit Opacity** tool in the annotation toolbar.
+- **Lock/Unlock**: lock a selected stamp from the context menu to prevent edits.
+
+#### Edit Stamp Programmatically
+Modify bounds or lock state, then call `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editStampProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const ann of viewer.annotationCollection) {
+ // shapeAnnotationType is 'stamp' for stamp annotations
+ if (ann.shapeAnnotationType === 'stamp') {
+ const { width, height } = ann.bounds;
+ ann.bounds = { x: 100, y: 100, width, height };
+ ann.annotationSettings = ann.annotationSettings || {};
+ ann.annotationSettings.isLock = true; // lock the stamp
+ viewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Stamp
+Delete stamps via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set properties while adding Individual Annotation
+You can pass per‑annotation values (e.g., **type**, **position**, **size**, **author**, **isLock**, or **customStamps**) when calling [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleStamps() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Dynamic stamp – Approved
+ viewer.annotation.addAnnotation('Stamp', { offset: { x: 180, y: 140 }, pageNumber: 1 }, 'Approved');
+
+ // Sign Here – Witness
+ viewer.annotation.addAnnotation('Stamp', { offset: { x: 180, y: 240 }, pageNumber: 1 }, undefined, 'Witness');
+
+ // Standard Business – Approved
+ viewer.annotation.addAnnotation('Stamp', { offset: { x: 180, y: 340 }, pageNumber: 1 }, undefined, undefined, 'Approved');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Stamp Events
+
+The PDF viewer provides annotation life‑cycle events that notify when Stamp 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 stamps and reload them later. 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/react/annotation/annotation-types/sticky-notes.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/sticky-notes.md
new file mode 100644
index 0000000000..34b6cf7365
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/sticky-notes.md
@@ -0,0 +1,170 @@
+---
+layout: post
+title: Add Sticky Notes Annotations in React PDF Viewer | Syncfusion
+description: Learn how to enable, add, customize, and manage Sticky Notes annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Sticky Notes Annotations in React PDF Viewer
+Sticky Notes allow users to place comment markers on the PDF. When clicked, the note opens a popup containing comments, replies, and discussions. Use them to capture review feedback without altering the original content.
+
+
+
+## Enable Sticky Notes Annotation
+Inject the minimal modules required to work with Sticky Notes in the React PDF Viewer. (Toolbar is optional but recommended for UI access.)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation, TextSelection } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Move, Edit, or Delete Sticky Notes
+
+- **Move**: Drag the note icon to a new location.
+- **Edit**: Click the note icon to open the popup; edit text, add replies, or change status in the **Comments panel**.
+
+### Edit Sticky Notes Annotation
+
+#### Edit Sticky Notes (UI)
+
+- **Icon style**: Open **Right Click → Properties** on a note to choose a different note icon style (e.g., classic note icon).
+- **Color**: Change the note color using the **Edit Color** tool in the annotation toolbar.
+- **Opacity**: Adjust transparency using the **Edit Opacity** tool.
+ 
+
+N> To tailor right‑click actions (Delete, Properties, etc.), see [**Customize Context Menu**](../../context-menu/custom-context-menu).
+
+#### Edit Sticky Notes Programmatically
+Update properties and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editVolumeProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const ann of viewer.annotationCollection) {
+ if (ann.subject === 'Volume calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.opacity = 0.8;
+ viewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Volume Annotation
+
+Delete Volume Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set Default Properties During Initialization
+Configure scale defaults using [`stickyNotesSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#stickyNotesSettings).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Sticky Note Events
+
+Listen to annotation life-cycle events and filter for sticky notes. See [**Annotation Events**](../annotation-event) for the full list and argument details.
+
+## Export and Import
+Sticky Notes are included when exporting or importing annotations. For 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)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/strikethrough-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/strikethrough-annotation.md
new file mode 100644
index 0000000000..d28e13fd5b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/strikethrough-annotation.md
@@ -0,0 +1,236 @@
+---
+layout: post
+title: Strikethrough Text in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Strikethrough annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Strikethrough Annotation (Text Markup) in React PDF Viewer
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Strikethrough* text markup annotations in the Syncfusion **React PDF Viewer**. You can apply strikethrough using 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 React PDF Viewer:
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and strikethrough.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import {
+ PdfViewerComponent,
+ Inject,
+ Toolbar,
+ Annotation,
+ TextSelection
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Strikethrough (Edit, Delete, Comment)
+
+### Edit Strikethrough
+
+#### Edit Strikethrough Appearance (UI)
+Use the annotation toolbar:
+- **Edit Color** tool
+
+- **Edit Opacity** slider
+
+
+#### Edit Strikethrough Programmatically
+Modify an existing strikethrough programmatically using `editAnnotation()` and `annotationCollection`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editStrikethroughProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let annot of viewer.annotationCollection) {
+ if (annot.textMarkupAnnotationType === 'Strikethrough') {
+ annot.color = '#ff0000';
+ annot.opacity = 0.8;
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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-annotation).
+
+### 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 annotations when adding them programmatically by supplying fields on each `addAnnotation('Strikethrough', …)` call.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleStrikethroughs() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ // Strikethrough 1
+ viewer.annotation.addAnnotation('Strikethrough', {
+ bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
+ pageNumber: 1,
+ author: 'User 1',
+ color: '#ffff00',
+ opacity: 0.9
+ });
+ // Strikethrough 2
+ viewer.annotation.addAnnotation('Strikethrough', {
+ bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
+ pageNumber: 1,
+ author: 'User 2',
+ color: '#ff1010',
+ opacity: 0.9
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable TextMarkup Annotation
+Disable text markup annotations (including strikethrough) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% 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 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/react/annotation/annotation-types/underline-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/underline-annotation.md
new file mode 100644
index 0000000000..bf0aa8fbe9
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/underline-annotation.md
@@ -0,0 +1,237 @@
+---
+layout: post
+title: Underline Text in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Underline annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Underline Annotation (Text Markup) in React PDF Viewer
+
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Underline* text markup annotations in the Syncfusion **React PDF Viewer**. You can underline text using 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 React PDF Viewer:
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and underlining.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import {
+ PdfViewerComponent,
+ Inject,
+ Toolbar,
+ Annotation,
+ TextSelection
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Underline (Edit, Delete, Comment)
+
+### Edit Underline
+
+#### Edit Underline Appearance (UI)
+Use the annotation toolbar:
+- **Edit Color** tool
+
+- **Edit Opacity** slider
+
+
+#### Edit Underline Programmatically
+Modify an existing underline programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editUnderlineProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let annot of viewer.annotationCollection) {
+ if (annot.textMarkupAnnotationType === 'Underline') {
+ annot.color = '#0000ff';
+ annot.opacity = 0.8;
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% 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 annotations when adding them programmatically by supplying fields on each `addAnnotation('Underline', …)` call.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleUnderlines() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ // Underline 1
+ viewer.annotation.addAnnotation('Underline', {
+ bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
+ pageNumber: 1,
+ author: 'User 1',
+ color: '#ffff00',
+ opacity: 0.9
+ });
+ // Underline 2
+ viewer.annotation.addAnnotation('Underline', {
+ bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
+ pageNumber: 1,
+ author: 'User 2',
+ color: '#ff1010',
+ opacity: 0.9
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable TextMarkup Annotation
+Disable text markup annotations (including underline) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% 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 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/react/annotation/annotation-types/volume-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/volume-annotation.md
new file mode 100644
index 0000000000..fdfc14bc56
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/volume-annotation.md
@@ -0,0 +1,258 @@
+---
+layout: post
+title: Add Volume Measurement Annotations in React PDF Viewer | Syncfusion
+description: Learn how to enable, draw, customize, and manage Volume measurement annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Volume Measurement Annotations in React PDF Viewer
+Volume measurement annotations allow users to draw circular regions and calculate the volume visually.
+
+
+
+## Enable Volume Measurement
+Inject the **Annotation** and **Toolbar** modules to enable volume annotation tools.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Toolbar, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Volume (Move, Resize, Delete)
+- **Move**: Drag inside the polygon to reposition it.
+- **Reshape**: Drag any vertex handle to adjust points and shape.
+
+### Edit Volume Annotation
+
+#### Edit Volume (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 Volume Programmatically
+Update properties and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editVolumeProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const ann of viewer.annotationCollection) {
+ if (ann.subject === 'Volume calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.opacity = 0.8;
+ viewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Delete Volume Annotation
+
+Delete Volume 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 Volume using the [`volumeSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#volumesettings) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Set Properties While Adding Individual Annotation
+Apply defaults for Area using the [`volumeSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#volumesettings) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addStyledVolume() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Volume', {
+ offset: { x: 200, y: 810 },
+ pageNumber: 1,
+ width: 90,
+ height: 90,
+ fillColor: 'yellow',
+ opacity: 0.6,
+ strokeColor: 'yellow'
+ });
+}
+{% endraw %}
+{% 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/react/documentation/api/pdfviewer/index-default#mesaurementsettings).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Handle Volume 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
+Volume 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/react/annotation/annotations-api.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotations-api.md
new file mode 100644
index 0000000000..91c4869f68
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotations-api.md
@@ -0,0 +1,1737 @@
+---
+layout: post
+title: Annotations API in React PDF Viewer | Syncfusion
+description: Learn here all about how to read and configure annotations using APIs in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Annotations API in React
+
+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/react/documentation/api/pdfviewer/index-default#annotationcollection) | Gets the loaded document annotation collection. |
+| [annotationDrawingOptions](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotationdrawingoptions) | Options to configure line-type annotation drawing behavior. |
+| [annotationSelectorSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotationselectorsettings) | Configures the annotation selector (selection UI). |
+| [annotationSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotationsettings) | Global defaults for all annotations. |
+| [areaSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#areasettings) | Defaults for Area annotations. |
+| [arrowSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#arrowsettings) | Defaults for Arrow annotations. |
+| [circleSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#circlesettings) | Defaults for Circle annotations. |
+| [customStamp](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#customstamp) | Defines custom stamp items. |
+| [customStampSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#customstampsettings) | Defaults for Custom Stamp annotations. |
+| [distanceSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#distancesettings) | Defaults for Distance annotations. |
+
+## annotationCollection
+Read the loaded document annotation collection from the viewer instance.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import {
+ PdfViewerComponent, Inject, Toolbar, Magnification, Navigation, Annotation,
+ LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch,
+ FormFields, FormDesigner
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ const logAnnotations = () => {
+ const viewer = (document.getElementById('container')?.ej2_instances || [])[0];
+ if (viewer) {
+ console.log(viewer.annotationCollection);
+ }
+ };
+
+ return (
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render( { console.log('Import started', args); }}
+ importSuccess={(args) => { console.log('Import success', args); }}
+ importFailed={(args) => { console.error('Import failed', args); }}
+ >
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render( { console.log('Export started', args); }}
+ exportSuccess={(args) => { console.log('Export success', args); }}
+ exportFailed={(args) => { console.error('Export failed', args); }}
+ >
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+ );
}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
+
+```
+
+The following is the output of the custom context menu with customization.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/pdfviewer/react/custom-context-menu/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/pdfviewer/react/custom-context-menu/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` within the
Enable interactivity only via client-side rendering (CSR) by using the WebAssembly or Auto option -Add the Syncfusion® PDF Viewer component in the **~/Pages/Index.razor** file. +Add the Syncfusion® PDF Viewer component in **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -296,15 +297,15 @@ Add the Syncfusion® PDF Viewer component in {% endhighlight %} {% endtabs %} -N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF document. Users can use the **Open** option in the toolbar to browse and open a PDF as needed. +N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF. Use the **Open** toolbar option to browse and open a PDF. -## Run the application +## Run the app -Run the application to display the PDF file in the Syncfusion® Blazor PDF Viewer component in the browser. +Run the app to display the PDF in the Syncfusion® Blazor PDF Viewer in the browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Web App SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png)" %} -N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WebApp). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WebAppServerMode). ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md index 861783645e..df4fd3c74a 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md @@ -9,7 +9,7 @@ documentation: ug # View PDF files using the PDF Viewer in a Blazor WebAssembly (WASM) app -This article describes how to add the Syncfusion® Blazor PDF Viewer component to a Blazor WebAssembly (WASM) app using Visual Studio or Visual Studio Code. A fully functional example project is available in the [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20WebAssembly). +This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor WebAssembly (WASM) app using Visual Studio or Visual Studio Code. A fully functional example project is available in the [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20WebAssembly). {% tabcontents %} @@ -19,21 +19,21 @@ This article describes how to add the Syncfusion® Blazor PDF Viewer componen * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* To use the PDF Viewer component in a Blazor WebAssembly application with SkiaSharp, ensure the required .NET workloads are installed by running the following commands: +* To use the PDF Viewer with SkiaSharp in a Blazor WebAssembly app, ensure the required .NET workloads are installed by running: * dotnet workload install wasm-tools - * dotnet workload install wasm-tools-net8 + * dotnet workload install wasm-tools-net8 (For .NET 8.0) or dotnet workload install wasm-tools-net9 (For .NET 9.0) or dotnet workload install wasm-tools-net10 (For .NET 10.0) ## Create a new Blazor App in Visual Studio You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -N> The PDF Viewer component is supported on .NET 8.0 and later. +N> The PDF Viewer supports .NET 8.0 and later. -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages in the app +## Install NuGet packages -To add the Blazor PDF Viewer component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install +To add the Blazor PDF Viewer, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install: -* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) * [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor) @@ -47,9 +47,9 @@ N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this vers * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* To use the PDF Viewer component in a Blazor WebAssembly application with SkiaSharp, make sure to have the required .NET workloads installed by executing the following commands in the command prompt. +* To use the PDF Viewer with SkiaSharp in a Blazor WebAssembly app, ensure the required .NET workloads are installed by running: * dotnet workload install wasm-tools - * dotnet workload install wasm-tools-net8 + * dotnet workload install wasm-tools-net8 (For .NET 8.0) or dotnet workload install wasm-tools-net9 (For .NET 9.0) or dotnet workload install wasm-tools-net10 (For .NET 10.0) ## Create a new Blazor App in Visual Studio Code @@ -68,13 +68,13 @@ cd BlazorApp {% endtabs %} -N> The PDF Viewer component is supported on .NET 8.0 and later. +N> The PDF Viewer supports .NET 8.0 and later. ## Install Syncfusion® Blazor NuGet packages in the app * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following commands to install the [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer), [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor) NuGet packages and ensure all dependencies are installed. +* Run the following commands to install the required NuGet packages and their dependencies. {% tabs %} @@ -104,13 +104,13 @@ N> Syncfusion® Blazor components are available on [nuget.org](https://www.nu {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} -@using Syncfusion.Blazor; -@using Syncfusion.Blazor.SfPdfViewer; +@using Syncfusion.Blazor +@using Syncfusion.Blazor.SfPdfViewer {% endhighlight %} {% endtabs %} -* Register the Syncfusion® Blazor Service in the **~/Program.cs** file. +* Register the Syncfusion® Blazor service in the **~/Program.cs** file. {% tabs %} {% highlight C# tabtitle=".NET 6 & .NET 7 (~/Program.cs)" hl_lines="3 9 13" %} @@ -133,9 +133,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Adding stylesheet and script +## Add stylesheet and script -Add the following stylesheet and script to the head section of the **wwwroot/index.html** file. +Add the following stylesheet and script to the head section of **wwwroot/index.html**. {% tabs %} {% highlight html hl_lines="3 7" %} @@ -152,9 +152,9 @@ Add the following stylesheet and script to the head section of the **wwwroot/ind {% endhighlight %} {% endtabs %} -## Adding Blazor PDF Viewer Component +## Add Blazor PDF Viewer component -Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~/Pages/Index.razor** file. +Add the Syncfusion® PDF Viewer (Next-Gen) component to **~/Pages/Index.razor**. {% tabs %} {% highlight razor %} @@ -169,14 +169,16 @@ Add the Syncfusion® PDF Viewer (Next-Gen) c {% endhighlight %} {% endtabs %} -N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF document. Users can use the **Open** option in the toolbar to browse and open a PDF as needed. +N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF. Use the **Open** toolbar option to browse and open a PDF. -## Run the application +## Run the app -Run the application to display the PDF file in the Syncfusion® Blazor PDF Viewer component in the browser. +Run the app to display the PDF in the Syncfusion® Blazor PDF Viewer in the browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor WebAssembly SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png)" %} +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WasmStandalone). + ## See also * [Getting started with the Blazor PDF Viewer in a Blazor Web app Server app](./web-app) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md index a2d79446b9..494f7e9f51 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md @@ -9,7 +9,7 @@ documentation: ug # View PDF files using the PDF Viewer in a WinForms Blazor Hybrid App -This article explains how to add the Syncfusion® Blazor PDF Viewer component to a WinForms Blazor Hybrid App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop application (WinForms) that hosts Blazor UI inside a BlazorWebView control. +This article shows how to add the Syncfusion® Blazor PDF Viewer to a WinForms Blazor Hybrid app using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop (WinForms) application that hosts Blazor UI inside a BlazorWebView control. {% tabcontents %} @@ -21,17 +21,17 @@ This article explains how to add the Syncfusion® Blazor PDF Viewer component ## Create a new WinForms app in Visual Studio -Create a WinForms application using Visual Studio 2022 with the WinForms project template. The app will later host Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a WinForms app using Visual Studio 2022 with the WinForms project template. The app hosts Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install Blazor PDF Viewer NuGet package in WinForms App +## Install Blazor PDF Viewer NuGet packages -To add **Blazor PDF Viewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install +To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install: -* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) * [Microsoft.AspNetCore.Components.WebView.WindowsForms](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.WindowsForms) -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16`.  @@ -45,7 +45,7 @@ N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms ## Create a new WinForms app in Visual Studio Code -Create a WinForms desktop project (not a WinForms Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WinForms project will host Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a WinForms desktop project (not a WinForms Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WinForms project hosts Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). {% tabs %} {% highlight c# tabtitle="WinForms Blazor HybridApp" %} @@ -77,15 +77,15 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the list of available packages and component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for package details. -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16`. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor service +## Register Syncfusion Blazor service The WinForms project must target Windows and enable WinForms. A typical project file looks like the following. @@ -114,9 +114,9 @@ Create a **Component** folder, add an **_Imports.razor** file in it, and include ## Create wwwroot folder and index.html file -* Create a new folder named wwwroot in the WinForms project root. +* Create a new folder named `wwwroot` in the WinForms project root. -* Inside wwwroot, create an index.html host page for the Blazor UI. This host page is required by BlazorWebView to initialize the Blazor runtime and load static assets (themes and scripts). A basic index.html might look like the following: +* Inside `wwwroot`, create an `index.html` host page for the Blazor UI. This host page initializes the Blazor runtime and loads static assets (themes and scripts). A basic `index.html` might look like the following: {% tabs %} {% highlight html tabtitle="index.html" hl_lines="8 13" %} @@ -142,7 +142,7 @@ Create a **Component** folder, add an **_Imports.razor** file in it, and include N> Ensure that the PDF Viewer static assets (themes and scripts) are loaded properly. -Register Syncfusion Blazor services and BlazorWebView in **~/Form1.cs** so that the WinForms window can host Blazor components. +Register Syncfusion Blazor services and BlazorWebView in **~/Form1.cs** so the WinForms window can host Blazor components. {% tabs %} {% highlight c# tabtitle="Form1.cs (WinForms host)" hl_lines="2 3 4 5 9 10 11 12 13 14 15 16 17 18 19 21" %} @@ -175,7 +175,7 @@ using WinFormsBlazorHybridApp.Components; ## Adding Blazor PDF Viewer component -Create a Razor component (for example, PDFViewer.razor) in the project and add the Syncfusion® PDF Viewer component to it within the **Component** folder +Create a Razor component (for example, PDFViewer.razor) in the project and add the Syncfusion® PDF Viewer component to it within the **Component** folder. {% tabs %} {% highlight razor %} @@ -192,13 +192,13 @@ Create a Razor component (for example, PDFViewer.razor) in the project and add t N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a document. Users can use the **Open** toolbar option to browse and open a PDF. -## Run the application +## Run the app -Run the WinForms application. The Syncfusion® Blazor PDF Viewer renders inside the WinForms window. +Run the WinForms app. The Syncfusion® Blazor PDF Viewer renders inside the WinForms window.  ->[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WinForms). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WinForms). ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md index f1bbf29609..863c9fca34 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md @@ -9,7 +9,7 @@ documentation: ug # View PDF files using the PDF Viewer in a WPF Blazor Hybrid App -This article explains how to add the Syncfusion® Blazor PDF Viewer component to a WPF Blazor Hybrid App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop application (WPF) that hosts Blazor UI inside a BlazorWebView control. +This article shows how to add the Syncfusion® Blazor PDF Viewer to a WPF Blazor Hybrid app using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop (WPF) application that hosts Blazor UI inside a BlazorWebView control. {% tabcontents %} @@ -21,17 +21,18 @@ This article explains how to add the Syncfusion® Blazor PDF Viewer component ## Create a new WPF app in Visual Studio -Create a WPF application using Visual Studio 2022 with the WPF project template. The app will later host Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a WPF app using Visual Studio 2022 with the WPF project template. The app hosts Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -## Install Blazor PDF Viewer NuGet package in WPF App -To add **Blazor PDF Viewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install +## Install Blazor PDF Viewer NuGet packages -* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) +To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install: + +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) * [Microsoft.AspNetCore.Components.WebView.Wpf](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.Wpf) -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.Wpf` is updated to version `8.0.16`.  @@ -45,7 +46,7 @@ N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` updated ## Create a new WPF app in Visual Studio Code -Create a WPF desktop project (not a WPF Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WPF project will host Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a WPF desktop project (not a WPF Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WPF project hosts Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). {% tabs %} {% highlight c# tabtitle="WPF Blazor HybridApp" %} @@ -61,7 +62,7 @@ Install the required NuGet packages in the WPF project that will host the Blazor * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the current directory contains the WPF project `.csproj` file. -* Run the following commands to install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer), [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and [Microsoft.AspNetCore.Components.WebView.Wpf](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.Wpf). This adds the PDF Viewer, theme, and the BlazorWebView host control. +* Run the following commands to install the required packages. This adds the PDF Viewer, theme, and the BlazorWebView host control. {% tabs %} @@ -76,15 +77,15 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the list of available packages and component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for package details. -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.Wpf` is updated to version `8.0.16`. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor service +## Register Syncfusion Blazor service The WPF project must target Windows and enable WPF. A typical project file looks like the following. @@ -134,9 +135,9 @@ using Syncfusion.Blazor; ## Create wwwroot folder and index.html file -* Create a new folder named wwwroot in the WPF project root. +* Create a new folder named `wwwroot` in the WPF project root. -* Inside wwwroot, create an index.html host page for the Blazor UI. This host page is required by BlazorWebView to initialize the Blazor runtime and load static assets (themes and scripts). A basic index.html might look like the following: +* Inside `wwwroot`, create an `index.html` host page for the Blazor UI. This host page initializes the Blazor runtime and loads static assets (themes and scripts). A basic `index.html` might look like the following: {% tabs %} @@ -165,7 +166,7 @@ N> Ensure that the PDF Viewer static assets (themes and scripts) are loaded prop ## Adding Blazor PDF Viewer component -Create a Razor component (for example, Main.razor) in the project and add the Syncfusion® PDF Viewer component to it. +Create a Razor component (for example, Main.razor) in the project and add the Syncfusion® PDF Viewer component to it. {% tabs %} {% highlight razor %} @@ -209,13 +210,13 @@ N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor {% endhighlight %} {% endtabs %} -## Run the application +## Run the app -Run the WPF application. The Syncfusion® Blazor PDF Viewer renders inside the WPF window. +Run the WPF app. The Syncfusion® Blazor PDF Viewer renders inside the WPF window.  ->[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WPF). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WPF). ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md b/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md index 40df107a84..1c86b9eaf2 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/globalization.md @@ -14,15 +14,15 @@ documentation: ug The [Blazor SfPdfViewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) component can be localized to display culture-specific text. Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) guide for steps to add culture resource files, register localization services, and set the current culture. N> -* Provide localized string resources for the viewer’s UI texts (such as toolbar tooltips, dialog messages). -* Ensure the app culture (CurrentCulture and CurrentUICulture) is set before the component renders for correct resource lookup. -* Localization applies to the viewer UI; it does not translate the PDF document content. +* Provide localized string resources for the viewer’s UI text (for example, toolbar tooltips and dialog messages). +* Ensure the application culture (`CurrentCulture` and `CurrentUICulture`) is set before the component renders for correct resource lookup. +* Localization applies to the viewer UI only; it does not translate PDF document content. ## Right to Left -To enable right-to-left (RTL) rendering for the viewer UI, set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableRtl) property to true. This mirrors the layout and aligns UI elements for RTL languages such as Arabic, Hebrew, Azerbaijani, Persian, and Urdu. The following code snippet demonstrates how to enable RTL rendering. +To enable right-to-left (RTL) rendering for the viewer UI, set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableRtl) property to `true`. This mirrors the layout and aligns UI elements for RTL languages such as Arabic, Hebrew, Azerbaijani, Persian, and Urdu. The following code snippet demonstrates how to enable RTL rendering. -By setting EnableRtl to `true`, the control will adjust its layout and appearance to align text, icons, and other elements from right to left, providing an optimized user experience for RTL language users. +When `EnableRtl` is `true`, the component adjusts its layout and appearance to align text, icons, and other elements from right to left, providing an optimized experience for RTL language users. ```cshtml diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md b/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md index 10439651e5..65606b7b28 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/hand-written-signature.md @@ -15,12 +15,12 @@ The SfPdfViewer component supports adding handwritten signatures to PDF document Add a handwritten signature using the annotation toolbar. -* Click the **Edit Annotation** in the SfPdfViewer toolbar to open the annotation toolbar. -* Select the **HandWritten Signature** tool to open the signature panel. +* Click the **Edit Annotation** button in the SfPdfViewer toolbar to open the annotation toolbar. +* Select the **Handwritten Signature** tool to open the signature panel.  -* Draw the signature in the signature panel using a mouse, or touch. +* Draw the signature in the signature panel using a mouse or touch input.  @@ -32,7 +32,7 @@ The added signature becomes part of the PDF annotations and is preserved when sa ## Editing the properties of handwritten signature -The stroke color, thickness, and opacity of a handwritten signature can be adjusted using the annotation toolbar’s edit stroke color tool, edit thickness tool, and edit opacity tools. Select the signature on the page to enable these property editors for that item. After placement, the signature can also be moved, resized, or removed like other annotations. +Stroke color, thickness, and opacity can be adjusted using the annotation toolbar’s property editors. Select the signature on the page to enable these editors. After placement, the signature can be moved, resized, or removed like other annotations.  diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md b/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md index 2e7ce6e421..6f3eadd012 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interaction.md @@ -9,7 +9,7 @@ documentation: ug # Interaction mode in Blazor SfPdfViewer Component -SfPdfViewer provides two user interaction options to control how the document responds to pointer input. By default, text selection is enabled and the interaction mode is Selection. +SfPdfViewer provides two user interaction options to control how the document responds to pointer input. By default, text selection is enabled and the interaction mode is `Selection`. The built-in toolbar of SfPdfViewer contains the following two interaction options: @@ -20,7 +20,7 @@ The built-in toolbar of SfPdfViewer contains the following two interaction optio In this mode, users can select and copy text from the PDF document loaded in SfPdfViewer. This is useful for extracting and sharing textual content. -N> In Selection mode, page panning by touch/drag is disabled. Scrolling is still available through the mouse wheel scrollbars, or keyboard shortcuts. +N> In Selection mode, page panning by touch/drag is disabled. Users can still scroll using the mouse wheel, scrollbars, or keyboard shortcuts. You can enable or disable text selection by setting the [EnableTextSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableTextSelection) property. @@ -41,7 +41,7 @@ You can enable or disable text selection by setting the [EnableTextSelection](ht ## Panning mode -In this mode, users can pan and scroll pages in the loaded PDF document in the SfPdfViewer, but the text selection cannot be performed. +In this mode, users can pan and scroll pages in the loaded PDF document, but text selection is disabled. The interaction mode of the SfPdfViewer component can be modified using the [InteractionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_InteractionMode) property. This property supports runtime updates, and any changes are applied immediately to the viewer. @@ -59,11 +59,11 @@ The interaction mode of the SfPdfViewer component can be modified using the [Int } ``` -## Disable interaction with Annotations +## Disable annotation interaction -Annotation interactions such as dragging, resizing, and deleting can be disabled by setting the [IsLock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerAnnotationSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerAnnotationSettings_IsLock) property in the [AnnotationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AnnotationSettings) configuration. +Annotation interactions, such as dragging, resizing, and deleting, can be disabled by setting the [IsLock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerAnnotationSettings.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerAnnotationSettings_IsLock) property in the [AnnotationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_AnnotationSettings) configuration. -The following code illustrates how to disable the annotation interaction. +The following code illustrates how to lock annotation interactions. ```cshtml diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark.md index 4c8932cf0d..587f9100cb 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/bookmark.md @@ -9,13 +9,13 @@ documentation: ug # Bookmark navigation in SfPdfViewer -Use the bookmark panel to jump directly to labeled destinations in a PDF. +Use the bookmark panel to jump to labeled destinations in the PDF. -Bookmarks defined in the PDF document are automatically loaded and listed in the bookmark panel. Selecting a bookmark navigates to its target. Nested bookmarks are supported; if the document has no bookmarks, the panel appears empty. +Bookmarks embedded in the PDF are loaded automatically and listed in the bookmark panel. Selecting a bookmark navigates to its target. Nested bookmarks are supported. If a document has no bookmarks, the panel appears empty.  -Enable or disable the bookmark panel by setting the [EnableBookmarkPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableBookmarkPanel) property. This property only controls the panel’s visibility; bookmarks are read from the PDF. +Show or hide the bookmark panel by setting the [EnableBookmarkPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableBookmarkPanel) property. This property controls only the panel’s visibility; bookmarks are read from the PDF itself. ```cshtml @@ -29,6 +29,6 @@ Enable or disable the bookmark panel by setting the [EnableBookmarkPanel](https: ``` -## See Also +## See also * [Page thumbnail navigation in Blazor SfPdfViewer](./page-thumbnail) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink.md index 9c66e67e47..b377dc01ba 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/hyperlink.md @@ -9,15 +9,15 @@ documentation: ug # Hyperlink navigation in SfPdfViewer -Use hyperlinks in a PDF to navigate either to external URLs or to destinations within the same document. Hyperlinks are detected from the PDF content and work by default. +Use hyperlinks in a PDF to navigate to external URLs or to destinations within the same document. Hyperlinks are extracted from the PDF and enabled by default. -- External links (HTTP/HTTPS, etc.) open in the browser according to browser security and settings (for example, a new tab or window). +- External links (HTTP/HTTPS, etc.) open in the browser according to browser settings (for example, in a new tab or window). - In-document links navigate directly to the referenced page or location in the viewer. -If a document does not contain hyperlinks, no link-specific highlighting appears. +If a document contains no hyperlinks, the viewer shows no link highlighting.  -## See Also +## See also * [Table of content navigation in Blazor SfPdfViewer](./table-of-content) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-panel.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-panel.md index 792e5780b5..ec8c2563a6 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-panel.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/modern-panel.md @@ -9,12 +9,11 @@ documentation: ug # Modern navigation panel in SfPdfViewer -The modern navigation panel consolidates thumbnails, bookmarks, comments, and custom panels in a single, flexible side panel for a streamlined navigation experience. +The modern navigation panel consolidates thumbnails, bookmarks, comments, and custom panels into a single flexible side panel for streamlined navigation. -Enable the modern navigation panel using the [EnableNavigationPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationPanel) property. Visibility can be toggled from the UI or programmatically. - -The following example enables the modern navigation panel: +Enable the modern navigation panel by setting the [EnableNavigationPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigationPanel) property. You can toggle its visibility from the UI or programmatically. +Example — enable the modern navigation panel: ```cshtml @using Syncfusion.Blazor.SfPdfViewer; @@ -41,7 +40,7 @@ The modern navigation panel contains the following built-in items: Use the [BuiltInItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarSettings_BuiltInItems) property, which accepts a list of [NavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarItem.html) enums. The viewer renders the navigation icons in the exact sequence provided. -The following example displays Thumbnails first, followed by Bookmarks and the Comment panel. +Example — display Thumbnails first, followed by Bookmarks and the Comment panel. ```cshtml @@ -72,8 +71,7 @@ The following example displays Thumbnails first, followed by Bookmarks and the C Open or close a navigation panel programmatically by calling the [ToggleItemByIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_ToggleItemByIndex_System_Int32_) method. Indices are zero-based and apply to the combined sequence of built-in and custom items. -The following example toggles the visibility of the second item in the navigation panel (index 1). - +Example — toggle the navigation panel item at index 1: ```cshtml @using Syncfusion.Blazor.SfPdfViewer; @@ -101,7 +99,7 @@ The following example toggles the visibility of the second item in the navigatio ### Add custom items to the navigation panel -You can add custom items to the SfPdfViewer navigation toolbar. Create a list of [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html) objects and assign it to the [CustomItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarSettings_CustomItems) property. +You can add custom items to the SfPdfViewer navigation toolbar by creating a list of [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html) objects and assigning it to the [CustomItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.NavigationToolbarSettings.html#Syncfusion_Blazor_SfPdfViewer_NavigationToolbarSettings_CustomItems) property. Each CustomNavigationToolbarItem object includes: - Index: Position of the item in the toolbar. @@ -116,7 +114,7 @@ Each CustomNavigationToolbarItem object includes: Define a custom UI for a navigation panel by assigning a RenderFragment to the `Template` property of a [CustomNavigationToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.CustomNavigationToolbarItem.html). -The following example adds a default toolbar with a custom item containing a small, interactive panel with a customized UI. +Example — add a default toolbar with a custom item that contains a small interactive panel and customized UI: ```cshtml @@ -214,15 +212,15 @@ The following example adds a default toolbar with a custom item containing a sma  -### Demand rendering for the navigation panel +### Rendering strategies for the navigation panel -SfPdfViewer supports different loading strategies for navigation panel content to optimize performance. The available options are: +SfPdfViewer supports different loading strategies for navigation panel content to optimize performance: -* **Dynamic** : The content for a panel is only loaded into the DOM when that panel is selected. When you switch to a different panel, the previous content is removed and replaced. -* **Init** : The content for all navigation panels is rendered during the initial load and is always present in the DOM. -* **Demand** : The content for a panel is loaded into the DOM the first time it is selected. The content is then kept in the DOM, even if you navigate to other panels. +* **Dynamic**: Content for a panel is loaded into the DOM only when that panel is selected. Switching panels replaces the previous content. +* **Init**: Content for all navigation panels is rendered during the initial load and remains in the DOM. +* **Demand**: Content for a panel is loaded into the DOM the first time it is selected and then retained. -The following example sets the loading strategy to Demand. +Example — set the loading strategy to `Demand`: ```cshtml @@ -240,10 +238,10 @@ The following example sets the loading strategy to Demand. ### Modern navigation panel in mobile view -On mobile devices, the navigation toolbar collapses into a toggle menu to save space. Any custom items appear at the beginning of this menu. +On mobile devices the navigation toolbar collapses into a toggle menu to save space. Custom items appear at the beginning of this menu.  -## See Also +## See also * [Page navigation in Blazor SfPdfViewer](./pages) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail.md index b568c8d8ec..c345db1f34 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/page-thumbnail.md @@ -9,11 +9,11 @@ documentation: ug # Page thumbnail navigation in SfPdfViewer -Use the thumbnail panel to preview pages and navigate quickly through a PDF. Each thumbnail represents a page; selecting one navigates to that page in the viewer. +Use the thumbnail panel to preview pages and quickly navigate a PDF. Each thumbnail represents a page — select one to jump to that page in the viewer.  -Enable or disable the thumbnail panel by setting the [EnableThumbnailPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableThumbnailPanel) property. This property enables the feature; visibility at load time is controlled separately. +Show or hide the thumbnail panel by setting the [EnableThumbnailPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableThumbnailPanel) property. This property enables the feature; initial visibility at load time is controlled separately. ```cshtml @@ -29,9 +29,9 @@ Enable or disable the thumbnail panel by setting the [EnableThumbnailPanel](http ## Open thumbnail panel programmatically -To show the thumbnail panel when the document loads, set the [IsThumbnailPanelOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsThumbnailPanelOpen) property to true. This controls initial visibility and works when the thumbnail feature is enabled. +To show the thumbnail panel when the document loads, set the [IsThumbnailPanelOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsThumbnailPanelOpen) property to `true`. This controls initial visibility and requires the thumbnail feature to be enabled. -The following example opens the thumbnail panel at initial render. +Example — open the thumbnail panel at initial render: ```cshtml @@ -56,6 +56,6 @@ The following example opens the thumbnail panel at initial render. [View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Thumbnail/Show%20thumbnail%20panel). -## See Also +## See also * [Hyperlink navigation in Blazor SfPdfViewer](./hyperlink) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/pages.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/pages.md index bc8206d0b3..fab64f7e7f 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/pages.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/pages.md @@ -9,19 +9,19 @@ documentation: ug # Page navigation in SfPdfViewer -Move between pages using the built-in toolbar or programmatic APIs. +Navigate pages using the toolbar or programmatic APIs. -The built-in toolbar of SfPdfViewer contains the following page navigation tools: +SfPdfViewer's toolbar includes these page navigation tools: -* **First page**: Navigates to the first page in the document. -* **Previous page**: Scrolls backward one page at a time. -* **Next page**: Scrolls forward one page at a time. -* **Last page**: Navigates to the last page in the document. -* **Go to page**: Jumps to a specified page number. +* **First page**: Navigate to the first page. +* **Previous page**: Scroll backward one page. +* **Next page**: Scroll forward one page. +* **Last page**: Navigate to the last page. +* **Go to page**: Jump to a specified page number.  -The navigation tools appear in the primary toolbar. Enable or disable these buttons by setting the [EnableNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigation) property. This setting affects only the toolbar buttons; programmatic navigation APIs remain available regardless of this value. +These toolbar buttons are controlled by the [EnableNavigation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableNavigation) property. Programmatic navigation APIs remain available regardless. ```cshtml @@ -38,9 +38,9 @@ The navigation tools appear in the primary toolbar. Enable or disable these butt ``` -Page navigation can also be performed programmatically. The following example shows how to navigate between pages using APIs. +Navigate pages programmatically using the APIs shown in the example below. -N> GoToPageAsync expects a 1-based page number. +N> `GoToPageAsync` expects a 1‑based page number. ```cshtml @@ -108,7 +108,7 @@ N> GoToPageAsync expects a 1-based page number. ``` -## See Also +## See also * [Magnification in Blazor SfPdfViewer](../magnification) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content.md b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content.md index 9d8db68aa6..232211f9e9 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/interactive-pdf-navigation/table-of-content.md @@ -9,12 +9,11 @@ documentation: ug # Table of contents navigation in SfPdfViewer -Use the table of contents (TOC) to jump to sections within a PDF. Each TOC entry maps to a location in the document; selecting one navigates to that destination. +Use the table of contents (TOC) to jump to sections within a PDF. Each entry maps to a location in the document; selecting one navigates to that destination.  -Enable or disable both hyperlink and TOC navigation by setting the [EnableHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableHyperlink) property. TOC entries are parsed from the PDF; if the document has no TOC, no entries appear. - +Enable or disable hyperlink and TOC navigation by setting the [EnableHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_EnableHyperlink) property. TOC entries are parsed from the PDF; if the document has no TOC, no entries appear. ```cshtml @using Syncfusion.Blazor.SfPdfViewer @@ -27,7 +26,7 @@ Enable or disable both hyperlink and TOC navigation by setting the [EnableHyperl ``` -Control where external hyperlinks open by using the [HyperlinkOpenState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_HyperlinkOpenState) property (for example, a new tab). In-document TOC links always navigate within the viewer. +Control where external hyperlinks open using the [HyperlinkOpenState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_HyperlinkOpenState) property (for example, a new tab). In-document TOC links always navigate within the viewer. ```cshtml @@ -44,6 +43,6 @@ Control where external hyperlinks open by using the [HyperlinkOpenState](https:/ ``` -## See Also +## See also * [Modern navigation panel in Blazor SfPdfViewer](./modern-panel) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/migration.md b/Document-Processing/PDF/PDF-Viewer/blazor/migration.md index 4a230aab86..4474633f38 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/migration.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/migration.md @@ -11,18 +11,18 @@ documentation: ug ## Why PDF Viewer (Classic) to PDF Viewer control -Migrating to the PDF Viewer control delivers better performance and a simplified deployment model. Scrolling, page navigation, and printing are optimized for a smoother user experience. The newer viewer also removes the WebAssembly server service dependency required by the classic control, reducing app complexity and maintenance. +Migrating to SfPdfViewer delivers better performance and a simplified deployment model. Scrolling, page navigation, and printing are optimized for a smoother user experience. SfPdfViewer also removes the WebAssembly server service dependency required by the classic viewer, reducing app complexity and maintenance. * **Enhanced performance**: Experience faster scrolling, more responsive page navigation, and improved printing throughput for large documents. * **No server service dependency**: -The newer viewer does not require a separate ServiceUrl or server-side WebAssembly service; client-side rendering is handled by the component. +SfPdfViewer does not require a separate `ServiceUrl` or server-side WebAssembly service; client-side rendering is handled by the component. * **Unified package across platforms**: A single package supports Windows, macOS, and Linux, making installation consistent across environments. -### Nuget Package +### NuGet package To initialize the PDF Viewer component, add the following package references to the project **.csproj** file. @@ -71,7 +71,7 @@ To initialize the PDF Viewer component, add the following package references to To use the PDF Viewer component, add the corresponding script reference in the app host page (**Host.cshtml** or **Layout.cshtml**) based on the framework version. -N> The same script file is used for both `Server application` and `Web assembly application` for the PDF Viewer component. +N> The same script file is used for both `Server application` and `WebAssembly application` for the PDF Viewer component.
| Cancel | -Cancel | -||
| CanOpenWebPage | -Do you want to open | +Add Signature | +Add Signature |
| Close | -CLOSE | +AddBookmark | +Add bookmark |
| DocumentLoadFailed | -Failed to load the PDF document. | +AddFreeTextToastMessage | +Tap on the page to add the free text annotation |
| EnterPassword | -Enter Password | +AddHighlightToastMessage | +Drag over a text to highlight it |
| Error | -Error | +AddReply | +Add Reply |
| NoOutline | -No outline | +AddSignature | +Add signature |
| Ok | -OK | +AddSignatureToastMessage | +Tap to add the signature |
| Open | -OPEN | +AddSquigglyToastMessage | +Drag over a text to add a squiggly underline |
| OpenWebPage | -Open Web Page | +AddStampToastMessage | +Tap to add the stamp |
| Outline | -Outline | +AddStickyNoteToastMessage | +Tap to add a sticky note |
| PasswordErrorHint | -Check your password | +AddStrikeoutToastMessage | +Drag over a text to strike it through |
| RequestPassword | -This PDF file is protected. Please enter the password to open it. | +AddUnderlineToastMessage | +Drag over a text to underline it |
| Copy | -Copy | +||
| AddYourComment | +Add comment | ||
| Highlight | -Highlight | +Annotations | +Annotations |
| Save | -Save | +Apply | +Apply |
| Squiggly | -Squiggly | +ApplyRedactionsConfirmation | +You are about to permanently remove all content that has been marked for redaction. Once the document is saved, this operation cannot be undone. Are you sure you want to continue? |
| Strikeout | -Strikeout | +Arrow | +Arrow |
| Underline | -Underline | +Back | +Back |
| StickyNoteEditorPlaceholder | -Write Your Note... | +Bookmarks | +Bookmarks |
| FreeTextEditorPlaceHolder | -Text... | +Border | +Border |
| AddFreeTextToastMessage | -Tap on the page to add the free text annotation | +Cancel | +Cancel |
| Draw your signature | -Draw your signature | +CanOpenWebPage | +Do you want to open |
| Color | -Color | +Circle | +Circle |
| Clear | Clear | ||
| Add Signature | -Add Signature | -||
| Draw | -Draw | -||
| Type | -Type | -||
| Upload | -Upload | -||
| Type your signature | -Type your signature | -||
| Signature | -Signature | -||
| Create | -Create | -||
| Insert | -Insert | -||
| Upload an image | -Upload an image | -||
| Drag and drop an image here | -Drag and drop an image here | -||
| AddHighlightToastMessage | -Drag over a text to highlight it | +Close | +CLOSE |
| AddSignature | -Add signature | +Cloud | +Cloud |
| AddSignatureToastMessage | -Tap to add the signature | +Color | +Color |
| AddSquigglyToastMessage | -Drag over a text to add a squiggly underline | +ColorPicker | +Color picker |
| AddStampToastMessage | -Tap to add the stamp | +Comment | +Comment |
| AddStickyNoteToastMessage | -Tap to add a sticky note | +||
| Comments | +Comments | ||
| AddStrikeoutToastMessage | -Drag over a text to strike it through | +ContinuousPage | +Continuous page |
| AddUnderlineToastMessage | -Drag over a text to underline it | +Copy | +Copy |
| Apply | -Apply | +Create | +Create |
| Annotations | -Annotations | +CreateSignature | +Create Signature |
| Arrow | -Arrow | +CreateStamps | +Create Stamps |
| Border | -Border | +||
| CurrentPage | +Current page | ||
| Circle | -Circle | +CustomStamps | +Custom Stamps |
| Cloud | -Cloud | +CustomText | +Custom text |
| ColorPicker | -Color picker | +Delete | +Delete |
| Comment | -Comment | +DocumentLoadFailed | +Failed to load the PDF document. |
| ContinuousPage | -Continuous page | +Drag and drop an image here | +Drag and drop an image here |
| CreateStamps | -Create Stamps | +DragAndDropImage | +Drag and drop an image here. |
| Delete | -Delete | +Draw | +Draw |
| DragAndDropImage | -Drag and drop an image here. | +Draw your signature | +Draw your signature |
| DrawArrowToastMessage | @@ -359,14 +315,46 @@ The following table contains the default name and value details used in the SfPdDrawSquareToastMessage | Drag to draw a square | |
| Edit | +Edit | +||
| EditYourComment | +Edit comment | +||
| Enter | +Enter | +||
| EnterPassword | +Enter Password | +||
| EraseInkToastMessage | Drag over an ink to erase it | ||
| Error | +Error | +||
| EvenPagesOnly | +Even pages only | +||
| Fill | Fill | ||
| FillColor | +Fill color | +||
| FillOpacity | +Fill opacity | +||
| FitToPage | Fit to Page | @@ -376,6 +364,14 @@ The following table contains the default name and value details used in the SfPdFit to Width | |
| Font | +Font | +||
| FontColor | +Font color | +||
| FontSize | Font size | Text… | |
| GoToPage | +Go to Page | +||
| GuestUser | +Guest User | +||
| Help | Help | ||
| Highlight | +Highlight | +||
| Ink | Ink | Ink eraser | |
| Insert | +Insert | +||
| InvalidPageNumber | Invalid page number | ||
| InvalidPasswordError | +Can't open an encrypted document. The password is invalid. | +||
| Key | Key | Line | |
| MarkForRedaction | +Mark for Redaction | +||
| MarkPageRange | +Mark page range | +||
| MatchCase | Match Case | ||
| MoreItems | +More items | +||
| NewParagraph | New Paragraph | NextPage | Next page | +
| NoBookmark | +No Bookmark | +||
| NoBookmarks | No Bookmarks | @@ -431,6 +463,10 @@ The following table contains the default name and value details used in the SfPdNoColor | No Color |
| NoComments | +No Comments available | +||
| NoMatchesWereFoundToastMessage | No matches were found. | @@ -440,14 +476,50 @@ The following table contains the default name and value details used in the SfPdNo more matches were found | |
| NoOutline | +No outline | +||
| Note | Note | ||
| OddPagesOnly | +Odd pages only | +||
| of | +of | +||
| Ok | +OK | +||
| Opacity | Opacity | ||
| Open | +OPEN | +||
| OpenWebPage | +Open Web Page | +||
| Outline | +Outline | +||
| OutlineColor | +Outline color | +||
| Page | +Page | +||
| PageByPage | Page by page | Enter page number here | |
| PageRange | +Page range | +||
| Paragraph | Paragraph | ||
| PasswordErrorHint | +Check your password | +||
| Polygon | Polygon | ||
| Redo | -Redo | +Properties | +Properties |
| Rename | -Rename | +RedactArea | +Redact area | +
| RedactedAreaFillColor | +Redacted area fill color | +||
| RedactionMarkAppearance | +Redaction mark appearance | +||
| RedactionProperties | +Redaction properties | ||
| Search | -Search | +RedactPages | +Redact pages |
| Shapes | -Shapes | +RedactText | +Redact text |
| Square | -Square | +Redo | +Redo |
| Stamps | -Stamps | +Rename | +Rename |
| StickyNote | -Sticky note | +RepeatOverlayText | +Repeat overlay text |
| StickyNoteIcons | -Sticky note icons | +Replies | +Replies |
| Stroke | -Stroke | +RequestPassword | +This PDF file is protected. Please enter the password to open it. | +
| Save | +Save | ||
| SaveSignature | Save Signature | ||
| Search | +Search | +||
| SearchPlaceholder | Find in the document | ||
| Text | -Text | +Shapes | +Shapes |
| TextMarkups | -Text markups | +Signature | +Signature |
| Thickness | -Thickness | +||
| SpecificPage | +Specific page | ||
| TypeSignaturePlaceHolder | -Type your signature | +Square | +Square |
| Undo | -Undo | +Squiggly | +Squiggly |
| UploadImage | -Upload an image | +Stamps | +Stamps |
| ZoomMode | -Zoom mode | +StandardStamps | +Standard Stamps |
| CustomStamps | -Custom Stamps | +StickyNote | +Sticky note |
| Enter | -Enter | +StickyNoteEditorPlaceholder | +Write Your Note... |
| StandardStamps | -Standard Stamps | +StickyNoteIcons | +Sticky note icons |
| AddBookmark | -Add bookmark | +Strikeout | +Strikeout |
| Back | -Back | +Stroke | +Stroke |
| MoreItems | -More items | +Text | +Text |
| TextColor | @@ -592,27 +692,60 @@ The following table contains the default name and value details used in the SfPdText fill color | ||
| Bookmarks | -Bookmarks | +TextMarkups | +Text markups |
| of | -of | +Thickness | +Thickness |
| GoToPage | -Go to Page | +Type | +Type |
| CreateSignature | -Create Signature | +Type your signature | +Type your signature | +
| TypeSignaturePlaceHolder | +Type your signature | +||
| Underline | +Underline | +||
| Undo | +Undo | +||
| Upload | +Upload | +||
| Upload an image | +Upload an image | +||
| UploadImage | +Upload an image | +||
| UseOverlayText | +Use overlay text | ||
| XFAFormNotSupportedMessage | This PDF cannot be loaded because it contains an XFA form. | ||
| InvalidPasswordError | -Can't open an encrypted document. The password is invalid. | +ZoomMode | +Zoom mode |
-
);
-
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
-
);
-
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
-
);
-
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
-
-
-
- );
-}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
-
-
- );
-}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
-
-
- );
-}
+- Add a redaction:
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
-
-
- );
-}
+```ts
+viewerRef.current.annotation.addPageRedactions([1,3]);
+```
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
-
-
- );
-}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
-
-
- );
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
+
+
+
+ );
+}
+{% endraw %}
{% endhighlight %}
{% endtabs %}
-[View Sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
-
-## Redaction property panel
+**Expected result**: The viewer loads the sample PDF. Clicking the buttons will add, delete, edit, mark pages for redaction, or permanently apply redactions.
-The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel.
+## Troubleshooting
-
+- No viewer assets / missing icons: confirm [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) is reachable from the browser and points to a compatible ej2-pdfviewer-lib version.
+- `viewerRef.current` is undefined: ensure the `PdfViewerComponent` renders before calling APIs (wrap API calls in event handlers or use `useEffect` after mount).
+- Applying redactions fails: ensure the viewer has finished loading the document and that any server-side redaction workflows (if used) are available. Always backup originals before applying.
-## See also
+## Related topics
-* [Overview of Redaction](./overview)
-* [Redaction UI interactions](./ui-interaction)
-* [Redaction Toolbar](./toolbar)
-* [Reaction in Mobile view](./mobile-view)
-* [Search Text and Redact](./search-redact)
\ No newline at end of file
+- [Overview of Redaction](./overview)
+- [Redaction UI interactions](./ui-interactions)
+- [Redaction Toolbar](./toolbar)
+- [Redaction in Mobile view](./mobile-view)
+- [Search Text and Redact](./search-redact)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/apply-redaction-context-menu.png b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/apply-redaction-context-menu.png
new file mode 100644
index 0000000000..e904915ce4
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/Redaction/redaction-annotations-images/apply-redaction-context-menu.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/search-redact.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/search-redact.md
index 4cfd7e47f9..7d783b8b9e 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/search-redact.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/search-redact.md
@@ -8,163 +8,157 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Search text and redact in React PdfViewer
+# How to search text and redact in React PDF Viewer
-You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result.
+## Overview
-N> Prerequisites: Add the PdfViewer control to your React application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content.
+This guide shows how to search for text inside a loaded PDF and add redaction annotations programmatically for every match. You will add two buttons: one to locate and mark matches with redaction annotations, and another to apply redactions (permanently remove the marked content).
-## Steps to add Redaction annotations on search Text Bounds
+**Outcome:** After following the steps you will have a working React sample where clicking "Search & Mark for Redaction" marks found text with redaction annotations and clicking "Apply Redaction" permanently removes the marked content.
-**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample.
+## Prerequisites
+- EJ2 React PDF Viewer added to your project. See [getting started guide](../getting-started).
+- The viewer's redaction feature enabled in your product version.
-**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds.
+## Steps
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
+1. Create a React component that includes the `PdfViewerComponent` and Inject required services.
+2. Add two buttons: one to perform the text search and add redaction annotations, and one to apply redactions.
+3. Use the viewer's [`findTextAsync()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textsearch#findtextasync) to get match bounds (returned in points), convert those bounds to pixels, and add a `Redaction` annotation for each bound using [`addAnnotation('Redaction', ...)`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#addannotation).
+4. Call [`redact()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#redact) to apply redactions permanently when the user confirms.
+
+## Complete runnable example
-import * as ReactDOM from 'react-dom/client';
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
import * as React from 'react';
import './index.css';
import {
- PdfViewerComponent,
- Toolbar,
- Magnification,
- Navigation,
- LinkAnnotation,
- BookmarkView,
- ThumbnailView,
- Print,
- TextSelection,
- Annotation,
- TextSearch,
- FormFields,
- FormDesigner,
- Inject
+ PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, ToolbarItem
} from '@syncfusion/ej2-react-pdfviewer';
-export function App() {
- const viewerRef = React.useRef(null);
-
- const toolbarSettings = {
- toolbarItems: [
- 'OpenOption',
- 'UndoRedoTool',
- 'PageNavigationTool',
- 'MagnificationTool',
- 'PanTool',
- 'SelectionTool',
- 'CommentTool',
- 'SubmitForm',
- 'AnnotationEditTool',
- 'RedactionEditTool',
- 'FormDesignerEditTool',
- 'SearchOption',
- 'PrintOption',
- 'DownloadOption'
- ]
- };
-
- const px = (pt) => (pt * 96) / 72; // points -> pixels
-
- const searchTextAndRedact = async () => {
- if (!viewerRef.current) return;
- const term = 'syncfusion';
- const results = await viewerRef.current.textSearchModule.findTextAsync(term, false);
- if (!results || results.length === 0) {
- console.warn('No matches found.');
- return;
- }
-
- for (const pageResult of results) {
- if (!pageResult?.bounds?.length) continue;
- const pageNumber = (pageResult.pageIndex ?? -1) + 1; // 1-based
- if (pageNumber < 1) continue;
-
- for (const bound of pageResult.bounds) {
- viewerRef.current.annotation.addAnnotation('Redaction', {
- bound: {
- x: px(bound.x),
- y: px(bound.y),
- width: px(bound.width),
- height: px(bound.height)
- },
- pageNumber,
- overlayText: 'Confidential',
- fillColor: '#00FF40FF',
- fontColor: '#333333',
- fontSize: 12,
- fontFamily: 'Arial',
- markerFillColor: '#FF0000',
- markerBorderColor: '#000000'
- });
- }
- }
- };
-
- const applyRedaction = () => {
- if (!viewerRef.current) return;
- viewerRef.current.annotation.redact();
- };
-
- return (
-
+
+
+
+
+
+
+
+
-
-
-
- );
+export default function App() {
+ const viewerRef = React.useRef(null);
+ const toolbarSettings = {
+ toolbarItems: [
+ 'OpenOption',
+ 'UndoRedoTool',
+ 'PageNavigationTool',
+ 'MagnificationTool',
+ 'PanTool',
+ 'SelectionTool',
+ 'CommentTool',
+ 'SubmitForm',
+ 'AnnotationEditTool',
+ 'RedactionEditTool',
+ 'FormDesignerEditTool',
+ 'SearchOption',
+ 'PrintOption',
+ 'DownloadOption'
+ ] as ToolbarItem[]
+ };
+ const px = (pt: number): number => (pt * 96) / 72;
+
+ const searchTextAndRedact = async () => {
+ if (!viewerRef.current || !viewerRef.current.textSearchModule) return;
+ const term = 'syncfusion'; // change to the term you want to redact
+ const results = await viewerRef.current.textSearchModule.findTextAsync(term, false);
+ if (!results || results.length === 0) {
+ console.warn('No matches found.');
+ return;
+ }
+
+ for (const pageResult of results) {
+ if (!pageResult?.bounds?.length) continue;
+ const pageNumber = (pageResult.pageIndex ?? -1) + 1; // convert 0-based to 1-based
+ if (pageNumber < 1) continue;
+
+ for (const bound of pageResult.bounds) {
+ viewerRef.current.annotation.addAnnotation('Redaction', {
+ bound: {
+ x: px(bound.x),
+ y: px(bound.y),
+ width: px(bound.width),
+ height: px(bound.height)
+ },
+ pageNumber,
+ overlayText: 'Confidential',
+ fillColor: '#000000',
+ fontColor: '#FFFFFF',
+ fontSize: 12,
+ fontFamily: 'Arial'
+ });
+ }
+ }
+ };
+
+ const applyRedaction = () => {
+ if (!viewerRef.current || !viewerRef.current.annotation) return;
+ // This permanently removes content marked by redaction annotations
+ viewerRef.current.annotation.redact();
+ };
+
+ return (
+
-
-
-
-
-
+
+
+
+ );
}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
+
+
+
+
+
-
);
-
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
-### Display the redaction toolbar using the toolbar icon
+**Expected result**: the primary toolbar contains the Redaction icon. Clicking it opens the redaction toolbar.
-When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar.
+### Toggle redaction toolbar
-
+- Toggle the redaction toolbar using the primary toolbar icon.
-### Display the redaction toolbar programmatically
+ - When `RedactionEditTool` is included, the viewer shows a redaction icon. Clicking it toggles the redaction toolbar without additional code.
-You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`.
+- Show or hide the redaction toolbar programmatically.
-The following example demonstrates toggling the redaction toolbar programmatically:
+ - Use the viewer reference and call [`toolbar.showRedactionToolbar(false)`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showredactiontoolbar) to hide the redaction toolbar:
{% tabs %}
-{% highlight js tabtitle="index.js" %}
-
-import * as ReactDOM from 'react-dom/client';
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
import * as React from 'react';
-import './index.css';
-import {
- PdfViewerComponent,
- Toolbar,
- Magnification,
- Navigation,
- LinkAnnotation,
- BookmarkView,
- ThumbnailView,
- Print,
- TextSelection,
- Annotation,
- TextSearch,
- FormFields,
- FormDesigner,
- Inject
-} from '@syncfusion/ej2-react-pdfviewer';
-
-export function App() {
- const viewerRef = React.useRef(null);
-
- const toolbarSettings = {
- toolbarItems: [
- 'OpenOption',
- 'UndoRedoTool',
- 'PageNavigationTool',
- 'MagnificationTool',
- 'PanTool',
- 'SelectionTool',
- 'CommentTool',
- 'SubmitForm',
- 'AnnotationEditTool',
- 'RedactionEditTool',
- 'FormDesignerEditTool',
- 'SearchOption',
- 'PrintOption',
- 'DownloadOption'
- ]
- };
-
- const showRedactionToolbar = () => {
- if (!viewerRef.current) return;
- viewerRef.current.toolbar.showRedactionToolbar(true);
- };
-
- const hideRedactionToolbar = () => {
- if (!viewerRef.current) return;
- viewerRef.current.toolbar.showRedactionToolbar(false);
- };
-
- return (
-
-
-
-
- );
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, Inject, ToolbarItem } from '@syncfusion/ej2-react-pdfviewer';
+
+export default function App() {
+ const viewerRef = React.useRef(null);
+
+ const toolbarSettings = {
+ toolbarItems: [
+ 'OpenOption', 'UndoRedoTool', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'CommentTool', 'SubmitForm', 'AnnotationEditTool', 'RedactionEditTool', 'FormDesignerEditTool', 'SearchOption', 'PrintOption', 'DownloadOption'
+ ] as ToolbarItem[]
+ };
+
+ const showRedactionToolbar = () => viewerRef.current && viewerRef.current.toolbar.showRedactionToolbar(true);
+ const hideRedactionToolbar = () => viewerRef.current && viewerRef.current.toolbar.showRedactionToolbar(false);
+
+ return (
+
-
-
-
-
+
+
+
+ );
}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
+
+
+
+
+
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+
+
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+
+
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+
+
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+
+
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+
+
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Default;
+
+const root = createRoot(document.getElementById('sample'));
+root.render(
+
+
+ { viewer = scope; }}
+ id="container"
+ documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+ resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
+ style={{ height: '640px' }}
+ >
+
+
+
-
);
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation, TextSelection } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+
+
+
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render(
+
+
+
+
+
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(
+ {/* Render the PDF Viewer */}
+
+
+
+
+
+
);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(
+ {/* Render the PDF Viewer */}
+
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(
+ {/* Render the PDF Viewer */}
+
+
+
+ element in either the `index.TSX` or `index.JSX` file: **serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**.
+
+[View the sample in Stack blitz](https://stackblitz.com/edit/react-zmbkebwq?file=index.js)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md
new file mode 100644
index 0000000000..728a549a34
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Getting started with React PDF Viewer in Gatsby | Syncfusion
+description: How to integrate the Syncfusion React PDF Viewer into a Gatsby site (quickstart, how-to, reference, explanation).
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Getting started with the React PDF Viewer in Gatsby
+
+How to integrate the Syncfusion React PDF Viewer into a Gatsby site. Use the Quickstart below to get a working viewer, then consult the How-to and Reference sections for configuration details (WASM, static assets, and SSR notes).
+
+## Quickstart for Gatsby
+
+#### Create or open your Gatsby site:
+
+```bash
+# create a new Gatsby site (or use an existing one)
+gatsby new my-gatsby-site
+cd my-gatsby-site
+npm install
+```
+
+#### Install the PDF Viewer package:
+
+```bash
+npm install @syncfusion/ej2-react-pdfviewer --save
+```
+
+#### Optional — host runtime resources locally or use the CDN
+
+If you want to host the viewer runtime and WASM locally, copy the runtime files into Gatsby's `static` directory so they are served at the root URL (`/`). The example component below uses the CDN `resourceUrl` for a quick demo; hosting locally is recommended for production.
+
+Optional local copy (Unix/macOS / Git Bash / WSL):
+
+```bash
+cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib static/ej2-pdfviewer-lib
+# copy a sample PDF to static/assets (create folder if needed)
+mkdir -p static/assets && cp ./path/to/sample.pdf static/assets/sample.pdf
+```
+
+- Add viewer CSS imports to `src/components/layout.css` (recommended for Gatsby component-scoped styling):
+
+Create `src/components/layout.css` and add the imports below (relative path to `node_modules` used from `src/components`):
+
+```css
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+```
+
+Then import the stylesheet in `gatsby-browser.js` at your project root so it is included in the client bundle:
+
+```js
+// gatsby-browser.js
+import './src/components/layout.css';
+```
+
+- Use a client-only approach (Gatsby is server-side rendered). A simple and reliable pattern is to render the viewer after mount with a mounted flag. Create `src/components/pdfviewer.js` with the component below (the example also shows where to register a Syncfusion license if you have one):
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+// src/components/pdfviewer.js
+import React, { useEffect, useState } from 'react';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ BookmarkView, ThumbnailView, Print, TextSelection, TextSearch
+ , FormFields, FormDesigner, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function PdfViewer() {
+ const [isClient, setIsClient] = useState(false);
+
+ useEffect(() => setIsClient(true), []);
+
+ if (!isClient) return null; // prevent SSR crash (window not defined)
+
+ return (
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+#### Run the Gatsby dev server:
+
+```bash
+npm run develop
+```
+
+## See also
+
+- [Getting started overview](../getting-started-overview)
+- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started)
+- [Getting started with Syncfusion React PDF Viewer in Remix](./remix)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/nextjs-getting-started.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md
similarity index 57%
rename from Document-Processing/PDF/PDF-Viewer/react/nextjs-getting-started.md
rename to Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md
index 4dbafe7720..ce069bee8f 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/nextjs-getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md
@@ -1,16 +1,16 @@
---
layout: post
title: React getting started with Next.js | Syncfusion
-description: Check out and learn here all about how to use the Syncfusion React UI components in the Next.js project.
+description: Check out and learn here all about how to use the Syncfusion React PDF Viewer in the Next.js project.
control: PDF Viewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Creating a Next.js Application Using Syncfusion® React Components
+# Creating a Next.js application using Syncfusion React PDF Viewer
-This section provides a step-by-step guide for setting up a Next.js application and integrating the Syncfusion® React PDF Viewer component.
+This guide shows how to set up a Next.js application and integrate the Syncfusion® React PDF Viewer component.
## What is Next.js?
@@ -22,7 +22,9 @@ Before getting started with the Next.js application, ensure the following prereq
* [Node.js 18.17](https://nodejs.org/en) or later.
-* The application is compatible with macOS, Windows, and Linux operating systems.
+ * The application is compatible with macOS, Windows, and Linux operating systems.
+
+* See the [System requirements](../../../../System-Requirements) for detailed platform requirements.
## Create a Next.js application
@@ -41,52 +43,49 @@ yarn create next-app
{% endhighlight %}
{% endtabs %}
-Using one of the above commands will lead you to set up additional configurations for the project as below:
-
-1.Define the project name: Users can specify the name of the project directly. Let's specify the name of the project as `ej2-nextjs-pdfviewer`.
+Using one of the above commands will prompt for project configuration options.
+- Define the project name. For example: `ej2-next-js-pdfviewer`.
{% tabs %}
{% highlight bash tabtitle="CMD" %}
-√ What is your project named? » ej2-nextjs-pdfviewer
+√ What is your project named? » ej2-next-js-pdfviewer
{% endhighlight %}
{% endtabs %}
-2.Select the required packages.
-
+- Select the required packages.
{% tabs %}
{% highlight bash tabtitle="CMD" %}
-√ What is your project named? ... ej2-nextjs-pdfviewer
+√ What is your project named? ... ej2-next-js-pdfviewer
√ Would you like to use TypeScript? ... No / `Yes`
√ Would you like to use ESLint? ... No / `Yes`
√ Would you like to use Tailwind CSS? ... `No` / Yes
√ Would you like to use `src/` directory? ... No / `Yes`
√ Would you like to use App Router? (recommended) ... No / `Yes`
√ Would you like to customize the default import alias? ... `No`/ Yes
-Creating a new Next.js app in D:\ej2-nextjs-pdfviewer.
+Creating a new Next.js app in D:\ej2-next-js-pdfviewer.
{% endhighlight %}
{% endtabs %}
-3.Once complete the above mentioned steps to create `ej2-nextjs-pdfviewer`, navigate to the directory using the below command:
-
+- After the project is created, navigate to the project directory:
{% tabs %}
{% highlight bash tabtitle="CMD" %}
-cd ej2-nextjs-pdfviewer
+cd ej2-next-js-pdfviewer
{% endhighlight %}
{% endtabs %}
-The application is ready to run with default settings. Now, let's add Syncfusion® components to the project.
+The application is ready to run with default settings. Next, add Syncfusion® components to the project.
## Install Syncfusion® React packages
-Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package.
+Syncfusion® React packages are available on npm. Install the package for the component required by the project.
-Here, the [React PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) is used as an example. To install the React PDF Viewer component in the project, use the following command:
+This guide uses the [React PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) component as an example. Install it with:
{% tabs %}
{% highlight bash tabtitle="NPM" %}
@@ -103,13 +102,17 @@ yarn add @syncfusion/ej2-react-pdfviewer
## Import Syncfusion® CSS styles
-Syncfusion® React components come with [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/), which are available in the installed packages. It’s easy to adapt the Syncfusion® React components to match the style of your application by referring to one of the built-in themes.
+Syncfusion® React components include built-in themes. Import the PDF Viewer theme and base styles to match the look and feel of the application.
-Import the `Material` theme into the **src/app/globals.css** file and removed the existing styles in that file, as shown below:
+Where to add the imports:
+
+- App Router: put these in `src/app/globals.css`
+- Pages Router: put them in `pages/_app.js` or its imported global CSS
{% tabs %}
{% highlight css tabtitle="globals.css" %}
+/* PDF Viewer theme and base styles */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@@ -122,13 +125,13 @@ Import the `Material` theme into the **src/app/globals.css** file and removed th
{% endhighlight %}
{% endtabs %}
-> To know more about built-in themes and CSS reference for individual components, refer to the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/) section.
+N> To learn more about built-in themes and CSS references for individual components, see the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation.
-## Add Syncfusion® React component
+## Add the Syncfusion® React component
-Follow the below steps to add the React PDF Viewer componente to the Next.js project:
+Follow these steps to add the React PDF Viewer component to the Next.js project:
-1.Define the PDF Viewer component in the **src/app/page.tsx** file, as shown below:
+- Define the PDF Viewer component in `src/app/page.tsx`, as shown below:
{% tabs %}
{% highlight ts tabtitle="page.tsx" %}
@@ -143,7 +146,7 @@ return (
{/* Inject the required services */}
[View the Next.js PDF Viewer sample in the GitHub repository](https://github.com/SyncfusionExamples/syncfusion-react-pdfviewer-component-in-nextjs)
+
+**See also**
-> [View the NEXT.js PDF Viewer sample in the GitHub repository](https://github.com/SyncfusionExamples/syncfusion-react-pdfviewer-component-in-nextjs).
+- [Adding Next.js Configuration for deployment](../getting-started#adding-nextjs-configuration)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md
new file mode 100644
index 0000000000..f396fc6ba9
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md
@@ -0,0 +1,80 @@
+---
+layout: post
+title: Getting started with Syncfusion React PDF Viewer in Preact Application
+description: Provides a short overview and essential task links for integrating and using the Syncfusion React PDF Viewer within Preact.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+
+# Getting started with Syncfusion React PDF Viewer in Preact
+
+This page is a short, task-focused overview for integrating the Syncfusion React PDF Viewer into a [Preact](https://preactjs.com/) app. Use the short sections below for quick tasks; a minimal full example is provided as an optional reference.
+
+[Preact](https://preactjs.com/) is a lightweight React alternative that preserves the React-compatible API. Use Preact when you want smaller bundle size while reusing the React viewer components.
+## Setup
+
+How‑to: Create a Preact project and install the Syncfusion package.
+
+```bash
+npm init preact # choose JavaScript or TypeScript as needed
+cd my-project
+npm install @syncfusion/ej2-react-pdfviewer --save
+# or
+yarn init preact
+yarn add @syncfusion/ej2-react-pdfviewer
+```
+
+## Import CSS
+
+How‑to: Add the required Syncfusion theme and component CSS to `src/style.css`.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-react-pdfviewer/styles/material3.css';
+```
+
+Note: keep import order consistent with component dependencies.
+
+## Add component
+
+How‑to: Render a minimal `PdfViewerComponent` in `src/index.js`.
+
+Prefer a single `Add component` example using the CDN `resourceUrl` (no server required). Replace the CDN version as needed.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import { render } from 'preact';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+import './style.css';
+
+function App() {
+ return (
+
+
+ );
+}
+
+render(
+
+);
+```
+
+## Client-only rendering
+
+The PDF Viewer depends on browser APIs and WebAssembly; avoid server-side rendering it. Render it only after the component mounts. Create a client-only component in the folder that matches your project layout.
+
+create-react-router (`app/` tree)
+
+ - `app/components/PdfViewerClient.ts`
+
+Vite / plain React (`src/` tree)
+
+ - `src/components/PdfViewerClient.ts`
+
+Example component (works in either location):
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+// components/PdfViewerClient.ts
+import React, { useEffect, useState } from 'react';
+import {
+ PdfViewerComponent,
+ Toolbar,
+ Magnification,
+ Navigation,
+ Annotation,
+ Inject,
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function PdfViewerClient() {
+ const [mounted, setMounted] = useState(false);
+ useEffect(() => setMounted(true), []);
+
+ if (!mounted) return null;
+
+ return (
+
+
+ );
+}
+```
+
+## Run the app
+
+```bash
+npm run dev
+# open the URL printed by the dev server (usually http://localhost:3000)
+```
+
+## See also
+
+- [Getting started overview](../getting-started-overview)
+- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md
new file mode 100644
index 0000000000..702efb8582
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: Syncfusion React PDF Viewer in SharePoint
+description: Quickstart to integrate the Syncfusion React PDF Viewer into an SPFx React web part (standalone/client-side rendering).
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# React PDF Viewer in SharePoint Framework
+
+## Overview
+
+This quickstart shows how to integrate the Syncfusion React PDF Viewer into a SharePoint Framework (SPFx) React web part. It covers creating the web part, installing the `@syncfusion/ej2-react-pdfviewer` package, adding the required CSS, supplying runtime assets either from the Syncfusion CDN or from Site Assets, and a minimal TypeScript component that renders a PDF in the browser (client‑only).
+
+## Prerequisites
+
+- A SharePoint development environment and an Office 365 tenant (for testing/deployment).
+- Node.js compatible with your SPFx version (check SPFx docs).
+- Yeoman and the SPFx generator: `npm install -g yo @microsoft/generator-sharepoint`.
+- Gulp: `npm install -g gulp-cli`.
+
+## Create an SPFx React web part
+
+Run the SharePoint generator and choose the React framework (TypeScript recommended). Example answers shown in parentheses.
+
+```bash
+yo @microsoft/sharepoint
+# Solution name: pdfviewer-spfx
+# Target: SharePoint Online only (latest)
+# Component type: WebPart
+# Web part name: PdfViewer
+# Framework: React
+```
+
+This creates the usual SPFx project tree (no `src/`/`app/` ambiguity): React components live under `src/webparts/pdfViewer/components` and global web part assets are under `src/webparts/pdfViewer/assets`.
+
+## Install Syncfusion package
+
+In the project root run:
+
+```bash
+npm install @syncfusion/ej2-react-pdfviewer --save
+```
+
+Keep the package version aligned with the runtime assets you host.
+
+## Add Syncfusion CSS
+
+Import the Syncfusion theme CSS so the viewer styles are bundled with the web part. In your React component file (TypeScript example below) import the CSS from node_modules:
+
+```ts
+import '@syncfusion/ej2-base/styles/material.css';
+import '@syncfusion/ej2-buttons/styles/material.css';
+import '@syncfusion/ej2-dropdowns/styles/material.css';
+import '@syncfusion/ej2-inputs/styles/material.css';
+import '@syncfusion/ej2-navigations/styles/material.css';
+import '@syncfusion/ej2-popups/styles/material.css';
+import '@syncfusion/ej2-splitbuttons/styles/material.css';
+import '@syncfusion/ej2-pdfviewer/styles/material.css';
+```
+
+If your SPFx build configuration forbids direct CSS imports from node_modules, add these `@import` lines to your component CSS (for example `PdfViewer.module.css`) using the appropriate path or deploy the CSS from a CDN.
+
+## Provide runtime assets and choose rendering mode
+
+SPFx web parts run in the browser (client-side). That makes standalone (client-only) rendering the natural default: the PDF Viewer runs in the user's browser and uses `resourceUrl` to load runtime assets (pdfium.js, pdfium.wasm and supporting files).
+
+Two deployment options for those runtime assets:
+
+- Recommended — Use Syncfusion CDN (fast, simplest): set `resourceUrl` to the CDN folder that matches your package version, e.g.:
+
+```ts
+resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
+```
+
+- Self‑hosted — Upload `ej2-pdfviewer-lib` to a public CDN or to a SharePoint library (for example, Site Assets). If you upload to Site Assets, use the full site URL for `resourceUrl`, for example:
+
+```ts
+resourceUrl = "https://contoso.sharepoint.com/sites/YourSite/SiteAssets/ej2-pdfviewer-lib";
+```
+
+Notes on rendering modes and SPFx:
+
+- Standalone (client-only): fully supported in SPFx — set `resourceUrl` as above and the viewer will render entirely in the browser. This is the recommended, simplest approach for SPFx web parts.
+- Server‑backed (optional): to use server-side rendering, set `serviceUrl` (pointing to your PDF rendering web service) instead of `resourceUrl`.
+
+Important: ensure any host you use serves `.wasm` files with Content-Type `application/wasm` and that tenant/content security policies permit fetching assets from the chosen host.
+
+## Add the React component (TypeScript)
+
+Create `PdfViewerClient.tsx` under `src/webparts/pdfViewer/components` and paste the minimal example below. This component is client-only and safe for SPFx (which runs in the browser):
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+// src/webparts/pdfViewer/components/PdfViewerClient.tsx
+import * as React from 'react';
+import {
+ PdfViewerComponent,
+ Toolbar,
+ Magnification,
+ Navigation,
+ Annotation,
+ Inject,
+} from '@syncfusion/ej2-react-pdfviewer';
+import '@syncfusion/ej2-pdfviewer/styles/material.css';
+
+export const PdfViewerClient: React.FC = () => {
+ const [mounted, setMounted] = React.useState(false);
+ React.useEffect(() => setMounted(true), []);
+ if (!mounted) return null;
+
+ return (
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+This is highly recommended when working with legal documents, tax forms, interactive applications, or PDFs containing thousands of annotations.
+
+### 5. Reduce Unnecessary Background System Processes
+
+For the best large‑PDF experience:
+
+- Close unused applications
+- Avoid multiple heavy tasks running in parallel
+- Minimize other browser tabs
+- Avoid opening multiple large PDFs simultaneously
+
+This ensures the viewer receives enough system resources.
+
+## See Also
+
+- [Load PDF (GitHub Sample)](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Save%20and%20Load)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-password-pdf.md b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-password-pdf.md
new file mode 100644
index 0000000000..67586ad109
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-password-pdf.md
@@ -0,0 +1,83 @@
+---
+layout: post
+title: Load Password Protected PDFs in React PDF Viewer | Syncfusion
+description: Learn how to open password-protected PDF files in the Syncfusion React PDF Viewer by providing the password in the documentPath object.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load a Password-Protected PDF
+
+This article explains how to open password-protected PDF files in the Syncfusion React PDF Viewer. The viewer supports both user‑interactive loading (Open File dialog) and programmatic loading using APIs.
+
+## 1. Opening a Password-Protected PDF Using the **Open File** Dialog
+
+When the user selects a password-protected PDF using the built‑in **Open File** option:
+
+- The viewer detects that the document is encrypted
+
+
+
+- A **password input popup** is automatically displayed
+
+
+
+- The user enters the password
+
+- The document is decrypted and loaded
+
+No additional configuration or code is required.
+
+This approach works for all password-protected PDFs opened locally by the user.
+
+## 2. Opening a Password-Protected PDF Programmatically
+
+If you load a password-protected PDF from a URL or through custom logic, the viewer provides two behaviors depending on how the file is loaded.
+
+### 2.1 Load the Document Using `viewer.load(url, password)`
+
+You can directly pass the password in the [`load`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#load) method:
+
+```js
+viewer.load(
+ 'https://your-api/password-protected.pdf',
+ 'Password'
+);
+```
+
+- If the password is correct → the PDF loads immediately
+- If the password is incorrect → the viewer displays the incorrect password popup
+- If no password is provided → the password popup is shown automatically
+
+This is useful when the password is known beforehand.
+
+### 2.2 Loading a Password-Protected Document's URL Using `documentPath`
+
+If the [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) points to a password-protected PDF:
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+The viewer will:
+
+- Detect encryption
+- Show the **password popup automatically**
+- Allow the user to enter the correct password
+- Then load the PDF
+
+
+
+N> No password should be passed inside `documentPath`.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md b/Document-Processing/PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md
new file mode 100644
index 0000000000..913babcf99
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md
@@ -0,0 +1,254 @@
+---
+layout: post
+title: Preprocess PDF Document in React PDF Viewer | Syncfusion
+description: Learn how to preprocess PDF documents using Syncfusion PDF Library before displaying them in the React PDF Viewer.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Pre-process PDF Document Before Displaying in React PDF Viewer
+
+This section explains why preprocessing is useful, what operations you can perform using the Syncfusion PDF Library, and how to load the processed document in the React PDF Viewer.
+
+## Why Preprocessing Is Needed
+Preprocessing a PDF before sending it to the viewer helps you:
+- Reduce file size and improve load time
+- Merge multiple documents into one
+- Extract only required pages for faster loading
+- Flatten form fields and annotations for performance & security
+- Apply branding elements such as watermarks or stamps
+
+These enhancements ensure a better, faster, and more controlled viewing experience.
+
+## Merge PDF Documents
+### UI-Level Merging
+You can visually merge pages in the **Organize Pages** UI inside the PDF Viewer. Users can import another PDF, insert its pages into the current file, reorder pages, or delete unwanted pages.
+
+
+
+### Programmatically Merge PDFs
+Using the Syncfusion PDF Library, you can merge documents before loading them into the viewer.
+```js
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+const document1 = await PdfDocument.load('file1.pdf');
+const document2 = await PdfDocument.load('file2.pdf');
+
+document1.merge(document2);
+const mergedBytes = await document1.save();
+```
+You can then load the merged PDF into the viewer using Blob or Base64.
+
+## Extract Pages
+### UI-Level Extraction
+Using the Viewer’s [**Organize Pages**](../organize-pages/overview) window, users can select and extract required pages and download them separately.
+
+
+
+### Programmatically Extract Pages
+```js
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+const original = await PdfDocument.load('sample.pdf');
+const extracted = original.extractPages([2,3,4]);
+const resultBytes = await extracted.save();
+```
+This reduces file size and improves performance when loading large documents.
+
+## Flatten Form Fields & Annotations
+### Why Flattening Helps
+- Prevents users from editing form fields
+- Improves rendering speed
+- Ensures consistent appearance across all devices
+
+### Programmatic Flattening
+```js
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+const doc = await PdfDocument.load('form.pdf');
+doc.formFields.flattenAllFields();
+doc.annotations.flattenAllAnnotations();
+const bytes = await doc.save();
+```
+
+### Flatten on Load
+
+Use the following code-snippet, when you want uploaded PDFs to be flattened before they are loaded into the viewer.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import * as React from 'react';
+import {
+ PdfViewerComponent,
+ Toolbar,
+ Annotation,
+ FormFields,
+ Inject,
+ Magnification,
+} from '@syncfusion/ej2-react-pdfviewer';
+import { PdfDocument, _encode } from '@syncfusion/ej2-pdf';
+import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
+function Default() {
+ let viewer;
+ const openFile = {
+ prefixIcon: 'e-icons e-folder',
+ id: 'openPdf',
+ tooltipText: 'Open File',
+ align: 'left',
+ };
+ const extensions = '.pdf';
+ const toolbarSettings = {
+ showTooltip: true,
+ toolbarItems: [
+ openFile,
+ 'PageNavigationTool',
+ 'MagnificationTool',
+ 'PanTool',
+ 'SelectionTool',
+ 'SearchOption',
+ 'PrintOption',
+ 'UndoRedoTool',
+ 'AnnotationEditTool',
+ 'FormDesignerEditTool',
+ 'CommentTool',
+ 'SubmitForm',
+ 'DownloadOption',
+ ],
+ };
+
+ function toolbarClick(args) {
+ if (args.item && args.item.id === 'openPdf') {
+ document
+ .getElementsByClassName('e-file-select-wrap')[0]
+ .querySelector('button')
+ .click();
+ }
+ }
+ function onSelect(args) {
+ let validFiles = args.filesData;
+ if (validFiles.length === 0) {
+ args.cancel = true;
+ return;
+ }
+ if (!extensions.includes(validFiles[0].type)) {
+ args.cancel = true;
+ return;
+ }
+
+ let file = validFiles[0].rawFile;
+ let reader = new FileReader();
+
+ reader.addEventListener('load', () => {
+ let base64Data = reader.result;
+ let pdf = base64Data.split(',')[1];
+ const document = new PdfDocument(pdf);
+
+ //flatten the annotation and form fields
+ document.flatten = true;
+
+ var flattened = document.save();
+ //laod the flattened PDF in PDF Viewer
+ viewer.load(flattened, null);
+ });
+
+ reader.readAsDataURL(file);
+ }
+ return (
+ = useRef(null);
+
+ const blobToBase64 = async (blob: Blob): Promise => {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onerror = () => reject(reader.error);
+ reader.onload = () => {
+ const dataUrl: string = reader.result as string;
+ const data: string = dataUrl.split(',')[1];
+ resolve(data);
+ };
+ reader.readAsDataURL(blob);
+ });
+ }
+
+ const flattenPDF = (data: string) => {
+ let document: PdfDocument = new PdfDocument(data);
+ document.flatten = true
+ document.save(`${viewerRef.current.fileName}.pdf`);
+ document.destroy();
+ }
+
+ const handleFlattening = async () => {
+ const blob: Blob = await viewerRef.current.saveAsBlob();
+ const data: string = await blobToBase64(blob);
+ flattenPDF(data);
+ }
+
+ const onDownloadStart = async (args: DownloadStartEventArgs) => {
+ args.cancel = true;
+ handleFlattening();
+ };
+
+ return (
+ = useRef(null);
+
+ const handleFillForm = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+
+ // Retrieve form fields from the viewer
+ const fields =
+ (viewer.retrieveFormFields && viewer.retrieveFormFields()) ||
+ viewer.formFieldCollections ||
+ [];
+ // Find by name or fallback to the first field
+ const field = fields.find((f) => f && f.name === 'name') || fields[0];
+
+ if (field) {
+ field.value = 'John Doe';
+ field.tooltip = 'First';
+ // Push changes to viewer
+ viewer.updateFormFieldsValue(field);
+ } else {
+ console.warn('No form fields available to update.');
+ }
+ };
+
+ return (
+ = useRef(null);
+
+ const handleImportJson = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+ // NOTE:
+ // The first parameter can be:
+ // - a file path/url (in server mode),
+ // - or a base64 encoded File/Blob stream from an in real apps.
+ // Replace 'File' with your actual file or path as per your integration.
+ viewer.importFormFields('File', FormFieldDataFormat.Json);
+ };
+
+ return (
+ = useRef(null);
+
+ // Runs after the document is loaded into the viewer
+ const handleDocumentLoad = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+
+ // Add a required Email field
+ viewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Email is required',
+ } as TextFieldSettings);
+
+ // Add a required Phone field
+ viewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Phone',
+ bounds: { X: 146, Y: 300, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Phone number is required',
+ } as TextFieldSettings);
+ };
+
+ // Validates only the added fields on form submit/validate trigger
+ const handleValidateFormFields = () => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+
+ const fields = viewer.retrieveFormFields ? viewer.retrieveFormFields() : [];
+
+ fields.forEach((field) => {
+ if ((field.name === 'Email' || field.name === 'Phone') && !field.value) {
+ alert(field.name + ' field cannot be empty.');
+ }
+ });
+ };
+
+ return (
+ = useRef(null);
{% endhighlight %}
-{% endtabs %}
-### Export as XFDF
-The following example exports form field data as XFDF.
+### 3. Export as FDF
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-import * as ReactDOM from 'react-dom/client';
-import React, { useRef } from 'react';
-import './index.css';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer';
-
-function App() {
- const viewerRef = useRef(null);
-
- const onExportXfdf = () => {
- // Data must be the desired path or file name for the exported document.
- viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
- };
-
- return (
- = useRef(null);
+
+ const onExportFdf = () => {
+ viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Fdf);
+ };
+
+ const onExportXfdf = () => {
+ viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
+ };
+
+ const onExportJson = () => {
+ viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Json);
+ };
+
+ const onExportObject = async () => {
+ const data = await viewerRef.current?.exportFormFieldsAsObject();
+ console.log('Exported object:', data);
+ };
+
+ return (
+ = useRef(null);
+
+ // The file for importing should be accessible at the given path or as a base 64 string depending on your integration
+ const importFdf = () => viewerRef.current?.importFormFields('File', FormFieldDataFormat.Fdf);
+ const importXfdf = () => viewerRef.current?.importFormFields('File', FormFieldDataFormat.Xfdf);
+ const importJson = () => viewerRef.current?.importFormFields('File', FormFieldDataFormat.Json);
+ // Import from a JavaScript object (fieldName: value)
+ const importFromObject = () => {
+ const formDataObject = {
+ 'fullname': 'Jane Doe',
+ 'email': 'jane.doe@example.com',
+ 'agreeTerms': 'yes'
+ };
+ viewerRef.current?.importFormFields(JSON.stringify(formDataObject), FormFieldDataFormat.Json);
+ };
+
+ return (
+ = useRef(null);
+
+ const sendToServer = async (formData: any) => {
+ // Adjust URL to your server endpoint
+ const res = await fetch('/api/submit-form', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(formData)
+ });
+ if (!res.ok) {
+ throw new Error(`Server error ${res.status}`);
+ }
+ };
+
+ const handleSubmit = async () => {
+ try {
+ // exportFormFields returns a Promise resolving to form data object
+ const formData = await viewerRef.current.exportFormFieldsAsObject();
+ await sendToServer(formData);
+ console.log('Form data submitted successfully.');
+ } catch (err) {
+ console.error(err);
+ console.log('Submission failed: ' + (err as Error).message);
+ }
+ };
+
+ return (
+
@@ -173,11 +173,11 @@ $env:NODE_OPTIONS = "--openssl-legacy-provider"
Output will be appears as follows.
{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/pdfviewer/react/base-cs1/app/index.jsx %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/pdfviewer/react/base-cs1/app/app.jsx %}
{% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/pdfviewer/react/base-cs1/app/index.tsx %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/pdfviewer/react/base-cs1/app/app.tsx %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
{% include code-snippet/pdfviewer/react/base-cs1/index.html %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
index 2bda29aead..6a570dc4e0 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
@@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Getting started in Standalone PDF Viewer control in React
+# Getting started with standalone React PDF Viewer component
-This section explains the steps required to create a simple Standalone React PDF Viewer and demonstrates the basic usage of the PDF Viewer control in a React application.
+This section explains the steps to create a standalone React PDF Viewer and demonstrates basic usage of the PDF Viewer component in a React application.
## Prerequisites
@@ -20,9 +20,9 @@ To get started with Syncfusion® React UI co
## Setup for Local Development
-To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production.
+To set up a React application, use Vite (for example, `npm create vite@latest`), which provides a fast development environment, smaller bundle sizes, and optimized production builds compared to tools such as `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/).
-> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
+N> To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
To create a new React application, run the following command.
@@ -69,7 +69,7 @@ N> The following changes apply to React version 18 and above.
## Adding PDF Viewer component and the CSS reference
-* Add an HTML div element to act as the PDF Viewer element `public/index.html` using the following code.
+* Add an HTML div element to act as the PDF Viewer element `index.html` using the following code.
```
@@ -84,6 +84,7 @@ N> The following changes apply to React version 18 and above.
@@ -102,7 +103,7 @@ N> The following changes apply to React version 18 and above.
@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
```
-* Add the React PDF Viewer as shown below in `src/index.js` when using JavaScript (JSX). If you're using TypeScript (TSX), add it in `src/index.tsx` to render the PDF Viewer component.
+* Add the React PDF Viewer as shown below in `src/index.js` when using JavaScript (JSX). If you're using TypeScript (TSX), add it in `src/app.tsx` to render the PDF Viewer component.
{% tabs %}
@@ -224,8 +225,7 @@ N> When running the sample, if you encounter the **ERR_OSSL_EVP_UNSUPPORTED erro
$env:NODE_OPTIONS = "--openssl-legacy-provider"
```
-
-Output will be appears as follows.
+Output appears as follows.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -276,8 +276,10 @@ return (
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+Add a page that uses the component at `src/pages/index.js`:
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+// src/pages/index.js
+import React from "react";
+import PdfViewer from "../components/pdfviewer";
+export default function PdfViewerPage() {
+ return (
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+Routing / usage examples:
+
+create-react-router (`app/routes/home.ts` or `app/routes/index.ts`):
+
+```ts
+import PdfViewerClient from '../components/PdfViewerClient';
+
+export default function Home() {
+ return
+
+
+
+ );
+};
+
+export default PdfViewerClient;
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Use the component in the web part
+
+Open the web part main React file (for example `src/webparts/pdfViewer/components/PdfViewer.tsx` created by the generator) and render `PdfViewerClient`:
+
+```ts
+import * as React from 'react';
+import PdfViewerClient from './PdfViewerClient';
+
+export default function PdfViewer(): JSX.Element {
+ return (
+
+
+ );
+}
+```
+
+## Test and package
+
+Run the local workbench for development:
+
+```bash
+gulp serve
+# open the local workbench or use SharePoint Online workbench for hosted assets
+```
+
+To package for deployment (when using self‑hosted assets make sure they are uploaded to your CDN or Site Assets before installing the package):
+
+```bash
+gulp bundle --ship
+gulp package-solution --ship
+```
+
+## See also
+
+- [Getting started overview](../getting-started-overview)
+- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started)
+- [Getting started with Syncfusion React PDF Viewer in Preact](./nextjs-getting-started)
+- [Getting started with Syncfusion React PDF Viewer in Remix](./nextjs-getting-started)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-large-pdf.md b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-large-pdf.md
new file mode 100644
index 0000000000..d4671fcfdb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-large-pdf.md
@@ -0,0 +1,179 @@
+---
+layout: post
+title: Document Handling in React Pdfviewer component | Syncfusion
+description: This page helps you to learn about how to Open PDF from URL, Base64, Blob, Stream, Cloud storage in Syncfusion React Pdfviewer component.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load Large PDF Files in React PDF Viewer
+
+This article explains how to efficiently load and view large PDF files using the Syncfusion React PDF Viewer. It includes recommended best practices and performance tips for documents ranging from **50 MB to 2 GB**.
+
+## Why Large PDFs Need Special Handling
+
+Large PDF files often contain thousands of embedded objects such as images, compressed streams, digital signatures, form fields, annotations, vector graphics, and complex page structures. Rendering such heavy documents requires more processing time and memory.
+
+The **Syncfusion PDF Viewer is fully optimized for these heavy workloads**, and it delivers excellent performance even when working with very large files.
+
+### Viewer Capability Highlights
+- **Smooth performance for PDFs up to 1 GB**
+- **Supports viewing files up to ~2 GB**
+- **1 GB PDFs typically load within 5–6 seconds**
+- **Optimized incremental page loading** for faster interaction
+
+Performance may vary if the user’s system is heavily loaded or low on available RAM. In such cases, enabling the recommended optimizations below ensures maximum performance.
+
+## Best Practices for Loading Large PDFs
+
+### 1. Load PDFs Using Blob (Recommended)
+
+Blob loading provides the fastest and most efficient performance for large PDFs.
+
+#### Why Blob Loading Is Better
+
+When a large PDF (for example, 1 GB) is loaded directly via `documentPath` (URL):
+
+- The browser must **download the full document first**
+- Only after the full download completes, the viewer starts parsing and rendering
+- This causes delay for large files
+
+But when the PDF is fetched as a **Blob**:
+
+- The file is downloaded first in an optimized stream
+- A Blob URL is created and passed to the viewer
+- The viewer can begin rendering faster
+- Improves load time, memory usage, and overall responsiveness
+
+#### Example: Load a PDF as Blob
+```js
+fetch('https://your-api/large-file.pdf')
+ .then(response => response.blob())
+ .then(blob => {
+ const blobUrl = URL.createObjectURL(blob);
+ viewer.load(blobUrl, null);
+ })
+ .catch(error => console.error('Error loading PDF:', error));
+```
+
+Blob loading is highly recommended for all PDFs above **200 MB**, especially when working with 500 MB – 1 GB files.
+
+### 2. Viewer Performance Range
+
+The Syncfusion PDF Viewer is optimized to handle:
+
+- **Up to 1 GB** → very smooth
+- **Up to ~2 GB**
+
+This suits enterprise workflows involving large engineering drawings, client records, scanned books, and multi‑page financial reports.
+
+### 3. Minimize Injected Modules
+
+The PDF Viewer internally uses background workers for text processing, thumbnail generation, image rendering, and metadata extraction. Disabling modules that are not needed helps reduce background activity and improves performance.
+
+#### 3.1 Text Search & Text Selection
+
+Modules:
+- [`Text Search`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/text-search)
+- [`Text Selection`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/text-selection)
+
+These features require **continuous background text extraction and indexing**.
+
+For large PDFs:
+
+- Text extraction runs longer
+- Consumes additional CPU and memory
+- Increases initial load time
+
+If these features are not required in your application:
+
+- Disable them to reduce background tasks
+- Improve page rendering speed
+- Provide a smoother experience for large documents
+
+#### 3.2 Thumbnail View & Organize Pages
+
+Modules:
+- [`Organize Pages`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/organize-pages/overview)
+- [`Thumbnail View`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/interactive-pdf-navigation/page-thumbnail)
+
+These rely on **background thumbnail rendering**, where the viewer renders small preview images of every page.
+For PDFs with hundreds or thousands of pages, this becomes heavy.
+
+If thumbnails or page reordering are not essential:
+
+- Disable these modules
+- Prevent background thumbnail rendering
+- Reduce memory usage
+- Improve navigation responsiveness
+
+#### Example (remove unnecessary modules)
+```js
+
+
+ );
+}
+export default Default;
+
+const root = createRoot(document.getElementById('sample'));
+root.render(
+ {
+ viewer = scope;
+ }}
+ id="container"
+ documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+ resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
+ enableAnnotation={true}
+ enableFormFields={true}
+ toolbarSettings={toolbarSettings}
+ toolbarClick={toolbarClick}
+ style={{ height: '640px' }}
+ >
+
+
+
+
+ {/* Render the PDF Viewer */}
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(
+
+ );
+}
+
+// Render like your previous example (ensure an element with id="sample" exists in index.html)
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(
+ Status: {ready ? 'Document loaded' : 'Loading…'}
+
+ {ready && ( + <> +
+
+ + {ready && ( + <> +
File: {docInfo.name || '(unknown)'}
+ Pages: {docInfo.pageCount != null ? docInfo.pageCount : '(unknown)'}
+ Author: {docInfo.author || '(n/a)'}
+ Title: {docInfo.title || '(n/a)'}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
## See also
-* [Toolbar items](./toolbar)
-* [Feature Modules](./feature-module)
\ No newline at end of file
+- [Toolbar items](./toolbar)
+- [Feature Modules](./feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/events.md b/Document-Processing/PDF/PDF-Viewer/react/events.md
index a50101a043..9c29ec9233 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/events.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/events.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Events in React PDF Viewer
-The PDF Viewer component triggers events for creation, page navigation, document life cycle, context menu interactions, comments, bookmarks, download and export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. Use these events to integrate custom logic into application workflows.
+The PDF Viewer component triggers events for component creation, page navigation, document lifecycle, context menu interactions, comments, bookmarks, download/export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. These events enable integration of custom logic into application workflows.
The following table lists commonly used events supported by the PDF Viewer component:
@@ -70,14 +70,14 @@ Note: For annotation and signature events, see the dedicated Annotations Events
## bookmarkClick
-The [bookmarkClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#bookmarkclickevent) event triggers when a bookmark item is clicked in the bookmark panel.
+The [bookmarkClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#bookmarkclickevent) event triggers when a bookmark item is clicked in the bookmark panel.
-- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkClickEventArgs/).
+- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkClickEventArgs).
Example:
{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -108,14 +108,14 @@ root.render(
- { pdfviewer = scope; }}
- id="container"
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
- enableFormDesigner={false}
- style={{ 'height': '640px' }}>
-
-
- );
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
@@ -104,14 +112,8 @@ export function App() {
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
style={{ height: '680px' }}
// Example: default custom data for all new Textbox fields added from the toolbar
- textFieldSettings={{
- name: 'Textbox',
- customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' }
- }}
- checkBoxFieldSettings ={{
- name: 'Checkbox',
- customData: { consentType: 'marketing', defaultChecked: false }
- }}
+ textFieldSettings={defaultTextFieldSettings}
+ checkBoxFieldSettings={defaultCheckBoxFieldSettings}
>
= useRef(null);
+
+ const blobToBase64 = async (blob: Blob): Promise => {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onerror = () => reject(reader.error);
+ reader.onload = () => {
+ const dataUrl: string = reader.result as string;
+ const data: string = dataUrl.split(',')[1];
+ resolve(data);
+ };
+ reader.readAsDataURL(blob);
+ });
+ }
+
+ const flattenFormFields = (data: string) => {
+ let document: PdfDocument = new PdfDocument(data);
+ for (let index = 0; index < document.form.count; index++) {
+ let field: PdfField = document.form.fieldAt(index);
+ field.flatten = true;
+ }
+ // If both annotations and form fields needs to be flattened, use
+ // document.flatten = true
+ document.save(`${viewerRef.current.fileName}.pdf`);
+ document.destroy();
+ }
+
+ const handleFlattening = async () => {
+ const blob: Blob = await viewerRef.current.saveAsBlob();
+ const data: string = await blobToBase64(blob);
+ flattenFormFields(data);
+ }
+
+ const onDownloadStart = async (args: DownloadStartEventArgs) => {
+ args.cancel = true;
+ handleFlattening();
+ };
+
+ const onPageOrganizerSaveAs = async (args: PageOrganizerSaveAsEventArgs) => {
+ args.cancel = true;
+ handleFlattening()
+ };
+
+ return (
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Expected result
+
+- The downloaded or "Save As" PDF will contain the visible appearance of filled form fields as static, non-editable content.
+- Form fields will no longer be interactive or editable in common PDF readers.
+
+## Troubleshooting
+
+- If viewerRef is null, ensure `ref={viewerRef}` is present and the component has mounted before invoking [`saveAsBlob()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#saveasblob).
+- Missing [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl): If viewer resources are not reachable, set [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) to the correct CDN or local path for the ej2-pdfviewer-lib.
+
+## Related topics
+
+- [`downloadStart` event reference](../events#downloadstart)
+- [`pageOrganizerSaveAs` event reference](../events#pageorganizersaveas)
+- [Form Designer in React PDF Viewer](./form-designer)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/react/forms/form-constrain.md
index 17b41c83c0..dcccab715d 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-constrain.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-constrain.md
@@ -34,7 +34,7 @@ The following flags are supported in the PDF Viewer:
## Key Actions
### Make Fields Read Only
-Use the **isReadOnly** property to prevent users from modifying a form field through the UI. This is useful for displaying pre filled or calculated values that should not be changed by the user.
+Use the **isReadOnly** property to prevent users from modifying a form field through the UI. This is useful for displaying pre-filled or calculated values that should not be changed by the user.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -334,26 +334,26 @@ root.render(
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
-
-
-
- );
-}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
-
-
- );
-}
+Each toolbar item in form designer toolbar allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document.
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
-
- );
+export default function App() {
+ const viewerRef: RefObject
-
-
-
-
-
-
-
-
+
+ );
}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
+
+
+
+
+
+
+
+
-
- );
+export default function App() {
+ const viewerRef: RefObject
-
-
-
-
-
-
-
-
+
+ );
}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
+
+
+
+
+
+
+
+
-
-
-
- );
+export default function App() {
+ const viewerRef: RefObject
+
+
+
+ );
}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
- );
-}
+Initialize the viewer with a `ref` so you can call export methods.
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
- );
-}
+Use [`exportFormFields(destination?, FormFieldDataFormat.Fdf)`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#exportformfields) to download an FDF file.
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
- );
-}
+Use [`FormFieldDataFormat.Xfdf`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formfielddataformat) to export XFDF.
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
- );
+{% highlight js %}
+{% raw %}
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
+ PageOrganizer, Inject, Print, FormFieldDataFormat
+} from '@syncfusion/ej2-react-pdfviewer';
+import { RefObject, useRef } from 'react';
+
+export default function App() {
+ const viewerRef: RefObject
+
+
+
+ );
}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
+
+
+
+
+
+
-
-
-
-
- );
-}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
-
-
-
- );
+export default function App() {
+ const viewerRef: RefObject
+
+
+
+ );
}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
+
+
+
+
+
+
+
-
-
-
-
- );
-}
-
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Troubleshooting
+
+- **No form values returned**: Ensure the PDF has interactive fields and the viewer has finished loading before calling [`exportFormFieldsAsObject()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#exportformfieldsasobject).
+- **CORS errors**: Enable CORS on the server or serve both frontend and back end from the same origin during testing.
+- **Server rejects payload**: Confirm the server expects `application/json` and validates shape of the object.
+- **WASM or resource errors**: Ensure [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) points to the correct Syncfusion PDF Viewer library files.
+
+## Use cases
+
+- Enable remote verification and approval workflows by sending submitted form data to a back end service for review and sign-off.
+- Store submitted form responses in a database to persist user inputs for auditing, reporting, or later retrieval.
+- Trigger workflow automation and downstream processing by sending form data to business systems or server less functions.
+- Merge submitted values into a final flattened PDF on the server to produce a non-editable document that combines the form data with the original PDF.
+
+## Related topics
+
+- [`exportFormFieldsAsObject` API reference](./form-fields-api#exportformfieldsasobject)
+- [Export form data as object](./import-export-form-fields/export-form-fields#export-as-object)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md
new file mode 100644
index 0000000000..b7977b80fd
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md
@@ -0,0 +1,33 @@
+---
+layout: post
+title: Getting started with Syncfusion React PDF Viewer component| Syncfusion
+description: Learn here all about Getting started with Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more details.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+
+# Getting started with Syncfusion React PDF Viewer
+
+
+If you're starting to integrate the Syncfusion® React PDF Viewer into your application, choose the path below that matches how you'll run the viewer in your app (client-only or via a web service) and follow that tutorial.
+
+- **Standalone** — Run the viewer entirely in the browser (no server rendering). This mode delivers excellent runtime performance and responsiveness because rendering and interaction happen on the client; it is ideal for quick prototyping and simple integrations.
+- **Server‑backed** — Use a web service to perform PDF Viewer operations (rendering, document processing, or streaming). Choose this path when you need server-side processing for PDF Viewer operations.
+
+This page is intentionally a short introduction — choose a path and follow its tutorial:
+
+- [Standalone tutorial](./getting-started)
+- [Server‑backed tutorial](./getting-started-with-server-backed)
+
+**Related**
+
+- [Annotations](./annotation/text-markup-annotation)
+- [Form designer](./forms/form-designer)
+- [Organize pages](./organize-pages/overview)
+
+**See also**
+
+- [PDF Viewer overview](../overview)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md
index d9fd3e5f42..394e12cde3 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md
@@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Getting Started with server-backed PDF Viewer component
+# Getting started with server-backed React PDF Viewer component
-This section explains the steps required to create a simple React PDF Viewer and demonstrates the basic usage of the PDF Viewer control in a React application.
+This section explains the steps to create a server-backed React PDF Viewer and demonstrates basic usage of the PDF Viewer component in a React application.
## Prerequisites
@@ -20,30 +20,29 @@ To get started with Syncfusion® React UI co
## Setup for Local Development
-1. Create a new React app [`create-react-app`](https://github.com/facebook/create-react-app) and install it using the following command.
+To set up a React application, use Vite (for example, `npm create vite@latest`), which provides a fast development environment, smaller bundle sizes, and optimized production builds compared to traditional tools such as `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/).
-```bash
-npm install -g create-react-app
-```
-
-2. To setup basic `React` sample use following commands.
-
-{% tabs %}
-{% highlight js tabtitle="JSX" %}
+N> To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
-create-react-app quickstart
-cd quickstart
-npm install
+To create a new React application, run the following command.
-{% endhighlight %}
-{% highlight js tabtitle="TSX" %}
+```bash
+npm create vite@latest my-app
+```
+To set-up a React application in TypeScript environment, run the following command.
-npx create-react-app quickstart --template cra-template-typescript
-cd quickstart
-npm install
+```bash
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+npm run dev
+```
+To set-up a React application in JavaScript environment, run the following command.
-{% endhighlight %}
-{% endtabs %}
+```bash
+npm create vite@latest my-app -- --template react
+cd my-app
+npm run dev
+```
## Adding Syncfusion® packages
@@ -54,11 +53,11 @@ To install PDF Viewer component, use the following command
npm install @syncfusion/ej2-react-pdfviewer --save
```
-N> The following changes applies to React version 18 and above.
+N> The following changes apply to React version 18 and above.
## Adding PDF Viewer component and the CSS reference
-* Add an HTML div element to act as the PDF Viewer element `public/index.html` using the following code.
+* Add an HTML div element to act as the PDF Viewer element `index.html` using the following code.
```
@@ -73,6 +72,7 @@ N> The following changes applies to React version 18 and above.
+
+
+ Loading....
+
Loading....
+
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render( = useRef(null);
+
+ // Method to handle the text search highlight event
+ const handleTextSearchHighlight = (args: TextSearchHighlightEventArgs) => {
+ console.log(args); // Logs Highlighted text search details
+
+ const pageNumber: number = args.pageNumber;
+ const bounds: RectangleBoundsModel = args.bounds;
+
+ // Add a rectangle annotation on the highlighted text
+ viewerRef.current.annotationModule.addAnnotation('Rectangle', {
+ pageNumber: pageNumber,
+ offset: { x: bounds.left, y: bounds.top },
+ width: bounds.width,
+ height: bounds.height,
+ } as RectangleSettings);
+ };
+
+ // Method to initiate a text search for the term 'PDF'
+ const handleSearch = () => {
+ viewerRef.current.textSearchModule.searchText('PDF', false);
+ };
+
+ // Method to go to the next instance of the search term
+ const handleSearchNext = () => {
+ viewerRef.current.textSearchModule.searchNext();
+ };
+
+ // Method to cancel the current text search operation
+ const handleCancelSearch = () => {
+ viewerRef.current.textSearchModule.cancelTextSearch();
+ };
+
return (
- = useRef(null);
+
+ // Method to handle the text search highlight event
+ const handleTextSearchHighlight = (args: TextSearchHighlightEventArgs) => {
+ console.log(args); // Logs Highlighted text search details
+
+ const pageNumber: number = args.pageNumber;
+ const bounds: IAnnotationPoint[] = [{
+ x: args.bounds.x ?? args.bounds.left,
+ y: args.bounds.y ?? args.bounds.top,
+ height: args.bounds.height,
+ width: args.bounds.width
+ }];
+
+ // Add a highlight annotation on the highlighted text
+ viewerRef.current.annotation.addAnnotation('Highlight', {
+ pageNumber: pageNumber,
+ bounds: bounds
+ } as HighlightSettings);
+ };
+
+ // Method to initiate a text search for the term 'PDF'
+ const handleSearch = () => {
+ viewerRef.current.textSearchModule.searchText('PDF', false);
+ };
+
+ // Method to go to the next instance of the search term
+ const handleSearchNext = () => {
+ viewerRef.current.textSearchModule.searchNext();
+ };
+
+ // Method to cancel the current text search operation
+ const handleCancelSearch = () => {
+ viewerRef.current.textSearchModule.cancelTextSearch();
+ };
+ return (
+ { pdfviewer = scope; }}
- serviceUrl='https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+ serviceUrl='https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
pageOrganizerSettings={{ canInsert: false }}
style={{ height: '640px' }}
>
@@ -68,15 +71,17 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
root.render( {
+ console.log('Print action has started for file: ' + args.fileName);
+ }}
+ style={{ height: '100%' }}
+>
+
+{% endraw %}
+{% endhighlight %}
+
+### `printEnd`
+
+This event is emitted after the printing completes. Use to finalize analytics, clear temporary state, or notify users.
+
+Arguments - ([`PrintEndEventArgs`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/printendeventargs)):
+
+- `fileName` - The printed document name.
+
+**Minimal usage example:**
+
+{% highlight ts %}
+{% raw %}
+ {
+ console.log('Printed file name: ' + args.fileName);
+ }}
+ style={{ height: '100%' }}
+>
+
+{% endraw %}
+{% endhighlight %}
+
+## See also
+
+- [Overview](./overview)
+- [Print quality](./print-quality)
+- [Enable print rotation](./enable-print-rotation)
+- [Print modes](./print-modes)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/overview.md b/Document-Processing/PDF/PDF-Viewer/react/print/overview.md
new file mode 100644
index 0000000000..d46fdba0f4
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/print/overview.md
@@ -0,0 +1,120 @@
+---
+layout: post
+title: Print PDF in React PDF Viewer | Syncfusion
+description: Enable and customize printing, configure print events, cancel print, and monitor printing in the Syncfusion React PDF Viewer component.
+platform: document-processing
+control: Print
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Print PDF in React PDF Viewer
+
+The React PDF Viewer includes built-in printing via the toolbar and APIs so users can control how documents are printed and monitor the process.
+
+Select **Print** in the built-in toolbar to open the browser print dialog.
+
+
+
+## Enable or Disable Print in React PDF Viewer
+
+The Syncfusion React PDF Viewer component lets users print a loaded PDF document through the built-in toolbar or programmatic calls. Control whether printing is available by setting the [`enablePrint`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprint) property (`true` enables printing; `false` disables it).
+
+The following React examples render the PDF Viewer with printing disabled.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner,
+ FormFields, TextSelection, TextSearch, Print, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function App() {
+ return (
+ = useRef(null);
+ const printPdf = () => {
+ viewerRef.current.print.print();
+ }
+ return (
+
Loading....
+
-
- );
-}
+
-
-
-
-
-
-
-
-
-
+
+ );
}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+**Expected result:** Rectangle annotations are added at text search result locations, improving visibility for users navigating search matches.
+
+**Step 2b:** Set up the PDF Viewer component to add highlight annotations based on the bounds of highlighted search text in the PDF Viewer.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import { RefObject, useRef } from 'react';
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, TextSelection,
+ TextSearch, FormFields, FormDesigner, PageOrganizer, Print, Inject, TextSearchHighlightEventArgs,
+ HighlightSettings, IAnnotationPoint
+} from '@syncfusion/ej2-react-pdfviewer';
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
+
+
+
+
+
+
+
+
+
+
+ );
+}
{% endraw %}
{% endhighlight %}
{% endtabs %}
-Following these steps enables the PDF Viewer to add rectangle annotations at search result locations, improving the visibility of matches.
+**Expected result:** Highlight annotation is added at text search result locations, improving visibility for users navigating search matches.
-[View sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)
+[View sample the complete working sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-header-value.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-header-value.md
index a271af197d..c78eab1dec 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-header-value.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-header-value.md
@@ -9,9 +9,9 @@ documentation: ug
# Add header values in the React PDF Viewer
-Use the ajaxHeaders property in the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) to include custom headers with each AJAX request.
+Use the `ajaxHeaders` property inside the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/React/documentation/api/pdfviewer/#ajaxrequestsettings) to send custom HTTP headers with each request made by the viewer.
-Example: Add a custom Authorization header using ajaxRequestSettings
+Example: Add a custom Authorization header using `ajaxRequestSettings` in an React component
```ts
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-save-button.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-save-button.md
index 922cccb23c..7b0013af61 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-save-button.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-save-button.md
@@ -12,11 +12,11 @@ domainurl: ##DomainURL##
PDF Viewer supports customizing toolbar items, including adding, showing, hiding, enabling, and disabling items.
-- Save button: The Save button can be defined using [CustomToolbarItemModel](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/customToolbarItemModel/) and included alongside existing items via [ToolbarSettings](https://ej2.syncfusion.com//react/documentation/api/file-manager/toolbarSettings/). Handle the click action using [`toolbarclick`](https://ej2.syncfusion.com/react/documentation/api/file-manager/toolbarClickEventArgs/).
+* Save button: The Save button can be defined using [CustomToolbarItemModel](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/customToolbarItemModel/) and included alongside existing items via [ToolbarSettings](https://ej2.syncfusion.com//react/documentation/api/file-manager/toolbarSettings/). Handle the click action using [`toolbarclick`](https://ej2.syncfusion.com/react/documentation/api/file-manager/toolbarClickEventArgs/).
-- Show or hide: The Save button can be shown or hidden using [ToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/file-manager/toolbarSettings/). Predefined items are listed under [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/chart/toolbarItems/).
+* Show or hide: The Save button can be shown or hidden using [ToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/file-manager/toolbarSettings/). Predefined items are listed under [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/chart/toolbarItems/).
-- Enable or disable: The Save button can be enabled or disabled using [`enabletoolbaritem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/).
+* Enable or disable: The Save button can be enabled or disabled using [`enabletoolbaritem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/).
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -32,7 +32,8 @@ import { TextBox } from "@syncfusion/ej2-inputs";
export function App() {
-// Add OnCreateSearch outside the App function
+// Helper: Add OnCreateSearch outside the App function
+// The sample below uses an OnCreateSearch helper to add an icon; place it in module scope.
function OnCreateSearch() {
this.addIcon('prepend', 'e-icons e-search');
}
@@ -126,18 +127,18 @@ root.render(
+
+
+
+
+
+
+
+
+
-
);
-
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
);
-
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
);
-
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
- element in either the `index.TSX` or `index.JSX` file:
-**serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**.
-
-{% previewsample "/document-processing/code-snippet/pdfviewer/react/custom-context-menu" %}
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/Custom%20Context%20Menu)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-font-signature-field.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-font-signature-field.md
index 655842f4b7..ca74d80c10 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-font-signature-field.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-font-signature-field.md
@@ -10,13 +10,13 @@ domainurl: ##DomainURL##
# Change the font family for type signatures in React
-Change the font family for Type Signature and Initial fields by adding a stylesheet to load fonts and assigning them via the PDF Viewer settings. Include Google Font links in the HTML head to use those fonts.
+Change the font family in the type signature of the Syncfusion® PDF Viewer by adding a custom CSS stylesheet to the document and applying the desired font family to the type signature element. Include the Google Fonts link in the HTML head section to apply the font.
### Signature field property
The PDF Viewer supports changing fonts for Signature and Initial fields using the `typeSignatureFonts` and `typeInitialFonts` properties.
-**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample.
+**Step 1:** Follow the steps in the [Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide to create a simple PDF Viewer sample.
**Step 2:** Use the following code to apply custom fonts to the Signature field.
@@ -104,4 +104,4 @@ root.render( = {
+ page: {
+ height: '100vh',
+ display: 'grid',
+ gridTemplateRows: '56px 1fr',
+ background: '#fafafa'
+ },
+ header: {
+ display: 'flex',
+ alignItems: 'center',
+ padding: '0 16px',
+ background: '#fff',
+ borderBottom: '1px solid #e5e5e5'
+ },
+ grid: {
+ display: 'grid',
+ gridTemplateColumns: '280px 1fr',
+ gap: 16,
+ padding: 16,
+ minHeight: 0 // lets children use available height
+ },
+ sidebar: {
+ background: '#fff',
+ border: '1px solid #e5e5e5',
+ borderRadius: 8,
+ overflow: 'auto'
+ },
+ viewerArea: {
+ background: '#fff',
+ border: '1px solid #e5e5e5',
+ borderRadius: 8,
+ padding: 8,
+ display: 'grid',
+ gridTemplateRows: '1fr',
+ minHeight: 0 // critical so the viewer can grow/shrink
+ }
+};
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Use viewer inside Tab components
+
+The react PDF Viewer are also supported inside Syncfusion tab components.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import React, { useRef } from 'react';
+import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+const ViewerTabContent: React.FC = () => {
+ const viewerRef = useRef(null);
+ return (
+ (null);
+ const dialogRef = useRef(null);
+ const openDialog = () => {
+ dialogRef.current.show();
+ };
+ const closeDialog = () => {
+ dialogRef.current.hide();
+ };
+ const onDialogOpen = useCallback(() => {
+ setTimeout(() => {
+ window.dispatchEvent(new Event('resize'));
+ }, 0);
+ }, []);
+
+ return (
+ (null);
+ const onExpanded = useCallback((args: ExpandEventArgs) => {
+ setTimeout(() => {
+ window.dispatchEvent(new Event('resize'));
+ }, 0);
+ }, []);
+
+ // PDF viewer panel content
+ const pdfContent = () => (
+ ("ConnectionString");
-}
-```
+ 4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-5. Modify the `Load()` method to open it in the viewer using URL
+ ```csharp
+ private IConfiguration _configuration;
+ public readonly string _connectionString;
-```csharp
+ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
+ {
+ _hostingEnvironment = hostingEnvironment;
+ _cache = cache;
+ _configuration = configuration;
+ _connectionString = _configuration.GetValue("ConnectionString");
+ }
+ ```
-public IActionResult Load([FromBody] Dictionary jsonData)
-{
- // Initialize the PDF viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
+ 5. Modify the `Load()` method to open it in the viewer using URL
- if (jsonObject != null && jsonObject.ContainsKey("document"))
+ ```csharp
+
+ public IActionResult Load([FromBody] Dictionary jsonData)
{
- if (bool.Parse(jsonObject["isFileName"]))
+ // Initialize the PDF viewer object with memory cache object
+ PdfRenderer pdfviewer = new PdfRenderer(_cache);
+ MemoryStream stream = new MemoryStream();
+ object jsonResult = new object();
+
+ if (jsonObject != null && jsonObject.ContainsKey("document"))
{
- string documentPath = GetDocumentPath(jsonData["document"]);
- if (!string.IsNullOrEmpty(documentPath))
+ if (bool.Parse(jsonObject["isFileName"]))
{
- byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
- stream = new MemoryStream(bytes);
- }
- string documentName = jsonObject["document"];
+ string documentPath = GetDocumentPath(jsonData["document"]);
+ if (!string.IsNullOrEmpty(documentPath))
+ {
+ byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
+ stream = new MemoryStream(bytes);
+ }
+ string documentName = jsonObject["document"];
- string connectionString = _connectionString;
- System.Data.SqlClient.SqlConnection connection = new System.Data.SqlClient.SqlConnection(connectionString);
+ string connectionString = _connectionString;
+ System.Data.SqlClient.SqlConnection connection = new System.Data.SqlClient.SqlConnection(connectionString);
- //Searches for the PDF document from the database
- string query = "SELECT FileData FROM Table WHERE FileName = '" + documentName + "'";
- System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(query, connection);
- connection.Open();
+ //Searches for the PDF document from the database
+ string query = "SELECT FileData FROM Table WHERE FileName = '" + documentName + "'";
+ System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(query, connection);
+ connection.Open();
- using (SqlDataReader reader = command.ExecuteReader())
- {
- if (reader.Read())
+ using (SqlDataReader reader = command.ExecuteReader())
{
- byte[] byteArray = (byte[])reader["FileData"];
- stream = new MemoryStream(byteArray);
+ if (reader.Read())
+ {
+ byte[] byteArray = (byte[])reader["FileData"];
+ stream = new MemoryStream(byteArray);
+ }
}
}
+ else
+ {
+ byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
+ stream = new MemoryStream(bytes);
+ }
}
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
+ jsonResult = pdfviewer.Load(stream, jsonObject);
+ return Content(JsonConvert.SerializeObject(jsonResult));
}
- jsonResult = pdfviewer.Load(stream, jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
-}
-```
+ ```
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
+ 6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "ConnectionString": "Your connection string for SQL server"
-}
-```
+ ```json
+ {
+ "Logging": {
+ "LogLevel": {
+ "Default": "Information",
+ "Microsoft.AspNetCore": "Warning"
+ }
+ },
+ "AllowedHosts": "*",
+ "ConnectionString": "Your connection string for SQL server"
+ }
+ ```
+
+ N> Replace **Your Connection string from SQL server** with the actual connection string for your SQL Server database
+
+ N> The **System.Data.SqlClient** package must be installed in your application to use the previous code example. You need to modify the connectionString variable in the previous code example as per the connection string of your database.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
+
+### Open from Cloud Storage Services
+
+Each link goes to a provider page with simple step-by-step instructions, sample code, and any authentication notes.
+
+- [AWS S3](./open-pdf-file/from-amazon-s3)
+- [Azure Blob Storage](./open-pdf-file/from-azure-blob-storage)
+- [Google Cloud Storage](./open-pdf-file/from-google-cloud-storage)
+- [Google Drive](./open-pdf-file/from-google-drive)
+- [OneDrive](./open-pdf-file/from-one-drive)
+- [Dropbox](./open-pdf-file/from-dropbox-cloud-file-storage)
+- [Box](./open-pdf-file/from-box-cloud-file-storage)
+
+---
-N> Replace **Your Connection string from SQL server** with the actual connection string for your SQL Server database
+**See also**
-N> The **System.Data.SqlClient** package must be installed in your application to use the previous code example. You need to modify the connectionString variable in the previous code example as per the connection string of your database.
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
\ No newline at end of file
+- [Load documents dynamically in React PDF Viewer](./how-to/load-document)
+- [Load a PDF only after PDFium resources are ready](./how-to/load-document-after-resources-loaded)
+- [Saving PDF files](./save-pdf-files)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/copy-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/copy-pages.md
new file mode 100644
index 0000000000..4ef7a40711
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/copy-pages.md
@@ -0,0 +1,69 @@
+---
+layout: post
+title: Copy pages in Organize Pages in React PDF Viewer | Syncfusion
+description: Learn how to duplicate pages using the Organize Pages UI in the React PDF Viewer of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Copy Pages in React PDF Viewer
+
+## Overview
+
+This guide explains how to duplicate pages within the current PDF using the Organize Pages UI.
+
+**Outcome**: Copied pages are inserted adjacent to the selection and included in exported PDFs.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- PDF Viewer injected with `PageOrganizer` module
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer toolbar to open the Organize Pages dialog.
+
+2. Select pages to duplicate
+
+ - Click a single thumbnail or use Shift+click/Ctrl+click to select multiple pages.
+
+3. Duplicate selected pages
+
+ - Click the **Copy Pages** button in the Organize Pages toolbar; duplicated pages are inserted to the right of the selected thumbnails.
+
+4. Duplicate multiple pages at once
+
+ - When multiple thumbnails are selected, the Copy action duplicates every selected page in order.
+
+ 
+
+5. Undo or redo changes
+
+ - Use **Undo** (Ctrl+Z) or **Redo** to revert or reapply recent changes.
+
+ 
+
+6. Persist duplicated pages
+
+ - Click **Save** or **Save As** to include duplicated pages in the saved/downloaded PDF.
+
+## Expected result
+
+- Selected pages are duplicated and included in the saved PDF.
+
+## Enable or disable Copy Pages button
+
+To enable or disable the **Copy Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-copy-option) for the guidelines.
+
+## Troubleshooting
+
+- If duplicates are not created: verify that the changes are persisted using **Save**.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/events.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/events.md
index 66f1b55b60..7156544b53 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/events.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/events.md
@@ -10,19 +10,19 @@ domainurl: ##DomainURL##
# Organize Pages Events in PDF Viewer
-The PDF Viewer provides events to track and respond to actions within the page organizer, allowing for the customization of page manipulation features.
+The PDF Viewer exposes events for the page organizer to track and respond to page manipulation actions (for example: rotate, rearrange, insert, delete, and copy).
## pageOrganizerSaveAs
The `pageOrganizerSaveAs` event is triggered when a save action is performed in the page organizer.
-- Occurs when the **Save as** button in the page organizer toolbar is clicked after modifying the document structure.
+ - Fires when the **Save as** button in the page organizer toolbar is clicked after modifying the document structure.
The event arguments provide the necessary information about the save event:
-- `fileName`: The name of the currently loaded PDF document.
-- `downloadDocument`: A base64 string of the modified PDF document data.
-- `cancel`: A boolean that, when set to `true`, prevents the default save action from proceeding.
+ - `fileName`: The name of the currently loaded PDF document.
+ - `downloadDocument`: A base64-encoded string containing the modified PDF document.
+ - `cancel`: Boolean; set to `true` to prevent the default save action.
```typescript
import * as React from 'react';
@@ -82,15 +82,14 @@ root.render(
);
}
function extractPage(){
-// Get the PDF viewer instance
+ // Get the PDF viewer instance
var viewer = document.getElementById('container').ej2_instances[0];
//Extract Pages 1,2
const array = viewer.extractPages('1,2');
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/import-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/import-pages.md
new file mode 100644
index 0000000000..2834aaff43
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/import-pages.md
@@ -0,0 +1,62 @@
+---
+layout: post
+title: Import pages in Organize Pages in React PDF Viewer | Syncfusion
+description: How to import pages from another PDF into the current document using the Organize Pages UI in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Import pages using the Organize Pages tool
+
+## Overview
+
+This guide explains how to import pages from another PDF into the current document using the **Organize Pages** UI in the EJ2 React PDF Viewer.
+
+**Outcome**: Imported pages appear as thumbnails and are merged into the original document when saved or exported.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- PDF Viewer is injected with `PageOrganizer` service
+- [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) (standalone) or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) (server-backed) configured when required
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer navigation toolbar to open the Organize Pages dialog.
+
+2. Start import
+
+ - Click **Import Document** and choose a valid PDF file from your local file system.
+
+3. Place imported pages
+
+ - Imported pages appear as thumbnails. If a thumbnail is selected, the imported pages are inserted to the right of the selection; otherwise they are appended at the start of the document.
+
+ 
+
+4. Persist changes
+
+ - Click **Save** or **Save As** (or download) to persist the merged document.
+
+## Expected result
+
+- Imported pages display as a single thumbnail in Organize Pages and are merged into the original PDF when saved or exported.
+
+## Enable or disable Import Pages button
+
+To enable or disable the **Import Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-import-option) for the guidelines.
+
+## Troubleshooting
+
+- **Import fails**: Ensure the selected file is a valid PDF and the browser file picker is permitted.
+- **Imported pages not visible**: Confirm that the import is persisted using **Save** or **Save As**.
+- **Import option disabled**: Ensure [`pageOrganizerSettings.canImport`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#canimport) is set to `true` to enable import option.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/insert-blank-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/insert-blank-pages.md
new file mode 100644
index 0000000000..3b5ab21e79
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/insert-blank-pages.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: Insert blank pages in Organize Pages in React PDF Viewer | Syncfusion
+description: How to insert blank pages into a PDF using the Organize Pages UI in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Insert blank pages using the Organize Pages tool
+
+## Overview
+
+This guide describes inserting new blank pages into a PDF using the **Organize Pages** UI in the EJ2 React PDF Viewer.
+
+**Outcome**: A blank page is added at the chosen position and will appear in thumbnails and exports.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- `PageOrganizer` services injected into `PdfViewerComponent`
+- [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) for standalone mode or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) for server-backed mode configured as required
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer navigation toolbar to open the panel.
+
+2. Select insertion point
+
+ - Hover over the thumbnail before or after which you want the blank page added.
+
+3. Insert a blank page
+
+ - Click the **Insert Left** / **Insert Right** option and choose the position (Before / After). A new blank thumbnail appears in the sequence.
+
+ 
+
+4. Adjust and confirm
+
+ - Reposition or remove the inserted blank page if needed using drag-and-drop or delete options.
+
+5. Persist the change
+
+ - Click **Save** or **Save As** to include the blank page in the exported PDF.
+
+## Expected result
+
+- A blank page thumbnail appears at the chosen position and is present in any saved or downloaded PDF.
+
+## Enable or disable Insert Pages button
+
+To enable or disable the **Insert Pages** button in the page thumbnails, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-insert-option) for the guidelines
+
+## Troubleshooting
+
+- **Organize Pages button missing**: Verify `PageOrganizer` is included in `Inject` and `Toolbar` is enabled.
+- **Inserted page not saved**: Confirm [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) is configured for your selected processing mode.
+- **Insert options disabled**: Ensure [`pageOrganizerSettings.canInsert`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#caninsert) is set to `true` to enable insert option.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
+- [Remove pages in Organize Pages](./remove-pages)
+- [Reorder pages in Organize Pages](./remove-pages)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/mobile-view.md
index 5e7c4cfb68..675e92688d 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/mobile-view.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/mobile-view.md
@@ -10,15 +10,15 @@ domainurl: ##DomainURL##
# Organize Pages in Mobile PDF Viewer React
-The PDF Viewer offers a mobile-responsive layout for the `Organize Pages` feature, ensuring a seamless experience on smaller devices. When viewed on a mobile device, the toolbar and navigation elements adapt to the screen size, providing easy access to all page management tools.
+The PDF Viewer provides a mobile-responsive layout for the `Organize Pages` feature, optimized for touch interactions on small screens. The toolbar and navigation adapt to the device viewport so page-management controls remain accessible on phones and tablets.
-## Mobile-Friendly Toolbar
+## Mobile-friendly toolbar
-In the mobile view, the `Organize Pages` toolbar is displayed at the bottom of the screen for easy one-handed access. The toolbar includes the same set of tools as the desktop version, such as insert, delete, and rotate, but with a mobile-optimized layout.
+In mobile view the `Organize Pages` toolbar appears at the bottom of the screen for easier one-handed access. The toolbar exposes the same tools as the desktop layout (insert, delete, rotate, etc.) in a touch-optimized arrangement.
## Context Menu for Page Operations
-To perform actions on a page thumbnail, tap and hold on the thumbnail to open a context menu. This menu contains all the available page operations:
+To perform actions on a page thumbnail, tap and hold (long-press) the thumbnail to open a context menu. This menu contains the available page operations:
* **Rotate Clockwise**: Rotate the selected page 90 degrees clockwise.
* **Rotate Counter-Clockwise**: Rotate the selected page 90 degrees counter-clockwise.
@@ -28,10 +28,10 @@ To perform actions on a page thumbnail, tap and hold on the thumbnail to open a
* **Select All**: Select all pages in the document.
-
+
## Rearranging Pages on Mobile
-To rearrange pages, tap and hold a page thumbnail to select it, then drag it to the desired position. A blue line will indicate the drop location.
+To rearrange pages, tap and hold a thumbnail to select it, then drag it to the desired position; a blue line indicates the drop location. Supported gestures include `tap`, `long-press` (open context menu), and `drag` (reorder). The layout adapts to portrait and landscape orientations to preserve usability on different devices.
-By providing a mobile-friendly interface, the PDF Viewer ensures that users can efficiently manage their PDF documents from any device, anywhere.
\ No newline at end of file
+The mobile interface enables efficient page management on phones and tablets without sacrificing the functionality available in the desktop viewer.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/overview.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/overview.md
index d6cbef4831..9df143b705 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/overview.md
@@ -10,9 +10,9 @@ domainurl: ##DomainURL##
# Organize pages in React PDF Viewer
-The React PDF Viewer component provides an Organize Pages panel that helps you prepare documents before sharing them. Use it to tidy scanned files, move pages into the right order, and duplicate important content without leaving the viewer.
+The React PDF Viewer includes an Organize Pages panel for preparing documents before sharing. Use this panel to reorder pages, correct orientation, insert or remove pages, and duplicate content without leaving the viewer.
-To open the Organize Pages panel, load a document, ensure that the Organize Pages toolbar item is enabled, and choose **Organize Pages** from the left vertical toolbar. The document must allow page-level edits; otherwise, the toolbar item is hidden.
+To open the Organize Pages panel, load a document and choose **Organize Pages** from the left vertical toolbar (when enabled).
The Organize Pages panel supports the following actions:
@@ -27,13 +27,10 @@ The Organize Pages panel supports the following actions:
After completing the changes, apply them by selecting **Save** to overwrite the current document or **Save As** to download a new copy that retains the updated page order.
-For a full guide to Organize Pages in React, see the feature landing page: [Organize pages in React PDF Viewer](./organize-pdf).
-
See also:
-- [UI interactions for Organize Pages](./organize-pdf/ui-interactions-organize-page)
-- [Toolbar items for Organize Pages](./organize-pdf/toolbar-organize-page)
-- [Programmatic support for Organize Pages](./organize-pdf/programmatic-support-for-organize-page)
-- [Organize Pages events](./organize-pdf/organize-pdf-events)
-- [Organize Pages in mobile view](./organize-pdf/organize-page-mobile-view)
+- [Toolbar customization for Organize Pages](./toolbar)
+- [Programmatic support for Organize Pages](./programmatic-support)
+- [Organize Pages events](./events)
+- [Organize Pages in mobile view](./mobile-view)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/programmatic-support.md
index 919eba16c0..5e981f2dda 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/programmatic-support.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/programmatic-support.md
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
# Programmatic Support for Organize Pages in React PDF Viewer control
-The PDF Viewer provides comprehensive programmatic support for organizing pages, allowing you to integrate and manage PDF functionalities directly within your application. This section details the available APIs to enable, control, and interact with the page organization features.
+The PDF Viewer exposes programmatic APIs for organizing pages so applications can integrate page-management workflows (for example: enable/disable organizer, open/close the organizer, and customize behavior). This section documents the available properties, methods, and settings used to control the Organize Pages experience.
## Enable or disable the page organizer
-The page organizer feature can be enabled or disabled using the `enablePageOrganizer` property. By default, this feature is enabled.
+The page organizer feature can be enabled or disabled using the `enablePageOrganizer` property. By default, the page organizer is enabled.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -59,7 +59,7 @@ export default function App() {
## Open the page organizer on document load
-You can control whether the page organizer dialog opens automatically when a document is loaded using the `isPageOrganizerOpen` property. The default value is `false`.
+Use the `isPageOrganizerOpen` property to control whether the page organizer opens automatically when a document loads. The default value is `false`.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -104,7 +104,7 @@ export default function App() {
## Customize page organizer settings
-The `pageOrganizerSettings` API allows you to customize the page management functionalities. You can enable or disable actions such as deleting, inserting, rotating, copying, importing, and rearranging pages, as well as configure thumbnail zoom settings. By default, all actions are enabled, and standard zoom settings are applied.
+The `pageOrganizerSettings` API customizes page-management capabilities. Use it to enable or disable actions (delete, insert, rotate, copy, import, rearrange) and to configure thumbnail zoom settings. By default, actions are enabled and standard zoom settings apply.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/remove-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/remove-pages.md
new file mode 100644
index 0000000000..3567584d8a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/remove-pages.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Remove pages using Organize Pages in React PDF Viewer | Syncfusion
+description: How to remove one or more pages from a PDF using the Organize Pages view in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Remove pages using the Organize Pages tool
+
+## Overview
+
+This guide shows how to delete single or multiple pages from a PDF using the **Organize Pages** UI in the EJ2 React PDF Viewer.
+
+**Outcome**: You will remove unwanted pages and save or download the updated PDF.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed in your project
+- Basic PDF Viewer setup ([`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) for standalone mode or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) for server-backed mode)
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer navigation toolbar to open the Organize Pages dialog.
+
+2. Select pages to remove
+
+ - Click a thumbnail to select a page. Use Shift+click or Ctrl+click to select multiple pages. Use the **Select all** button to select every page.
+
+3. Delete selected pages
+
+ - Click the **Delete Pages** icon in the Organize Pages toolbar to remove the selected pages. The thumbnails update immediately to reflect the deletion.
+
+ - Delete a single page directly from its thumbnail: hover over the page thumbnail to reveal the per-page delete icon, then click that icon to remove only that page.
+
+ 
+
+4. Multi-page deletion
+
+ - When multiple thumbnails are selected, the Delete action removes all selected pages at once.
+
+5. Undo or redo deletion
+
+ - Use **Undo** (Ctrl+Z) to revert the last deletion.
+ - Use **Redo** (Ctrl+Y) to revert the last undone deletion.
+
+ 
+
+6. Save the PDF after deletion
+
+ - Click **Save** to apply changes to the currently loaded document, or **Save As** / **Download** to download a copy with the removed pages permanently applied.
+
+## Expected result
+
+- Selected pages are removed from the document immediately in the Organize Pages dialog.
+- After clicking **Save** or **Save As**, the resulting PDF reflects the deletions.
+
+## Enable or disable Remove Pages button
+
+To enable or disable the **Remove Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-delete-option) for the guidelines.
+
+## Troubleshooting
+
+- **Delete button disabled**: Ensure `PageOrganizer` is injected and [`pageOrganizerSettings.canDelete`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#candelete) is not set to `false`.
+- **Selection not working**: Verify that the Organize Pages dialog has focus; use Shift+click for range selection.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/reorder-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/reorder-pages.md
new file mode 100644
index 0000000000..b8826fc7c5
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/reorder-pages.md
@@ -0,0 +1,66 @@
+---
+layout: post
+title: Reorder pages in Organize Pages in React PDF Viewer | Syncfusion
+description: How to rearrange pages using drag-and-drop and grouping in the Organize Pages UI of the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Reorder pages using the Organize Pages view
+
+## Overview
+
+This guide describes how to rearrange pages in a PDF using the **Organize Pages** UI.
+
+**Outcome**: Single or multiple pages can be reordered and the new sequence is preserved when the document is saved or exported.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- `Toolbar` and `PageOrganizer` services injected into the viewer
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the navigation toolbar to open the page thumbnails panel.
+
+2. Reorder a single page
+
+ - Drag a thumbnail to the desired position. The thumbnails update instantly to show the new order.
+
+3. Reorder multiple pages
+
+ - Select multiple thumbnails using Ctrl or Shift, then drag the selected group to the new location.
+
+ 
+
+4. Verify and undo
+
+ - Use **Undo** / **Redo** options to revert accidental changes.
+
+ 
+
+5. Persist the updated order
+
+ - Click **Save** or download the document using **Save As** to persist the new page sequence.
+
+## Expected result
+
+- Thumbnails reflect the new page order immediately and saved / downloaded PDFs preserve the reordered sequence.
+
+## Enable or disable reorder option
+
+To enable or disable the **Reorder pages** option in the Organize Pages, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-rearrange-option) for the guidelines
+
+## Troubleshooting
+
+- **Thumbnails won't move**: Confirm [`pageOrganizerSettings.canRearrange`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#canrearrange) is is not set to `false`.
+- **Changes not saved**: Verify [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) (server) or [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) (standalone) is configured correctly.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/rotate-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/rotate-pages.md
new file mode 100644
index 0000000000..0c9b2eeaa4
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/rotate-pages.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Rotate pages in Organize Pages (React PDF Viewer) | Syncfusion
+description: Learn how to rotate one or more pages using the Organize Pages UI in the Syncfusion React PDF Viewer and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Rotate pages using the Organize Pages view
+
+## Overview
+
+This guide explains how to rotate individual or multiple pages using the **Organize Pages** UI in the EJ2 React PDF Viewer. Supported rotations: 90°, 180°, 270° clockwise and counter-clockwise.
+
+**Outcome**: Pages are rotated in the viewer and persisted when saved or exported.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- PDF Viewer configured with [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) (standalone) or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) (server-backed)
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer toolbar to open the Organize Pages dialog.
+
+2. Select pages to rotate
+
+ - Click a single thumbnail or use Shift+click/Ctrl+click to select multiple pages.
+
+3. Rotate pages using toolbar buttons
+
+ - Use **Rotate Right** to rotate 90° clockwise.
+ - Use **Rotate Left** to rotate 90° counter-clockwise.
+ - Repeat the action to achieve 180° or 270° rotations.
+
+ 
+
+4. Rotate multiple pages at once
+
+ - When multiple thumbnails are selected, the Rotate action applies to every selected page.
+
+5. Undo or reset rotation
+
+ - Use **Undo** (Ctrl+Z) to revert the last rotation.
+ - Use the reverse rotation button (Rotate Left/Rotate Right) until the page returns to 0°.
+
+ 
+
+6. Persist rotations
+
+ - Click **Save** or **Save As** to persist rotations in the saved/downloaded PDF. Exporting pages also preserves the new orientation.
+
+## Expected result
+
+- Pages rotate in-place in the Organize Pages dialog when using the rotate controls.
+- Saving or exporting the document preserves the new orientation.
+
+## Enable or disable Rotate Pages button
+
+To enable or disable the **Rotate Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-rotate-option) for the guidelines
+
+## Troubleshooting
+
+- **Rotate controls disabled**: Ensure [`pageOrganizerSettings.canRotate`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#canrotate) is not set to `false`.
+- **Rotation not persisted**: Click **Save** after rotating. For server-backed setups ensure [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) is set so server-side save can persist changes.
+
+## Related topics
+
+- [Organize page toolbar customization](./toolbar.md)
+- [Organize pages event reference](./events)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md
index 6067750305..0d172c9269 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Organize Page Toolbar Customization in React PDF Viewer control | Syncfusion
+title: Organize Page Toolbar Customization in React | Syncfusion
description: Learn here all about Organize Page Toolbar Customization in Syncfusion React PDF Viewer control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: PDF Viewer
@@ -8,16 +8,17 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Organize Page Toolbar Customization in React PDF Viewer control
+# Organize page toolbar customization in React PDF Viewer control
-The PDF Viewer allows you to customize the toolbar for the organize pages feature, enabling you to show or hide specific tools based on your application's requirements. The `pageOrganizerSettings` API provides properties to control the visibility of each tool in the organize pages dialog.
+The PDF Viewer lets applications customize the Organize Pages toolbar to enable or disable tools according to project requirements. Use the `pageOrganizerSettings` API to control each tool's interactivity and behavior.
-## Show or hide the insert option
+## Enable or disable the insert option
-The `canInsert` property controls the visibility of the insert tool. When set to `false`, the insert tool will be hidden from the toolbar.
+The `canInsert` property controls the insert tool visibility. Set it to `false` to disable the insert tool.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
+{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
@@ -42,21 +43,23 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
root.render({% endraw %}
+
+
+
+ );
+}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Place the viewer inside flex box
+
+Use `min-height: 0` on the flex item containing the Viewer so it can shrink and grow properly. The flex container must have a defined height for the Viewer to fill it.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+import React from 'react';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ return ({% raw %}
+
+ Header Content
+
+
+
+ );
+}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Place the viewer inside CSS grid
+
+Define row or column sizes in `grid-template-rows` or `grid-template-columns` so the grid track has a real height. The Viewer will then expand to fill its grid cell.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+import React from 'react';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export const App: React.FC = () => {
+ return (
+ {% endraw %}
+
+
+
+
+ {% raw %}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const styles: RecordDashboard
{% endraw %} +
+ (viewerRef.current = instance)}
+ id="pdfViewerInTab"
+ documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+ enableToolbar={true}
+ height="100%"
+ width="100%"
+ style={{ border: '1px solid #e0e0e0', borderRadius: 8 }}
+ >
+
+
+ );
+};
+
+export const App: React.FC = () => {
+ return (
+
+
+
+
+
+ );
+};
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Use viewer inside Dialog
+
+If the viewer sits inside a dialog, for example Syncfusion Dialog, render or initialize the viewer after the dialog open events. The DOM must be visible for the viewer to measure layout.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import React, { useRef, useCallback } from 'react';
+import { DialogComponent } from '@syncfusion/ej2-react-popups';
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export const App: React.FC = () => {
+ const viewerRef = useRefPDF Viewer in tab
+
+
+
+ (
+ (
+
+
+
+
+
+ )}
+ />
+ Overview
+Put general dashboard content here.
+
+
+ )}
+ />
+ Settings
+Any settings or forms can go here.
+
+
+
+ (dialogRef.current = dlg)}
+ isModal={true}
+ visible={false}
+ header="Document preview"
+ showCloseIcon={true}
+ minHeight="80vh"
+ width="80vw"
+ height="80vh"
+ allowDragging={true}
+ closeOnEscape={true}
+ target={document.body as any}
+ overlayClick={closeDialog}
+ open={onDialogOpen}
+ >
+ (viewerRef.current = instance)}
+ id="pdfViewerInDialog"
+ documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+ enableToolbar={true}
+ height="100%"
+ width="100%"
+ style={{ border: '1px solid #e0e0e0', borderRadius: 8 }}
+ >
+
+
+
+ );
+};
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Use viewer inside Collapsible sections
+
+For accordions or collapsible containers, either render the viewer lazily when the section expands or dispatch the resize event after expansion so the viewer can recompute layout.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import React, { useCallback, useRef } from 'react';
+import {
+ AccordionComponent, AccordionItemsDirective, AccordionItemDirective, ExpandEventArgs
+} from '@syncfusion/ej2-react-navigations';
+
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export const App: React.FC = () => {
+ const viewerRef = useRefPDF Viewer inside Dialog
+
+
+
+
+ (viewerRef.current = inst)}
+ id="pdfViewerInAccordion"
+ documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+ enableToolbar={true}
+ height="100%"
+ width="100%"
+ style={{ border: '1px solid #e0e0e0', borderRadius: 8 }}
+ >
+
+
+ );
+
+ return (
+
+
+
+
+
+
+ (
+ (
+
+
+
+
+ );
+};
+{% endraw %}
+{% endhighlight %}
+{% highlight css tabtitle="App.css" %}
+{% raw %}
+.page {
+ height: 100vh;
+ display: grid;
+ grid-template-rows: 56px 1fr;
+ background: #fafafa;
+}
+.header {
+ display: flex;
+ align-items: center;
+ padding: 0 16px;
+ background: #fff;
+ border-bottom: 1px solid #e5e5e5;
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Why visibility and height matter
+
+- The PDF viewer measures its container to lay out pages. If the host element has no height (collapsed, display:none, or not yet mounted) measurements will be zero and rendering will fail or be clipped.
+
+- Initialize or refresh the viewer when the host becomes visible (tab active, modal opened, accordion expanded) so internal layout code can compute sizes.
+
+## Resize & visibility tips
+
+- Dispatch a global resize right after the container becomes visible:
+
+```js
+setTimeout(() => window.dispatchEvent(new Event('resize')), 0);
+```
+- Use a `ResizeObserver` when the host size may change frequently:
+
+```js
+const observer = new ResizeObserver(() => {
+ window.dispatchEvent(new Event('resize'));
+});
+observer.observe(document.querySelector('#pdfViewer')!);
+```
+
+- Lazy-render inside tabs/dialogs/accordions: only mount the PDF Viewer when the pane is visible.
+
+## When to use these patterns
+
+- Use Dialogs for temporary previews or when you want an isolated view.
+- Use Tabs/Accordion patterns when documents are part of multi-pane UIs — ensure refresh on show.
+- Avoid placing the viewer in invisible containers without a resize/refresh strategy.
+
+## See also
+
+- [Overview of Syncfusion React Tab component](https://ej2.syncfusion.com/react/documentation/tab/getting-started)
+- [Overview of Syncfusion React Dialog component](https://ej2.syncfusion.com/react/documentation/dialog/getting-started)
+- [Overview of Syncfusion React Accordion component](https://ej2.syncfusion.com/react/documentation/accordion/getting-started)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/export-as-image.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/export-as-image.md
index d379740774..45ac0ee90f 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/export-as-image.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/export-as-image.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Export pages as images in PDF Viewer
-Export a single page as a Base64-encoded image using `exportAsImage()` or export a range of pages using `exportAsImages()`.
+The PDF Viewer component can export pages as Base64-encoded image strings using the `exportAsImage()` method (single page) and `exportAsImages()` method (page range). The examples below demonstrate single-page export, range export, and how to specify a custom image size.
Steps to export pages as images
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-completed.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-completed.md
index 1d281650fb..cc6f1da82f 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-completed.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-completed.md
@@ -7,9 +7,9 @@ platform: document-processing
documentation: ug
---
-# Use extractTextCompleted to extract text in React PDF Viewer
+## Extract text using the extractTextCompleted event in the PDF Viewer
-Use the [isExtractText](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#isextracttext) property and the [extractTextCompleted](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#extracttextcompleted) event to extract page text along with bounds.
+The PDF Viewer can extract page text along with bounding information. Enable text extraction using the `isExtractText` property and handle the `extractTextCompleted` event to receive extracted text and bounds for the document.
The following example shows how to enable text extraction and handle the completion event:
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-option.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-option.md
index 3a86da98a4..e5f01393f0 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-option.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-option.md
@@ -7,19 +7,14 @@ platform: document-processing
documentation: ug
---
-# Configure extractTextOption in React PDF Viewer
+## Extract text option in the React PDF Viewer
-The `extractTextOption` property controls how text is extracted and optimizes memory usage. It also affects the data returned in the `extractTextCompleted` event. Choose one of the following options to determine the text and layout data to retrieve.
+The `extractTextOption` property controls the amount of text and layout information returned by the viewer. Adjusting this value helps balance memory usage and the level of detail required for downstream processing. The viewer exposes four options:
-### Available Options:
-
-**None:** No text information is extracted or returned. This is useful when you want to optimize memory usage and don't need any text data.
-
-**TextOnly:** Extracts only the plain text from the document. This option excludes any layout or positional information.
-
-**BoundsOnly:** Extracts layout information, such as bounds or coordinates, without including the plain text data.
-
-**TextAndBounds:** Extracts both the plain text and the layout (bounds) information, which is the default behavior.
+- **None** — Do not extract or return any text or layout data. Use this option to minimize memory usage when textual information is not required.
+- **TextOnly** — Return plain text only; layout and bounds are omitted. Note: using `TextOnly` may disable some viewer text features such as synchronous `findText`; use `findTextAsync` when asynchronous search is required.
+- **BoundsOnly** — Return layout and positional data (bounds) without the plain text content.
+- **TextAndBounds** — Return both plain text and its positional information (bounds). This is the default and is useful when both content and layout are required.
The following example demonstrates how to configure the `extractTextOption` property to control the level of text extraction:
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text.md
index 3e69148093..6d176290a5 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text.md
@@ -7,33 +7,23 @@ platform: document-processing
documentation: ug
---
-# Extract text using extractText in React PDF Viewer
+## Extract text method in the PDF Viewer
-The `extractText` method extracts text from one or more pages and can return plain text or text with bounds for each element.
+The `extractText` method retrieves text content and, optionally, positional data for elements on one or more pages. It returns a Promise that resolves to an object containing extracted `textData` (detailed items with bounds) and `pageText` (concatenated plain text).
-### extractText method
-Retrieves text data from one page or a range of pages based on the specified options.
+**Parameters overview:**
-#### Parameters:
-**startIndex:** The starting page index for text extraction (0-based index).
+- `startIndex` — Starting page index (0-based).
+- `endIndex` or options — Either the ending page index for a range extraction, or an options object specifying extraction criteria for a single page.
+- `options` (optional) — Extraction options such as `TextOnly` or `TextAndBounds` to control whether bounds are included.
-**endIndex or isOptions:** Either the ending page index (for multiple pages) or an option specifying extraction criteria for a single page.
+**Returned object shape (example):**
-**options (optional):** Specifies additional options, such as extracting plain text `TextOnly` or more detailed text data `TextAndBounds`. You can specify various options for text extraction. These options determine whether you want to extract plain text, text with bounds, or detailed text data.
-
-- TextOnly: Extracts only plain text without bounds.
-- TextAndBounds: Extracts text with bounds (coordinates).
-
-#### Returns:
-Returns a Promise with:
-- textData: An array of TextDataSettingsModel with details including bounds and page text.
-- pageText: A concatenated string of plain text from the specified page(s).
-
-**textData:** An array of TextDataSettingsModel objects, each representing the details of the extracted text (including bounds, page text, etc.).
-
-**pageText:** A concatenated string of plain text extracted from the specified page(s).
+- `textData` — Array of objects describing extracted text items, including bounds and page-level text.
+- `pageText` — Concatenated plain text for the specified page(s).
### Usage of extractText in Syncfusion PDF Viewer Control
+
Here is an example that demonstrates how to use the extractText method along with event handling:
```html
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/find-text-async.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/find-text-async.md
index 55c7a85188..319cdf5cf0 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/find-text-async.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/find-text-async.md
@@ -9,7 +9,7 @@ documentation: ug
# Find text with findTextAsync in React PDF Viewer
-The `findTextAsync` method searches for a string or array of strings asynchronously and returns bounding rectangles for each match. Use it to locate text positions across the document or on a specific page.
+The `findTextAsync` method performs an asynchronous text search within a PDF document. It returns a Promise that resolves with an array of result objects describing each match. Each match object contains information such as the page index and the bounding rectangles for the matched text, which can be used to highlight or navigate to occurrences. By default, the search runs across all pages; supply the optional `pageIndex` parameter to limit the search to a specific page.
Here is an example of how to use `findTextAsync`:
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/get-base64.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/get-base64.md
index d3b39e1a29..135b9a507b 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/get-base64.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/get-base64.md
@@ -7,20 +7,21 @@ platform: document-processing
documentation: ug
---
-# Get Base64 value from a loaded PDF
+# Retrieve Base64 from a PDF in PDF Viewer
### Overview
-This guide shows how to get the base64-encoded value of a PDF loaded in the Syncfusion PDF Viewer using React. This is useful for sending the PDF as a base64 string or processing it on the client.
+This guide shows how to obtain the Base64-encoded value of a PDF document loaded in the Syncfusion® PDF Viewer using React. Producing a Base64 string is useful for sending the PDF to a server, embedding it in JSON payloads, or client-side processing.
-### How to Retrieve Base64 Value
+### How to retrieve the Base64 value
-**Step 1:** Follow the steps in the [Get started with React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide to create a sample.
+**Step 1: Create the PDF Viewer sample**
+Follow the [Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide for the React PDF Viewer.
-**Step 2:** Set Up Your React Component
+**Step 2: Set up the React component**
-Create a React component and set up the Syncfusion® PDF Viewer. Add a button to trigger the conversion to a base64 string.
+Create an React component and update the template to include a button that triggers conversion to a Base64 string. The samples below show both standalone and server-backed viewer configurations.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -177,6 +178,6 @@ root.render(PDF Viewer inside an Accordion
+
+
+ )}
+ />
+ Overview
+Place any introductory content here.
+
+
+ )}
+ />
+ Settings
+Your forms and other controls here.
+
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- { pdfviewer = scope; }}
- id="container"
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"
- enablePageOrganizer={true}
- style={{ 'height': '640px' }}>
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- { pdfviewer = scope; }}
- id="container"
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
- enablePageOrganizer={true}
- style={{ 'height': '640px' }}>
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- { pdfviewer = scope; }}
- id="container"
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"
- isPageOrganizerOpen={true}
- style={{ 'height': '640px' }}>
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- { pdfviewer = scope; }}
- id="container"
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
- isPageOrganizerOpen={true}
- style={{ 'height': '640px' }}>
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- { pdfviewer = scope; }}
- id="container"
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"
- pageOrganizerSettings = {{canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5}}
- style={{ 'height': '640px' }}>
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- { pdfviewer = scope; }}
- id="container"
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
- pageOrganizerSettings = {{canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5}}
- style={{ 'height': '640px' }}>
-
-
-
-
-
- );
-}
-
-render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
- {
- console.log('Print action has started for file: ' + args.fileName);
- // To cancel the print action
- // args.cancel = true;
- }}
- style={{ height: '640px' }}>
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
- {
- console.log('Print action has started for file: ' + args.fileName);
- // To cancel the print action
- // args.cancel = true;
- }}
- style={{ height: '640px' }}>
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
- {
- console.log('Printed File Name: ' + args.fileName);
- }}
- style={{ height: '640px' }}>
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
- {
- console.log('Printed File Name: ' + args.fileName);
- }}
- style={{ height: '640px' }}>
-
-
-
-
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+[View sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## Troubleshooting
+
+- If you need to preserve original page orientation for archival printing, set [`enablePrintRotation: false`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprintrotation).
+- Confirm that injected modules include [`Print`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print) or the property will have no effect.
+
+## See also
+
+- [Overview](./overview)
+- [Print quality](./print-quality)
+- [Print modes](./print-modes)
+- [Print events](./events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/events.md b/Document-Processing/PDF/PDF-Viewer/react/print/events.md
new file mode 100644
index 0000000000..e687e6d709
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/print/events.md
@@ -0,0 +1,92 @@
+---
+layout: post
+title: Print Events in React PDF Viewer | Syncfusion
+description: Learn how to configure print events and track usage and implements workflows in the Syncfusion React PDF Viewer component.
+platform: document-processing
+control: Print
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Print events in React PDF Viewer
+
+This page lists each event emitted by the React PDF Viewer's [`Print`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print) feature, the argument schema, and the minimal behavior notes needed for implementation.
+
+## Events
+
+| Name | Description |
+|--------------|-------------|
+| [`printStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printstart) | Raised when a print action begins. Use the event to log activity or cancel printing. |
+| [`printEnd`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printend) | Raised after a print action completes. Use the event to notify users or clean up resources. |
+
+### `printStart`
+
+This event is emitted when printing is initiated by toolbar or through programmatic API. Use to validate prerequisites, record analytics, or cancel printing.
+
+**Arguments** - ([`PrintStartEventArgs`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/printstarteventargs)):
+
+- `fileName` - The document file name being printed.
+- `cancel` - Default: `false`. Set to `true` to cancel the print operation.
+
+Setting `args.cancel = true` prevents the client-side print flow; for server-backed printing it prevents the service request that produces print output. Find the code example [here](../security/restricting-download-and-print#3-block-print-with-the-printstart-event)
+
+**Minimal usage example:**
+
+{% highlight ts %}
+{% raw %}
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Print programmatically in React PDF Viewer
+
+To start printing from code, call the [`pdfviewer.print.print()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print#print-1) method after the document is fully loaded. This approach is useful when wiring up custom UI or initiating printing automatically; calling print before the document finishes loading can result in no output or an empty print dialog.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import { RefObject, useRef } from 'react';
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner,
+ FormFields, TextSelection, TextSearch, Print, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function App() {
+ const viewerRef: RefObject
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Key capabilities
+
+- Enable or disable printing with the [`enablePrint`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprint) property
+- Start printing from UI (toolbar Print) or programmatically using `print.print()`(https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print#print-1).
+- Control output quality with the [`printScaleFactor`](./print-quality) property (0.5–5)
+- Auto‑rotate pages during print using [`enablePrintRotation`](./enable-print-rotation)
+- Choose where printing happens with [`printMode`](./print-modes) (Default or NewWindow)
+- Track the life cycle with [`printStart` and `printEnd` events](./events)
+
+## Troubleshooting
+
+- Ensure the [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) value matches the deployed `ej2-pdfviewer-lib` version.
+- Calling [`print()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print#print-1) launches the browser print dialog; behavior varies by browser and may be affected by popup blockers or browser settings.
+
+[View Sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## See Also
+
+- [Print quality](./print-quality)
+- [Enable print rotation](./enable-print-rotation)
+- [Print modes](./print-modes)
+- [Print events](./events)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md b/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md
new file mode 100644
index 0000000000..35865f5c81
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/print/print-modes.md
@@ -0,0 +1,82 @@
+---
+layout: post
+title: Print Modes in React PDF Viewer | Syncfusion
+description: Learn how to configure print modes for PDF Documents in the Syncfusion React PDF Viewer component and more.
+platform: document-processing
+control: Print
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Print Modes in the React PDF Viewer
+
+This guide shows how to set the PDF Viewer [`printMode`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printmode) so PDFs print from the current window or from a new window/tab.
+
+## Prerequisites
+
+- A React app with the Syncfusion PDF Viewer and [`Print`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/print) module injected.
+
+## Steps to set print mode
+
+**Step 1:** Decide which [`printMode`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printmode) you need:
+ - `Default` — print from the same browser window.
+ - `NewWindow` — print from a new window or tab (may be blocked by pop-up blockers).
+
+**Step 2:** Set [`printMode`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printmode) during viewer initialization (recommended):
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner, FormFields,
+ PageOrganizer, TextSelection, TextSearch, Print, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function App() {
+ return (
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+**Step 3:** Print mode can also be changed at runtime after the viewer is created:
+
+```ts
+// switch to NewWindow at runtime
+pdfviewer.printMode = 'NewWindow';
+```
+
+## Quick reference
+
+- `Default`: Print from the same window (default).
+- `NewWindow`: Print from a new window or tab.
+
+N> Browser pop-up blockers must allow new windows or tabs when using `pdfviewer.printMode = "NewWindow"`.
+
+[View live examples and samples on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## See also
+
+- [Overview](./overview)
+- [Print quality](./print-quality)
+- [Enable print rotation](./enable-print-rotation)
+- [Print events](./events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/print/print-quality.md b/Document-Processing/PDF/PDF-Viewer/react/print/print-quality.md
new file mode 100644
index 0000000000..8746d2ab0e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/print/print-quality.md
@@ -0,0 +1,85 @@
+---
+layout: post
+title: Customize Print Quality in React PDF Viewer | Syncfusion
+description: Learn how to customize print quality for PDF Documents in the Syncfusion React PDF Viewer component.
+platform: document-processing
+control: Print
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Customize Print Quality in React PDF Viewer
+
+This article shows a concise, task-oriented workflow to set and verify print quality for documents rendered by the React PDF Viewer by using the [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) property.
+
+**Goal:** Set a suitable [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) to improve printed output sharpness while balancing performance and memory use.
+
+## Steps
+
+### 1. Choose a target print quality.
+
+- Valid [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) values: **0.5 – 5**. Higher values increase image sharpness and resource use.
+- Default value: **1**.
+
+### 2. Set `printScaleFactor` during initialization
+
+It is recommended that you set the [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) in the viewer options during initialization.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner,
+ FormFields, TextSelection, TextSearch, Print, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function App() {
+ return (
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+### 3. Set `printScaleFactor` after instantiation
+
+As an alternative option, the [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) can be dynamically changed during runtime
+
+{% highlight ts %}
+// Update printScaleFactor at runtime
+pdfviewer.printScaleFactor = 2; // increase print resolution for upcoming prints
+{% endhighlight %}
+
+### 4. Verify output
+
+Use browser Print Preview or produce a printed/PDF copy to confirm sharpness and acceptable render time.
+
+## Notes
+
+- Values outside the supported range **0.5 – 5** will be ignored and fall back to the default (`1`).
+- Increasing [`printScaleFactor`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printscalefactor) raises CPU, memory, and rendering time requirements. Test on target machines and documents before setting a higher factor.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/Customization%20of%20print%20Quality)
+
+## See Also
+
+- [Overview](./overview)
+- [Enable print rotation](./enable-print-rotation)
+- [Print modes](./print-modes)
+- [Print events](./events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-amazon-s3.md
index f25c71fdfb..266365b51d 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-amazon-s3.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-amazon-s3.md
@@ -8,17 +8,17 @@ documentation: ug
# Save PDF files to AWS S3 in React
-The React PDF Viewer component supports saving PDF files to AWS S3 using either the standalone or server-backed configuration. The following steps demonstrate both approaches.
+The React PDF Viewer component supports saving PDF files to AWS S3 using either a standalone (browser) configuration or a server-backed configuration. The following steps demonstrate both approaches and include notes on prerequisites and security considerations for production use.
## Using Standalone PDF Viewer
-To save a PDF file to AWS S3, you can follow the steps below
+Follow the steps below to save a PDF file to AWS S3 from a browser-based React PDF Viewer.
**Step 1:** Create a PDF Viewer sample in React
Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample in React. This will set up the basic structure of your PDF Viewer application.
-**Step 2:** Modify the `src/app/app.ts` file in the Angular project
+**Step 2:** Modify the `src/app/app.ts` file in the React project
1. Import the required namespaces at the top of the file:
@@ -84,7 +84,7 @@ return (
4. Retrieve the PDF Viewer instance, save the current PDF as a Blob, read it using FileReader to get an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the `putObject` method.
-N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account.
+N> Replace **Your Bucket Name** and **Your Key** with the target S3 bucket and object key. Ensure the S3 bucket is configured with appropriate permissions and CORS rules to allow browser uploads.
```typescript
private s3 = new AWS.S3();
@@ -113,7 +113,7 @@ function saveDocument() {
};
```
-N> Install the aws-sdk package in the application to use the previous code example: npm install aws-sdk
+N> Install the AWS SDK package to use the browser example. Run `npm install aws-sdk` for the v2 bundle, or prefer the AWS SDK v3 modular packages for smaller client bundles and better tree-shaking.
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone).
@@ -213,7 +213,7 @@ public IActionResult Download([FromBody] Dictionary jsonObject)
}
```
-N> Replace the placeholders with the actual AWS access key, secret key, and bucket name.
+N> Replace the placeholders with the appropriate AWS credentials and bucket name. For enhanced security, avoid storing long-lived credentials in configuration files; use environment variables or a secrets manager instead.
**Step 3:** Set the PDF Viewer properties in the React PDF Viewer component
@@ -252,6 +252,6 @@ root.render( Download([FromBody] Dictionary
}
```
-6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration.
+6. Open the `appsettings.json` file in your web service project, add the required settings below the existing `AllowedHosts` configuration
```json
{
@@ -112,7 +112,7 @@ public async Task Download([FromBody] Dictionary
}
```
-N> Replace the placeholders with the actual Box access token, folder ID, client ID, and client secret.
+N> Replace the placeholders with the appropriate Box access token, folder ID, client ID, and client secret.
**Step 4:** Set the PDF Viewer properties in the React PDF Viewer component
@@ -150,8 +150,8 @@ root.render(
{% endhighlight %}
{% endtabs %}
-3. Retrieve the PDF Viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to Dropbox using the `filesUpload` method.
+3. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to Dropbox using the `filesUpload` method of the Dropbox instance.
-N> Replace **Your Access Token** with the actual Access Token of your Drop Box account.
+N> Replace **Your Access Token** with the actual access token for the Dropbox app.
```typescript
function saveDocument() {
@@ -101,7 +101,7 @@ N> Replace **Your Access Token** with the actual Access Token of your Drop Box a
};
```
-N> Install the dropbox package in the application to use the previous code example: npm install dropbox
+N> Install the `dropbox` package in the React project before running the sample: `npm install dropbox`.
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Standalone)
@@ -111,15 +111,15 @@ To save a PDF file to Dropbox cloud file storage, you can follow the steps below
**Step 1:** Create a Dropbox API app
-To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.
+To create a Dropbox API app, follow the Dropbox .NET tutorial: [Dropbox .NET tutorial](https://www.dropbox.com/developers/documentation/dotnet#tutorial). Use the Dropbox App Console to register an app and obtain the necessary access token and permissions.
**Step 2:** Create a PDF Viewer sample in React
-Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample in React. This sets up the basic structure of the PDF Viewer application.
+Follow the Syncfusion getting-started instructions for the React PDF Viewer: [React PDF Viewer getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started). This sets up the basic PDF Viewer application structure.
**Step 3:** Modify the `PdfViewerController.cs` file in the web service project
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
+1. Create a web service project in .NET Core 3.0 or above. Refer to the Syncfusion knowledge base article on creating a PDF Viewer web service: [Create a PDF Viewer web service in .NET Core 3.0 and above](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above).
2. Open the `PdfViewerController.cs` file in your web service project.
@@ -149,7 +149,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache
}
```
-5. Modify the [Download()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Dropbox folder.
+5. Modify the `Download()` method to save the downloaded PDF files to Dropbox cloud storage
```csharp
@@ -187,7 +187,7 @@ public async Task Download([FromBody] Dictionary
```
-6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration.
+6. Open the `appsettings.json` file in the web service project and add the following entries below the existing `"AllowedHosts"` configuration
```json
{
@@ -203,7 +203,7 @@ public async Task Download([FromBody] Dictionary
}
```
-N> Replace the placeholders with the actual Dropbox access token and target folder name.
+N> Replace the placeholders with the actual Dropbox access token and folder name.
**Step 4:** Set the PDF Viewer properties in the React PDF Viewer component
@@ -225,7 +225,7 @@ function App() {
@@ -242,6 +242,8 @@ root.render( jsonObject)
}
```
-6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration.
+6. Open the `appsettings.json` file in the web service project and add the following entries below the existing `"AllowedHosts"` configuration.
```json
{
@@ -102,9 +102,9 @@ public IActionResult Download([FromBody] Dictionary jsonObject)
}
```
-N> Replace the placeholder with the actual Google Cloud Storage bucket name.
+N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of the Google Cloud Storage bucket.
-N> Replace `path/to/service-account-key.json` with the actual file path to the service account key JSON file.
+N> Replace **path/to/service-account-key.json** with the actual file path to the service account key JSON file. Provide the correct path and filename.
**Step 3:** Set the PDF Viewer properties in the React PDF Viewer component
@@ -126,7 +126,7 @@ function App() {
@@ -142,6 +142,6 @@ root.render( Download([FromBody] Dictionary
}
```
-6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration.
+6. Open the `appsettings.json` file in the web service project and add the following settings below the existing `AllowedHosts` configuration.
```json
{
@@ -136,7 +136,7 @@ N> Use a valid `client_id` from the JSON file to authenticate with the Google Dr
**Step 4:** Set the PDF Viewer properties in the React PDF Viewer component
-Modify the `serviceUrl` property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from Google Drive, and ensure that the document exists in the target folder.
+Update the `serviceUrl` property of the PDF Viewer component to the web service URL, replacing `https://localhost:44396/pdfviewer` with the actual server endpoint. Set the `documentPath` property to the PDF file name that exists in the configured Google Drive folder.
{% raw %}
@@ -170,6 +170,6 @@ root.render( Download([FromBody] Dictionary
}
```
-6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration.
+6. Open `appsettings.json` in the web service project and add the following keys below the existing `AllowedHosts` configuration
```json
{
@@ -118,11 +118,11 @@ public async Task Download([FromBody] Dictionary
```
-N> Replace the placeholders with the actual tenant ID, application ID, and OneDrive folder name.
+N> Replace the placeholders with actual values for the Tenant ID, Application ID, and OneDrive folder name.
**Step 4:** Set the PDF Viewer properties in the React PDF Viewer component
-Modify the `serviceUrl` property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from OneDrive, and ensure that the document exists in the target folder.
+Update the `serviceUrl` property with the web service endpoint and set `documentPath` to the PDF file name stored in OneDrive. Ensure the document exists in the target OneDrive folder.
{% raw %}
@@ -156,11 +156,11 @@ root.render( jsonObject)
{
//Initialize the PDF Viewer object with memory cache object
@@ -54,15 +64,15 @@ public IActionResult Download([FromBody] Dictionary jsonObject)
}
return Content(documentBase);
}
-
```
-**Step 3:** Set the PDF Viewer Properties in React PDF viewer component
+**Step 3:** Set the PDF Viewer properties in your React app
-Modify the `serviceUrl` property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server.Modify the documentPath with the correct PDF Document URL want to load.
+Set the `serviceUrl` to point to your web service (for example, replace `https://localhost:44396/pdfviewer` with your server URL). Also set `documentPath` to the document URL you want to load.
+{% tabs %}
+{% highlight js tabtitle="JSX" %}
{% raw %}
-
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
@@ -88,17 +98,19 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render( Download([FromBody] Dictionary jsonObject)
{
//Initialize the PDF Viewer object with memory cache object
@@ -211,7 +219,7 @@ public async Task Download([FromBody] Dictionary
}
```
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
+5. Add the connection string to `appsettings.json`:
```json
{
@@ -222,12 +230,141 @@ public async Task Download([FromBody] Dictionary
}
},
"AllowedHosts": "*",
- "ConnectionString": "Your connection string for SQL server"
+ "ConnectionString": "Your connection string for SQL Server"
}
```
-N> Replace **Your Connection string from SQL server** with the actual connection string for your SQL Server database
+N> Replace `Your connection string for SQL Server` with your actual connection string.
+
+N> Ensure the `System.Data.SqlClient` package (or `Microsoft.Data.SqlClient`) is installed in your project. Use parameterized queries (as shown) and validate inputs to avoid SQL injection risks.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
+
+### Save to Cloud Storage Services
+
+Each link below goes to a provider page with simple, step-by-step instructions and example code for saving the edited PDF to that cloud storage service.
+
+- [AWS S3](./save-pdf-file/to-amazon-s3)
+- [Azure Blob Storage](./save-pdf-file/to-azure-blob-storage)
+- [Google Cloud Storage](./save-pdf-file/to-google-cloud-storage)
+- [Google Drive](./save-pdf-file/to-google-drive)
+- [OneDrive](./save-pdf-file/to-one-drive)
+- [Dropbox](./save-pdf-file/to-dropbox-cloud-file-storage)
+- [Box](./save-pdf-file/to-box-cloud-file-storage)
+- [Azure AD (auth notes)](./save-pdf-file/to-azure-active-directory)
+
+## Save PDF with or without annotations
+
+The React PDF Viewer allows exporting the current PDF along with annotations, or exporting a clean version without annotations. This gives flexibility depending on workflow review mode, sharing, or securing final documents.
+
+### Save PDF with annotations
+
+The PDF is exported with annotations and form fields by default. You can download a PDF using the download button in the built‑in toolbar or through the [`download`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#download) API. See the [download guide](./download) for further explanation.
+
+### Save PDF without annotations
+
+The PDF can be exported without annotations by setting the [`skipDownload`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationsettingsmodel#skipdownload) API to true in [`annotationSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationsettings).
+
+{% highlight ts %}
+{% raw %}
+
+
+{% endraw %}
+{% endhighlight %}
+
+### Save after restoring annotations
+
+PDFs can also be exported after importing annotations. The following code example uses the [`downloadStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstart) event to cancel the download action and import the annotations from a JSON file before downloading the PDF document.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
+ PageOrganizer, Inject, Print, DownloadStartEventArgs
+} from '@syncfusion/ej2-react-pdfviewer';
+import { DataFormat, PdfDocument } from '@syncfusion/ej2-pdf';
+import { RefObject, useRef } from 'react';
+
+export default function App() {
+ const viewerRef: RefObject = useRef(null);
+
+ const blobToBase64 = async (blob: Blob): Promise => {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onerror = () => reject(reader.error);
+ reader.onload = () => {
+ const dataUrl: string = reader.result as string;
+ const data: string = dataUrl.split(',')[1];
+ resolve(data);
+ };
+ reader.readAsDataURL(blob);
+ });
+ }
+
+ const restoreAnnotations = async (data: string) => {
+ try {
+ const fetchResponse: Response = await fetch("/pdf-succinctly.json", { headers: { Accept: "application/json" } });
+ if (fetchResponse.ok) {
+ let document: PdfDocument = new PdfDocument(data);
+ let jsonData = await fetchResponse.json();
+ document.importAnnotations(btoa(JSON.stringify(jsonData)), DataFormat.json);
+ document.save(`${viewerRef.current.fileName}.pdf`);
+ document.destroy();
+ }
+ else {
+ throw new Error(`HTTP ${fetchResponse.status}`);
+ }
+ }
+ catch (error) {
+ console.error(error);
+ }
+ }
+
+ const handleImports = async () => {
+ const blob: Blob = await viewerRef.current.saveAsBlob();
+ const data: string = await blobToBase64(blob);
+ await restoreAnnotations(data);
+ }
+
+ const onDownloadStart = async (args: DownloadStartEventArgs) => {
+ args.cancel = true;
+ await handleImports();
+ };
+
+ return (
+ ('material3');
+ useEffect(() => {
+ applyTheme(theme);
+ }, [theme]);
+ // Simple memoized list for selector
+ const options = useMemo(
+ () => [
+ { value: 'material3', label: 'Material 3 (Light)' },
+ { value: 'material3-dark', label: 'Material 3 Dark' },
+ ],
+ []
+ );
+ return (
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
-N> The **System.Data.SqlClient** package must be installed in your application to use the previous code example. You need to modify the connectionString variable in the previous code example as per the connection string of your database.
+**See also**
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
\ No newline at end of file
+- [Get Base64 value from a loaded PDF using saveAsBlob API](./how-to/get-base64)
+- [Open PDF files overview](./open-pdf-files)
+- [Download a PDF](./download)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/overview.md b/Document-Processing/PDF/PDF-Viewer/react/security/overview.md
new file mode 100644
index 0000000000..0983b7229c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/security/overview.md
@@ -0,0 +1,35 @@
+---
+layout: post
+title: Permissions and security in React PDF Viewer | Syncfusion
+description: High-level security and permissions overview and recommended controls for protecting PDF content in EJ2 React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Permissions and Security in React PDF Viewer
+
+## Purpose
+
+This page provides a concise security overview and recommended controls when using the EJ2 React PDF Viewer. It summarizes server-side and client-side measures to protect sensitive PDF content while using the viewer in web applications.
+
+## Key recommendations
+
+- **Enforce protections on the server**: Perform encryption, permission flags, redaction, metadata stripping, and form flattening before serving files.
+- **Treat viewer UI settings as UX controls**: Disabling print, download, or text-selection in the viewer improves user experience but is not a security boundary unless the underlying PDF enforces permissions.
+- **Use short-lived, authenticated access**: Serve PDFs via tokenized endpoints or signed URLs rather than public buckets.
+- **Log and monitor access**: Track downloads, apply rate limits, and enforce CORS and auth checks on PDF endpoints.
+
+## Quick actions
+
+- Set [PDF permissions (copy/print)](./prevent-copy-and-print) using server-side PDF libraries before delivery.
+- Remove embedded files, scripts, and metadata during preprocessing.
+- Flatten form fields and sanitize form data when publishing public documents.
+- [Hide or disable viewer UI](./prevent-copy-and-print#3-hidedisable-ui-elements-in-the-viewer) elements for additional UX control.
+
+## Related documents
+
+- [Secure PDf Viewing in React apps](./secure-pdf-viewing)
+- [Prevent copy/print](./prevent-copy-and-print)
+- [Restricting download](./restricting-download)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/prevent-copy-and-print.md b/Document-Processing/PDF/PDF-Viewer/react/security/prevent-copy-and-print.md
new file mode 100644
index 0000000000..a195f7e56a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/security/prevent-copy-and-print.md
@@ -0,0 +1,85 @@
+---
+layout: post
+title: Prevent Copy or Print in React PDF Viewer | Syncfusion
+description: Learn how to prevent printing and copying in the React PDF Viewer using viewer settings or server-side permission flags.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Prevent Copy or Print in React PDF Viewer
+
+## Overview
+This guide shows how to prevent users from copying text or printing documents in EJ2 React PDF Viewer.
+
+**Outcome:** You will learn server-side and client-side options to restrict copy/print with a complete React example.
+
+## Steps
+
+### 1. Use a PDF with permissions already set
+
+- Load a PDF that already disallows copy or print functionality itself. The Viewer enforces these permission automatically.
+
+### 2. Pre process restrictions in server-side
+
+- Use Syncfusion PDF Library to set permission flags before sending the file to the client. See the server-side example below. See this [guide](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-security#change-the-permission-of-the-pdf-document) for detailed explanations
+- Disabling print and copy in server-side automatically enforces them in the PDF Viewer.
+
+### 3. Hide/disable UI elements in the viewer
+
+- Print, download and copy options can be disabled or hidden in the viewer regardless of the PDF's permissions.
+- Print and download options can be hidden in the viewer's primary toolbar. See [primary toolbar customization](../toolbar-customization/primary-toolbar#3-show-or-hide-primary-toolbar-items).
+- Copy option in the context menu can be disabled in the PDF Viewer. See [customize context menu](../context-menu/custom-context-menu).
+
+### 4. Disable print programmatically in the viewer
+
+- Set [`enablePrint`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprint) to `false` to disable the print UI even if the PDF allows printing.
+
+### 5. Disable copy via text-selection UI
+
+- Set [`enableTextSelection`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabletextselection) to `false` to stop text selection and copying through the viewer UI.
+
+**Example:**
+
+The following is a complete React example that demonstrates disabling printing and text selection in the viewer.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
+export default function App() {
+ return (
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+**Expected result**:
+- The viewer renders the PDF.
+- Print button and print-related UI are hidden/disabled.
+- Text selection and copy operations from the viewer are disabled.
+
+## Troubleshooting
+
+- If the Print button still appears:
+ - Confirm [`enablePrint`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprint) is set to `false` on `PdfViewerComponent`.
+ - If the PDF explicitly allows printing, prefer server-side removal of print permission.
+- If text can still be copied:
+ - Confirm [`enableTextSelection`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabletextselection) is set to `false` and your app isn't adding secondary copy handlers.
+
+## Related topics
+
+- [Secure PDF Viewing in React Apps](./secure-pdf-viewing)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md b/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md
new file mode 100644
index 0000000000..1ef4bdb8c7
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md
@@ -0,0 +1,96 @@
+---
+layout: post
+title: Restrict download or print in React PDF Viewer | Syncfusion
+description: Learn how to prevent end users from downloading or printing PDFs displayed by the EJ2 React PDF Viewer using toolbar and events.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Restrict download or print in React PDF Viewer
+
+## Overview
+
+This guide shows how to prevent end users from downloading and printing PDFs displayed by the EJ2 React PDF Viewer.
+
+**Outcome:** The Download and print button are removed from the primary toolbar and any download or print attempt is blocked by the [`downloadStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstart) and [`printStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printstart) event handlers.
+
+## Prerequisites
+- EJ2 React PDF Viewer installed and basic viewer setup completed. See [getting started guide](../getting-started)
+
+## Steps
+
+### 1. Hide the Download and print button in the primary toolbar
+
+The viewer toolbar items are controlled by [`toolbarSettings.toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#toolbaritems). Omit `DownloadOption` and `PrintOption` from that array to remove the Download and print button from the primary toolbar. See [primary toolbar customization](../toolbar-customization/primary-toolbar) for code examples.
+
+### 2. Block download with the `downloadStart` event
+
+The viewer raises the [`downloadStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstart) event whenever a download is initiated. Add an event handler and set `args.cancel = true` to block the operation regardless of how it was triggered (toolbar, API, or custom UI).
+
+### 3. Block print with the `printStart` event
+
+The viewer triggers the [`printStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printstart) event whenever a print action is initiated. Attach an event handler to the event and set `args.cancel = true` to block the operation regardless of how it was triggered.
+
+**Complete Example**:
+
+The following is a complete, runnable React example that cancels every download or print attempt.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
+ PageOrganizer, Inject, Print
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function App() {
+ const onDownloadStart = (args: any) => {
+ // Cancels every download attempt
+ args.cancel = true;
+ console.log('Download restricted.');
+ };
+ const onPrintStart = (args: any) => {
+ // Cancels every print attempt
+ args.cancel = true;
+ console.log('Print restricted.');
+ };
+
+ return (
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+**Expected result**:
+
+- Any programmatic or UI-triggered download attempts are canceled by the `downloadStart` handler; no file is downloaded.
+
+## Troubleshooting
+
+- If the Download or print button is still visible, remove `DownloadOption` and `PrintOption` from [`toolbarSettings.toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#toolbaritems), and ensure no custom toolbar rendering inserts the Download control.
+
+- If downloads still occur despite the handler, confirm `downloadStart={onDownloadStart}` is present on `PdfViewerComponent` and that the handler sets `args.cancel = true`.
+
+- If print still occurs despite the handler, confirm `printStart={onPrintStart}` is present on `PdfViewerComponent` and that the handler sets `args.cancel = true`.
+
+## Related topics
+
+- [Customize primary toolbar](../toolbar-customization/primary-toolbar)
+- [`downloadStart` event reference](../events#downloadstart)
+- [`printStart` event reference](../events#printstart)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/secure-pdf-viewing.md b/Document-Processing/PDF/PDF-Viewer/react/security/secure-pdf-viewing.md
new file mode 100644
index 0000000000..ec78e82e2e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/security/secure-pdf-viewing.md
@@ -0,0 +1,56 @@
+---
+layout: post
+title: Secure PDF Viewing in React Apps using PDF Viewer | Syncfusion
+description: Best practices for securing PDF content in React apps using the EJ2 React PDF Viewer and server-side processing.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Secure PDF Viewing in React Apps
+
+## Overview
+
+This page explains best practices for securing PDF content displayed in React applications using the EJ2 React PDF Viewer and server-side processing. It covers encryption, permission restrictions, redaction, preprocessing, and secure API usage.
+
+## Why Secure Viewing matters
+
+- Protects user privacy and compliance-sensitive data.
+- Reduces risk from hidden/metadata content and unauthorized copying or printing.
+- Limits liability when distributing PDFs to untrusted clients.
+
+## Common security guidelines
+
+This section outlines common security controls and how they interact with the viewer.
+
+- **Password protection**: Use user/owner passwords on PDFs. The viewer can open password-protected files when the password is provided at load time. Password-based encryption prevents opening without credentials. See [loading password protected PDFs](../document-handling/load-password-pdf) and [encrypting PDF documents](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-security).
+
+- **Permission restrictions**: Set PDF permissions (copy, print) using Syncfusion PDF library. The viewer respects these permissions at display time but cannot enforce protections if the client receives an unprotected full file. See [prevent copy and print permissions](./prevent-copy-and-print)
+
+- **Redaction**: Permanently remove text, images, or regions at the document level on the server before delivering the file. Redaction produces a new PDF with the sensitive content removed. See [redacting sensitive content](../Redaction/overview)
+
+- **Preprocessing**: On the server, remove metadata, embedded files, hidden layers, form field values, JavaScript actions, and flatten form fields. Compress and linearize PDFs if needed. See [preprocessing PDFs](../document-handling/preprocess-pdf)
+
+## Design decisions and trade-offs
+
+- Client vs server enforcement: Client-side settings which disable disabling print in the viewer improve user experience but are not a security boundary. True protection requires server-side changes which actually enforces the restrictions (encryption, permissions, redaction).
+
+- Usability vs security: Strong encryption and sanitizing heavily can break some workflows (search, form interactivity). Choose operations appropriate to the document life cycle.
+
+- Redaction permanence: Redaction is irreversible; keep originals securely archived if needed for audit.
+
+## Best practices
+
+- Encrypt PDFs with strong passwords when they must remain unreadable without credentials.
+- Apply permission flags for copying/printing via server-side PDF library; treat viewer-side options as UX controls only.
+- Perform redaction on the server to permanently remove sensitive content.
+- Strip metadata, embedded files, comments, and JavaScript before serving.
+- Flatten form fields and sanitize form data when exporting public PDFs.
+- Use short-lived, authenticated URLs or a tokenized download endpoint rather than serving files from a public bucket.
+- Log access and apply rate limits and CORS policies on APIs that serve PDFs.
+
+## See also
+
+- [Prevent copy/print](./prevent-copy-and-print)
+- [Restrict download/print](./restricting-download-and-print)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/text-search.md b/Document-Processing/PDF/PDF-Viewer/react/text-search.md
index fbe49e3085..35e20c7a9b 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/text-search.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/text-search.md
@@ -7,9 +7,9 @@ platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Text search in React Pdfviewer component
+# Text search in React PDF Viewer component
-The Text Search option in PDF Viewer is used to find and highlight the text content from the document. You can enable/disable the text search using the following code snippet.
+The Text Search feature finds and highlights text in the PDF document. You can enable or disable text search using the examples below.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -77,30 +77,30 @@ root.render(
+
+
);
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Custom Styles
+
+While built-in themes provide a comprehensive look and feel, you might need to apply specific style overrides for your application.
+
+### Implementation Guidelines
+
+* **Load Order:** Always load the Syncfusion default theme CSS before applying any custom overrides.
+* **Custom Classes:** Prefer using `.e-custom-style` classes for overrides to ensure your styles are applied correctly without conflicting with internal logic.
+* **Avoid Deep Overrides:** Do not override internal classes deeply, as this may break the component's layout or responsiveness in future updates.
+
+#### How-to: Apply Custom Styles
+
+Apply overrides using a wrapper class so the rules are scoped and safe to maintain. The following example adds custom styles to signature form fields:
+
+{% tabs %}
+{% highlight css tabtitle="App.css" %}
+{% raw %}
+/* This rule sets a scoped, custom black background for the PDF viewer page container */
+.e-custom-style .e-pv-page-container {
+ background: #0b1220;
+}
+
+/* The following rules style the signature form fields with blue background. See screenshot below for more clarity */
+.e-custom-style .e-pdfviewer-signatureformfields,
+.e-custom-style .e-pdfviewer-signatureformfields-signature {
+ border: 1px solid #b3d1ff !important;
+ border-radius: 5px;
+}
+.e-custom-style span[id^='signIcon'] {
+ background-color: #e6f2ff !important;
+ border: 1px solid #b3d1ff !important;
+ border-radius: 4px !important;
+ font-weight: bold !important;
+ color: #003366 !important;
+ display: inline-block !important;
+ height: 100% !important;
+ text-align: center !important;
+}
+.e-custom-style span[id^='initialIcon'] {
+ background-color: #e6f2ff !important;
+ border: 1px solid #b3d1ff !important;
+ border-radius: 4px !important;
+ font-weight: bold !important;
+ color: #003366 !important;
+ display: inline-block !important;
+ height: 100% !important;
+ text-align: center !important;
+}
+{% endraw %}
+{% endhighlight %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import './App.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Explanation
+
+This section explains the rationale behind the recommendations and common pitfalls:
+
+- Use a scoped wrapper class (for example `.e-custom-style`) to avoid fragile, global overrides that can break when internal selectors change.
+- Load order is important: theme CSS provides base variables and components' base rules; custom overrides must load after theme CSS to take effect reliably.
+- Prefer toggling theme files or a small root class rather than deep selector overrides when implementing dark mode — this makes switching simpler and reduces maintenance.
+- Avoid overusing `!important`; reserve it for third-party widgets or unavoidable form-field styling where the library applies strong specificity.
+- Always verify color-contrast and keyboard focus styles after applying themes or overrides to preserve accessibility.
+
+### Reference
+
+* [Theme Studio for Syncfusion® React components](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md
index f8855fb755..60553f1188 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md
@@ -1,199 +1,135 @@
---
layout: post
-title: Annotation Toolbar in React PDF viewer control | Syncfusion
-description: Learn here all about annotation toolbar customization in Syncfusion React PDF viewer control of Syncfusion Essential JS 2 and more.
+title: Customize the Annotation Toolbar in React PDF Viewer | Syncfusion
+description: Show or hide and customize the annotation toolbar in the EJ2 React PDF Viewer with runnable examples.
platform: document-processing
-control: PDF Viewer
+control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# Annotation Toolbar Customization in React
+# Customize the Annotation Toolbar in React PDF Viewer
-The annotation toolbar can be customized by showing or hiding default items and by controlling the order in which they appear.
+## Overview
-## Show or hide the annotation toolbar
+This guide shows how to show or hide the annotation toolbar and how to choose which tools appear and their order.
-Show or hide the annotation toolbar programmatically during initialization or at runtime.
+**Outcome:** A working React example that toggles the annotation toolbar and uses [`annotationToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#annotationtoolbaritems) to customize the toolbar.
-Use the [EnableAnnotationToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel/#enableannotationtoolbar) property or the [showAnnotationToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/#showannotationtoolbar) method to toggle visibility.
+## Prerequisites
-The following code snippet explains how to show or hide the annotation toolbar using the `showAnnotationToolbar` method.
+- EJ2 React PDF Viewer installed and added in your project. See [getting started guide](../getting-started)
+- A valid [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) for viewer assets when running locally
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
- ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-react-pdfviewer';
-
-PdfViewerComponent.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const App = () => {
- let pdfviewer;
-
- React.useEffect(() => {
- const buttonElement = document.getElementById('showAnnotationToolbar');
- const handleClick = () => {
- if (pdfviewer) {
- pdfviewer.toolbar.showAnnotationToolbar(false);
- }
- };
- buttonElement?.addEventListener('click', handleClick);
- return () => buttonElement?.removeEventListener('click', handleClick);
- }, []);
+## Steps
- return (
-
-
+### 1. Show or hide the annotation toolbar
+
+Use the [`showAnnotationToolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showannotationtoolbar) method on the viewer toolbar to control visibility.
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+const viewer: RefObject = useRef(null);
+const [show, setShow] = useState(true);
+const hideToolbar = () => {
+ viewer.current.toolbar.showAnnotationToolbar(show);
+ setShow(!show);
+};
+return (
+ EJ2 PDF Viewer
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
-The annotation toolbar is presented when entering annotation mode in PDF Viewer and adapts responsively based on the available width. Include the Close tool to allow users to exit the annotation toolbar when needed.
+**Complete example**
-The following example demonstrates how to customize the annotation toolbar by specifying a selected set of tools using `AnnotationToolbarItem`.
+The following is a complete, runnable example. It wires a toggle button and a viewer with a custom annotation toolbar list.
{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
- ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, AnnotationToolbarItem } from '@syncfusion/ej2-react-pdfviewer';
-
-PdfViewerComponent.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const App = () => {
- let pdfviewer;
- const annotationToolbarItems = [
- "HighlightTool",
- "UnderlineTool",
- "StrikethroughTool",
- "ColorEditTool",
- "OpacityEditTool",
- "AnnotationDeleteTool",
- "StampAnnotationTool",
- "HandWrittenSignatureTool",
- "InkAnnotationTool",
- "ShapeTool",
- "CalibrateTool",
- "StrokeColorEditTool",
- "ThicknessEditTool",
- "FreeTextAnnotationTool",
- "FontFamilyAnnotationTool",
- "FontSizeAnnotationTool",
- "FontStylesAnnotationTool",
- "FontAlignAnnotationTool",
- "FontColorAnnotationTool",
- "CommentPanelTool"
- ];
-
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import { useRef, RefObject, useState } from 'react';
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
+ AnnotationToolbarItem, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+const annotationToolbarItems: AnnotationToolbarItem[] = [
+ 'HighlightTool', 'UnderlineTool', 'StrikethroughTool', 'ColorEditTool', 'OpacityEditTool', 'AnnotationDeleteTool', 'CommentPanelTool'
+];
+export default function App() {
+ const viewer: RefObject = useRef(null);
+ const [show, setShow] = useState(true);
+ const hideToolbar = () => {
+ viewer.current.toolbar.showAnnotationToolbar(show);
+ setShow(!show);
+ };
return (
- { pdfviewer = scope; }}
- documentPath='https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
- resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
- height="500px"
- width="100%"
- toolbarSettings={{ annotationToolbarItems }}
- />
+ EJ2 PDF Viewer
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
{ pdfviewer = scope; }}
- documentPath='https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
+ ref={viewer}
+ documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
- height="500px"
- width="100%"
- />
-
- );
-};
-
-ReactDOM.render(Loading....
-
-
-
+ height="600px"
+ width="100%" >
+
-
-
-
+);
+{% endraw %}
{% endhighlight %}
{% endtabs %}
-## How to customize the annotation toolbar
+### 2. Show or hide annotation toolbar items
-Choose which tools appear and control their order in the annotation toolbar.
+Use [`annotationToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#annotationtoolbaritems) with a list of [`AnnotationToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationtoolbaritem) values. The toolbar shows only items in this list.
-Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings/) with the [`AnnotationToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings/#annotationtoolbaritems) property to choose which tools are displayed in the annotation toolbar. The property accepts a list of [`AnnotationToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationToolbarItem/) values. Only the items included in this list are shown; any item not listed is hidden. The rendered order follows the sequence of items in the list.
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+const annotationToolbarItems: AnnotationToolbarItem[] = [
+ 'HighlightTool', 'UnderlineTool', 'StrikethroughTool', 'ColorEditTool', 'OpacityEditTool', 'AnnotationDeleteTool', 'CommentPanelTool'
+];
+
+
+
+
+
);
};
-
-ReactDOM.render(Loading....
-
-
-
-
-
-
+{% endraw %}
{% endhighlight %}
{% endtabs %}
+
+## Troubleshooting
+
+- Annotation toolbar tools do not appear.
+ - **Cause**: The items are not valid [`AnnotationToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationtoolbaritem) strings or the viewer is not injected with [`Annotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation) / [`Toolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar) modules.
+ - **Solution**: Confirm services in `Inject` includes [`Toolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar) and [`Annotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation) and use valid item names.
+
+## Related topics
+
+- [Customize form designer toolbar](./form-designer-toolbar)
+- [customize primary toolbar](./primary-toolbar)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/custom-toolbar.md
index cb6b70d285..2e8a38c9ce 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/custom-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/custom-toolbar.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Custom Toolbar in React PDF Viewer Component | Syncfusion
+title: Create a custom toolbar in React PDF Viewer Component | Syncfusion
description: Learn here all about custom toolbar in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more.
control: PDF Viewer
platform: document-processing
@@ -8,151 +8,139 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Custom Toolbar in React PDF Viewer
+# Create a custom toolbar in React PDF Viewer
-The PDF Viewer provides APIs for user interaction options available in its built-in toolbar. Using these, you can create your own custom user interface for toolbar actions at the application level by hiding the default toolbar.
+The PDF Viewer provides APIs for the user interaction options available in its built-in toolbar. Using these APIs, a custom application-level toolbar can be created by hiding the default toolbar and adding Syncfusion EJ2 toolbar components.
Follow these steps to create a custom toolbar for the PDF Viewer:
**Step 1: Create a simple PDF Viewer sample.**
-Follow the steps provided in the [getting started](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) guide to create a basic PDF Viewer sample.
+Create a simple PDF Viewer sample by following the [getting started](https://ej2.syncfusion.com/react/documentation/pdfviewer/getting-started) guide.
**Step 2: Add HTML elements for the custom toolbar.**
{% tabs %}
{% highlight js tabtitle="Standalone" %}
{% raw %}
-
- render() {
- function template() {
- return (
- of 0
- );
- }
- function inputTemplate() {
- return (
-
- );
- }
- return (
-
-
- { this.viewer = scope; }}
- enableToolbar={false}
- documentLoad={this.documentLoaded}
- pageChange={this.onPageChange}
- documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf"
- resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
- style={{ 'display': 'block', 'height': '640px' }}>
-
-
-
-
- { this.toolbar = scope; }} clicked={this.clickHandler.bind(this)}>
-
-
-
-
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
-
+render() {
+ function template() {
+ return (
+ of 0
+ );
+ }
+ function inputTemplate() {
+ return (
+
+ );
+ }
+ return (
+
);
+}
{% endraw %}
{% endhighlight %}
{% highlight js tabtitle="Server-Backed" %}
{% raw %}
-
- render() {
- function template() {
- return (
-
+
- );
- }
-
+
+ { this.viewer = scope; }}
+ enableToolbar={false}
+ documentLoad={this.documentLoaded}
+ pageChange={this.onPageChange}
+ documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf"
+ resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+ style={{ 'display': 'block', 'height': '640px' }}>
+
+
+
+ { this.toolbar = scope; }} clicked={this.clickHandler.bind(this)}>
+
+
+
+
+ {/* Render the PDF Viewer */}
+
+
+
+
+
of 0
- );
- }
- function inputTemplate() {
- return (
-
- );
- }
- return (
-
-
- { this.viewer = scope; }}
- enableToolbar={false}
- documentLoad={this.documentLoaded}
- pageChange={this.onPageChange}
- documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf"
- serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
- style={{ 'display': 'block', 'height': '640px' }}>
-
-
-
- { this.viewer = scope; }}
-enableToolbar={false}
-documentLoad={this.documentLoaded}
-pageChange={this.onPageChange}
-documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf"
-resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-style={{ 'display': 'block', 'height': '640px' }}>
-
-
{% endraw %}
{% endhighlight %}
{% highlight js tabtitle="Server-Backed" %}
{% raw %}
-
- { this.viewer = scope; }}
enableToolbar={false}
@@ -211,11 +193,8 @@ style={{ 'display': 'block', 'height': '640px' }}>
documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf"
serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
style={{ 'display': 'block', 'height': '640px' }}>
-
-
-
+ { toolbar = scope; }} clicked={clickHandler.bind(this)}>
-
+
+
-
-```
+{% endraw %}
+{% endhighlight %}
**Step 6: Add EJ2 Toolbar for magnification actions.**
Add Syncfusion EJ2 Toolbar components to perform magnification actions in the PDF Viewer:
-```ts
+{% highlight ts %}
+{% raw %}
-
-
+
+
-
-```
+{% endraw %}
+{% endhighlight %}
**Step 7: Add custom toolbar styling.**
- ```css
- #magnificationToolbarItems {
+{% highlight css %}
+{% raw %}
+#magnificationToolbarItems {
position: absolute;
bottom: 66px;
display: block;
@@ -275,334 +257,292 @@ Add Syncfusion EJ2 Toolbar components to perform magnification actions in the PD
transform: rotate(90deg);
right: 7.5px;
z-index: 1001;
- }
-
- #magnificationToolbar {
- background: transparent;
- }
-
- .e-pv-zoom-out-sample {
+}
+#magnificationToolbar {
+ background: transparent;
+}
+.e-pv-zoom-out-sample {
transform: rotate(-90deg);
- }
-
- div#magnificationToolbar.e-toolbar .e-toolbar-items {
+}
+div#magnificationToolbar.e-toolbar .e-toolbar-items {
background: transparent;
padding: 2px 3px 2px 2px;
- }
-
- #magnificationToolbar.e-toolbar .e-tbar-btn {
+}
+#magnificationToolbar.e-toolbar .e-tbar-btn {
border-radius: 50%;
min-height: 30px;
min-width: 30px;
border: 0.5px solid #c8c8c8;
- }
-
- #topToolbar {
+}
+#topToolbar {
top: 0px;
z-index: 1001;
- }
-
- .e-pv-current-page-number {
+}
+.e-pv-current-page-number {
width: 46px;
height: 28px;
text-align: center;
- }
-
- .material .e-pv-current-page-number {
+}
+.material .e-pv-current-page-number {
border-width: 1px;
- }
-
- .e-pv-icons {
+}
+.e-pv-icons {
font-family: "e-pv-icons";
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-transform: none;
- }
-
- .e-pdf-toolbar .e-icons::before {
+}
+.e-pdf-toolbar .e-icons::before {
font-family: 'e-pv-icons';
- }
-
- .e-pv-icon-search::before {
+}
+.e-pv-icon-search::before {
font-family: 'e-pv-icons';
font-size: 12px;
- }
-
- #topToolbar .e-pv-download-document-icon::before {
+}
+#topToolbar .e-pv-download-document-icon::before {
padding-left: 4px;
content: '\ed05';
- }
-
- #topToolbar .e-pv-print-document-icon::before {
+}
+#topToolbar .e-pv-print-document-icon::before {
padding-left: 1px;
content: '\ed08';
- }
-
- .e-pv-previous-page-navigation-icon::before {
- content: '\ed01';
- }
-
- .e-pv-next-page-navigation-icon::before {
- content: '\ed02';
- }
-
- .e-pv-zoom-out-sample::before {
- content: '\ed03';
- }
-
- .e-pv-zoom-in-icon::before {
+}
+.e-pv-previous-page-navigation-icon::before {
+ content: '\ed01';
+}
+.e-pv-next-page-navigation-icon::before {
+ content: '\ed02';
+}
+.e-pv-zoom-out-sample::before {
+ content: '\ed03';
+}
+.e-pv-zoom-in-icon::before {
content: '\ed04';
- }
-
- .e-pv-fit-page::before {
+}
+.e-pv-fit-page::before {
content: '\ed12';
- }
- .e-pv-open-document-icon::before {
+}
+.e-pv-open-document-icon::before {
content: '\ed13';
- }
-
- @font-face {
+}
+@font-face {
font-family: "e-pv-icons";
font-style: normal;
font-weight: normal;
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj8wS0QAAAEoAAAAVmNtYXDSeNLMAAABuAAAAFZnbHlmok0NtwAAAjAAAAPkaGVhZBN3pEcAAADQAAAANmhoZWEHrwNhAAAArAAAACRobXR4NsgAAAAAAYAAAAA4bG9jYQdkBmQAAAIQAAAAHm1heHABHAAwAAABCAAAACBuYW1lD0oZXgAABhQAAALBcG9zdFG4mE4AAAjYAAAAyAABAAADUv9qAFoEAAAA/+gEAAABAAAAAAAAAAAAAAAAAAAADgABAAAAAQAAxsly1F8PPPUACwPoAAAAANgsr7EAAAAA2CyvsQAAAAAEAAQAAAAACAACAAAAAAAAAAEAAAAOACQABAAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6RDpHQNS/2oAWgQAAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAEIAAAAGAAQAAQAC6RLpHf//AADpEOkU//8AAAAAAAEABgAKAAAAAQACAAMABQAGAAcACAAJAAoACwAMAA0AAAAAAAAAAUACoAZACkAL4A7gEuAVwBcAGEAZ4ByAHyAAAAAQAAAAAD6gMuAAUAAAkBBwkBJwIAAet0/on+iXQDL/4VcwF3/olzAAEAAAAAA+oDLgAFAAATCQEXCQGJAXcBd3T+Ff4VAy/+iQF3c/4VAesAAAAAAwAAAAAEAAQAAAMADwAbAAABITUhBQ4BBy4BJz4BNx4BBRYAFzYANyYAJwYAAQACAP4AAoAE2aOj2QQE2aOj2fyEBgEh2dkBIQYG/t/Z2f7fAcCAQKPZBATZo6PZBATZo9n+3wYGASHZ2QEhBgb+3wAAAAADAAAAAAQABAAACwAXACMAAAEjFTMVMzUzNSM1IwEOAQcuASc+ATceAQUWABc2ADcmACcGAAHAwMCAwMCAAcAE2aOj2QQE2aOj2fyEBgEh2dkBIQYG/t/Z2f7fAkCAwMCAwP8Ao9kEBNmjo9kEBNmj2f7fBgYBIdnZASEGBv7fAAIAAAAAAwAEAAADAAoAADEhNSEBIQkBIREhAwD9AAEA/wABgAGA/wD/AIACAP6AAYABgAACAAAAAANABAAADgAaAAABMh4CFRElBRE0Nz4BMycGFRElBRE0JiMhIgKdCwwHBf7g/uAJBAwKdC8BoAGgX0T+BkQDgAYGCwr9YHZ2AqAOCQQGUS9D/KGrqwNfRlsAAAACAAAAAAP/BAAACwAjAAABDgEHLgEnPgE3HgEFHgEXMjY/ARcVATcBIyc3PgE1LgEnDgECgAOQbW2QAwOQbW2Q/YME2aNGfDIDJAEEYf78MyMCKi4E2aOj2QKAbZADA5BtbZADA5Bto9kELioDJDP+/GEBBCQDMnxGo9kEBNkAAAQAAAAABAAEAAADAAcAFQAZAAABFSE1JRUjNSERMxUhNTMRLgEnIQ4BNyE1IQLA/oACQID9AMACgMABSDf9ADdIvwKA/YABwMDAwICA/sDAwAFAN0gBAUmKwAAAAQAAAAACQAQAAAUAABEBNwkBJwHsU/6HAXpSAmD+YGIBPgE+YgAAAAEAAAAAAkAEAAAFAAARCQEXCQEBev6HUwHs/hMDnv7C/sJiAaABoAABAAAAAAKABAAACwAAERcHFzcXNyc3Jwcn9fVM9PVL9PRL9fQDtfX0TPX1TPT0TPT0AAAABAAAAAAD8APwAAUACwARABcAACEzNTM1IQUzFTMRISUhNSM1IwUjFSERIwJ2fvz+hv2K/H7+hgJ2AXr8fv6G/AF6fvx+fvwBevx+/Px+AXoAAAAAAgAAAAAEAAQAAAMAFgAAAREhEScGFREUFhchPgE1ETQmIyEnIQYDgP0AYh48LQMuLTw8Lf5pa/7ULQMA/gACAN8eLf1YLTwDAzwtAigvPYACAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAUAAEAAQAAAAAAAgAHABUAAQAAAAAAAwAUABwAAQAAAAAABAAUADAAAQAAAAAABQALAEQAAQAAAAAABgAUAE8AAQAAAAAACgAsAGMAAQAAAAAACwASAI8AAwABBAkAAAACAKEAAwABBAkAAQAoAKMAAwABBAkAAgAOAMsAAwABBAkAAwAoANkAAwABBAkABAAoAQEAAwABBAkABQAWASkAAwABBAkABgAoAT8AAwABBAkACgBYAWcAAwABBAkACwAkAb8gY3VzdG9tLXRvb2xiYXJbMTkwOF1SZWd1bGFyY3VzdG9tLXRvb2xiYXJbMTkwOF1jdXN0b20tdG9vbGJhclsxOTA4XVZlcnNpb24gMS4wY3VzdG9tLXRvb2xiYXJbMTkwOF1Gb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBSAGUAZwB1AGwAYQByAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBjAHUAcwB0AG8AbQAtAHQAbwBvAGwAYgBhAHIAWwAxADkAMAA4AF0AVgBlAHIAcwBpAG8AbgAgADEALgAwAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwAIVG9wLWljb24LZG93bi1hcnJvdzIKUFZfWm9vbW91dAlQVl9ab29taW4LUFZfRG93bmxvYWMMUFZfQm9va21hcmsJUFZfU2VhcmNoCFBWX1ByaW50C1BWX1ByZXZpb3VzB1BWX05leHQIUFZfQ2xvc2UMUFZfRml0VG9QYWdlB1BWX09wZW4AAA==) format('truetype');
- }
- ```
+}
+{% endraw %}
+{% endhighlight %}
- The icons are embedded in the font file used in the above code snippet.
+The icons are embedded in the font file used in the above code snippet.
**Step 8: Add scripts for PDF Viewer user interaction.**
-```ts
+{% highlight ts %}
+{% raw %}
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
-
import {
- PdfViewerComponent,
- Magnification,
- Navigation,
- LinkAnnotation,
- BookmarkView,
- ThumbnailView,
- Print,
- TextSelection,
- TextSearch,
- Inject
+ PdfViewerComponent, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Inject
} from '@syncfusion/ej2-react-pdfviewer';
-
-import {
- ToolbarComponent,
- ItemsDirective,
- ItemDirective
-} from '@syncfusion/ej2-react-navigations';
+import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
class CustomToolbar extends React.Component {
- viewer = null;
- toolbar = null;
- currentPageNumber = '1';
- fileName = '';
-
- componentDidMount() {
- this.wireEvent();
- }
-
- wireEvent() {
- const input = document.getElementById('currentPage');
- if (input) {
- input.addEventListener('click', this.currentPageClicked);
- input.addEventListener('keypress', this.onCurrentPageBoxKeypress );
- input.value = this.currentPageNumber;
- }
- }
+ viewer = null;
+ toolbar = null;
+ currentPageNumber = '1';
+ fileName = '';
- documentLoaded = () => {
- const pageCount = document.getElementById('totalPage');
- if (pageCount && this.viewer) {
- pageCount.textContent = 'of ' + this.viewer.pageCount;
- this.updatePageNavigation();
- }
- };
-
- onPageChange = () => {
- this.currentPageNumber = this.viewer?.currentPageNumber.toString() || '1';
- const input = document.getElementById('currentPage');
- if (input) input.value = this.currentPageNumber;
- this.updatePageNavigation();
- };
-
- updatePageNavigation() {
- if (!this.viewer) return;
- const prev = document.getElementById('previous_page')?.parentElement ;
- const next = document.getElementById('next_page')?.parentElement ;
- if (!prev || !next) return;
-
- if (this.viewer.currentPageNumber === 1) {
- (this.toolbar )?.enableItems(prev, false);
- (this.toolbar )?.enableItems(next, true);
- } else if (this.viewer.currentPageNumber === this.viewer.pageCount) {
- (this.toolbar )?.enableItems(prev, true);
- (this.toolbar )?.enableItems(next, false);
- } else {
- (this.toolbar )?.enableItems(prev, true);
- (this.toolbar )?.enableItems(next, true);
+ componentDidMount() {
+ this.wireEvent();
}
- }
-
- currentPageClicked = () => {
- const el = document.getElementById('currentPage') ;
- el?.select();
- };
-
- onCurrentPageBoxKeypress = (event) => {
- const box = document.getElementById('currentPage') ;
- if (!box) return;
- const which = (event ).which;
- if ((which < 48 || which > 57) && which !== 8 && which !== 13) {
- event.preventDefault();
- return false;
- } else {
- const n = parseInt(box.value);
- if (which === 13 && this.viewer) {
- if (n > 0 && n <= this.viewer.pageCount) {
- this.viewer.navigation.goToPage(n);
- } else {
- box.value = this.viewer.currentPageNumber.toString();
+
+ wireEvent() {
+ const input = document.getElementById('currentPage');
+ if (input) {
+ input.addEventListener('click', this.currentPageClicked);
+ input.addEventListener('keypress', this.onCurrentPageBoxKeypress );
+ input.value = this.currentPageNumber;
}
- }
- return true;
}
- };
-
- readFile = (evt) => {
- const files = evt.target.files;
- if (!files || !files.length) return;
- const file = files[0];
- this.fileName = file.name;
- const reader = new FileReader();
- reader.onload = () => {
- const url = reader.result ;
- if (this.viewer) {
- this.viewer.load(url, null);
- this.viewer.fileName = this.fileName;
+
+ documentLoaded = () => {
const pageCount = document.getElementById('totalPage');
- if (pageCount) pageCount.textContent = 'of ' + this.viewer.pageCount;
- }
+ if (pageCount && this.viewer) {
+ pageCount.textContent = 'of ' + this.viewer.pageCount;
+ this.updatePageNavigation();
+ }
+ };
+
+ onPageChange = () => {
+ this.currentPageNumber = this.viewer?.currentPageNumber.toString() || '1';
+ const input = document.getElementById('currentPage');
+ if (input) input.value = this.currentPageNumber;
+ this.updatePageNavigation();
};
- reader.readAsDataURL(file);
- };
-
- // Toolbar item click handler
- clickHandler = (args) => {
- switch (args.item.id) {
- case 'file_Open':
- (document.getElementById('fileUpload') )?.click();
- break;
- case 'previous_page':
- this.viewer?.navigation.goToPreviousPage();
- break;
- case 'next_page':
- this.viewer?.navigation.goToNextPage();
- break;
- case 'print':
- this.viewer?.print.print();
- break;
- case 'download':
- this.viewer?.download();
- break;
- case 'fit_to_page':
- this.viewer?.magnification.fitToPage();
- break;
- case 'zoom_in':
- this.viewer?.magnification.zoomIn();
- break;
- case 'zoom_out':
- this.viewer?.magnification.zoomOut();
- break;
+
+ updatePageNavigation() {
+ if (!this.viewer) return;
+ const prev = document.getElementById('previous_page')?.parentElement ;
+ const next = document.getElementById('next_page')?.parentElement ;
+ if (!prev || !next) return;
+
+ if (this.viewer.currentPageNumber === 1) {
+ (this.toolbar )?.enableItems(prev, false);
+ (this.toolbar )?.enableItems(next, true);
+ } else if (this.viewer.currentPageNumber === this.viewer.pageCount) {
+ (this.toolbar )?.enableItems(prev, true);
+ (this.toolbar )?.enableItems(next, false);
+ } else {
+ (this.toolbar )?.enableItems(prev, true);
+ (this.toolbar )?.enableItems(next, true);
+ }
}
- };
-
- // Small templates for toolbar
- totalTemplate = () => (
-
- { this.toolbar = scope; }} clicked={this.clickHandler.bind(this)}>
-
-
-
-
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
-
+render() {
+ function template() {
+ return (
+ of 0
+ );
+ }
+ function inputTemplate() {
+ return (
+
+ );
+ }
+ return (
+
);
+}
{% endraw %}
{% endhighlight %}
{% endtabs %}
@@ -161,19 +149,17 @@ Follow the steps provided in the [getting started](https://ej2.syncfusion.com/ja
Import and inject the modules required for the custom toolbar functionality:
-
- ```ts
-
- import * as ReactDOM from 'react-dom';
- import * as React from 'react';
- import {
- PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
- ThumbnailView, Print, TextSelection, TextSearch, Inject
- } from '@syncfusion/ej2-react-pdfviewer';
- import { ToolbarComponent, ItemsDirective, ItemDirective, ClickEventArgs } from '@syncfusion/ej2-react-navigations';
- import { RouteComponentProps } from 'react-router';
-
- ```
+{% highlight ts %}
+{% raw %}
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+import { ToolbarComponent, ItemsDirective, ItemDirective, ClickEventArgs } from '@syncfusion/ej2-react-navigations';
+import { RouteComponentProps } from 'react-router';
+{% endraw %}
+{% endhighlight %}
**Step 4: Hide the default toolbar of the PDF Viewer.**
@@ -182,27 +168,23 @@ Hide the default toolbar using `enableToolbar` and `enableThumbnail` properties:
{% tabs %}
{% highlight js tabtitle="Standalone" %}
{% raw %}
-
+
- );
- }
-
+
+ { this.viewer = scope; }}
+ enableToolbar={false}
+ documentLoad={this.documentLoaded}
+ pageChange={this.onPageChange}
+ documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf"
+ serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+ style={{ 'display': 'block', 'height': '640px' }}>
+
+
+
+ { this.toolbar = scope; }} clicked={this.clickHandler.bind(this)}>
+
+
+
+
+ {/* Render the PDF Viewer */}
+
+
+
+
+
-
- of 0
-
-
- );
-
- inputTemplate = () => (
-
-
-
- );
-
- render() {
- return (
-
- { pdfviewer = scope; }}
id="PdfViewer"
- enableFormDesigner={false}
+ isFormDesignerToolbarVisible={true}
documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
- style={{ height: '500px', width: '100%' }}
- >
+ style={{ height: '500px', width: '100%' }}>
);
-};
-
-export default App;
-
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-
-
-
-
-
- EJ2 PDF Viewer
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
-const App = () => {
- let pdfviewer;
+**Complete example:**
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import { RefObject, useRef, useState } from 'react';
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function App() {
+ const viewer: RefObject = useRef(null);
+ const [show, setShow] = useState(true);
+ const hideFormDesignerToolbar = () => {
+ viewer.current.isFormDesignerToolbarVisible = !show;
+ setShow(!show);
+ }
return (
- { pdfviewer = scope; }}
- id="PdfViewer"
- documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
- resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
- toolbarSettings={{
- formDesignerToolbarItems: [
- 'TextboxTool',
- 'PasswordTool',
- 'CheckBoxTool',
- 'RadioButtonTool',
- 'DropdownTool',
- 'ListboxTool',
- 'DrawSignatureTool',
- 'DeleteTool'
- ]
- }}
- style={{ height: '500px', width: '100%' }}
- >
-
+ EJ2 PDF Viewer
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- { pdfviewer = scope; }}
- enableToolbar={false}
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
- style={{ height: '500px', width: '100%' }}
- >
-
- );
+export default function App() {
+ return (
+
+
+ );
}
-
-export default App;
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-
-
-
-
-
- EJ2 PDF Viewer
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- { pdfviewer = scope; }}
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
- style={{ height: '500px', width: '100%' }}
- >
-
- );
-}
+### 3. Show or hide primary toolbar items
+
+Provide the [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#toolbaritems) array with the exact set and order of items you want to show. Any item omitted is hidden.
-export default App;
+{% highlight ts %}
+{% raw %}
+EJ2 PDF Viewer
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- = useRef(null);
+ const buttonRef: RefObject = useRef(null);
+ const [showTool, setShowTool] = useState(false);
+ const handler = () => {
+ const temp: boolean = showTool;
+ pdfviewerRef.current?.toolbar.showToolbar(temp);
+ setShowTool(!temp);
+ }
+ const handleToolbarClick = (event: ClickEventArgs) => {
+ if (event.item.id === 'custom_btn') {
+ handleFitToWidth();
+ }
+ }
+ const handleFitToWidth = () => pdfviewerRef.current?.magnification.fitToWidth();
+ const toolbarItems: (CustomToolbarItem | ToolbarItem)[] = [
+ 'OpenOption',
+ {
+ id: 'custom_btn',
+ text: 'Fit to Width',
+ align: 'Center'
+ } as CustomToolbarItem,
+ 'DownloadOption'
+ ];
+ return (
+
- (this.toolbar = t)}
- clicked={this.clickHandler}
- >
-
-
-
+
+ currentPageClicked = () => {
+ const el = document.getElementById('currentPage') ;
+ el?.select();
+ };
+
+ onCurrentPageBoxKeypress = (event) => {
+ const box = document.getElementById('currentPage') ;
+ if (!box) return;
+ const which = (event ).which;
+ if ((which < 48 || which > 57) && which !== 8 && which !== 13) {
+ event.preventDefault();
+ return false;
+ } else {
+ const n = parseInt(box.value);
+ if (which === 13 && this.viewer) {
+ if (n > 0 && n <= this.viewer.pageCount) {
+ this.viewer.navigation.goToPage(n);
+ } else {
+ box.value = this.viewer.currentPageNumber.toString();
+ }
+ }
+ return true;
+ }
+ };
+
+ readFile = (evt) => {
+ const files = evt.target.files;
+ if (!files || !files.length) return;
+ const file = files[0];
+ this.fileName = file.name;
+ const reader = new FileReader();
+ reader.onload = () => {
+ const url = reader.result ;
+ if (this.viewer) {
+ this.viewer.load(url, null);
+ this.viewer.fileName = this.fileName;
+ const pageCount = document.getElementById('totalPage');
+ if (pageCount) pageCount.textContent = 'of ' + this.viewer.pageCount;
+ }
+ };
+ reader.readAsDataURL(file);
+ };
+
+ // Toolbar item click handler
+ clickHandler = (args) => {
+ switch (args.item.id) {
+ case 'file_Open':
+ (document.getElementById('fileUpload') )?.click();
+ break;
+ case 'previous_page':
+ this.viewer?.navigation.goToPreviousPage();
+ break;
+ case 'next_page':
+ this.viewer?.navigation.goToNextPage();
+ break;
+ case 'print':
+ this.viewer?.print.print();
+ break;
+ case 'download':
+ this.viewer?.download();
+ break;
+ case 'fit_to_page':
+ this.viewer?.magnification.fitToPage();
+ break;
+ case 'zoom_in':
+ this.viewer?.magnification.zoomIn();
+ break;
+ case 'zoom_out':
+ this.viewer?.magnification.zoomOut();
+ break;
+ }
+ };
+
+ // Small templates for toolbar
+ totalTemplate = () => (
+ (this.viewer = v)}
- enableToolbar={false}
- resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- documentLoad={this.documentLoaded}
- pageChange={this.onPageChange}
- style={{ height: '640px', width: '100%', display: 'block' }}
- >
-
-
+ inputTemplate = () => (
+
+
+ of 0
+
+ );
-
-
-
+
+
);
- }
+
+ render() {
+ return (
+
+ (this.viewer = v)}
+ enableToolbar={false}
+ resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+ documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+ documentLoad={this.documentLoaded}
+ pageChange={this.onPageChange}
+ style={{ height: '640px', width: '100%', display: 'block' }}
+ >
+
+
+ );
+ }
}
+{% endraw %}
+{% endhighlight %}
-```
+Sample: [https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/custom-toolbar](https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/custom-toolbar)
-Sample :
-[https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/custom-toolbar]
## See also
-* [Feature Modules](./feature-module)
+* [Feature Modules](./feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/form-designer-toolbar.md
index 63e9af5b05..246d0a031f 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/form-designer-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/form-designer-toolbar.md
@@ -1,170 +1,141 @@
---
layout: post
-title: Form Designer Toolbar in React PDF Viewer Component | Syncfusion
-description: Learn here all about form designer toolbar customization in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more.
+title: Customize the Form Designer Toolbar in React PDF Viewer | Syncfusion
+description: Learn how to show or hide and customize the Form Designer toolbar in the Syncfusion EJ2 React PDF Viewer.
platform: document-processing
control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# Form Designer Toolbar Customization in React
+# Customize the Form Designer Toolbar in React PDF Viewer
-The form designer toolbar can be customized by showing or hiding default items and by controlling the order in which the items appear.
+## Overview
-## Show or hide the form designer toolbar
+This guide shows how to show or hide the form designer toolbar, and how to configure which tools appear and their order.
-Show or hide the form designer toolbar programmatically during initialization or at runtime.
+**Outcome**: a working React example customizing the form designer toolbar.
-Use the [EnableFormDesigner](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel/#enableformdesigner) property or the [showFormDesignerToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/#showformdesignertoolbar) method to toggle visibility.
+## Prerequisites
-The following code snippet explains how to show or hide the toolbar using the `EnableFormDesigner` property.
+- EJ2 React PDF Viewer installed and added in project. See [getting started guide](../getting-started)
+- If using standalone WASM mode, provide [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#resourceurl) or a [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#serviceurl) for server mode.
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-import React, { useRef } from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
- ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+## Steps
+
+### 1. Show or hide Form Designer toolbar at initialization
-const App = () => {
- let pdfviewer;
+Set the [`isFormDesignerToolbarVisible`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#isformdesignertoolbarvisible) property on PDF Viewer instance to `true` or `false` to control initial visibility.
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import React from 'react';
+import { PdfViewerComponent, Toolbar, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+export default function App() {
return (
+ (this.toolbar = t)}
+ clicked={this.clickHandler}
+ >
+
+
+
+
+
+
+
+ Loading....
-
-
-
-
-
-
+}
+{% endraw %}
{% endhighlight %}
{% endtabs %}
-## How to customize the form designer toolbar
+### 2. Show or hide form designer toolbar at runtime
-Choose which tools appear and control their order in the form designer toolbar.
+Use the [`isFormDesignerToolbarVisible`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#isformdesignertoolbarvisible) API on the viewer's instance on a custom method to toggle form designer visibility at runtime.
-Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings/) with the [`FormDesignerToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings/#formdesignertoolbaritems) property to choose which form design tools are available. The property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formDesignerToolbarItem/) values. The items you include are both displayed and rendered in the order listed; any items you omit are hidden. This provides a streamlined, user-friendly form design experience across devices.
+{% highlight ts %}
+{% raw %}
+pdfviewer.isFormDesignerToolbarVisible = true;
+{% endraw %}
+{% endhighlight %}
+
+### 3. Show or hide form designer toolbar items
-The following example demonstrates how to customize the form designer toolbar by configuring specific tools using `FormDesignerToolbarItem`.
+Use [`formDesignerToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#formdesignertoolbaritems) and supply an ordered array of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesignertoolbaritem) names.
{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-import React, { useRef } from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
- ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+
+
+
+
+
);
-};
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
-export default App;
+## Expected result
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-
-
-
-
-
- Loading....
-
-
-
-
-
+- The form designer toolbar appears (or is hidden) according to [`isFormDesignerToolbarVisible`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#isformdesignertoolbarvisible).
+- Only the listed tools appear.
-{% endhighlight %}
-{% endtabs %}
+## Troubleshooting
+
+- Toolbar or form designer tools do not appear.
+ - **Cause**: [`FormDesigner`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner) or [`Toolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar) service not injected.
+ - **Solution**: ensure [`FormDesigner`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner) and [`Toolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar) modules are injected to PDF Viewer.
+
+## Related topics
+
+- [Primary toolbar customization](./primary-toolbar)
+- [Annotation toolbar customization](./annotation-toolbar)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/mobile-toolbar.md
index 3c127a6aa9..bf6c2b05a9 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/mobile-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/mobile-toolbar.md
@@ -1,185 +1,93 @@
---
layout: post
-title: Mobile Toolbar Interface in React Pdfviewer control | Syncfusion
-description: Learn All About the Mobile Toolbar Interface in Syncfusion React Pdfviewer control of Syncfusion Essential JS 2 and more.
+title: Customize mobile Toolbar in React PDF Viewer | Syncfusion
+description: Learn how to customize the toolbar for mobile devices in the Syncfusion React PdfViewer and ensure smooth touch interactions.
platform: document-processing
control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# Mobile Toolbar Interface in React Pdfviewer control
-The Mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes essential tools like search, download, bookmarking, annotation, and page organization. Users also have the option to enable desktop toolbar features in mobile mode, providing a more extensive set of actions.
+# Customize mobile toolbar in React PdfViewer
-## Mobile Mode Toolbar Configuration
-In mobile mode, the toolbar is optimized for ease of use on small screens, presenting users with the most common actions for interacting with a PDF document. Below are the key features available in mobile mode:
+## Overview
-
+This how-to explains how to enable the desktop toolbar on mobile devices running the Syncfusion React PDF Viewer, and how to preserve touch scrolling when the desktop toolbar is used.
-### Main Toolbar Options:
+## Prerequisites
-**OpenOption:** Tap to load a PDF document.
+- EJ2 React PDF Viewer installed and imported in your React app.
+- For standalone mode: a valid [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) hosting the PDF Viewer assets.
+- For server-backed mode: a working [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) endpoint.
-**SearchOption:** Access the search bar to find text within the document.
+## Steps
-
+**Step 1:** Enable desktop toolbar on mobile: set [`enableDesktopMode`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabledesktopmode) to `true` on PDF Viewer.
-**UndoRedoTool:** Quickly undo or redo any annotations made.
+**Step 2:** (Optional, recommended) Disable text-selection to preserve smooth touch scrolling: set [`enableTextSelection`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabletextselection) to `false`.
-**OrganizePagesTool:** Enable or disable page organization features to modify document pages.
+**Step 3:** Inject the [`Toolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar) and other services required by your toolbar features via `Inject`.
-
-
-**AnnotationEditTool:** Activate or deactivate annotation editing to add or modify annotations.
-
-
-
-
-N> In mobile mode, the annotation toolbar is conveniently displayed at the bottom of the viewer.
-
-### More Options Menu:
-When you open the "more options" menu, you will see additional actions such as:
-
-**DownloadOption:** Tap to download the currently opened PDF document.
-
-**BookmarkOption:** Allows you to view bookmarks within the document.
-
-
-
-## Enabling Desktop Mode in Mobile
-
-The desktop version of the toolbar can be enabled on mobile devices by using the `enableDesktopMode` API. This API allows you to bring desktop-like features to the mobile PDF viewer, providing access to additional toolbar actions that are typically available on desktop platforms.
-
-### Steps to Enable Desktop Mode:
-
-**Step 1:** Set `enableDesktopMode` to true in the API configuration.
-
-**Step 2:** This will replace the mobile toolbar with the desktop toolbar layout, allowing access to more actions and controls.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-import React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
-
-function App() {
- let pdfviewer;
- return (
-
- { pdfviewer = scope; }}
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
- enableDesktopMode={true}
- height="640px"
- >
-
-
- );
-}
-
-export default App;
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-import React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
-
-function App() {
- let pdfviewer;
- return (
-
- { pdfviewer = scope; }}
- serviceUrl='https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- enableDesktopMode={true}
- height="640px"
- >
-
-
- );
-}
-
-export default App;
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable Scrolling in Desktop Mode with Touch Gestures
-
-To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, it is important to enable touch gesture scrolling. You can achieve this by setting the `enableTextSelection` option to **false**.
+**Example:**
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
-
-import React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
-
-function App() {
- let pdfviewer;
- return (
-
- { pdfviewer = scope; }}
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
- enableDesktopMode={true}
- enableTextSelection={false}
- height="640px"
- >
-
-
- );
+{% raw %}
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+export default function App() {
+ return (
+
+
+
+
+ );
}
-
-export default App;
-
+{% endraw %}
{% endhighlight %}
{% highlight ts tabtitle="Server-Backed" %}
-
-import React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
-
-function App() {
- let pdfviewer;
- return (
-
- { pdfviewer = scope; }}
- serviceUrl='https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
- documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
- enableDesktopMode={true}
- enableTextSelection={false}
- height="640px"
- >
-
-
- );
+{% raw %}
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+export default function App() {
+ return (
+
+
+
+
+ );
}
-
-export default App;
-
+{% endraw %}
{% endhighlight %}
{% endtabs %}
-## Print Option Not Available
-
-The Print option is not available in mobile mode by default. However, if you need to use the print functionality on mobile devices, we recommend enabling the desktop toolbar on mobile using the `enableDesktopMode` API.
-
-### How to Use Print on Mobile:
+## Troubleshooting
-**Enable Desktop Mode:** Set `enableDesktopMode` to true to load the desktop version of the toolbar on your mobile device.
+- Print option not visible on mobile: set [`enableDesktopMode`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabledesktopmode) to `true`; otherwise the mobile toolbar omits Print.
+- Touch scrolling is jerky after enabling desktop toolbar: set [`enableTextSelection`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabletextselection) to `false` to avoid text-selection capturing touch events.
+- Missing assets or broken UI: confirm [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) points to the correct version of the `ej2-pdfviewer-lib` and is reachable from the device.
+- Server errors in server-backed mode: verify [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) CORS configuration and that the back end is running.
-**Print Option:** Once desktop mode is enabled, the print option will be available, allowing you to print the document directly from your mobile device.
+## Related topics
-N> In mobile mode, the print functionality will not be available unless desktop mode is enabled.
\ No newline at end of file
+- [Customize form designer toolbar](./form-designer-toolbar)
+- [Customize annotation toolbar](./annotation-toolbar)
+- [Create a custom toolbar](./custom-toolbar)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/overview.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/overview.md
new file mode 100644
index 0000000000..83cc05ee2e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/overview.md
@@ -0,0 +1,72 @@
+---
+layout: post
+title: Toolbar in React PDF Viewer component | Syncfusion
+description: Learn here about various toolbars in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Toolbar overview in React PDF Viewer
+
+## Overview
+
+This page provides a concise reference describing the toolbars available in the EJ2 React PDF Viewer component. It also explains what each toolbar is for and when it appears.
+
+**Scope**: covers available toolbars and their functions.
+
+## List of Available Toolbars
+
+- [Primary toolbar](#primary-toolbar)
+- [Annotation toolbar](#annotation-toolbar)
+- [Form Designer toolbar](#form-designer-toolbar)
+- [Mobile toolbar](#mobile-toolbar)
+- [Custom toolbar](./custom-toolbar)
+
+## Functional overview of each toolbar
+
+### Primary toolbar
+
+The primary toolbar presents core viewer actions such as open/load, page navigation, zoom controls, and print. It appears in standard desktop layouts and at the top of the viewer when `Toolbar` service is injected. Typical actions: page forward/back, zoom in/out, fit-to-page, print.
+
+
+
+### Annotation toolbar
+
+The annotation toolbar surfaces annotation-related tools for adding, editing, and deleting annotations (text markup, shapes, stamps). It appears when annotation services are enabled and when a user opens annotation mode. Typical actions: highlight, underline, draw shape, add sticky note, delete annotation.
+
+
+
+### Form Designer toolbar
+
+Form designer toolbar provides form-field authoring controls used when designing or editing form fields inside a PDF. It appears when `FormDesigner` is enabled (design mode) and contains actions for adding form field controls.
+
+
+
+### Mobile toolbar
+
+- A compact toolbar layout optimized for small screens and touch interactions. It appears automatically on mobile-sized view ports (or when a mobile layout is explicitly chosen) and contains the most frequently used actions in a space-efficient arrangement.
+
+ 
+
+- Annotation toolbar in mobile mode appears at the bottom of the PDF Viewer component.
+
+ 
+
+## Show or hide toolbar items
+
+The following quick links describe how to customize, show, or hide specific toolbar items. Each linked page defines custom toolbar configurations and examples.
+
+- [Show or hide annotation toolbar items](./annotation-toolbar#2-show-or-hide-annotation-toolbar-items)
+- [Show or hide form designer toolbar items](./form-designer-toolbar#3-show-or-hide-form-designer-toolbar-items)
+- [Show or hide primary toolbar items](./primary-toolbar#3-show-or-hide-primary-toolbar-items)
+- [Add a custom primary toolbar item](./primary-toolbar#4-add-a-custom-primary-toolbar-item)
+
+## Further Reading
+
+- [Customize annotation toolbar](./annotation-toolbar)
+- [Customize form designer toolbar](./form-designer-toolbar)
+- [Customize mobile toolbar](./mobile-toolbar)
+- [Customize primary toolbar](./primary-toolbar)
+- [Create a custom toolbar](./custom-toolbar)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/primary-toolbar.md
index 635e2a9651..81b31c321c 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/primary-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/primary-toolbar.md
@@ -1,154 +1,161 @@
---
layout: post
-title: Primary Toolbar Customization in React PDF Viewer Component | Syncfusion
-description: Learn here all about primary toolbar customization in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more.
+title: Customize the Primary Toolbar in React PDF Viewer | Syncfusion
+description: Learn how to show or hide, reorder, and add items to the primary toolbar in the Syncfusion EJ2 React PDF Viewer.
platform: document-processing
control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# Primary Toolbar Customization in PDF Viewer Component
+# Customize Primary Toolbar in React PDF Viewer
-The primary toolbar of the PDF Viewer can be customized by rearranging existing items, disabling default items, and adding custom items. New items can be placed at specific index positions among the existing items.
+## Overview
-## Show or hide the primary toolbar
+This guide explains how to show or hide the primary toolbar, remove default items, and add custom toolbar items.
-Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI. In scenarios where a custom toolbar is required, the built-in toolbar can be hidden. Use the [enableToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel/#enabletoolbar) property or the [showToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/#showtoolbar) method to show or hide the primary toolbar.
+**Outcome**: Working React example customizing the primary toolbar.
-Show or hide the toolbar using the `enableToolbar` property:
+## Prerequisites
+
+- EJ2 React PDF Viewer installed and added in project. See [getting started guide](../getting-started)
+
+## Steps
+
+### 1. Show or hide primary toolbar at initialization
+
+Set [`enableToolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabletoolbar) to `false` to hide the built-in toolbar.
{% tabs %}
-{% highlight ts tabtitle="index.tsx" %}
-import React, { useRef } from 'react';
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
-function App() {
- let pdfviewer;
-
- return (
- Loading....
-
-
-
-
-
-
+{% endraw %}
{% endhighlight %}
{% endtabs %}
-The following code snippet explains how to show or hide the toolbar using the `showToolbar` method.
+### 2. Show or hide primary toolbar at runtime
-{% tabs %}
-{% highlight ts tabtitle="index.tsx" %}
-import React, { useEffect, useRef } from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
+Use the viewer's [`showToolbar()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showtoolbar) method to show or hide dynamically.
-function App() {
- let pdfviewer;
+```ts
+// with a ref named pdfviewer
+pdfviewer.toolbar.showToolbar(false);
+```
- useEffect(() => {
- const btn = document.getElementById('set');
- const handler = () => {
- pdfviewer?.toolbar.showToolbar(false);
- };
- btn?.addEventListener('click', handler);
- return () => btn?.removeEventListener('click', handler);
- }, []);
-
- return (
- Loading....
-
-
-
-
-
-
+### 4. Add a custom primary toolbar item
+
+Add a custom item by including an object in [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#toolbaritems) and handling its action via [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#toolbarclick). The following example shows adding a simple custom button at initialization.
+
+{% highlight ts %}
+{% raw %}
+const customItems: (CustomToolbarItem | ToolbarItem)[] = [
+ 'OpenOption',
+ {
+ id: 'custom_btn',
+ text: 'Fit to Width',
+ align: 'Center'
+ } as CustomToolbarItem,
+ 'DownloadOption'
+];
+
+
+
+
+
+ );
+}
+{% endraw %}
{% endhighlight %}
{% endtabs %}
+
+## Expected result
+
+- The primary toolbar shows only the items you list in [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#toolbaritems).
+- Clicking `Hide toolbar` calls [`showToolbar(false)`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showtoolbar) and hides or shows the toolbar at runtime.
+
+## Troubleshooting
+
+- Toolbar still shows all default items.
+ - **Solution**: [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#toolbaritems) must be supplied exactly; verify names and that [`Toolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar) service is injected.
+
+## Related topics
+
+- [Annotation toolbar customization](./annotation-toolbar)
+- [Form designer toolbar customization](./form-designer-toolbar)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar.md
deleted file mode 100644
index 1a32f09770..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar.md
+++ /dev/null
@@ -1,975 +0,0 @@
----
-layout: post
-title: Toolbar in React Pdfviewer component | Syncfusion
-description: Learn here all about Toolbar in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Toolbar
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Built-In Toolbar in React Pdfviewer component
-
-The PDF Viewer comes with a powerful built-in toolbar to execute important actions such as page navigation, text search,view mode,download,print,bookmark, and thumbnails.
-
-The following table shows built-in toolbar items and its actions:-
-
-| Option | Description |
-|---|---|
-| OpenOption | This option provides an action to load the PDF documents to the PDF Viewer.|
-| PageNavigationTool | This option provides an action to navigate the pages in the PDF Viewer. It contains GoToFirstPage,GoToLastPage,GotoPage,GoToNext, and GoToLast tools.|
-| MagnificationTool |This option provides an action to magnify the pages either with predefined or user defined zoom factors in the PDF Viewer. Contains ZoomIn, ZoomOut, Zoom, FitPage and FitWidth tools|
-| PanTool | This option provides an action for panning the pages in the PDF Viewer.|
-| SelectionTool | This option provides an action to enable/disable the text selection in the PDF Viewer.|
-| SearchOption | This option provides an action to search a word in the PDF documents.|
-| PrintOption | This option provides an action to print the PDF document being loaded in the PDF Viewer.|
-| DownloadOption |This Download option provides an action to download the PDF document that has been loaded in the PDF Viewer.|
-| UndoRedoTool | This tool provides options to undo and redo the annotation actions performed in the PDF Viewer.|
-| AnnotationEditTool | This tool provides options to enable or disable the edit mode of annotation in the PDF Viewer.|
-| FormDesignerEditTool | This tool provides options to enable or disable the edit mode of form fields in the PDF Viewer.|
-
-## Show/Hide the built-in toolbar
-
-The PDF Viewer has an option to show or hide the complete built-in toolbar. You can achieve this by using following two ways.,
-
-* **Show/Hide toolbar using enableToolbar API as in the following code snippet**
-
-{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% raw %}
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
- ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
-
-export function App() {
- return (
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
- element in either the `index.tsx` or `index.jsx` file:
-**serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**.
-
-{% previewsample "/document-processing/code-snippet/pdfviewer/react/base-cs2" %}
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/blob/master/Toolbar/How%20to%20hide%20toolbar/src/index.js)
-
-* **Show/Hide toolbar using showToolbar as in the following code snippet**
-
-{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% raw %}
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
- ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
-
-export function App() {
- function showToolbarClicked() {
- var viewer = document.getElementById('container').ej2_instances[0];
- viewer.toolbar.showToolbar(false);
- }
- return (
-
-
);
-
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
- {/* Render the PDF Viewer */}
-
-
-
-
- element in either the `index.tsx` or `index.jsx` file:
-**serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**.
-
-{% previewsample "/document-processing/code-snippet/pdfviewer/react/base-cs3" %}
-
-## Show/Hide the built-in toolbaritem
-
-The PDF Viewer has an option to show or hide these grouped items in the built-in toolbar.
-
-* **Show/Hide toolbaritem using toolbarSettings as in the following code snippet.**
-
-{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% raw %}
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Annotation, Navigation, LinkAnnotation, BookmarkView,
- ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
-
-export function App() {
- return (
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
- {/* Render the PDF Viewer */}
-
-
-
-
- element in either the `index.tsx` or `index.jsx` file:
-**serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**.
-
-{% previewsample "/document-processing/code-snippet/pdfviewer/react/base-cs4" %}
-
-* **Show/Hide toolbaritem using showToolbaritem as in the following code snippet**
-
-{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% raw %}
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Annotation, Navigation, LinkAnnotation, BookmarkView,
- ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
-
-export function App() {
- function showToolbarClicked() {
- var viewer = document.getElementById('container').ej2_instances[0];
- viewer.toolbar.showToolbarItem(["OpenOption"],false);
- }
- return (
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
- {/* Render the PDF Viewer */}
-
-
-
-
- element in either the `index.tsx` or `index.jsx` file:
-**serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**.
-
-{% previewsample "/document-processing/code-snippet/pdfviewer/react/base-cs5" %}
-
-## Customize Built-In Toolbar
-
-PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
-
-* Add - New items can defined by [**CustomToolbarItemModel**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/customToolbarItemModel) and with existing items in [**ToolbarSettings**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings) property. Newly added item click action can be defined in [`toolbarclick`](https://ej2.syncfusion.com/react/documentation/api/toolbar/clickEventArgs).
-
-* Show, Hide - Existing items can be shown or hidden using the [`ToolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarItem).
-
-* Enable, Disable - Toolbar items can be enabled or disable using [`enabletoolbaritem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#enabletoolbaritem)
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-{% raw %}
-
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import './index.css';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
- ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';
-import { ComboBox } from "@syncfusion/ej2-dropdowns";
-import { TextBox } from "@syncfusion/ej2-inputs";
-
-export function App() {
-
-// Add OnCreateSearch outside the App function
-function OnCreateSearch() {
- this.addIcon('prepend', 'e-icons e-search');
-}
-
- var toolItem1 = {
- prefixIcon: 'e-icons e-paste',
- id: 'print',
- tooltipText: 'Custom toolbar item',
-};
-var toolItem2 = {
- id: 'download',
- text: 'Save',
- tooltipText: 'Custom toolbar item',
- align: 'right'
-};
-var LanguageList = ['Typescript', 'Javascript', 'Angular', 'C#', 'C', 'Python'];
-var toolItem3 = {
- type: 'Input',
- tooltipText: 'Language List',
- cssClass: 'percentage',
- align: 'Left',
- id: 'dropdown',
- template: new ComboBox({ width: 100, value: 'TypeScript', dataSource: LanguageList, popupWidth: 85, showClearButton: false, readonly: false })
-};
-var toolItem4 = {
- type: 'Input',
- tooltipText: 'Text',
- align: 'Right',
- cssClass: 'find',
- id: 'textbox',
- template: new TextBox({ width: 125, placeholder: 'Type Here', created: OnCreateSearch})
-}
- function toolbarClick(args){
- var viewer = document.getElementById('container').ej2_instances[0];
- if (args.item && args.item.id === 'print') {
- viewer.printModule.print();
- }
- else if (args.item && args.item.id === 'download') {
- viewer.download();
- }
- };
-return ( { this.viewer = scope; }}
-enableToolbar={false}
-documentLoad={this.documentLoaded}
-pageChange={this.onPageChange}
-documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf"
-resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-style={{ 'display': 'block', 'height': '640px' }}>
-
-
-
-{% endraw %}
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-{% raw %}
-
- { this.viewer = scope; }}
- enableToolbar={false}
- documentLoad={this.documentLoaded}
- pageChange={this.onPageChange}
- documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf"
- serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
- style={{ 'display': 'block', 'height': '640px' }}>
-
-
-
-{% endraw %}
-{% endhighlight %}
-{% endtabs %}
-
-**Step 5:** Add the following style to achieve the custom toolbar styling,
-
- ```
- #magnificationToolbarItems {
- position: absolute;
- bottom: 66px;
- display: block;
- width: auto;
- transform: rotate(90deg);
- right: 7.5px;
- z-index: 1001;
- }
-
- #magnificationToolbar {
- background: transparent;
- }
-
- .e-pv-zoom-out-sample {
- transform: rotate(-90deg);
- }
-
- div#magnificationToolbar.e-toolbar .e-toolbar-items {
- background: transparent;
- padding: 2px 3px 2px 2px;
- }
-
- #magnificationToolbar.e-toolbar .e-tbar-btn {
- border-radius: 50%;
- min-height: 30px;
- min-width: 30px;
- border: 0.5px solid #c8c8c8;
- }
-
- #topToolbar {
- top: 0px;
- z-index: 1001;
- }
-
- .e-pv-current-page-number {
- width: 46px;
- height: 28px;
- text-align: center;
- }
-
- .material .e-pv-current-page-number {
- border-width: 1px;
- }
-
- .e-pv-icons {
- font-family: "e-pv-icons";
- font-style: normal;
- font-variant: normal;
- font-weight: normal;
- line-height: 1;
- text-transform: none;
- }
-
- .e-pdf-toolbar .e-icons::before {
- font-family: 'e-pv-icons';
- }
-
- .e-pv-icon-search::before {
- font-family: 'e-pv-icons';
- font-size: 12px;
- }
-
- #topToolbar .e-pv-download-document-icon::before {
- padding-left: 4px;
- content: '\ed05';
- }
-
- #topToolbar .e-pv-print-document-icon::before {
- padding-left: 1px;
- content: '\ed08';
- }
-
- .e-pv-previous-page-navigation-icon::before {
- content: '\ed01';
- }
-
- .e-pv-next-page-navigation-icon::before {
- content: '\ed02';
- }
-
- .e-pv-zoom-out-sample::before {
- content: '\ed03';
- }
-
- .e-pv-zoom-in-icon::before {
- content: '\ed04';
- }
-
- .e-pv-fit-page::before {
- content: '\ed12';
- }
- .e-pv-open-document-icon::before {
- content: '\ed13';
- }
-
- @font-face {
- font-family: "e-pv-icons";
- font-style: normal;
- font-weight: normal;
- src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMkMhTzoAAAEoAAAAVmNtYXDae9qvAAABuAAAAFZnbHlmok0NtwAAAjAAAAPkaGVhZBN5FAcAAADQAAAANmhoZWEHrwNhAAAArAAAACRobXR4NsgAAAAAAYAAAAA4bG9jYQdkBmQAAAIQAAAAHm1heHABHAAwAAABCAAAACBuYW1lsXg1swAABhQAAAJ5cG9zdFG4mE4AAAiQAAAAyAABAAADUv9qAFoEAAAA/+gEAAABAAAAAAAAAAAAAAAAAAAADgABAAAAAQAAaoJDiF8PPPUACwPoAAAAANgtZ5EAAAAA2C1nkQAAAAAEAAQAAAAACAACAAAAAAAAAAEAAAAOACQABAAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA7QHtEwNS/2oAWgQAAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAEIAAAAGAAQAAQAC7QntE///AADtAe0Q//8AAAAAAAEABgAWAAAAAQACAAMABAAFAAYABwAIAAkACgALAAwADQAAAAAAAAAUACoAZACkAL4A7gEuAVwBcAGEAZ4ByAHyAAAAAQAAAAAD6gMuAAUAAAkBBwkBJwIAAet0/on+iXQDL/4VcwF3/olzAAEAAAAAA+oDLgAFAAATCQEXCQGJAXcBd3T+Ff4VAy/+iQF3c/4VAesAAAAAAwAAAAAEAAQAAAMADwAbAAABITUhBQ4BBy4BJz4BNx4BBRYAFzYANyYAJwYAAQACAP4AAoAE2aOj2QQE2aOj2fyEBgEh2dkBIQYG/t/Z2f7fAcCAQKPZBATZo6PZBATZo9n+3wYGASHZ2QEhBgb+3wAAAAADAAAAAAQABAAACwAXACMAAAEjFTMVMzUzNSM1IwEOAQcuASc+ATceAQUWABc2ADcmACcGAAHAwMCAwMCAAcAE2aOj2QQE2aOj2fyEBgEh2dkBIQYG/t/Z2f7fAkCAwMCAwP8Ao9kEBNmjo9kEBNmj2f7fBgYBIdnZASEGBv7fAAIAAAAAAwAEAAADAAoAADEhNSEBIQkBIREhAwD9AAEA/wABgAGA/wD/AIACAP6AAYABgAACAAAAAANABAAADgAaAAABMh4CFRElBRE0Nz4BMycGFRElBRE0JiMhIgKdCwwHBf7g/uAJBAwKdC8BoAGgX0T+BkQDgAYGCwr9YHZ2AqAOCQQGUS9D/KGrqwNfRlsAAAACAAAAAAP/BAAACwAjAAABDgEHLgEnPgE3HgEFHgEXMjY/ARcVATcBIyc3PgE1LgEnDgECgAOQbW2QAwOQbW2Q/YME2aNGfDIDJAEEYf78MyMCKi4E2aOj2QKAbZADA5BtbZADA5Bto9kELioDJDP+/GEBBCQDMnxGo9kEBNkAAAQAAAAABAAEAAADAAcAFQAZAAABFSE1JRUjNSERMxUhNTMRLgEnIQ4BNyE1IQLA/oACQID9AMACgMABSDf9ADdIvwKA/YABwMDAwICA/sDAwAFAN0gBAUmKwAAAAQAAAAACQAQAAAUAABEBNwkBJwHsU/6HAXpSAmD+YGIBPgE+YgAAAAEAAAAAAkAEAAAFAAARCQEXCQEBev6HUwHs/hMDnv7C/sJiAaABoAABAAAAAAKABAAACwAAERcHFzcXNyc3Jwcn9fVM9PVL9PRL9fQDtfX0TPX1TPT0TPT0AAAABAAAAAAD8APwAAUACwARABcAACEzNTM1IQUzFTMRISUhNSM1IwUjFSERIwJ2fvz+hv2K/H7+hgJ2AXr8fv6G/AF6fvx+fvwBevx+/Px+AXoAAAAAAgAAAAAEAAQAAAMAFgAAAREhEScGFREUFhchPgE1ETQmIyEnIQYDgP0AYh48LQMuLTw8Lf5pa/7ULQMA/gACAN8eLf1YLTwDAzwtAigvPYACAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAOAAEAAQAAAAAAAgAHAA8AAQAAAAAAAwAOABYAAQAAAAAABAAOACQAAQAAAAAABQALADIAAQAAAAAABgAOAD0AAQAAAAAACgAsAEsAAQAAAAAACwASAHcAAwABBAkAAAACAIkAAwABBAkAAQAcAIsAAwABBAkAAgAOAKcAAwABBAkAAwAcALUAAwABBAkABAAcANEAAwABBAkABQAWAO0AAwABBAkABgAcAQMAAwABBAkACgBYAR8AAwABBAkACwAkAXcgY3VzdG9tLXRvb2xiYXJSZWd1bGFyY3VzdG9tLXRvb2xiYXJjdXN0b20tdG9vbGJhclZlcnNpb24gMS4wY3VzdG9tLXRvb2xiYXJGb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBSAGUAZwB1AGwAYQByAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBjAHUAcwB0AG8AbQAtAHQAbwBvAGwAYgBhAHIAVgBlAHIAcwBpAG8AbgAgADEALgAwAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwAIVG9wLWljb24LZG93bi1hcnJvdzIKUFZfWm9vbW91dAlQVl9ab29taW4LUFZfRG93bmxvYWQLUFZfQm9va21hcmsJUFZfU2VhcmNoCFBWX1ByaW50C1BWX1ByZXZpb3VzB1BWX05leHQIUFZfQ2xvc2UMUFZfRml0VG9QYWdlB1BWX09wZW4AAA==) format('truetype');
- }
- ```
-
- The icons are embedded in the font file used in above code snippet.
-
-**Step 6:** Add the following scripts for performing user interaction in PDF Viewer in code behind
-
- ```ts
-
- import * as ReactDOM from 'react-dom';
- import * as React from 'react';
- import {
- PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
- ThumbnailView, Print, TextSelection, TextSearch, Inject
- } from '@syncfusion/ej2-react-pdfviewer';
- import { ToolbarComponent, ItemsDirective, ItemDirective, ClickEventArgs } from '@syncfusion/ej2-react-navigations';
- import { RouteComponentProps } from 'react-router';
-
- export class CustomToolbar extends SampleBase<{}, {}> {
- public viewer: PdfViewerComponent;
- public toolbar: ToolbarComponent;
- public currentPageNumber: string = '1';
- public fileName: string = '';
- rendereComplete() {
- this.wireEvent();
- }
- render() {
- // template code from step 2
- }
- wireEvent() {
- let inputElement: HTMLInputElement = document.getElementById('currentPage') as HTMLInputElement;
- inputElement.addEventListener('click', this.currentPageClicked.bind(this));
- inputElement.addEventListener('keypress', this.onCurrentPageBoxKeypress.bind(this));
- inputElement.value = this.currentPageNumber;
- }
- onPageChange = () => {
- this.currentPageNumber = this.viewer.currentPageNumber.toString();
- let inputElement: HTMLInputElement = document.getElementById('currentPage') as HTMLInputElement;
- inputElement.value = this.currentPageNumber;
- this.updatePageNavigation();
- }
- clickHandler(args: ClickEventArgs) {
- switch (args.item.id) {
- case 'file_Open':
- document.getElementById('fileUpload').click();
- break;
- case 'previous_page':
- this.viewer.navigation.goToPreviousPage();
- break;
- case 'next_page':
- this.viewer.navigation.goToNextPage();
- break;
- case 'print':
- this.viewer.print.print();
- break;
- case 'download':
- this.viewer.download();
- break;
- case 'fit_to_page':
- this.viewer.magnification.fitToPage();
- break;
- case 'zoom_in':
- this.viewer.magnification.zoomIn();
- break;
- case 'zoom_out':
- this.viewer.magnification.zoomOut();
- break;
- }
- }
- documentLoaded = () => {
- var pageCount = document.getElementById('totalPage');
- pageCount.textContent = 'of ' + this.viewer.pageCount;
- this.updatePageNavigation();
- }
-
- updatePageNavigation() {
- if (this.viewer.currentPageNumber === 1) {
- this.toolbar.enableItems(document.getElementById('previous_page').parentElement, false);
- this.toolbar.enableItems(document.getElementById('next_page').parentElement, true);
- } else if (this.viewer.currentPageNumber === this.viewer.pageCount) {
- this.toolbar.enableItems(document.getElementById('previous_page').parentElement, true);
- this.toolbar.enableItems(document.getElementById('next_page').parentElement, false);
- } else {
- this.toolbar.enableItems(document.getElementById('previous_page').parentElement, true);
- this.toolbar.enableItems(document.getElementById('next_page').parentElement, true);
- }
- }
-
- onCurrentPageBoxKeypress(event) {
- let currentPageBox: HTMLInputElement = document.getElementById('currentPage') as HTMLInputElement;
- if ((event.which < 48 || event.which > 57) && event.which !== 8 && event.which !== 13) {
- event.preventDefault();
- return false;
- }
- else {
- var currentPageNumber = parseInt(currentPageBox.value);
- if (event.which === 13) {
- if (currentPageNumber > 0 && currentPageNumber <= this.viewer.pageCount) {
- this.viewer.navigation.goToPage(currentPageNumber);
- }
- else {
- currentPageBox.value = this.viewer.currentPageNumber.toString();
- }
- }
- return true;
- }
- }
- currentPageClicked() {
- let currentPage: HTMLInputElement = document.getElementById('currentPage') as HTMLInputElement;
- currentPage.select();
- }
-
- readFile(evt) {
- let uploadedFiles = evt.target.files;
- let uploadedFile = uploadedFiles[0];
- this.fileName = uploadedFile.name;
- let reader = new FileReader();
- reader.readAsDataURL(uploadedFile);
- let viewer: PdfViewerComponent = this.viewer;
- let uploadedFileName: string = this.fileName;
- reader.onload = function () {
- let uploadedFileUrl: string = this.result as string;
- viewer.load(uploadedFileUrl, null);
- viewer.fileName = uploadedFileName;
- var pageCount = document.getElementById('totalPage');
- pageCount.textContent = 'of ' + viewer.pageCount;
- }
- }
-
- }
-
- ```
-
-Sample :
-[https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/custom-toolbar](https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/custom-toolbar)
-
-## See also
-
-* [Toolbar customization](./how-to/toolbar-customization)
-* [Feature Modules](./feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/cp-command-not-recognized.md b/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/cp-command-not-recognized.md
index 913c51e260..0040fef23f 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/cp-command-not-recognized.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/cp-command-not-recognized.md
@@ -9,15 +9,15 @@ documentation: ug
# Troubleshoot error 'cp' is not recognized as a command
-The Unix `cp` command is not available in the Windows Command Prompt. Use one of the following Windows-native alternatives to copy the required assets.
+The Unix `cp` command is not available in the Windows Command Prompt. Use one of the following Windows-native alternatives to copy the required `ej2-pdfviewer-lib` assets into a public or source folder used by the application.
-- CMD (xcopy) — recursive directory copy:
+CMD (xcopy) — recursive directory copy
```batch
xcopy /s /e /i .\node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib public\ej2-pdfviewer-lib
```
-- PowerShell (Copy-Item) — recursive directory copy:
+PowerShell (Copy-Item) — recursive directory copy
```powershell
Copy-Item .\node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib -Destination .\src\ej2-pdfviewer-lib -Recurse -Force
@@ -28,4 +28,4 @@ Notes:
- Windows paths use backslashes (\). Adjust paths if your project structure differs.
- Ensure sufficient permissions to write to the destination folder.
-For cross-platform scripts in package.json, consider tools such as "shx" or "copyfiles" to avoid OS-specific commands.
+For cross-platform scripts in `package.json`, consider tools such as `shx` or `copyfiles` to avoid OS-specific commands.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/document-loading-issues.md
index b249afc6e8..d08b6e642a 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/document-loading-issues.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/document-loading-issues.md
@@ -7,11 +7,11 @@ control: PDF Viewer
documentation: ug
---
-# Document Loading Issues in Version 23.1 or Newer
+## Document loading issues in version 23.1 or newer
-If the document does not render in the viewer when using version 23.1 or newer, follow these steps:
+If a PDF does not render in the viewer after upgrading to v23.1 or newer, use the checklist below to identify and resolve common causes. The most frequent fix is calling `dataBind()` before `load()` so data binding is initialized correctly in the newer lifecycle.
-1. Call `pdfviewer.dataBind()` before `load()`. Starting with v23.1, an explicit dataBind call is required to initialize data binding and render correctly.
+Example:
{% raw %}
```ts
@@ -50,12 +50,20 @@ root.render(
- The component does not meet the requirement.
-Note: Mobile device support is marked as partial due to platform-level constraints on hover interactions, complex keyboard navigation, and screen reader capabilities that vary by device and browser.
+N> Mobile device support is marked as partial due to platform-level constraints on hover interactions, complex keyboard navigation, and screen reader capabilities that vary by device and browser.
## WAI-ARIA attributes
@@ -62,7 +62,7 @@ Note: Mobile device support is marked as partial due to platform-level constrain
## Keyboard interaction
-The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer component.
+The PDF Viewer follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline to support users who rely on assistive technologies (AT) or keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer.
| **Press (Windows)** |**Press (Macintosh)** | **To do this** |
| --- | --- | --- |
@@ -97,7 +97,15 @@ The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/W
|Shift + H |Shift + H |Enable pan mode|
|Shift + V |Shift + V |Enable text selection mode|
-The PDF Viewer supports custom keyboard commands through a `commandManager`, which handles commands triggered by specific key gestures. Custom commands are defined by users and executed accordingly. The `commandManager` includes a `keyboardCommand` collection to hold custom keyboard commands. Each custom command is represented by a `KeyboardCommand` entry, containing the command name and associated keyboard combination. Additionally, the `keyboardCustomCommands` parameter utilizes an event callback to handle keyboard events and trigger methods when specific key combinations are pressed.
+The PDF Viewer includes keyboard shortcuts for scrolling, zooming, text search, printing, and annotation deletion.
+
+Additional keyboard shortcuts are available for common actions such as navigating between pages, accessing specific pages, toggling annotation tools, and displaying PDF elements (outlines, annotations, bookmarks, thumbnails).
+
+To support custom key bindings, the viewer provides a `commandManager` configuration object that handles custom commands triggered by specified key gestures. Custom commands are defined by name and executed when their associated key gesture is detected.
+
+The `commandManager` configuration includes a `keyboardCommand` collection that holds user-defined keyboard commands. Each command is represented by a `KeyboardCommand` object containing a `name` and an associated `gesture` describing the key combination.
+
+The `keyboardCustomCommands` parameter is an event callback invoked when a custom key combination is detected; handlers can perform application-specific actions in response.
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -370,7 +378,7 @@ Key modifiers used in gestures:
- Shift corresponds to the Shift key (value `4`).
- Meta corresponds to the Command key on macOS or the Windows key on Windows (value `8`).
-This setup enables users to perform custom actions within the PDF Viewer by pressing specific key combinations, improving navigation and interaction efficiency.
+This enables custom actions within the PDF Viewer when specific key combinations are pressed, improving navigation and interaction efficiency.
## Ensuring accessibility
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-event.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-event.md
index b20dc92e04..e1ddf0e701 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-event.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-event.md
@@ -8,38 +8,40 @@ documentation: ug
domainurl: ##DomainURL##
---
-# PDF Viewer Annotation events in Vue
+# PDF Viewer annotation events in Vue
-The PDF Viewer component triggers various events based on user interactions and changes in the component's state. These events can be used to perform actions when a specific event occurs. This section describes the events available in the PDF Viewer component.
+The PDF Viewer control supports several annotation events that enable applications to respond to user interactions—adding, moving, resizing, selecting, and removing annotations. Examples in this article reference the resource URL shown in the code samples.
+
+The annotation events supported by the PDF Viewer control are:
| Event | Description |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------- |
-| [`annotationAdd`](#annotationadd) | Triggers when an annotation is added to a page in the PDF document. |
-| [`annotationDoubleClick`](#annotationdoubleclick) | Triggers when an annotation is double-clicked. |
-| [`annotationMouseLeave`](#annotationmouseleave) | Triggers when the mouse pointer moves away from an annotation object. |
-| [`annotationMouseover`](#annotationmouseover) | Triggers when the mouse pointer moves over an annotation object. |
-| [`annotationMove`](#annotationmove) | Triggers when an annotation is moved on a page in the PDF document. |
-| [`annotationMoving`](#annotationmoving) | Triggers while an annotation is being moved. |
-| [`annotationPropertiesChange`](#annotationpropertieschange) | Triggers when the properties of an annotation are modified on a PDF page. |
-| [`annotationRemove`](#annotationremove) | Triggers when an annotation is removed from a page in the PDF document. |
-| [`annotationResize`](#annotationresize) | Triggers when an annotation is resized on a page in the PDF document. |
-| [`annotationSelect`](#annotationselect) | Triggers when an annotation is selected on a page in the PDF document. |
-| [`annotationUnSelect`](#annotationunselect) | Triggers when an annotation is unselected on a page in the PDF document. |
-| [`beforeAddFreeText`](#beforeaddfreetext) | Triggers before adding a text in the freeText annotation. |
-| [`addSignature`](#addsignature) | Triggers when a signature is added to a page in the PDF document. |
-| [`removeSignature`](#removesignature) | Triggers when a signature is removed from a page in the PDF document. |
-| [`resizeSignature`](#resizesignature) | Triggers when a signature is resized on a page in the PDF document. |
-| [`signaturePropertiesChange`](#signaturepropertieschange) | Triggers when the properties of a signature are changed on a page in the PDF document. |
-| [`signatureSelect`](#signatureselect) | Triggers when a signature is selected on a page in the PDF document. |
-| [`signatureUnselect`](#signatureunselect) | Triggers when a signature is unselected on a page in the PDF document. |
+| [annotationAdd](#annotationadd) | Triggers when an annotation is added. |
+| [annotationDoubleClick](#annotationdoubleclick) | Triggers when an annotation is double-clicked. |
+| [annotationMouseLeave](#annotationmouseleave) | Triggers when the mouse cursor leaves an annotation. |
+| [annotationMouseover](#annotationmouseover) | Triggers when the mouse cursor moves over an annotation. |
+| [annotationMove](#annotationmove) | Triggers when an annotation is moved. |
+| [annotationMoving](#annotationmoving) | Triggers while an annotation is being moved. |
+| [annotationPropertiesChange](#annotationpropertieschange) | Triggers when an annotation's properties are changed. |
+| [annotationRemove](#annotationremove) | Triggers when an annotation is removed. |
+| [annotationResize](#annotationresize) | Triggers when an annotation is resized. |
+| [annotationSelect](#annotationselect) | Triggers when an annotation is selected. |
+| [annotationUnselect](#annotationunselect) | Triggers when an annotation is unselected. |
+| [beforeAddFreeText](#beforeaddfreetext) | Triggers before adding free text. |
+| [addSignature](#addsignature) | Triggers when a signature is added. |
+| [removeSignature](#removesignature) | Triggers when a signature is removed. |
+| [resizeSignature](#resizesignature) | Triggers when a signature is resized. |
+| [signaturePropertiesChange](#signaturepropertieschange) | Triggers when signature properties change. |
+| [signatureSelect](#signatureselect) | Triggers when a signature is selected. |
+| [signatureUnselect](#signatureunselect) | Triggers when a signature is unselected. | |
### annotationAdd
-The [annotationAdd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationAddEventArgs/) event is triggered when an annotation is added to a PDF document's page.
+The [annotationAdd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationadd) event triggers when an annotation is added to a PDF document's page.
#### Event Arguments
-For event data, see [AnnotationAddEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationAddEventArgs/). It provides properties such as `annotationId`, `pageNumber`, `annotationType`, and `bounds`.
+For event data, see [AnnotationAddEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationAddEventArgs). It provides properties such as `annotationId`, `pageNumber`, `annotationType`, and `bounds`.
The following example illustrates how to handle the `annotationAdd` event.
@@ -114,11 +116,11 @@ The following example illustrates how to handle the `annotationAdd` event.
### annotationDoubleClick
-The [annotationDoubleClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationDoubleClickEventArgs/) event is triggered when an annotation is double-clicked.
+The [annotationDoubleClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationdoubleclick) event triggers when an annotation is double-clicked.
#### Event Arguments
-For event data, see [AnnotationDoubleClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationDoubleClickEventArgs/).
+For event data, see [AnnotationDoubleClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationDoubleClickEventArgs).
The following example illustrates how to handle the `annotationDoubleClick` event.
@@ -191,11 +193,11 @@ The following example illustrates how to handle the `annotationDoubleClick` even
### annotationMouseLeave
-The [annotationMouseLeave](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseLeaveEventArgs/) event is triggered when the user's mouse pointer moves away from an annotation object.
+The [annotationMouseLeave](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationmouseleave) event triggers when the mouse cursor leaves an annotation.
#### Event Arguments
-For event data, see [AnnotationMouseLeaveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseLeaveEventArgs/).
+For event data, see [AnnotationMouseLeaveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseLeaveEventArgs).
The following example illustrates how to handle the `annotationMouseLeave` event.
@@ -268,11 +270,11 @@ The following example illustrates how to handle the `annotationMouseLeave` event
### annotationMouseover
-The [annotationMouseover](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseOverEventArgs/) event is triggered when the mouse is moved over an annotation object.
+The [annotationMouseover](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationmouseover) event triggers when the mouse cursor moves over an annotation.
#### Event Arguments
-For event data, see [AnnotationMouseOverEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseOverEventArgs/).
+For event data, see [AnnotationMouseOverEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseOverEventArgs).
The following example illustrates how to handle the `annotationMouseover` event.
@@ -345,11 +347,11 @@ The following example illustrates how to handle the `annotationMouseover` event.
### annotationMove
-The [annotationMove](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMoveEventArgs/) event is triggered when an annotation is moved over the page of the PDF document.
+The [annotationMove](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationmove) event triggers when an annotation is moved.
#### Event Arguments
-For event data, see [AnnotationMoveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMoveEventArgs/).
+For event data, see [AnnotationMoveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMoveEventArgs).
The following example illustrates how to handle the `annotationMove` event.
@@ -422,11 +424,11 @@ The following example illustrates how to handle the `annotationMove` event.
### annotationMoving
-The [annotationMoving](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMovingEventArgs/) event is triggered while an annotation is being moved.
+The [annotationMoving](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationmoving) event triggers while an annotation is being moved.
#### Event Arguments
-For event data, see [AnnotationMovingEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMovingEventArgs/).
+For event data, see [AnnotationMovingEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMovingEventArgs).
The following example illustrates how to handle the `annotationMoving` event.
@@ -499,11 +501,11 @@ The following example illustrates how to handle the `annotationMoving` event.
### annotationPropertiesChange
-The [annotationPropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs/) event is triggered when an annotation's property is modified on a PDF document page.
+The [annotationPropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationpropertieschange) event triggers when an annotation’s properties are changed.
#### Event Arguments
-For event data, see [AnnotationPropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs/). It provides properties such as `annotationId`, `pageNumber`, and `action`.
+For event data, see [AnnotationPropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs). It provides properties such as `annotationId`, `pageNumber`, and `action`.
The following example illustrates how to handle the `annotationPropertiesChange` event.
@@ -578,11 +580,11 @@ The following example illustrates how to handle the `annotationPropertiesChange`
### annotationRemove
-The [annotationRemove](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationRemoveEventArgs/) event is triggered when an annotation is removed from a PDF document's page.
+The [annotationRemove](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationremove) event triggers when an annotation is removed.
#### Event Arguments
-For event data, see [AnnotationRemoveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationRemoveEventArgs/). It provides properties such as `annotationId` and `pageNumber`.
+For event data, see [AnnotationRemoveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationRemoveEventArgs). It provides properties such as `annotationId` and `pageNumber`.
The following example illustrates how to handle the `annotationRemove` event.
@@ -655,11 +657,11 @@ The following example illustrates how to handle the `annotationRemove` event.
### annotationResize
-The [annotationResize](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationResizeEventArgs/) event is triggered when an annotation is resized on a PDF document page.
+The [annotationResize](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationresize) event triggers when an annotation is resized.
#### Event Arguments
-For event data, see [AnnotationResizeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationResizeEventArgs/).
+For event data, see [AnnotationResizeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationResizeEventArgs).
The following example illustrates how to handle the `annotationResize` event.
@@ -732,11 +734,11 @@ The following example illustrates how to handle the `annotationResize` event.
### annotationSelect
-The [annotationSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationSelectEventArgs/) event is triggered when an annotation is selected on a PDF document's page.
+The [annotationSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationselect) event triggers when an annotation is selected.
#### Event Arguments
-For event data, see [AnnotationSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationSelectEventArgs/).
+For event data, see [AnnotationSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationSelectEventArgs).
The following example illustrates how to handle the `annotationSelect` event.
@@ -809,11 +811,11 @@ The following example illustrates how to handle the `annotationSelect` event.
### annotationUnselect
-The [annotationUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationUnSelectEventArgs/) event is triggered when an annotation is unselected from the PDF document's page.
+The [annotationUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationunselect) event triggers when an annotation is unselected.
#### Event Arguments
-For event data, see [AnnotationUnSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationUnSelectEventArgs/).
+For event data, see [AnnotationUnSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationUnSelectEventArgs).
The following example illustrates how to handle the `annotationUnselect` event.
@@ -886,11 +888,11 @@ The following example illustrates how to handle the `annotationUnselect` event.
### beforeAddFreeText
-The [beforeAddFreeText](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/beforeAddFreeTextEventArgs/) event is triggered before adding a text in the freeText annotation.
+The [beforeAddFreeText](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#beforeaddfreetext) event triggers before adding free text to the PDF Viewer.
#### Event Arguments
-For event data, see [BeforeAddFreeTextEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/beforeAddFreeTextEventArgs/).
+For event data, see [BeforeAddFreeTextEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/beforeAddFreeTextEventArgs).
The following example illustrates how to handle the `beforeAddFreeText` event.
@@ -969,11 +971,11 @@ The following example illustrates how to handle the `beforeAddFreeText` event.
### addSignature
-The [addSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/addSignatureEventArgs/) event is triggered when a signature is added to a page of a PDF document.
+The [addSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#addsignature) event triggers when a signature is added to the PDF Viewer.
#### Event Arguments
-For event data, see [AddSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/addSignatureEventArgs/). It provides properties such as `pageNumber`.
+For event data, see [AddSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/addSignatureEventArgs). It provides properties such as `pageNumber`.
The following example illustrates how to handle the `addSignature` event.
@@ -1046,11 +1048,11 @@ The following example illustrates how to handle the `addSignature` event.
### removeSignature
-The [removeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/removeSignatureEventArgs/) event is triggered when the signature is removed from the page of a PDF document.
+The [removeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#removesignature) event triggers when a signature is removed from the PDF Viewer.
#### Event Arguments
-For event data, see [RemoveSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/removeSignatureEventArgs/). It provides properties such as `pageNumber`.
+For event data, see [RemoveSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/removeSignatureEventArgs). It provides properties such as `pageNumber`.
The following example illustrates how to handle the `removeSignature` event.
@@ -1123,11 +1125,11 @@ The following example illustrates how to handle the `removeSignature` event.
### resizeSignature
-The [resizeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/resizeSignatureEventArgs/) event is triggered when the signature is resized and placed on a page of a PDF document.
+The [resizeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resizesignature) event triggers when a signature is resized in the PDF Viewer.
#### Event Arguments
-For event data, see [ResizeSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/resizeSignatureEventArgs/).
+For event data, see [ResizeSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/resizeSignatureEventArgs).
The following example illustrates how to handle the `resizeSignature` event.
@@ -1200,11 +1202,11 @@ The following example illustrates how to handle the `resizeSignature` event.
### signaturePropertiesChange
-The [signaturePropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/) event is triggered when the property of the signature is changed in the page of the PDF document.
+The [signaturePropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#signaturepropertieschange) event triggers when signature properties are changed in the PDF Viewer.
#### Event Arguments
-For event data, see [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/).
+For event data, see [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs).
The following example illustrates how to handle the `signaturePropertiesChange` event.
@@ -1277,11 +1279,11 @@ The following example illustrates how to handle the `signaturePropertiesChange`
### signatureSelect
-The [signatureSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureSelectEventArgs/) event is triggered when signature is selected over the page of the PDF document.
+The [signatureSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#signatureselect) event triggers when a signature is selected in the PDF Viewer.
#### Event Arguments
-For event data, see [SignatureSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureSelectEventArgs/).
+For event data, see [SignatureSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureSelectEventArgs).
The following example illustrates how to handle the `signatureSelect` event.
@@ -1354,11 +1356,11 @@ The following example illustrates how to handle the `signatureSelect` event.
### signatureUnselect
-The [signatureUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureUnSelectEventArgs/) event is triggered when signature is unselected over the page of the PDF document.
+The [signatureUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#signatureunselect) event triggers when a signature is unselected in the PDF Viewer.
#### Event Arguments
-For event data, see [SignatureUnSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureUnSelectEventArgs/).
+For event data, see [SignatureUnSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureUnSelectEventArgs).
The following example illustrates how to handle the `signatureUnselect` event.
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-in-mobile-view.md
index 75875a4225..cac0c5d9f9 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-in-mobile-view.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-in-mobile-view.md
@@ -9,114 +9,116 @@ domainurl: ##DomainURL##
---
# Annotations in mobile view in Vue PDF Viewer control
+This article describes how to use annotation tools in the Syncfusion Vue PDF Viewer on touch-enabled (mobile) devices. It covers enabling the annotation toolbar, adding common annotation types, adjusting annotation properties, using comments, and removing annotations.
+
## Open the annotation toolbar
-**Step 1:** Tap Edit Annotation on the toolbar to enable the annotation toolbar.
+**Step 1:** Tap the Edit Annotation icon on the main toolbar to enable the annotation toolbar.
-**Step 2:** The annotation toolbar appears below the main toolbar.
+**Step 2:** The annotation toolbar opens below the main toolbar, showing available annotation tools for touch interaction.
## Add sticky note annotations
-**Step 1:** Tap the Sticky Notes icon, then tap the page where the note should be placed.
+**Step 1:** Tap the Sticky Notes icon to activate the sticky note tool, then tap the target location on the page to place a note.
-**Step 2:** Tap the page to add the sticky note annotation.
+**Step 2:** A sticky note annotation is added at the tapped location; tap the note to open or edit its content.
## Add text markup annotations
-**Step 1:** Tap a text markup icon, select the text to mark, then tap the selection to apply the markup.
+**Step 1:** Tap a text markup tool (for example, highlight or underline), then drag to select the text to be marked.
-**Step 2:** The text markup annotation is applied to the selected text.
+**Step 2:** Tap the selected area or use the toolbar action to apply the markup; the selected text is then annotated accordingly.
## Add shape and measurement annotations
-**Step 1:** Tap the Shape or Measure icon to open the corresponding toolbar.
+**Step 1:** Tap the Shape or Measure icon to open the shape/measurement toolbar.
-**Step 2:** Choose a shape or measurement type, then draw it on the page.
+**Step 2:** Choose a shape or measurement type, then draw the annotation on the page using touch gestures.
-**Step 3:** The annotation appears on the PDF page.
+**Step 3:** The shape or measurement annotation is added to the PDF and can be adjusted via its property toolbar.
## Add stamp annotations
-**Step 1:** Tap the Stamp icon and select a stamp type from the menu.
+**Step 1:** Tap the Stamp icon, then choose a stamp type from the presented menu.
-**Step 2:** Tap the page to place the stamp annotation.
+**Step 2:** Tap the desired location on the page to place the stamp annotation.
## Add signature annotations
-**Step 1:** Tap the Signature icon to open the canvas. Draw the signature, tap Create, then tap the viewer to place it.
+**Step 1:** Tap the Signature icon to open the signature canvas. Draw the signature, tap Create, then tap the viewer to place the signature on the page.
-**Step 2:** The signature is added to the page.
+**Step 2:** The signature annotation is added and can be positioned or resized using standard touch controls.
## Add ink annotations
-**Step 1:** Tap the Ink tool and draw on the page.
+**Step 1:** Tap the Ink tool and draw directly on the page using a finger or stylus.
-**Step 2:** The ink annotation appears on the page.
+**Step 2:** The ink strokes are saved as an ink annotation and remain editable until committed.
## Change annotation properties (before adding)
-**Step 1:** Change properties before placing the annotation.
+**Step 1:** Open the annotation property toolbar prior to placing an annotation to set attributes such as color, opacity, stroke thickness, font, or measurement units.
-**Step 2:** Tap the annotation icon to open the property toolbar, adjust properties, then place the annotation on the page.
+**Step 2:** With the desired properties selected in the property toolbar, place the annotation on the page; the chosen settings apply to the new annotation.
## Change annotation properties (after adding)
-**Step 1:** Change annotation properties after adding the annotation.
+**Step 1:** Select an existing annotation to reveal its property toolbar.
-**Step 2:** Select the annotation to show the property toolbar, then adjust the properties.
+**Step 2:** Adjust properties such as color, opacity, stroke, or edit text; changes are applied immediately to the selected annotation.
## Delete annotations
-**Step 1:** Select the annotation to show the property toolbar, then tap the Delete icon to remove it.
+**Step 1:** Select the annotation to display its property toolbar, then tap the Delete icon to remove the annotation from the page.
## Open the comment panel
-**Step 1:** Open the comment panel using the icon in the property toolbar or the annotation toolbar.
+**Step 1:** Tap the comment icon in the property toolbar or the annotation toolbar to open the comment panel for the selected annotation.
-**Step 2:** The comment panel appears.
+**Step 2:** The comment panel appears, showing existing comments and allowing new comments to be added.
## Close the comment panel
-**Step 1:** Tap the Close button to close the comment panel.
+**Step 1:** Tap the Close button in the comment panel to dismiss it and return to the document view.
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md
index c090a66a96..aad161cf08 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md
@@ -107,6 +107,8 @@ Edit comments and replies in the following ways:
+N> Deleting the root comment from the comment panel also deletes the associated annotation.
+
## How to check the comments added by the user
Comments added to the PDF document can be read using the annotation's `comments` property.
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
index f59d255dd5..bb51d3ef14 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/free-text-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/free-text-annotation.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Free text annotation in Vue PDF Viewer control
-The PDF Viewer control provides options to add, edit, and delete free text annotations.
+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
@@ -20,7 +20,7 @@ Free text annotations can be added to the PDF document using the annotation tool
* 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 select mode.
+When in pan mode, selecting free text annotation switches the PDF Viewer to text-selection mode.
@@ -45,8 +45,9 @@ import {
BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
TextSearch, FormFields, FormDesigner, PageOrganizer
} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
+import { provide, ref } from 'vue';
+const pdfviewer = ref(null);
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';
@@ -55,7 +56,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
const documentLoad = () => {
document.getElementById('set').addEventListener('click', () => {
- this.$refs.pdfviewer.ej2Instances.annotation.setAnnotationMode('FreeText');
+ pdfviewer.value.ej2Instances.annotation.setAnnotationMode('FreeText');
});
}
@@ -125,8 +126,9 @@ import {
BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
TextSearch, FormFields, FormDesigner, PageOrganizer
} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
+import { provide, ref } from 'vue';
+const pdfviewer = ref(null);
const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
@@ -135,7 +137,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
const documentLoad = () => {
document.getElementById('set').addEventListener('click', () => {
- this.$refs.pdfviewer.ej2Instances.annotation.setAnnotationMode('FreeText');
+ pdfviewer.value.ej2Instances.annotation.setAnnotationMode('FreeText');
});
}
@@ -190,7 +192,7 @@ export default {
## 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.
+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():
@@ -599,61 +601,61 @@ export default {
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 the properties of free text annotations
+## Edit free text annotation properties
-Font family, font size, styles, font color, text alignment, fill color, stroke color, border thickness, and opacity can be edited using the Font Family, Font Size, Font Color, Text Align, Font Style, Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+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.
-### Edit font family
+## Font family
-Edit the font family by selecting a font in the Font Family tool.
+Choose a font family from the Font Family tool to update the annotation text.
-### Edit font size
+### Font size
-Edit the font size by selecting a size in the Font Size tool.
+Choose a size from the Font Size tool to update the annotation text size.
-### Edit font color
+### Font color
-Edit the font color using the color palette in the Font Color tool.
+Select a color from the Font Color palette to change the font color.
-### Edit the text alignment
+### Text alignment
-Align text by selecting an option from the Text Align tool.
+Use the Text Align tool to set the annotation text alignment.
-### Edit text styles
+### Font styles
-Edit text styles by selecting options in the Font Style tool.
+Enable bold, italic, or underline using the Font Style tool.
-### Edit fill color
+### Fill color
-Edit the fill color using the color palette in the Edit Color tool.
+Set the annotation background using the Edit Color tool.
-### Edit stroke color
+### Stroke color
-Edit the stroke color using the color palette in the Edit Stroke Color tool.
+Set the annotation border color using the Edit Stroke Color tool.
-### Edit thickness
+### Thickness
-Edit border thickness using the range slider in the Edit Thickness tool.
+Adjust border thickness with the Edit Thickness slider.
-### Edit opacity
+### Opacity
-Edit opacity using the range slider in the Edit Opacity tool.
+Adjust annotation opacity with the Edit Opacity slider.
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md
index 69f40b7d3c..439912e273 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md
@@ -195,7 +195,7 @@ export default {
## Add an Ink annotation programmatically to the PDF document Programmatically
-The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method.
+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():
@@ -280,7 +280,7 @@ export default {
pageNumber: 1,
width: 200,
height: 60,
- path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]'
+ path: '[{"command":"M","x":244.83334350585938,"y":982.0000305175781},{"command":"L","x":244.83334350585938,"y":982.0000305175781},{"command":"L","x":250.83334350585938,"y":953.3333435058594},{"command":"L","x":252.83334350585938,"y":946.0000305175781},{"command":"L","x":254.16668701171875,"y":940.6667175292969},{"command":"L","x":256.8333435058594,"y":931.3333435058594},{"command":"L","x":257.5,"y":929.3333435058594},{"command":"L","x":258.8333435058594,"y":926.6667175292969},{"command":"L","x":259.5,"y":924.0000305175781},{"command":"L","x":259.5,"y":922.6667175292969},{"command":"L","x":258.8333435058594,"y":922.0000305175781},{"command":"L","x":258.16668701171875,"y":922.0000305175781},{"command":"L","x":256.8333435058594,"y":922.0000305175781},{"command":"L","x":256.16668701171875,"y":922.6667175292969},{"command":"L","x":254.83334350585938,"y":923.3333435058594},{"command":"L","x":254.16668701171875,"y":923.3333435058594},{"command":"L","x":253.5,"y":923.3333435058594},{"command":"L","x":252.83334350585938,"y":925.3333435058594},{"command":"L","x":252.83334350585938,"y":927.3333435058594},{"command":"L","x":252.83334350585938,"y":936.0000305175781},{"command":"L","x":253.5,"y":940.6667175292969},{"command":"L","x":254.83334350585938,"y":944.6667175292969},{"command":"L","x":260.16668701171875,"y":952.0000305175781},{"command":"L","x":264.16668701171875,"y":954.0000305175781},{"command":"L","x":274.16668701171875,"y":958.6667175292969},{"command":"L","x":278.16668701171875,"y":960.0000305175781},{"command":"L","x":281.5,"y":961.3333435058594},{"command":"L","x":285.5,"y":964.6667175292969},{"command":"L","x":286.8333740234375,"y":967.3333435058594},{"command":"L","x":286.8333740234375,"y":970.0000305175781},{"command":"L","x":282.8333740234375,"y":978.6667175292969},{"command":"L","x":278.16668701171875,"y":983.3333435058594},{"command":"L","x":266.16668701171875,"y":991.3333435058594},{"command":"L","x":259.5,"y":993.3333435058594},{"command":"L","x":252.16668701171875,"y":994.0000305175781},{"command":"L","x":240.83334350585938,"y":991.3333435058594},{"command":"L","x":236.16668701171875,"y":988.6667175292969},{"command":"L","x":230.16668701171875,"y":982.6667175292969},{"command":"L","x":228.83334350585938,"y":980.6667175292969},{"command":"L","x":228.16668701171875,"y":978.6667175292969},{"command":"L","x":228.83334350585938,"y":974.6667175292969},{"command":"L","x":230.16668701171875,"y":973.3333435058594},{"command":"L","x":236.16668701171875,"y":971.3333435058594},{"command":"L","x":240.83334350585938,"y":971.3333435058594},{"command":"L","x":246.16668701171875,"y":972.0000305175781},{"command":"L","x":257.5,"y":974.6667175292969},{"command":"L","x":262.8333435058594,"y":976.0000305175781},{"command":"L","x":269.5,"y":977.3333435058594},{"command":"L","x":276.16668701171875,"y":978.6667175292969},{"command":"L","x":279.5,"y":978.0000305175781},{"command":"L","x":285.5,"y":976.6667175292969},{"command":"L","x":288.16668701171875,"y":974.6667175292969},{"command":"L","x":292.8333740234375,"y":969.3333435058594},{"command":"L","x":293.5,"y":966.6667175292969},{"command":"L","x":294.16668701171875,"y":964.0000305175781},{"command":"L","x":293.5,"y":960.0000305175781},{"command":"L","x":293.5,"y":958.0000305175781},{"command":"L","x":292.8333740234375,"y":956.6667175292969},{"command":"L","x":291.5,"y":954.6667175292969},{"command":"L","x":291.5,"y":954.0000305175781},{"command":"L","x":291.5,"y":953.3333435058594},{"command":"L","x":291.5,"y":954.0000305175781},{"command":"L","x":292.16668701171875,"y":954.6667175292969},{"command":"L","x":292.8333740234375,"y":956.0000305175781},{"command":"L","x":294.16668701171875,"y":961.3333435058594},{"command":"L","x":295.5,"y":964.6667175292969},{"command":"L","x":297.5,"y":969.3333435058594},{"command":"L","x":298.8333740234375,"y":970.6667175292969},{"command":"L","x":301.5,"y":970.0000305175781},{"command":"L","x":304.16668701171875,"y":968.6667175292969},{"command":"L","x":305.5,"y":966.0000305175781},{"command":"L","x":308.8333740234375,"y":960.0000305175781},{"command":"L","x":310.16668701171875,"y":957.3333435058594},{"command":"L","x":310.8333740234375,"y":956.0000305175781},{"command":"L","x":310.8333740234375,"y":954.6667175292969},{"command":"L","x":310.8333740234375,"y":954.0000305175781},{"command":"L","x":311.5,"y":956.0000305175781},{"command":"L","x":312.8333740234375,"y":959.3333435058594},{"command":"L","x":316.16668701171875,"y":968.0000305175781},{"command":"L","x":317.5,"y":972.6667175292969},{"command":"L","x":318.16668701171875,"y":977.3333435058594},{"command":"L","x":319.5,"y":983.3333435058594},{"command":"L","x":319.5,"y":986.0000305175781},{"command":"L","x":319.5,"y":988.0000305175781},{"command":"L","x":318.8333740234375,"y":988.0000305175781},{"command":"L","x":318.16668701171875,"y":988.6667175292969},{"command":"L","x":316.16668701171875,"y":987.3333435058594},{"command":"L","x":314.8333740234375,"y":985.3333435058594},{"command":"L","x":314.16668701171875,"y":980.6667175292969},{"command":"L","x":314.8333740234375,"y":974.6667175292969},{"command":"L","x":316.16668701171875,"y":969.3333435058594},{"command":"L","x":319.5,"y":960.6667175292969},{"command":"L","x":320.16668701171875,"y":957.3333435058594},{"command":"L","x":321.5,"y":955.3333435058594},{"command":"L","x":322.16668701171875,"y":953.3333435058594},{"command":"L","x":322.8333740234375,"y":952.6667175292969},{"command":"L","x":324.16668701171875,"y":952.6667175292969},{"command":"L","x":324.8333740234375,"y":953.3333435058594},{"command":"L","x":326.8333740234375,"y":956.0000305175781},{"command":"L","x":328.16668701171875,"y":958.0000305175781},{"command":"L","x":328.8333740234375,"y":960.0000305175781},{"command":"L","x":329.5,"y":962.0000305175781},{"command":"L","x":330.16668701171875,"y":962.0000305175781},{"command":"L","x":330.16668701171875,"y":962.6667175292969},{"command":"L","x":330.16668701171875,"y":962.0000305175781},{"command":"L","x":330.8333740234375,"y":960.0000305175781},{"command":"L","x":331.5,"y":956.0000305175781},{"command":"L","x":332.8333740234375,"y":952.0000305175781},{"command":"L","x":333.5,"y":950.0000305175781},{"command":"L","x":334.8333740234375,"y":948.6667175292969},{"command":"L","x":335.5,"y":948.6667175292969},{"command":"L","x":336.16668701171875,"y":948.6667175292969},{"command":"L","x":337.5,"y":950.6667175292969},{"command":"L","x":338.8333740234375,"y":952.0000305175781},{"command":"L","x":340.8333740234375,"y":954.0000305175781},{"command":"L","x":341.5,"y":954.0000305175781},{"command":"L","x":342.8333740234375,"y":954.6667175292969},{"command":"L","x":344.8333740234375,"y":954.0000305175781},{"command":"L","x":346.8333740234375,"y":952.6667175292969},{"command":"L","x":349.5,"y":949.3333435058594},{"command":"L","x":350.8333740234375,"y":948.0000305175781},{"command":"L","x":351.5,"y":946.6667175292969},{"command":"L","x":352.8333740234375,"y":944.0000305175781},{"command":"L","x":352.8333740234375,"y":943.3333435058594},{"command":"L","x":354.16668701171875,"y":942.0000305175781},{"command":"L","x":354.8333740234375,"y":942.0000305175781},{"command":"L","x":354.8333740234375,"y":942.6667175292969},{"command":"L","x":354.16668701171875,"y":943.3333435058594},{"command":"L","x":354.16668701171875,"y":946.6667175292969},{"command":"L","x":354.16668701171875,"y":950.0000305175781},{"command":"L","x":355.5,"y":956.0000305175781},{"command":"L","x":356.16668701171875,"y":957.3333435058594},{"command":"L","x":358.16668701171875,"y":959.3333435058594},{"command":"L","x":360.16668701171875,"y":958.0000305175781},{"command":"L","x":364.16668701171875,"y":956.0000305175781},{"command":"L","x":370.8333740234375,"y":948.6667175292969},{"command":"L","x":373.5,"y":943.3333435058594},{"command":"L","x":375.5,"y":937.3333435058594},{"command":"L","x":376.16668701171875,"y":933.3333435058594},{"command":"L","x":376.8333740234375,"y":931.3333435058594},{"command":"L","x":376.8333740234375,"y":930.0000305175781},{"command":"L","x":376.8333740234375,"y":929.3333435058594},{"command":"L","x":376.16668701171875,"y":930.0000305175781},{"command":"L","x":375.5,"y":932.0000305175781},{"command":"L","x":375.5,"y":937.3333435058594},{"command":"L","x":374.8333740234375,"y":953.3333435058594},{"command":"L","x":374.8333740234375,"y":960.6667175292969},{"command":"L","x":375.5,"y":966.0000305175781},{"command":"L","x":377.5,"y":974.6667175292969},{"command":"L","x":378.16668701171875,"y":977.3333435058594},{"command":"L","x":380.8333740234375,"y":981.3333435058594},{"command":"L","x":382.16668701171875,"y":982.6667175292969},{"command":"L","x":383.5,"y":982.6667175292969},{"command":"L","x":387.5,"y":982.6667175292969},{"command":"L","x":389.5,"y":980.6667175292969},{"command":"L","x":392.16668701171875,"y":976.6667175292969},{"command":"L","x":392.8333740234375,"y":973.3333435058594},{"command":"L","x":392.16668701171875,"y":970.0000305175781},{"command":"L","x":388.8333740234375,"y":965.3333435058594},{"command":"L","x":385.5,"y":964.0000305175781},{"command":"L","x":382.8333740234375,"y":964.0000305175781},{"command":"L","x":377.5,"y":964.0000305175781},{"command":"L","x":375.5,"y":964.6667175292969},{"command":"L","x":373.5,"y":965.3333435058594},{"command":"L","x":374.8333740234375,"y":963.3333435058594},{"command":"L","x":376.8333740234375,"y":961.3333435058594},{"command":"L","x":382.16668701171875,"y":956.0000305175781},{"command":"L","x":384.16668701171875,"y":953.3333435058594},{"command":"L","x":387.5,"y":950.6667175292969},{"command":"L","x":388.16668701171875,"y":952.0000305175781},{"command":"L","x":388.16668701171875,"y":952.6667175292969},{"command":"L","x":388.8333740234375,"y":954.0000305175781},{"command":"L","x":388.8333740234375,"y":954.6667175292969},{"command":"L","x":389.5,"y":959.3333435058594},{"command":"L","x":389.5,"y":960.6667175292969},{"command":"L","x":390.16668701171875,"y":961.3333435058594},{"command":"L","x":390.8333740234375,"y":960.6667175292969},{"command":"L","x":393.5,"y":958.0000305175781},{"command":"L","x":396.8333740234375,"y":954.0000305175781},{"command":"L","x":398.16668701171875,"y":952.0000305175781},{"command":"L","x":400.16668701171875,"y":949.3333435058594},{"command":"L","x":400.16668701171875,"y":948.6667175292969},{"command":"L","x":400.8333740234375,"y":948.0000305175781},{"command":"L","x":400.8333740234375,"y":947.3333435058594},{"command":"L","x":401.5,"y":948.0000305175781},{"command":"L","x":402.16668701171875,"y":949.3333435058594},{"command":"L","x":403.5,"y":950.6667175292969},{"command":"L","x":404.8333740234375,"y":953.3333435058594},{"command":"L","x":406.16668701171875,"y":954.0000305175781},{"command":"L","x":407.5,"y":954.0000305175781},{"command":"L","x":410.16668701171875,"y":952.0000305175781},{"command":"L","x":412.16668701171875,"y":949.3333435058594},{"command":"L","x":414.16668701171875,"y":944.6667175292969},{"command":"L","x":414.16668701171875,"y":942.0000305175781},{"command":"L","x":414.16668701171875,"y":940.6667175292969},{"command":"L","x":414.16668701171875,"y":938.6667175292969},{"command":"L","x":414.16668701171875,"y":938.0000305175781},{"command":"L","x":415.5,"y":939.3333435058594},{"command":"L","x":418.8333740234375,"y":942.6667175292969},{"command":"L","x":420.16668701171875,"y":945.3333435058594},{"command":"L","x":421.5,"y":946.6667175292969},{"command":"L","x":422.8333740234375,"y":950.0000305175781},{"command":"L","x":423.5,"y":950.6667175292969},{"command":"L","x":423.5,"y":953.3333435058594},{"command":"L","x":422.8333740234375,"y":954.0000305175781},{"command":"L","x":421.5,"y":955.3333435058594},{"command":"L","x":421.5,"y":956.0000305175781},{"command":"L","x":422.16668701171875,"y":954.6667175292969},{"command":"L","x":422.8333740234375,"y":954.0000305175781},{"command":"L","x":424.8333740234375,"y":950.6667175292969},{"command":"L","x":425.5,"y":948.6667175292969},{"command":"L","x":428.16668701171875,"y":945.3333435058594},{"command":"L","x":428.8333740234375,"y":943.3333435058594},{"command":"L","x":428.8333740234375,"y":942.6667175292969},{"command":"L","x":428.8333740234375,"y":943.3333435058594},{"command":"L","x":428.8333740234375,"y":945.3333435058594},{"command":"L","x":428.8333740234375,"y":948.0000305175781},{"command":"L","x":428.8333740234375,"y":950.0000305175781},{"command":"L","x":429.5,"y":953.3333435058594},{"command":"L","x":430.16668701171875,"y":953.3333435058594},{"command":"L","x":432.8333740234375,"y":952.6667175292969},{"command":"L","x":434.8333740234375,"y":950.6667175292969},{"command":"L","x":437.5,"y":948.6667175292969},{"command":"L","x":440.16668701171875,"y":944.6667175292969},{"command":"L","x":441.5,"y":942.6667175292969},{"command":"L","x":442.16668701171875,"y":942.0000305175781},{"command":"L","x":442.8333740234375,"y":941.3333435058594},{"command":"L","x":442.8333740234375,"y":942.0000305175781},{"command":"L","x":442.8333740234375,"y":943.3333435058594},{"command":"L","x":442.8333740234375,"y":944.6667175292969},{"command":"L","x":442.8333740234375,"y":946.0000305175781},{"command":"L","x":443.5,"y":949.3333435058594},{"command":"L","x":444.16668701171875,"y":950.6667175292969},{"command":"L","x":445.5,"y":950.6667175292969},{"command":"L","x":447.5,"y":950.6667175292969},{"command":"L","x":450.16668701171875,"y":948.6667175292969},{"command":"L","x":452.16668701171875,"y":945.3333435058594},{"command":"L","x":453.5,"y":942.6667175292969},{"command":"L","x":452.8333740234375,"y":938.6667175292969},{"command":"L","x":452.16668701171875,"y":937.3333435058594},{"command":"L","x":450.8333740234375,"y":936.6667175292969},{"command":"L","x":448.8333740234375,"y":936.0000305175781},{"command":"L","x":447.5,"y":936.6667175292969},{"command":"L","x":446.16668701171875,"y":937.3333435058594},{"command":"L","x":445.5,"y":938.6667175292969},{"command":"L","x":445.5,"y":939.3333435058594},{"command":"L","x":446.16668701171875,"y":939.3333435058594},{"command":"L","x":446.8333740234375,"y":939.3333435058594},{"command":"L","x":452.16668701171875,"y":937.3333435058594},{"command":"L","x":454.8333740234375,"y":936.6667175292969},{"command":"L","x":456.8333740234375,"y":936.0000305175781},{"command":"L","x":459.5,"y":936.6667175292969},{"command":"L","x":460.8333740234375,"y":937.3333435058594},{"command":"L","x":461.5,"y":938.6667175292969},{"command":"L","x":462.16668701171875,"y":942.0000305175781},{"command":"L","x":462.16668701171875,"y":942.6667175292969},{"command":"L","x":462.16668701171875,"y":944.0000305175781},{"command":"L","x":462.16668701171875,"y":943.3333435058594},{"command":"L","x":462.16668701171875,"y":942.6667175292969},{"command":"L","x":462.16668701171875,"y":941.3333435058594},{"command":"L","x":462.8333740234375,"y":938.6667175292969},{"command":"L","x":464.16668701171875,"y":935.3333435058594},{"command":"L","x":465.5,"y":933.3333435058594},{"command":"L","x":466.16668701171875,"y":932.6667175292969},{"command":"L","x":467.5,"y":933.3333435058594},{"command":"L","x":469.5,"y":935.3333435058594},{"command":"L","x":470.16668701171875,"y":938.6667175292969},{"command":"L","x":472.8333740234375,"y":943.3333435058594},{"command":"L","x":472.8333740234375,"y":944.6667175292969},{"command":"L","x":474.16668701171875,"y":944.6667175292969},{"command":"L","x":475.5,"y":944.0000305175781},{"command":"L","x":478.16668701171875,"y":941.3333435058594},{"command":"L","x":481.5,"y":937.3333435058594},{"command":"L","x":484.8333740234375,"y":934.0000305175781},{"command":"L","x":488.8333740234375,"y":929.3333435058594},{"command":"L","x":489.5,"y":928.0000305175781}]'
});
}
}
@@ -369,7 +369,7 @@ export default {
pageNumber: 1,
width: 200,
height: 60,
- path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]'
+ path: '[{"command":"M","x":244.83334350585938,"y":982.0000305175781},{"command":"L","x":244.83334350585938,"y":982.0000305175781},{"command":"L","x":250.83334350585938,"y":953.3333435058594},{"command":"L","x":252.83334350585938,"y":946.0000305175781},{"command":"L","x":254.16668701171875,"y":940.6667175292969},{"command":"L","x":256.8333435058594,"y":931.3333435058594},{"command":"L","x":257.5,"y":929.3333435058594},{"command":"L","x":258.8333435058594,"y":926.6667175292969},{"command":"L","x":259.5,"y":924.0000305175781},{"command":"L","x":259.5,"y":922.6667175292969},{"command":"L","x":258.8333435058594,"y":922.0000305175781},{"command":"L","x":258.16668701171875,"y":922.0000305175781},{"command":"L","x":256.8333435058594,"y":922.0000305175781},{"command":"L","x":256.16668701171875,"y":922.6667175292969},{"command":"L","x":254.83334350585938,"y":923.3333435058594},{"command":"L","x":254.16668701171875,"y":923.3333435058594},{"command":"L","x":253.5,"y":923.3333435058594},{"command":"L","x":252.83334350585938,"y":925.3333435058594},{"command":"L","x":252.83334350585938,"y":927.3333435058594},{"command":"L","x":252.83334350585938,"y":936.0000305175781},{"command":"L","x":253.5,"y":940.6667175292969},{"command":"L","x":254.83334350585938,"y":944.6667175292969},{"command":"L","x":260.16668701171875,"y":952.0000305175781},{"command":"L","x":264.16668701171875,"y":954.0000305175781},{"command":"L","x":274.16668701171875,"y":958.6667175292969},{"command":"L","x":278.16668701171875,"y":960.0000305175781},{"command":"L","x":281.5,"y":961.3333435058594},{"command":"L","x":285.5,"y":964.6667175292969},{"command":"L","x":286.8333740234375,"y":967.3333435058594},{"command":"L","x":286.8333740234375,"y":970.0000305175781},{"command":"L","x":282.8333740234375,"y":978.6667175292969},{"command":"L","x":278.16668701171875,"y":983.3333435058594},{"command":"L","x":266.16668701171875,"y":991.3333435058594},{"command":"L","x":259.5,"y":993.3333435058594},{"command":"L","x":252.16668701171875,"y":994.0000305175781},{"command":"L","x":240.83334350585938,"y":991.3333435058594},{"command":"L","x":236.16668701171875,"y":988.6667175292969},{"command":"L","x":230.16668701171875,"y":982.6667175292969},{"command":"L","x":228.83334350585938,"y":980.6667175292969},{"command":"L","x":228.16668701171875,"y":978.6667175292969},{"command":"L","x":228.83334350585938,"y":974.6667175292969},{"command":"L","x":230.16668701171875,"y":973.3333435058594},{"command":"L","x":236.16668701171875,"y":971.3333435058594},{"command":"L","x":240.83334350585938,"y":971.3333435058594},{"command":"L","x":246.16668701171875,"y":972.0000305175781},{"command":"L","x":257.5,"y":974.6667175292969},{"command":"L","x":262.8333435058594,"y":976.0000305175781},{"command":"L","x":269.5,"y":977.3333435058594},{"command":"L","x":276.16668701171875,"y":978.6667175292969},{"command":"L","x":279.5,"y":978.0000305175781},{"command":"L","x":285.5,"y":976.6667175292969},{"command":"L","x":288.16668701171875,"y":974.6667175292969},{"command":"L","x":292.8333740234375,"y":969.3333435058594},{"command":"L","x":293.5,"y":966.6667175292969},{"command":"L","x":294.16668701171875,"y":964.0000305175781},{"command":"L","x":293.5,"y":960.0000305175781},{"command":"L","x":293.5,"y":958.0000305175781},{"command":"L","x":292.8333740234375,"y":956.6667175292969},{"command":"L","x":291.5,"y":954.6667175292969},{"command":"L","x":291.5,"y":954.0000305175781},{"command":"L","x":291.5,"y":953.3333435058594},{"command":"L","x":291.5,"y":954.0000305175781},{"command":"L","x":292.16668701171875,"y":954.6667175292969},{"command":"L","x":292.8333740234375,"y":956.0000305175781},{"command":"L","x":294.16668701171875,"y":961.3333435058594},{"command":"L","x":295.5,"y":964.6667175292969},{"command":"L","x":297.5,"y":969.3333435058594},{"command":"L","x":298.8333740234375,"y":970.6667175292969},{"command":"L","x":301.5,"y":970.0000305175781},{"command":"L","x":304.16668701171875,"y":968.6667175292969},{"command":"L","x":305.5,"y":966.0000305175781},{"command":"L","x":308.8333740234375,"y":960.0000305175781},{"command":"L","x":310.16668701171875,"y":957.3333435058594},{"command":"L","x":310.8333740234375,"y":956.0000305175781},{"command":"L","x":310.8333740234375,"y":954.6667175292969},{"command":"L","x":310.8333740234375,"y":954.0000305175781},{"command":"L","x":311.5,"y":956.0000305175781},{"command":"L","x":312.8333740234375,"y":959.3333435058594},{"command":"L","x":316.16668701171875,"y":968.0000305175781},{"command":"L","x":317.5,"y":972.6667175292969},{"command":"L","x":318.16668701171875,"y":977.3333435058594},{"command":"L","x":319.5,"y":983.3333435058594},{"command":"L","x":319.5,"y":986.0000305175781},{"command":"L","x":319.5,"y":988.0000305175781},{"command":"L","x":318.8333740234375,"y":988.0000305175781},{"command":"L","x":318.16668701171875,"y":988.6667175292969},{"command":"L","x":316.16668701171875,"y":987.3333435058594},{"command":"L","x":314.8333740234375,"y":985.3333435058594},{"command":"L","x":314.16668701171875,"y":980.6667175292969},{"command":"L","x":314.8333740234375,"y":974.6667175292969},{"command":"L","x":316.16668701171875,"y":969.3333435058594},{"command":"L","x":319.5,"y":960.6667175292969},{"command":"L","x":320.16668701171875,"y":957.3333435058594},{"command":"L","x":321.5,"y":955.3333435058594},{"command":"L","x":322.16668701171875,"y":953.3333435058594},{"command":"L","x":322.8333740234375,"y":952.6667175292969},{"command":"L","x":324.16668701171875,"y":952.6667175292969},{"command":"L","x":324.8333740234375,"y":953.3333435058594},{"command":"L","x":326.8333740234375,"y":956.0000305175781},{"command":"L","x":328.16668701171875,"y":958.0000305175781},{"command":"L","x":328.8333740234375,"y":960.0000305175781},{"command":"L","x":329.5,"y":962.0000305175781},{"command":"L","x":330.16668701171875,"y":962.0000305175781},{"command":"L","x":330.16668701171875,"y":962.6667175292969},{"command":"L","x":330.16668701171875,"y":962.0000305175781},{"command":"L","x":330.8333740234375,"y":960.0000305175781},{"command":"L","x":331.5,"y":956.0000305175781},{"command":"L","x":332.8333740234375,"y":952.0000305175781},{"command":"L","x":333.5,"y":950.0000305175781},{"command":"L","x":334.8333740234375,"y":948.6667175292969},{"command":"L","x":335.5,"y":948.6667175292969},{"command":"L","x":336.16668701171875,"y":948.6667175292969},{"command":"L","x":337.5,"y":950.6667175292969},{"command":"L","x":338.8333740234375,"y":952.0000305175781},{"command":"L","x":340.8333740234375,"y":954.0000305175781},{"command":"L","x":341.5,"y":954.0000305175781},{"command":"L","x":342.8333740234375,"y":954.6667175292969},{"command":"L","x":344.8333740234375,"y":954.0000305175781},{"command":"L","x":346.8333740234375,"y":952.6667175292969},{"command":"L","x":349.5,"y":949.3333435058594},{"command":"L","x":350.8333740234375,"y":948.0000305175781},{"command":"L","x":351.5,"y":946.6667175292969},{"command":"L","x":352.8333740234375,"y":944.0000305175781},{"command":"L","x":352.8333740234375,"y":943.3333435058594},{"command":"L","x":354.16668701171875,"y":942.0000305175781},{"command":"L","x":354.8333740234375,"y":942.0000305175781},{"command":"L","x":354.8333740234375,"y":942.6667175292969},{"command":"L","x":354.16668701171875,"y":943.3333435058594},{"command":"L","x":354.16668701171875,"y":946.6667175292969},{"command":"L","x":354.16668701171875,"y":950.0000305175781},{"command":"L","x":355.5,"y":956.0000305175781},{"command":"L","x":356.16668701171875,"y":957.3333435058594},{"command":"L","x":358.16668701171875,"y":959.3333435058594},{"command":"L","x":360.16668701171875,"y":958.0000305175781},{"command":"L","x":364.16668701171875,"y":956.0000305175781},{"command":"L","x":370.8333740234375,"y":948.6667175292969},{"command":"L","x":373.5,"y":943.3333435058594},{"command":"L","x":375.5,"y":937.3333435058594},{"command":"L","x":376.16668701171875,"y":933.3333435058594},{"command":"L","x":376.8333740234375,"y":931.3333435058594},{"command":"L","x":376.8333740234375,"y":930.0000305175781},{"command":"L","x":376.8333740234375,"y":929.3333435058594},{"command":"L","x":376.16668701171875,"y":930.0000305175781},{"command":"L","x":375.5,"y":932.0000305175781},{"command":"L","x":375.5,"y":937.3333435058594},{"command":"L","x":374.8333740234375,"y":953.3333435058594},{"command":"L","x":374.8333740234375,"y":960.6667175292969},{"command":"L","x":375.5,"y":966.0000305175781},{"command":"L","x":377.5,"y":974.6667175292969},{"command":"L","x":378.16668701171875,"y":977.3333435058594},{"command":"L","x":380.8333740234375,"y":981.3333435058594},{"command":"L","x":382.16668701171875,"y":982.6667175292969},{"command":"L","x":383.5,"y":982.6667175292969},{"command":"L","x":387.5,"y":982.6667175292969},{"command":"L","x":389.5,"y":980.6667175292969},{"command":"L","x":392.16668701171875,"y":976.6667175292969},{"command":"L","x":392.8333740234375,"y":973.3333435058594},{"command":"L","x":392.16668701171875,"y":970.0000305175781},{"command":"L","x":388.8333740234375,"y":965.3333435058594},{"command":"L","x":385.5,"y":964.0000305175781},{"command":"L","x":382.8333740234375,"y":964.0000305175781},{"command":"L","x":377.5,"y":964.0000305175781},{"command":"L","x":375.5,"y":964.6667175292969},{"command":"L","x":373.5,"y":965.3333435058594},{"command":"L","x":374.8333740234375,"y":963.3333435058594},{"command":"L","x":376.8333740234375,"y":961.3333435058594},{"command":"L","x":382.16668701171875,"y":956.0000305175781},{"command":"L","x":384.16668701171875,"y":953.3333435058594},{"command":"L","x":387.5,"y":950.6667175292969},{"command":"L","x":388.16668701171875,"y":952.0000305175781},{"command":"L","x":388.16668701171875,"y":952.6667175292969},{"command":"L","x":388.8333740234375,"y":954.0000305175781},{"command":"L","x":388.8333740234375,"y":954.6667175292969},{"command":"L","x":389.5,"y":959.3333435058594},{"command":"L","x":389.5,"y":960.6667175292969},{"command":"L","x":390.16668701171875,"y":961.3333435058594},{"command":"L","x":390.8333740234375,"y":960.6667175292969},{"command":"L","x":393.5,"y":958.0000305175781},{"command":"L","x":396.8333740234375,"y":954.0000305175781},{"command":"L","x":398.16668701171875,"y":952.0000305175781},{"command":"L","x":400.16668701171875,"y":949.3333435058594},{"command":"L","x":400.16668701171875,"y":948.6667175292969},{"command":"L","x":400.8333740234375,"y":948.0000305175781},{"command":"L","x":400.8333740234375,"y":947.3333435058594},{"command":"L","x":401.5,"y":948.0000305175781},{"command":"L","x":402.16668701171875,"y":949.3333435058594},{"command":"L","x":403.5,"y":950.6667175292969},{"command":"L","x":404.8333740234375,"y":953.3333435058594},{"command":"L","x":406.16668701171875,"y":954.0000305175781},{"command":"L","x":407.5,"y":954.0000305175781},{"command":"L","x":410.16668701171875,"y":952.0000305175781},{"command":"L","x":412.16668701171875,"y":949.3333435058594},{"command":"L","x":414.16668701171875,"y":944.6667175292969},{"command":"L","x":414.16668701171875,"y":942.0000305175781},{"command":"L","x":414.16668701171875,"y":940.6667175292969},{"command":"L","x":414.16668701171875,"y":938.6667175292969},{"command":"L","x":414.16668701171875,"y":938.0000305175781},{"command":"L","x":415.5,"y":939.3333435058594},{"command":"L","x":418.8333740234375,"y":942.6667175292969},{"command":"L","x":420.16668701171875,"y":945.3333435058594},{"command":"L","x":421.5,"y":946.6667175292969},{"command":"L","x":422.8333740234375,"y":950.0000305175781},{"command":"L","x":423.5,"y":950.6667175292969},{"command":"L","x":423.5,"y":953.3333435058594},{"command":"L","x":422.8333740234375,"y":954.0000305175781},{"command":"L","x":421.5,"y":955.3333435058594},{"command":"L","x":421.5,"y":956.0000305175781},{"command":"L","x":422.16668701171875,"y":954.6667175292969},{"command":"L","x":422.8333740234375,"y":954.0000305175781},{"command":"L","x":424.8333740234375,"y":950.6667175292969},{"command":"L","x":425.5,"y":948.6667175292969},{"command":"L","x":428.16668701171875,"y":945.3333435058594},{"command":"L","x":428.8333740234375,"y":943.3333435058594},{"command":"L","x":428.8333740234375,"y":942.6667175292969},{"command":"L","x":428.8333740234375,"y":943.3333435058594},{"command":"L","x":428.8333740234375,"y":945.3333435058594},{"command":"L","x":428.8333740234375,"y":948.0000305175781},{"command":"L","x":428.8333740234375,"y":950.0000305175781},{"command":"L","x":429.5,"y":953.3333435058594},{"command":"L","x":430.16668701171875,"y":953.3333435058594},{"command":"L","x":432.8333740234375,"y":952.6667175292969},{"command":"L","x":434.8333740234375,"y":950.6667175292969},{"command":"L","x":437.5,"y":948.6667175292969},{"command":"L","x":440.16668701171875,"y":944.6667175292969},{"command":"L","x":441.5,"y":942.6667175292969},{"command":"L","x":442.16668701171875,"y":942.0000305175781},{"command":"L","x":442.8333740234375,"y":941.3333435058594},{"command":"L","x":442.8333740234375,"y":942.0000305175781},{"command":"L","x":442.8333740234375,"y":943.3333435058594},{"command":"L","x":442.8333740234375,"y":944.6667175292969},{"command":"L","x":442.8333740234375,"y":946.0000305175781},{"command":"L","x":443.5,"y":949.3333435058594},{"command":"L","x":444.16668701171875,"y":950.6667175292969},{"command":"L","x":445.5,"y":950.6667175292969},{"command":"L","x":447.5,"y":950.6667175292969},{"command":"L","x":450.16668701171875,"y":948.6667175292969},{"command":"L","x":452.16668701171875,"y":945.3333435058594},{"command":"L","x":453.5,"y":942.6667175292969},{"command":"L","x":452.8333740234375,"y":938.6667175292969},{"command":"L","x":452.16668701171875,"y":937.3333435058594},{"command":"L","x":450.8333740234375,"y":936.6667175292969},{"command":"L","x":448.8333740234375,"y":936.0000305175781},{"command":"L","x":447.5,"y":936.6667175292969},{"command":"L","x":446.16668701171875,"y":937.3333435058594},{"command":"L","x":445.5,"y":938.6667175292969},{"command":"L","x":445.5,"y":939.3333435058594},{"command":"L","x":446.16668701171875,"y":939.3333435058594},{"command":"L","x":446.8333740234375,"y":939.3333435058594},{"command":"L","x":452.16668701171875,"y":937.3333435058594},{"command":"L","x":454.8333740234375,"y":936.6667175292969},{"command":"L","x":456.8333740234375,"y":936.0000305175781},{"command":"L","x":459.5,"y":936.6667175292969},{"command":"L","x":460.8333740234375,"y":937.3333435058594},{"command":"L","x":461.5,"y":938.6667175292969},{"command":"L","x":462.16668701171875,"y":942.0000305175781},{"command":"L","x":462.16668701171875,"y":942.6667175292969},{"command":"L","x":462.16668701171875,"y":944.0000305175781},{"command":"L","x":462.16668701171875,"y":943.3333435058594},{"command":"L","x":462.16668701171875,"y":942.6667175292969},{"command":"L","x":462.16668701171875,"y":941.3333435058594},{"command":"L","x":462.8333740234375,"y":938.6667175292969},{"command":"L","x":464.16668701171875,"y":935.3333435058594},{"command":"L","x":465.5,"y":933.3333435058594},{"command":"L","x":466.16668701171875,"y":932.6667175292969},{"command":"L","x":467.5,"y":933.3333435058594},{"command":"L","x":469.5,"y":935.3333435058594},{"command":"L","x":470.16668701171875,"y":938.6667175292969},{"command":"L","x":472.8333740234375,"y":943.3333435058594},{"command":"L","x":472.8333740234375,"y":944.6667175292969},{"command":"L","x":474.16668701171875,"y":944.6667175292969},{"command":"L","x":475.5,"y":944.0000305175781},{"command":"L","x":478.16668701171875,"y":941.3333435058594},{"command":"L","x":481.5,"y":937.3333435058594},{"command":"L","x":484.8333740234375,"y":934.0000305175781},{"command":"L","x":488.8333740234375,"y":929.3333435058594},{"command":"L","x":489.5,"y":928.0000305175781}]'
});
}
}
@@ -607,7 +607,7 @@ Edit opacity using the range slider in the Edit Opacity tool.
Default properties for ink annotations can be set before creating the control using InkAnnotationSettings.
-After changing default values, the selected values are applied. Refer to the following code sample to set the default ink annotation settings.
+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)" %}
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 d138dd95b2..3fb7cc5110 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
@@ -9,7 +9,7 @@ documentation: ug
# Line angle constraints in Vue PDF Viewer
-The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents.
+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.
@@ -81,7 +81,7 @@ export default {
### enableLineAngleConstraints
-The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types will snap to fixed angles as defined by the `restrictLineAngleTo` property:
+The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types snap to fixed angles as defined by `restrictLineAngleTo`:
- Lines
- Arrows
@@ -91,51 +91,51 @@ The `enableLineAngleConstraints` property activates angle snapping for line-base
- Area measurements
- Volume measurements
-**Key Benefits:**
+**Key benefits:**
-- Automatic angle snapping during the drawing
-- Enhanced precision for technical drawings and measurements
-- Desktop behavior: hold Shift while drawing to toggle constraints (when disabled, Shift temporarily enables; when enabled, Shift enforces snapping)
-- Real-time visual feedback showing angle snapping behavior
+- Automatic angle snapping while drawing
+- Improved precision for technical drawings and measurements
+- Desktop behavior: hold Shift while drawing to toggle constraints (if constraints are disabled, Shift temporarily enables snapping; if enabled, Shift enforces snapping)
+- Real-time visual feedback during drawing
### restrictLineAngleTo
-Defines the angle increment (in degrees) used to constrain supported annotations. The default is 45.
+Specifies the angle increment (in degrees) used for snapping. The default increment is 45°.
-Angle snapping rules:
+Angle snapping behavior:
-- The initial drawing direction is treated as the 0° reference point
-- Snapped angles are calculated based on the increment
-- If the increment doesn’t divide 360 evenly, angles reset after 360°
+- The initial drawing direction is treated as the 0° reference point.
+- Snapped angles are calculated by adding the increment to the reference direction.
+- If the increment does not divide 360 evenly, angles continue wrapping after 360°.
Examples:
-- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°
-- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360°
+- `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
+### Drawing behavior
-When line angle constraints are enabled:
+When angle constraints are enabled:
-- Start drawing a supported annotation (Line, Arrow, Polyline, Distance, or Perimeter).
-- The segment snaps to the nearest allowed angle.
-- A visual indicator reflects snapping in real time.
-- Release to complete the annotation.
+- 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
+### Keyboard shortcuts
Desktop platforms:
-- Shift + drag: toggles snapping. If constraints are disabled, Shift temporarily enables them; if enabled, Shift enforces snapping.
-### Selector-Based Modifications
+- `Shift` + drag: toggles snapping during the drag operation. If constraints are disabled, `Shift` temporarily enables snapping; if enabled, `Shift` enforces snapping.
-When modifying existing line annotations using selectors:
+### Modifying constrained annotations
-- Constraints apply based on the original line direction.
-- The reference angle (0°) is determined by the line’s current orientation.
-- Constraint snapping during modification is supported for Line and Arrow.
-- Adjustments snap to the configured angle increment.
+When editing existing line annotations with selectors:
-N> You can refer to our [Vue PDF Viewer](https://www.syncfusion.com/vue-ui-components/vue-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [Vue PDF Viewer examples](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples) to learn how to render and configure the PDF Viewer.
+- 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
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md
index bd82f44371..4bbd28f99e 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md
@@ -18,20 +18,20 @@ The PDF Viewer provides options to add measurement annotations. The supported me
* Radius
* Volume
-
+
## Adding measurement annotations to the PDF document
-The measurement annotations can be added to the PDF document using the annotation toolbar.
+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 in pan mode, selecting a measurement annotation switches the PDF Viewer to text select mode.
+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.
@@ -202,7 +202,7 @@ export default {
## 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.
+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():
@@ -919,35 +919,35 @@ The fill color, stroke color, thickness, and opacity can be edited using the Edi
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.
+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)" %}
@@ -1108,9 +1108,9 @@ export default {
The scale ratio and unit of measurement can be modified using the scale ratio option provided in the context menu of the PDF Viewer control.
-
+
-The Units of measurements support for the measurement annotations in the PDF Viewer are
+The PDF Viewer supports the following measurement units:
* Inch
* Millimeter
@@ -1119,7 +1119,7 @@ The Units of measurements support for the measurement annotations in the PDF Vie
* Pica
* Feet
-
+
## Setting default scale ratio settings during control initialization
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md
index 458a6ac390..2b4fb2b7a4 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Shape annotation in Vue PDF Viewer control
-The PDF Viewer control provides options to add, edit, and delete shape annotations. The supported shape annotation types are:
+The PDF Viewer provides options to add, edit, and delete shape annotations. Supported shape annotation types include:
* Line
* Arrow
@@ -24,16 +24,15 @@ The PDF Viewer control provides options to add, edit, and delete shape annotatio
Shape 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 **Shape Annotation** drop-down button. The pop-up lists available shape annotation types.
-* Select a shape type to enable its annotation mode.
-* Draw the shape on the pages of the PDF document.
+* 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 in pan mode and a shape annotation tool is selected, the PDF Viewer switches to text select mode automatically to ensure a smooth interaction experience.
+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.
-Refer to the following code sample to switch to the circle annotation mode.
+Use the following sample to switch the viewer to circle annotation mode.
{% tabs %}
@@ -204,7 +203,7 @@ export default {
## 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.
+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():
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 a0b2270e56..092aa0b4cd 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md
@@ -14,22 +14,26 @@ The PDF Viewer control supports adding handwritten signatures to a PDF document.
## Adding a handwritten signature to the PDF document
-The handwritten signature can be added to the PDF document using the annotation toolbar.
+Add a handwritten signature using the annotation toolbar.
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Select the **HandWritten Signature** button in the annotation toolbar. The signature panel appears.
+* Open the annotation toolbar by clicking the **Edit Annotation** button on the PDF Viewer toolbar.
+* Select the **HandWritten Signature** button in the annotation toolbar to open the signature panel.
-
+
* Draw the signature in the panel.
-
+
* Click **Create**, move the signature, and place it at the desired location.
-Refer to the following code sample to switch to the handwritten signature mode programmatically.
+## Adding a handwritten signature to the PDF document Programmatically
+
+With the PDF Viewer library, you can programmatically add a handwritten signature to the PDF Viewer control using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
+
+Here is an example of using the `addAnnotation()` method to add a handwritten signature programmatically
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -276,7 +280,7 @@ export default {
## Add a handwritten signature programmatically to the PDF document
-With the PDF Viewer library, you can programmatically add handwritten signature to the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method.
+With the PDF Viewer library, you can programmatically add handwritten signature to the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
Here is an example of adding a handwritten signature programmatically using addAnnotation():
@@ -295,7 +299,7 @@ Here is an example of adding a handwritten signature programmatically using addA
{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
+{% highlight html tabtitle="Options API (Server-Backed)" %}
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
- {/* Inject the required services */}
-
-
-
-
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(
-
- {/* Inject the required services */}
-
-
-of 0
- );
- }
- function inputTemplate() {
- return (
-
- );
- }
- return (
-
- );
- }
-
-{% endraw %}
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-{% raw %}
-
- render() {
- function template() {
- return (
-
-
-
- { this.viewer = scope; }}
- enableToolbar={false}
- documentLoad={this.documentLoaded}
- pageChange={this.onPageChange}
- documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf"
- resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
- style={{ 'display': 'block', 'height': '640px' }}>
-
-
-
-
-
- { this.toolbar = scope; }} clicked={this.clickHandler.bind(this)}>
-
-
-
-
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
-
- of 0
- );
- }
- function inputTemplate() {
- return (
-
- );
- }
- return (
-
- );
- }
-
-{% endraw %}
-{% endhighlight %}
-{% endtabs %}
-
-**Step 3:** Import and inject the modules used for the custom toolbar,
-
-
- ```ts
-
- import * as ReactDOM from 'react-dom';
- import * as React from 'react';
- import {
- PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
- ThumbnailView, Print, TextSelection, TextSearch, Inject
- } from '@syncfusion/ej2-react-pdfviewer';
- import { ToolbarComponent, ItemsDirective, ItemDirective, ClickEventArgs } from '@syncfusion/ej2-react-navigations';
- import { RouteComponentProps } from 'react-router';
-
- ```
-
-**Step 4:** Hide the built-in toolbar of PDF Viewer using below code snippet,
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-{% raw %}
-
-
-
-
- { this.viewer = scope; }}
- enableToolbar={false}
- documentLoad={this.documentLoaded}
- pageChange={this.onPageChange}
- documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf"
- serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
- style={{ 'display': 'block', 'height': '640px' }}>
-
-
-
-
-
- { this.toolbar = scope; }} clicked={this.clickHandler.bind(this)}>
-
-
-
-
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
-
- - The component does not meet the requirement.
@@ -211,7 +211,7 @@ export default {
To modify an existing sticky note annotation programmatically, use the editAnnotation() method.
-Here is an example of using editAnnotation():
+The following example shows how to modify an existing sticky note annotation using `editAnnotation()`:
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -254,7 +254,7 @@ const editAnnotation = function () {
{% endhighlight %}
-{% highlight html tabtitle="Standalone" %}
+{% highlight html tabtitle="Options API (Standalone)" %}
@@ -400,25 +400,25 @@ export default {
Edit opacity using the range slider in the Edit Opacity tool.
-
+
### Editing comments
-Comment text, replies, and status can be edited using the comment panel.
+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.
+Default properties for sticky note annotations can be set before creating the control using `StickyNotesSettings`.
-After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default sticky note annotation settings.
+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 %}
@@ -557,7 +557,7 @@ export default {
## Disable sticky note annotations
-The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature.
+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)" %}
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
index e948d0f4f4..007147ad07 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/text-markup-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/text-markup-annotation.md
@@ -8,11 +8,11 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Text markup annotation in Vue PDF viewer component
+# 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.
+The PDF Viewer provides options to add, edit, and delete text markup annotations, including highlight, underline, strikethrough, and squiggly.
-
+
## Highlight text
@@ -22,7 +22,7 @@ There are two ways to highlight text:
* Select text in the PDF document and right-click it.
* Select **Highlight** in the context menu.
- 
+ 
2.Using the annotation toolbar
@@ -31,7 +31,7 @@ There are two ways to highlight text:
* 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.
@@ -239,7 +239,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
const documentLoad = () => {
- const viewer = this.$refs.pdfviewer.ej2Instances;
+ const viewer = pdfviewer.value.ej2Instances;
document.getElementById('set').addEventListener('click', () => {
viewer.annotation.setAnnotationMode('Highlight');
});
@@ -329,7 +329,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
const documentLoad = () => {
- const viewer = this.$refs.pdfviewer.ej2Instances;
+ const viewer = pdfviewer.value.ej2Instances;
document.getElementById('set').addEventListener('click', () => {
viewer.annotation.setAnnotationMode('Highlight');
});
@@ -395,7 +395,7 @@ export default {
## Highlight text programmatically
-Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method.
+Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
Example:
@@ -425,7 +425,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
const addAnnotation = function () {
- const viewer = this.$refs.pdfviewer.ej2Instances;
+ const viewer = pdfviewer.value.ej2Instances;
viewer.annotation.addAnnotation("Highlight", {
bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
pageNumber: 1
@@ -571,7 +571,7 @@ There are two ways to underline text:
* Select text in the PDF document and right-click it.
* Select **Underline** in the context menu.
- 
+ 
2.Using the annotation toolbar
@@ -580,7 +580,7 @@ There are two ways to underline text:
* Select text to add the underline annotation.
* Alternatively, select text first and then click **Underline**.
- 
+ 
In the 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.
@@ -942,12 +942,12 @@ export default {
## Underline a text programmatically
-Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method.
+Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
Example:
{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -983,7 +983,7 @@ const addAnnotation = function () {
{% endhighlight %}
-{% highlight html tabtitle="Standalone" %}
+{% highlight html tabtitle="Options API (Standalone)" %}
@@ -1119,7 +1119,7 @@ There are two ways to strikethrough text:
* Select text in the PDF document and right-click it.
* Select **Strikethrough** in the context menu.
- 
+ 
2.Using the annotation toolbar
@@ -1128,9 +1128,9 @@ There are two ways to strikethrough text:
* Select text to add the strikethrough annotation.
* Alternatively, select text first and then click **Strikethrough**.
- 
+ 
-In the pan mode, if the strikethrough mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for striking through the text.
+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.
@@ -1162,7 +1162,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
const documentLoad = () => {
- const viewer = this.$refs.pdfviewer.ej2Instances;
+ const viewer = pdfviewer.value.ej2Instances;
document.getElementById('set').addEventListener('click', () => {
viewer.annotation.setAnnotationMode('Strikethrough');
});
@@ -1216,7 +1216,7 @@ export default {
{% endhighlight %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
@@ -1491,7 +1491,7 @@ export default {
## Strikethrough text programmatically
-Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method.
+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:
@@ -1670,7 +1670,7 @@ There are two ways to add squiggly to text:
* Select text in the PDF document and right-click it.
* Select **Squiggly** in the context menu.
- 
+ 
2.Using the annotation toolbar
@@ -1679,14 +1679,14 @@ There are two ways to add squiggly to text:
* 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.
- 
+ 
-In the pan mode, if the squiggly mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for adding squiggly to the text.
+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 (~/src/App.vue)" %}
+{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -1713,7 +1713,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
const documentLoad = () => {
- const viewer = this.$refs.pdfviewer.ej2Instances;
+ const viewer = pdfviewer.value.ej2Instances;
document.getElementById('set').addEventListener('click', () => {
viewer.annotation.setAnnotationMode('Squiggly');
});
@@ -1767,7 +1767,7 @@ export default {
{% endhighlight %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
@@ -2042,7 +2042,7 @@ export default {
## 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.
+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:
@@ -2225,29 +2225,29 @@ The selected annotation can be deleted by the following ways:
* Select the annotation to be deleted.
* Click the **Delete Annotation** button in the annotation toolbar. The selected annotation will be deleted.
- 
+ 
-## Editing the properties of the text markup annotation
+## Edit text markup annotation properties
-The color and the opacity of the text markup annotation can be edited using the Edit Color tool and the Edit Opacity tool in the annotation toolbar.
+The color and opacity of text markup annotations can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar.
-### Editing color
+### Edit color
-The color of the annotation can be edited using the color palette provided in the Edit Color tool.
+Use the color palette in the Edit Color tool to change the annotation color.
-
+
-### Editing opacity
+### Edit opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Use the range slider in the Edit Opacity tool to change annotation opacity.
-
+
-## Setting default properties during control initialization
+## 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.
->After editing the default color and opacity using the Edit Color tool and Edit Opacity tool, they will be changed to the selected values.
+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.
@@ -2426,7 +2426,7 @@ Refer to the following code snippet for calling undo and redo actions from the c
+ :documentLoad="documentLoad" :style="{ height: '800px', width: '1200px' }">
@@ -2434,37 +2434,27 @@ Refer to the following code snippet for calling undo and redo actions from the c
@@ -2506,7 +2496,7 @@ export default {
},
methods: {
documentLoad() {
- viewer = this.$refs.pdfviewer.ej2Instances;
+ const viewer = this.$refs.pdfviewer.ej2Instances;
document.getElementById('undo').addEventListener('click', () => {
viewer.undo();
});
@@ -2519,7 +2509,7 @@ export default {
{% endhighlight %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
@@ -2538,16 +2528,17 @@ import {
BookmarkView, Annotation, ThumbnailView, Print, TextSelection,
TextSearch, FormFields, FormDesigner, PageOrganizer
} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
+import { provide, ref } from 'vue';
const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
+const pdfviewer = ref(null);
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
const documentLoad = function () {
- const viewer = this.$refs.pdfviewer.ej2Instances;
+ const viewer = pdfviewer.value.ej2Instances;
document.getElementById('undo').addEventListener('click', () => {
viewer.undo();
});
@@ -2559,7 +2550,7 @@ const documentLoad = function () {
{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
+{% highlight html tabtitle="Options API (Server-Backed)" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md b/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md
index 6d84a8c904..cf334baff3 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md
@@ -10,11 +10,33 @@ domainurl: ##DomainURL##
# Content Security Policy in Vue PDF Viewer
-Content Security Policy (CSP) is a security feature implemented by web browsers that helps to protect against attacks such as cross-site scripting (XSS) and data injection. It limits the sources from which content can be loaded on a web page.
+Content Security Policy (CSP) is a security feature implemented by web browsers that helps protect against attacks such as cross-site scripting (XSS) and data injection. It restricts the sources from which content can be loaded on a web page.
-To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default. In order to use Syncfusion PDF Viewer control with strict CSP mode, it is essential to include following directives in the CSP meta tag.
+When enabling strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default for enhanced security. To use the Syncfusion PDF Viewer control in strict CSP mode, specific directives must be configured in the CSP meta tag to allow the control's necessary resources.
-* Syncfusion PDF Viewer control are rendered with calculated **inline styles** and **base64** font icons, which are blocked on a strict CSP-enabled site. To allow them, add the [`style-src 'self' 'wasm-unsafe' blob:;` ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag as follows.
+## CSP Directives Reference
+
+The following table describes each CSP directive and its usage with the Syncfusion PDF Viewer:
+
+| Directive | Usage |
+|------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `default-src 'self';` | Sets the default policy for loading resources. `'self'` restricts loading to the same origin (same domain). |
+| `script-src 'self' 'wasm-unsafe-eval' blob:;` | Defines where JavaScript and WebAssembly code can be loaded. `'self'` allows scripts from the same origin. `'wasm-unsafe-eval'` permits WebAssembly compilation from JavaScript functions. `blob:` allows loading scripts from Blob URLs. |
+| `worker-src 'self' blob:;` | Controls where web workers can be loaded. `'self'` allows same-origin workers. `blob:` enables blob-based workers, which are common in PDF viewers and compute-intensive applications. |
+| `connect-src 'self' data:;` | Restricts network requests (fetch, XHR, WebSockets) to specified sources. `'self'` limits requests to the same origin. `data:` allows data URIs. |
+| `style-src 'self' blob:;` | Defines stylesheet sources. `'self'` restricts to the same origin. `blob:` allows dynamically generated styles necessary for runtime CSS generation. |
+| `font-src 'self' data:;` | Controls font loading sources. `'self'` allows local fonts. `data:` permits inline fonts (base64 encoded), and URLs enable loading from external font CDNs. |
+| `img-src 'self' data: blob:;` | Controls image loading sources. `'self'` restricts to the same origin. `data:` allows inline images (base64 encoded). `blob:` allows Blob URLs for dynamically generated images. |
+
+## Configuring CSP for PDF Viewer
+
+The following sections describe CSP configurations required for different PDF Viewer features.
+
+### Styles and Fonts
+
+The PDF Viewer is rendered with calculated inline styles and base64-encoded font icons, which are blocked in strict CSP mode. Additionally, the material and tailwind built-in themes reference the external Roboto font from Google Fonts, which must also be allowed.
+
+Include the following directives to permit inline styles and external fonts:
{% tabs %}
{% highlight razor tabtitle="HTML" %}
@@ -26,9 +48,7 @@ To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs
{% endhighlight %}
{% endtabs %}
-* Syncfusion **material** and **tailwind** built-in themes contain a reference to the [`Roboto’s external font`](https://fonts.googleapis.com/css?family=Roboto:400,500), which is also blocked. To allow them, add the [`external font`](https://fonts.googleapis.com/css?family=Roboto:400,500) reference to the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the above meta tag.
-
-The resultant meta tag is included within the `` tag and resolves the CSP violation on the application's side when utilizing Syncfusion PDF Viewer control with material and tailwind themes.
+The meta tag should be placed within the `` section of the HTML document to resolve CSP violations when using material or tailwind themes:
{% tabs %}
{% highlight razor tabtitle="HTML" %}
@@ -43,7 +63,9 @@ The resultant meta tag is included within the `` tag and resolves the CSP
{% endhighlight %}
{% endtabs %}
-* Syncfusion PDF Viewer control when images are added as **blob** and **base64**, which are blocked on a strict CSP-enabled site.To overcome this restriction, it is necessary to add the image-src data: directive in the meta tag. To allow them, add the [`style-src 'self' blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`image-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directives as follows.
+### Images and Blobs
+
+When images are added as blob or base64 data to the PDF Viewer, they are blocked in strict CSP mode. To permit these resources, include the [`img-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directive in the CSP meta tag:
{% tabs %}
{% highlight razor tabtitle="HTML" %}
@@ -57,7 +79,9 @@ The resultant meta tag is included within the `` tag and resolves the CSP
{% endhighlight %}
{% endtabs %}
-* Syncfusion PDF Viewer control when **web worker** and is used, which is blocked on a strict CSP-enabled site. To allow them, add the [`worker-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src) and [`connect-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directives in the above meta tag as follows.
+### Scripts, WebAssembly, and Workers
+
+The PDF Viewer uses WebAssembly and web workers for processing and rendering. Both are blocked in strict CSP mode. To enable these features, include the [`script-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src), [`worker-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src), and [`connect-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directives:
{% tabs %}
{% highlight razor tabtitle="HTML" %}
@@ -73,18 +97,13 @@ The resultant meta tag is included within the `` tag and resolves the CSP
{% endhighlight %}
{% endtabs %}
-N> In accordance with the latest security practices, the Syncfusion PDF Viewer control now recommends using `wasm-unsafe` in the Content Security Policy (CSP) settings to enhance the security of WebAssembly operations. This change ensures a safer execution environment while maintaining the necessary functionality. Make sure to update your CSP meta tags to reflect this change for optimal security compliance.
+N> In accordance with the latest security practices, the Syncfusion PDF Viewer control recommends using `wasm-unsafe-eval` in the Content Security Policy (CSP) settings to enable secure WebAssembly compilation. This directive allows WebAssembly to be compiled from JavaScript functions while maintaining a secure execution environment. Update your CSP meta tags to reflect this change for optimal security compliance.
-### Please find the usage of each directives:
+## Security Best Practices
-| Directive | Usage |
-|------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `default-src 'none';` | Sets the default policy for loading resources. `'self'` means only allow resources from the same origin (same domain). |
-| `script-src 'self' 'wasm-unsafe-eval' blob:;` | Defines where JavaScript (and WebAssembly) code can come from. `'self'` allows scripts from the same origin. `'wasm-unsafe-eval'` allows compilation of WebAssembly using JS eval()-like functions (security-sensitive). `blob:` allows loading scripts from Blob URLs. |
-| `worker-src 'self' blob:;` | Controls where workers can be loaded from. `'self'` allows same-origin workers. `blob:` allows blob-based workers, common in PDF viewers and heavy JS applications. |
-| `connect-src 'self';` | Controls where the application can make network requests, such as `fetch()`, XHR, and WebSockets. `'self'` restricts this to the same origin. |
-| `style-src 'self' blob:;` | Defines the sources for stylesheets. `'self'` restricts to the same origin. `blob:` allows dynamically generated styles, which might be necessary for apps with dynamically generated CSS. |
-| `font-src 'self' data:` | Controls where fonts can be loaded from. `'self'` allows local fonts. `data:` allows inline fonts (base64 embedded), and the URLs allow loading from external font CDN. |
-| `img-src 'self' data:;` | Controls where images can be loaded from. `'self'` restricts to the same origin. `data:` allows inline images (base64). |
+- Test CSP configurations thoroughly in development to identify blocked resources before deployment.
+- Monitor browser console for CSP violations that may indicate missing directives.
+- Use the most restrictive CSP possible while maintaining required functionality.
+- Regularly review CSP settings when upgrading the Syncfusion PDF Viewer to the latest version.
[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/download.md b/Document-Processing/PDF/PDF-Viewer/vue/download.md
index 69de055f81..3caaa30779 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/download.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/download.md
@@ -9,15 +9,13 @@ domainurl: ##DomainURL##
---
# Download in Vue PDF viewer control
-The PDF Viewer supports downloading the loaded PDF document. Use the enableDownload property to enable or disable the download option, as shown below.
+The Vue PDF Viewer lets users download the currently loaded PDF. Enable the download toolbar button with `enableDownload` for both standalone and server-backed viewers. The examples below demonstrate typical configurations and how to trigger a programmatic download.
-
+
-> Note: When loading documents from other origins, ensure that CORS is correctly configured on the server. In server-backed mode, the document is streamed through the serviceUrl endpoint, which must allow download requests.
+N> When loading documents from other origins, ensure that CORS is correctly configured on the server. In server-backed mode, the document is streamed through the serviceUrl endpoint, which must allow download requests.
-
-
-You can invoke the download action using the following code snippet:
+To invoke download programmatically, use the following snippet:
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -86,7 +84,7 @@ export default {
},
methods: {
- downloadClicked: function (args) {
+ downloadClicked: function () {
this.$refs.pdfviewer.ej2Instances.download();
}
}
@@ -160,7 +158,7 @@ export default {
},
methods: {
- downloadClicked: function (args) {
+ downloadClicked: function () {
this.$refs.pdfviewer.ej2Instances.download();
}
}
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/event.md b/Document-Processing/PDF/PDF-Viewer/vue/event.md
index 938ddf1e78..2385ea34e9 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/event.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/event.md
@@ -10,7 +10,9 @@ domainurl: ##DomainURL##
# Events in Vue PDF Viewer
-The PDF Viewer component triggers events for creation, page navigation, document life cycle, context menu interactions, comments, bookmarks, download and export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. Use these events to integrate custom logic into application workflows.
+The PDF Viewer component triggers events throughout its lifecycle, enabling you to respond to user interactions and document state changes. These events are organized into categories: **Component Lifecycle** (created, resourcesLoaded), **Navigation** (pageChange, pageClick), **Document Operations** (documentLoad, documentLoadFailed, downloadStart, downloadEnd, printStart, printEnd), **User Interactions** (toolbarClick, bookmarkClick, thumbnailClick), **Text Operations** (textSelectionStart, textSelectionEnd, textSearchStart, textSearchComplete), **Annotations** (commentAdd, commentEdit, commentDelete), **Forms** (buttonFieldClick, validateFormFields), and **Customization** (customContextMenuBeforeOpen, customContextMenuSelect). Subscribe to events using the `@eventName` syntax to execute custom code when specific actions occur.
+
+## Commonly used events
The following table lists commonly used events supported by the PDF Viewer component:
@@ -66,13 +68,13 @@ The following table lists commonly used events supported by the PDF Viewer compo
| [`validateFormFields`](#validateformfields) | Triggers when form field validation fails. |
| [`zoomChange`](#zoomchange) | Triggers when the magnification value changes. |
-Note: For annotation and signature events, see the dedicated Annotations Events topic.
+For annotation and signature events, see the dedicated Annotations Events topic.
## bookmarkClick
-The [bookmarkClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#bookmarkclick) event triggers when a bookmark item is clicked in the bookmark panel.
+The [bookmarkClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#bookmarkclick) event triggers when a bookmark item is clicked in the bookmark panel.
-- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/bookmarkClickEventArgs/).
+- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/bookmarkClickEventArgs).
Example:
@@ -150,7 +152,7 @@ export default {
## toolbarClick
-The [toolbarClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#toolbarclick) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name.
+The [toolbarClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#toolbarclick) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name.
- Event arguments: `ClickEventArgs`.
@@ -229,9 +231,9 @@ export default {
## validateFormFields
-The [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#validateformfields) event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed.
+The [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#validateformfields) event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed.
-- Event arguments: [ValidateFormFieldsArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/validateFormFieldsArgs/)
+- Event arguments: [ValidateFormFieldsArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/validateFormFieldsArgs)
- name: Event name
- documentName: Current document name
- formField: The last interacted field’s data (if applicable)
@@ -320,9 +322,9 @@ Tip
## zoomChange
-The [zoomChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#zoomchange) event triggers when the magnification value changes.
+The [zoomChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#zoomchange) event triggers when the magnification value changes.
-- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/zoomChangeEventArgs/).
+- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/zoomChangeEventArgs).
Example:
@@ -400,9 +402,9 @@ export default {
## buttonFieldClick
-The [buttonFieldClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#buttonfieldclick) event triggers when a button form field is clicked.
+The [buttonFieldClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#buttonfieldclick) event triggers when a button form field is clicked.
-- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/buttonFieldClickEventArgs/).
+- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/buttonFieldClickEventArgs).
Example:
@@ -480,9 +482,9 @@ export default {
## commentAdd
-The [commentAdd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentadd) event triggers when a comment is added in the comment panel.
+The [commentAdd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#commentadd) event triggers when a comment is added in the comment panel.
-- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/).
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs).
Example:
@@ -560,9 +562,9 @@ export default {
## commentDelete
-The [commentDelete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentdelete) event triggers when a comment is deleted in the comment panel.
+The [commentDelete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#commentdelete) event triggers when a comment is deleted in the comment panel.
-- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/).
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs).
Example:
@@ -640,9 +642,9 @@ export default {
## commentEdit
-The [commentEdit](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentedit) event triggers when a comment is edited in the comment panel.
+The [commentEdit](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#commentedit) event triggers when a comment is edited in the comment panel.
-- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/).
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs).
Example:
@@ -720,9 +722,9 @@ export default {
## commentSelect
-The [commentSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentselect) event triggers when a comment is selected in the comment panel.
+The [commentSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#commentselect) event triggers when a comment is selected in the comment panel.
-- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/).
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs).
Example:
@@ -784,9 +786,9 @@ export default {
## commentStatusChanged
-The [commentStatusChanged](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentstatuschanged) event triggers when a comment status is changed in the comment panel.
+The [commentStatusChanged](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#commentstatuschanged) event triggers when a comment status is changed in the comment panel.
-- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/).
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs).
Example:
@@ -834,7 +836,7 @@ export default {
## created
-The [created](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#created) event is triggered during the creation of the PDF Viewer component.
+The [created](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#created) event is triggered during the creation of the PDF Viewer component.
- Event arguments: `void`.
@@ -915,9 +917,9 @@ export default {
## customContextMenuBeforeOpen
-The [customContextMenuBeforeOpen](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#customcontextmenubeforeopen) event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected).
+The [customContextMenuBeforeOpen](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#customcontextmenubeforeopen) event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected).
-- Event arguments: [CustomContextMenuBeforeOpenEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs/)
+- Event arguments: [CustomContextMenuBeforeOpenEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs)
- name: Event name
- ids: Array of menu item ids that will be shown; remove ids to hide items for this open
@@ -1015,9 +1017,9 @@ export default {
## customContextMenuSelect
-The [customContextMenuSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#customcontextmenuselect) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id.
+The [customContextMenuSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#customcontextmenuselect) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id.
-- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customContextMenuSelectEventArgs/).
+- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customContextMenuSelectEventArgs).
- name: Event name
- id: The id of the clicked menu item
@@ -1115,9 +1117,9 @@ export default {
## documentLoad
-The [documentLoad](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#documentload) event occurs after a document is successfully loaded and parsed.
+The [documentLoad](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#documentload) event occurs after a document is successfully loaded and parsed.
-- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/loadEventArgs/).
+- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/loadEventArgs).
Example:
@@ -1195,9 +1197,9 @@ export default {
## documentLoadFailed
-The [documentLoadFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#documentloadfailed) event triggers when loading a document fails.
+The [documentLoadFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#documentloadfailed) event triggers when loading a document fails.
-- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/loadFailedEventArgs/).
+- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/loadFailedEventArgs).
Example:
@@ -1276,9 +1278,9 @@ export default {
## documentUnload
-The [documentUnload](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#documentunload) event triggers when closing the current document.
+The [documentUnload](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#documentunload) event triggers when closing the current document.
-- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/unloadEventArgs/).
+- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/unloadEventArgs).
Example:
@@ -1358,9 +1360,9 @@ export default {
## downloadEnd
-The [downloadEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#downloadend) event triggers after a document download completes.
+The [downloadEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#downloadend) event triggers after a document download completes.
-- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/downloadEndEventArgs/).
+- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/downloadEndEventArgs).
Example:
@@ -1440,9 +1442,9 @@ export default {
## downloadStart
-The [downloadStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#downloadstart) event triggers when the download operation is initiated.
+The [downloadStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#downloadstart) event triggers when the download operation is initiated.
-- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/downloadStartEventArgs/).
+- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/downloadStartEventArgs).
Example:
@@ -1521,9 +1523,9 @@ export default {
## exportFailed
-The [exportFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#exportfailed) event triggers when exporting annotations fails.
+The [exportFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#exportfailed) event triggers when exporting annotations fails.
-- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportFailureEventArgs/).
+- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportFailureEventArgs).
Example:
@@ -1602,9 +1604,9 @@ export default {
## exportStart
-The [exportStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#exportstart) event triggers when exporting annotations starts.
+The [exportStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#exportstart) event triggers when exporting annotations starts.
-- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportStartEventArgs/).
+- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportStartEventArgs).
Example:
@@ -1683,9 +1685,9 @@ export default {
## exportSuccess
-The [exportSuccess](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#exportsuccess) event triggers when annotations are exported successfully.
+The [exportSuccess](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#exportsuccess) event triggers when annotations are exported successfully.
-- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportSuccessEventArgs/).
+- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportSuccessEventArgs).
Example:
@@ -1764,9 +1766,9 @@ export default {
## extractTextCompleted
-The [extractTextCompleted](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#extracttextcompleted) event triggers when text extraction completes.
+The [extractTextCompleted](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#extracttextcompleted) event triggers when text extraction completes.
-- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/extractTextCompletedEventArgs/).
+- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/extractTextCompletedEventArgs).
Example:
@@ -1845,9 +1847,9 @@ export default {
## hyperlinkClick
-The [hyperlinkClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#hyperlinkclick) event triggers when a hyperlink is clicked.
+The [hyperlinkClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#hyperlinkclick) event triggers when a hyperlink is clicked.
-- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/hyperlinkClickEventArgs/).
+- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/hyperlinkClickEventArgs).
Example:
@@ -1926,7 +1928,7 @@ export default {
## hyperlinkMouseOver
-The [hyperlinkMouseOver](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#hyperlinkmouseover) event triggers when hovering over a hyperlink.
+The [hyperlinkMouseOver](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#hyperlinkmouseover) event triggers when hovering over a hyperlink.
- Event arguments: HyperlinkMouseOverArgs.
@@ -2007,9 +2009,9 @@ export default {
## importFailed
-The [importFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#importfailed) event triggers when importing annotations fails.
+The [importFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#importfailed) event triggers when importing annotations fails.
-- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importFailureEventArgs/).
+- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importFailureEventArgs).
Example:
@@ -2088,9 +2090,9 @@ export default {
## importStart
-The [importStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#importstart) event triggers when importing annotations starts.
+The [importStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#importstart) event triggers when importing annotations starts.
-- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importStartEventArgs/).
+- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importStartEventArgs).
Example:
@@ -2169,9 +2171,9 @@ export default {
## importSuccess
-The [importSuccess](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#importsuccess) event triggers when annotations are imported successfully.
+The [importSuccess](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#importsuccess) event triggers when annotations are imported successfully.
-- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importSuccessEventArgs/).
+- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importSuccessEventArgs).
Example:
@@ -2251,9 +2253,9 @@ export default {
## keyboardCustomCommands
-The [keyboardCustomCommands](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#keyboardcustomcommands) event triggers when customized keyboard command keys are pressed.
+The [keyboardCustomCommands](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#keyboardcustomcommands) event triggers when customized keyboard command keys are pressed.
-- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/keyboardCustomCommandsEventArgs/).
+- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/keyboardCustomCommandsEventArgs).
- name: Event name
- keyboardCommand: The command metadata raised by Command Manager
@@ -2372,7 +2374,7 @@ export default {
## moveSignature
-The [moveSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#movesignature) event triggers when a signature is moved across the page.
+The [moveSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#movesignature) event triggers when a signature is moved across the page.
- Event arguments: `MoveSignatureEventArgs`.
@@ -2453,9 +2455,9 @@ export default {
## pageChange
-The [pageChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pagechange) event triggers when the current page number changes (for example, via scrolling or navigation controls).
+The [pageChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#pagechange) event triggers when the current page number changes (for example, via scrolling or navigation controls).
-- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageChangeEventArgs/).
+- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageChangeEventArgs).
Example:
@@ -2535,9 +2537,9 @@ export default {
## pageClick
-The [pageClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pageclick) event triggers when a mouse click occurs on a page.
+The [pageClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#pageclick) event triggers when a mouse click occurs on a page.
-- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageClickEventArgs/).
+- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageClickEventArgs).
Example:
@@ -2616,7 +2618,7 @@ export default {
## pageMouseover
-The [pageMouseover](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pagemouseover) event triggers when the mouse moves over a page.
+The [pageMouseover](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#pagemouseover) event triggers when the mouse moves over a page.
- Event arguments: PageMouseoverEventArgs.
@@ -2697,7 +2699,7 @@ export default {
## pageOrganizerSaveAs
-The [pageOrganizerSaveAs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pageorganizersaveas) event triggers when a Save As action is performed in the page organizer.
+The [pageOrganizerSaveAs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#pageorganizersaveas) event triggers when a Save As action is performed in the page organizer.
- Event arguments: `PageOrganizerSaveAsEventArgs`.
@@ -2778,9 +2780,9 @@ export default {
## pageRenderComplete
-The [pageRenderComplete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pagerendercomplete) event triggers after a page finishes rendering.
+The [pageRenderComplete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#pagerendercomplete) event triggers after a page finishes rendering.
-- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageRenderCompleteEventArgs/).
+- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageRenderCompleteEventArgs).
Example:
@@ -2860,9 +2862,9 @@ export default {
## pageRenderInitiate
-The [pageRenderInitiate](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pagerenderinitiate) event triggers when page rendering begins.
+The [pageRenderInitiate](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#pagerenderinitiate) event triggers when page rendering begins.
-- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageRenderInitiateEventArgs/).
+- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageRenderInitiateEventArgs).
Example:
@@ -2941,9 +2943,9 @@ export default {
## printEnd
-The [printEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#printend) event triggers when a print action completes.
+The [printEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printend) event triggers when a print action completes.
-- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/printEndEventArgs/).
+- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/printEndEventArgs).
Example:
@@ -3005,9 +3007,9 @@ export default {
## printStart
-The [printStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#printstart) event triggers when a print action is initiated.
+The [printStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printstart) event triggers when a print action is initiated.
-- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/printStartEventArgs/).
+- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/printStartEventArgs).
Example:
@@ -3069,9 +3071,9 @@ export default {
## removeSignature
-The [removeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#removesignature) event triggers when a signature is removed.
+The [removeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#removesignature) event triggers when a signature is removed.
-- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/removeSignatureEventArgs/).
+- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/removeSignatureEventArgs).
Example:
@@ -3133,9 +3135,9 @@ export default {
## resizeSignature
-The [resizeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#resizesignature) event triggers when a signature is resized.
+The [resizeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resizesignature) event triggers when a signature is resized.
-- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/resizeSignatureEventArgs/).
+- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/resizeSignatureEventArgs).
Example:
@@ -3197,7 +3199,7 @@ export default {
## resourcesLoaded
-The [resourcesLoaded](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#resourcesLoaded) event triggers after the viewer's required resources are loaded.
+The [resourcesLoaded](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resourcesLoaded) event triggers after the viewer's required resources are loaded.
- Event arguments: `void`.
@@ -3261,9 +3263,9 @@ export default {
## signaturePropertiesChange
-The [signaturePropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#signaturepropertieschange) event triggers when signature properties change.
+The [signaturePropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#signaturepropertieschange) event triggers when signature properties change.
-- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/).
+- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs).
Example:
@@ -3326,9 +3328,9 @@ export default {
## signatureSelect
-The [signatureSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#signatureselect) event triggers when a signature is selected.
+The [signatureSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#signatureselect) event triggers when a signature is selected.
-- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureSelectEventArgs/).
+- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureSelectEventArgs).
Example:
@@ -3390,9 +3392,9 @@ export default {
## signatureUnselect
-The [signatureUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#signatureunselect) event triggers when a signature is unselected.
+The [signatureUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#signatureunselect) event triggers when a signature is unselected.
-- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureUnselectEventArgs/).
+- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureUnselectEventArgs).
Example:
@@ -3471,9 +3473,9 @@ export default {
## textSearchComplete
-The [textSearchComplete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textsearchcomplete) event triggers when a text search completes.
+The [textSearchComplete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#textsearchcomplete) event triggers when a text search completes.
-- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchCompleteEventArgs/).
+- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchCompleteEventArgs).
Example:
@@ -3535,9 +3537,9 @@ export default {
## textSearchHighlight
-The [textSearchHighlight](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textsearchhighlight) event triggers when searched text is highlighted.
+The [textSearchHighlight](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#textsearchhighlight) event triggers when searched text is highlighted.
-- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchHighlightEventArgs/).
+- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchHighlightEventArgs).
Example:
@@ -3616,9 +3618,9 @@ export default {
## textSearchStart
-The [textSearchStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textsearchstart) event triggers when a text search is initiated.
+The [textSearchStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#textsearchstart) event triggers when a text search is initiated.
-- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchStartEventArgs/).
+- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchStartEventArgs).
Example:
@@ -3697,9 +3699,9 @@ export default {
## textSelectionEnd
-The [textSelectionEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textselectionend) event triggers when text selection is complete.
+The [textSelectionEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#textselectionend) event triggers when text selection is complete.
-- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSelectionEndEventArgs/).
+- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSelectionEndEventArgs).
Example:
@@ -3761,7 +3763,7 @@ export default {
## textSelectionStart
-The [textSelectionStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textselectionstart) event triggers when text selection is initiated.
+The [textSelectionStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#textselectionstart) event triggers when text selection is initiated.
- Event arguments: `TextSelectionStartEventArgs`.
@@ -3825,9 +3827,9 @@ export default {
## thumbnailClick
-The [thumbnailClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#thumbnailclick) event triggers when a thumbnail is clicked.
+The [thumbnailClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#thumbnailclick) event triggers when a thumbnail is clicked.
-- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/thumbnailClickEventArgs/).
+- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/thumbnailClickEventArgs).
Example:
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md
index ee6a3741cc..07c502c8f8 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md
@@ -10,26 +10,23 @@ domainurl: ##DomainURL##
# Feature modules in Vue PDF viewer Control
-The PDF Viewer features are provided as individual modules, allowing applications to include only what is needed. Inject the required modules to enable functionality, then configure the corresponding properties on the PDF Viewer instance.
-
-Available PDF Viewer modules:
-
-* [**Toolbar**](./toolbar-customization/annotation-toolbar-customization): Built-in toolbar for user interaction.
-* [**Magnification**](./magnification): Perform zoom operations for a better viewing experience.
-* [**Navigation**](./interactive-pdf-navigation/page-navigation): Navigate across pages.
-* [**LinkAnnotation**](./interactive-pdf-navigation/table-of-content-navigation): Navigate within the document or to external destinations via hyperlinks.
-* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail-navigation): Navigate within the document using page thumbnails.
-* [**BookmarkView**](./interactive-pdf-navigation/bookmark-navigation): Navigate using document bookmarks (table of contents).
-* [**TextSelection**](./textselection): Select and copy text from the document.
-* [**TextSearch**](./text-search): Search for text across the document.
-* [**Print**](./print): Print the entire document or specific pages directly from the browser.
-* [**Annotation**](./annotations/text-markup-annotation): Add and edit annotations.
-* [**FormFields**](./form-designer/create-programmatically): Work with form fields in the document.
-* [**FormDesigner**](./form-designer/create-programmatically): Add or edit form fields in the document.
-
-> In addition to injecting the required modules in an application, enable the corresponding properties to activate features on a PDF Viewer instance.
-
-Refer to the following table:
+The [Vue PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) exposes functionality as feature modules that can be imported selectively. Import and register only the modules required by an application to keep bundle sizes small and enable specific capabilities on demand. The following feature modules are available:
+
+* **Toolbar**: Built-in toolbar for user interaction.
+* **Magnification**: Zoom and fit options for improved viewing.
+* **Navigation**: Page navigation controls and page jump support.
+* **LinkAnnotation**: Support for hyperlinks within and outside the PDF.
+* **ThumbnailView**: Page thumbnails for rapid navigation within the document.
+* **BookmarkView**: Navigation based on document bookmarks.
+* **TextSelection**: Select and copy text from the PDF.
+* **TextSearch**: Find text across the document.
+* **Print**: Print the document or individual pages from the browser.
+* **Annotation**: Create and edit annotations on the PDF.
+* **FormFields**: Preserve and interact with form fields in the document.
+* **FormDesigner**: Add and edit form fields in design mode.
+* **StickyNotesAnnotation**: Add sticky notes to the PDF.
+
+N> In addition to registering the required modules, enable the corresponding component properties to activate each capability on a PDF Viewer instance. Refer to the following table for example attribute usage.
| Module | Property to enable the functionality for a PDF Viewer instance |
|---|---|
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-programmatically.md b/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-programmatically.md
deleted file mode 100644
index db2c1a9e7b..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-programmatically.md
+++ /dev/null
@@ -1,2528 +0,0 @@
----
-layout: post
-title: Create form fields in the Vue PDF Viewer component | Syncfusion
-description: Learn how to add, update, delete, save, print, validate, and import/export form fields in the Syncfusion Vue PDF Viewer component.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Create programmatically in Vue PDF Viewer control
-
-The PDF Viewer component provides options to add, edit, and delete form fields. The supported form field types are:
-
-- Textbox
-- Password
-- CheckBox
-- RadioButton
-- ListBox
-- DropDown
-- Signature field
-- Initial field
-
-## Add a form field to PDF document programmatically
-
-Use the addFormField method to add form fields programmatically. Pass the form field type and the corresponding property object as parameters. The following example demonstrates adding multiple fields on document load.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer** in the app.vue file, include the following `serviceUrl`:
-**serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**
-Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serviceUrl"` attribute inside the element.
-
-{% previewsample "/document-processing/code-snippet/pdfviewer/vue/addformfield-cs1" %}
-
-## Edit or update form field programmatically
-
-Use the updateFormField method to modify a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it as the first parameter. Provide the properties to update as the second parameter. The following example updates the background color of a Textbox field.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer** in the app.vue file, include the following `serviceUrl`:
-**serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**
-Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serviceUrl"` attribute inside the element.
-
-{% previewsample "/document-processing/code-snippet/pdfviewer/vue/updateformfield-cs1" %}
-
-## Delete form field programmatically
-
-Use the deleteFormField method to remove a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it to deleteFormField. The following example deletes the first form field.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer** in the app.vue file, include the following `serviceUrl`:
-**serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**
-Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serviceUrl"` attribute inside the element.
-
-{% previewsample "/document-processing/code-snippet/pdfviewer/vue/deleteformfield-cs1" %}
-
-## Saving the form fields
-
-Selecting the Download icon on the toolbar saves the form fields in the exported PDF without modifying the original document. See the following GIF for reference.
-
-
-
-You can invoke the download action using the following code snippet.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
@@ -45,65 +84,37 @@ function App() {
-
-
-
-
-
-
-
diff --git a/Document-Processing/code-snippet/spreadsheet/react/comment-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/comment-cs1/app/app.tsx
index acd490b6a6..6484d104c2 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/comment-cs1/app/app.tsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/comment-cs1/app/app.tsx
@@ -6,7 +6,7 @@ import { shipmentData } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
-
+
function onCreated() {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
@@ -35,6 +35,45 @@ function App() {
}
}
+ // prepare comments as an array and bind by index in the JSX below
+ const cellComments = [
+ {
+ author: 'Julius Gorner', text: 'Confirm delivery status for Order 10248.', createdTime: 'November 18, 2025 at 3:00 PM',
+ isResolved: true, replies: [{ author: 'Cristi Espinos', text: 'Status verified as delivered.', createdTime: 'November 18, 2025 at 3:30 PM' },
+ { author: 'Julius Gorner', text: 'Acknowledged, thank you.', createdTime: 'November 18, 2025 at 3:45 PM' }]
+ },
+ {
+ author: 'Julius Gorner', text: 'Order 10250 is marked as Shipped, any update on current status?', createdTime: 'November 16, 2025 at 9:00 PM',
+ isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Shipment is in transit.', createdTime: 'November 17, 2025 at 3:30 PM' },
+ { author: 'Julius Gorner', text: 'Thanks for the update.', createdTime: 'November 17, 2025 at 3:45 PM' }]
+ },
+ {
+ author: 'Julius Gorner', text: 'Reason for cancellation of Order 10253?', createdTime: 'November 18, 2025 at 1:00 PM',
+ isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Customer requested cancellation.', createdTime: 'November 18, 2025 at 1:30 PM' },
+ { author: 'Julius Gorner', text: 'Understood, thanks.', createdTime: 'November 18, 2025 at 3:15 PM' }]
+ },
+ {
+ author: 'Julius Gorner', text: 'Pending status for Order 10254 - any progress?', createdTime: 'November 19, 2025 at 3:00 PM',
+ isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Awaiting customs clearance.', createdTime: 'November 19, 2025 at 3:30 PM' },
+ { author: 'Julius Gorner', text: 'Please keep me posted,', createdTime: 'November 19, 2025 at 3:45 PM' }]
+ },
+ {
+ author: 'Julius Gorner', text: 'Order 10256 shipped, tracking details shared?', createdTime: 'November 18, 2025 at 3:00 AM',
+ isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Tracking sent via email,', createdTime: 'November 18, 2025 at 3:30 AM' },
+ { author: 'Julius Gorner', text: 'Received, thank you,', createdTime: 'November 18, 2025 at 3:45 AM' }]
+ },
+ {
+ author: 'Julius Gorner', text: 'Delivered order 10257, confirm recipient name.', createdTime: 'November 18, 2025 at 2:00 PM',
+ isResolved: true, replies: [{ author: 'Cristi Espinos', text: 'Recipient verified as Michael Holz.', createdTime: 'November 18, 2025 at 2:30 PM' },
+ { author: 'Julius Gorner', text: 'Great, noted.', createdTime: 'November 18, 2025 at 2:45 PM' }]
+ },
+ {
+ author: 'Julius Gorner', text: 'Order 10258 cancelled, reason documented?', createdTime: 'November 18, 2025 at 12:00 PM',
+ isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Customer changed requirements', createdTime: 'November 18, 2025 at 12:30 PM' },
+ { author: 'Julius Gorner', text: 'Understood, thanks.', createdTime: 'November 18, 2025 at 12:45 PM' }]
+ }
+ ];
+
return (
@@ -46,65 +85,37 @@ function App() {
-
-
-
-
-
-
-
diff --git a/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx
new file mode 100644
index 0000000000..b9a232de81
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent, getCellIndexes, getCell, setCell } from '@syncfusion/ej2-react-spreadsheet';
+import { DropDownList } from '@syncfusion/ej2-dropdowns';
+
+function App() {
+ let spreadsheet = null;
+ const spreadsheetRef = React.useRef(null);
+
+ const dropDownOptions = [10, 20, 30, 40, 50, 60];
+
+ const onCreated = () => {
+ spreadsheet = spreadsheetRef.current;
+ if (!spreadsheet) return;
+
+ // Custom template tab to add dropdown to cell.
+ spreadsheet.addRibbonTabs([{ header: { text: 'Template' }, content: [{
+ text: 'DropDown List', click: () => {
+ if (!spreadsheet) return;
+ const sheet = spreadsheet.getActiveSheet();
+ const [rowIdx, colIdx] = getCellIndexes(sheet.activeCell);
+ const cellModel = getCell(rowIdx, colIdx, sheet);
+ const cellEle = spreadsheet.getCell(rowIdx, colIdx);
+ if (cellModel && cellModel.template === 'dropdown-list') return;
+ addDropDownlist(cellEle, dropDownOptions);
+ }
+ }] }]);
+
+ spreadsheet.setRowsHeight(35, ['1:100']);
+ // Rendering dropdown list for a specific range initially.
+ const activeSheet = spreadsheet.getActiveSheet();
+ for (let colIdx = 0; colIdx <= 3; colIdx++) {
+ setCell(0, colIdx, activeSheet, { template: 'dropdown-list' }, true);
+ }
+ spreadsheet.resize();
+ };
+
+ // Triggers before the cell is appended to the DOM.
+ const beforeCellRender = (args) => {
+ if (args.rowIndex !== undefined && args.colIndex !== undefined) {
+ // To render dropdown if template property 'dropdown-list' is set.
+ if (args.cell && args.cell.template === 'dropdown-list') {
+ addDropDownlist(args.element, dropDownOptions);
+ }
+ }
+ };
+
+ // To render the dropdown list.
+ const addDropDownlist = (element, legendOptions) => {
+ element.innerHTML = '';
+ const inputEle = document.createElement("input");
+ element.appendChild(inputEle);
+ new DropDownList({
+ placeholder: 'Select a value',
+ dataSource: legendOptions,
+ cssClass: 'e-dropdown-list',
+ change: (event)=>{
+ spreadsheetRef.current.updateCell({value: event.value.toString()}, ( spreadsheet.getActiveSheet()).activeCell);
+ }
+ }, inputEle);
+ };
+
+ return (
+ (null);
+
+ const dropDownOptions: number[] = [10, 20, 30, 40, 50, 60];
+
+ const onCreated = (): void => {
+ spreadsheet = spreadsheetRef.current;
+ if (!spreadsheet) return;
+
+ // Custom template tab to add dropdown to cell.
+ spreadsheet.addRibbonTabs([{ header: { text: 'Template' }, content: [{
+ text: 'DropDown List', click: () => {
+ if (!spreadsheet) return;
+ const sheet: any = spreadsheet.getActiveSheet();
+ const [rowIdx, colIdx]: number[] = getCellIndexes((sheet as any).activeCell);
+ const cellModel: any = getCell(rowIdx, colIdx, sheet as any);
+ const cellEle: HTMLElement = spreadsheet.getCell(rowIdx, colIdx) as HTMLElement;
+ if (cellModel && (cellModel as any).template === 'dropdown-list') return;
+ addDropDownlist(cellEle as any, dropDownOptions);
+ }
+ }] }]);
+
+ spreadsheet.setRowsHeight(35, ['1:100']);
+ // Rendering dropdown list for a specific range initially.
+ const activeSheet: any = spreadsheet.getActiveSheet();
+ for (let colIdx = 0; colIdx <= 3; colIdx++) {
+ setCell(0, colIdx, activeSheet as any, { template: 'dropdown-list' } as any, true);
+ }
+ spreadsheet.resize();
+ };
+
+ // Triggers before the cell is appended to the DOM.
+ const beforeCellRender = (args: any): void => {
+ if (args.rowIndex !== undefined && args.colIndex !== undefined) {
+ // To render dropdown if template property 'dropdown-list' is set.
+ if (args.cell && args.cell.template === 'dropdown-list') {
+ addDropDownlist(args.element as HTMLElement, dropDownOptions);
+ }
+ }
+ };
+
+ // To render the dropdown list.
+ const addDropDownlist = (element: HTMLElement, legendOptions: number[]): void => {
+ element.innerHTML = '';
+ const inputEle: HTMLInputElement = document.createElement("input");
+ element.appendChild(inputEle);
+ new DropDownList({
+ placeholder: 'Select a value',
+ dataSource: legendOptions,
+ cssClass: 'e-dropdown-list',
+ change: (event: any)=>{
+ spreadsheetRef.current.updateCell({value: event.value.toString()}, ( spreadsheet.getActiveSheet() as any).activeCell);
+ }
+ }, inputEle);
+ };
+
+ return (
+ Syncfusion React Spreadsheet
+
+
+
+
+
+
+
+
+
+
+
+
+
`); + console.log(args); + } + + const actionComplete = (args) => { + appendElement(`actionComplete triggered for ${args.action} action
`); + console.log(args); + } + + const clearBtnClick = () => { + const eventLog = document.getElementById('EventLog'); + if (eventLog) { + eventLog.innerHTML = ""; + } + }; + const appendElement = (html) => { + const span = document.createElement("span"); + span.innerHTML = html; + const log = document.getElementById('EventLog'); + if (log) { + log.insertBefore(span, log.firstChild); + } + }; + + return ( +(null);
+
+ const actionBegin = (args: any) => {
+ appendElement(`actionBegin triggered for ${args.action} action
`); + console.log(args); + } + + const actionComplete = (args: any) => { + appendElement(`actionComplete triggered for ${args.action} action
`); + console.log(args); + } + + const clearBtnClick = () => { + const eventLog = document.getElementById('EventLog'); + if (eventLog) { + eventLog.innerHTML = ""; + } + }; + const appendElement = (html: any) => { + const span = document.createElement("span"); + span.innerHTML = html; + const log = document.getElementById('EventLog'); + if (log) { + log.insertBefore(span, log.firstChild); + } + }; + + return ( +Syncfusion React Spreadsheet
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render((null);
+
+ const actionBegin = (args: any): void => {
+ const action: string = args.action;
+ const eventArgs: any= args.args.eventArgs;
+
+ // Check the action is beforeReplaceAll.
+ if (action === 'beforeReplaceAll') {
+ const spreadsheet = spreadsheetRef.current;
+ if (!spreadsheet) return;
+
+ // Get the active sheet's selected range.
+ const selectedRange: string | undefined = spreadsheet.getActiveSheet().selectedRange;
+ if (!selectedRange) return;
+
+ // Convert the selected range into cell collection.
+ const selectedRangeCollection: string[] = generateCellCollection(selectedRange, spreadsheet);
+ const replaceAllCollection: Array = eventArgs.addressCollection as Array;
+ if (!Array.isArray(replaceAllCollection)) return;
+
+ // Create a Set from selectedRangeCollection for efficient lookup.
+ const selectedSet: Set = new Set(selectedRangeCollection);
+ const updatedCollection: Array = [];
+
+ // Iterate through replaceAllCollection and keep only cells within selection.
+ for (const cell of replaceAllCollection) {
+ if (cell && selectedSet.has(cell)) {
+ updatedCollection.push(cell);
+ } else {
+ // If the cell is not in selectedRangeCollection, add null to the updated collection
+ updatedCollection.push(null);
+ }
+ }
+
+ if (updatedCollection.length > 0) {
+ // Assign the newly created cell collection to the addressCollection of replaceAll action.
+ eventArgs.addressCollection = updatedCollection;
+ }
+ }
+ };
+
+ const generateCellCollection = (range: string, spreadsheet: SpreadsheetComponent): string[] => {
+ // Initialize the collection that will hold cell references.
+ const collection: string[] = [];
+
+ // Split the range string into start and end cell references.
+ let [startCell, endCell]: string[] = range.split(':');
+ endCell = endCell || startCell;
+
+ // Get the name of the active sheet.
+ const activeSheetName: string = spreadsheet.getActiveSheet().name!;
+
+ // Extract column and row numbers from start and end cell references.
+ const [startCol, startRow]: string[] = startCell.match(/[A-Z]+|\d+/g) || [];
+ const [endCol, endRow]: string[] = endCell.match(/[A-Z]+|\d+/g) || [];
+
+ // Calculate ASCII codes for start and end columns.
+ const colRange: [number, number] = [startCol.toUpperCase().charCodeAt(0), endCol.toUpperCase().charCodeAt(0)];
+
+ // Parse start and end row numbers.
+ const rowRange: [number, number] = [parseInt(startRow), parseInt(endRow)];
+
+ // Iterate over columns and rows within the specified range.
+ for (let col: number = colRange[0]; col <= colRange[1]; col++) {
+ for (let row: number = rowRange[0]; row <= rowRange[1]; row++) {
+ // Push each cell reference into the collection array
+ collection.push(`${activeSheetName}!${String.fromCharCode(col)}${row}`);
+ }
+ }
+ // Return the array of cell references.
+ return collection;
+ };
+
+ return (
+
+
+ );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(> {
+ return [
+ {
+ "Customer Name": "Romona Heaslip",
+ "Model": "Taurus",
+ "Color": "Aquamarine",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "07/11/2015",
+ "Amount": "8529.22"
+ },
+ {
+ "Customer Name": "Clare Batterton",
+ "Model": "Sparrow",
+ "Color": "Pink",
+ "Payment Mode": "Cash On Delivery",
+ "Delivery Date": "7/13/2016",
+ "Amount": "17866.19"
+ },
+ {
+ "Customer Name": "Eamon Traise",
+ "Model": "Grand Cherokee",
+ "Color": "Blue",
+ "Payment Mode": "Net Banking",
+ "Delivery Date": "09/04/2015",
+ "Amount": "13853.09"
+ },
+ {
+ "Customer Name": "Julius Gorner",
+ "Model": "GTO",
+ "Color": "Aquamarine",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "12/15/2017",
+ "Amount": "2338.74"
+ },
+ {
+ "Customer Name": "Jenna Schoolfield",
+ "Model": "LX",
+ "Color": "Yellow",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "10/08/2014",
+ "Amount": "9578.45"
+ },
+ {
+ "Customer Name": "Marylynne Harring",
+ "Model": "Catera",
+ "Color": "Green",
+ "Payment Mode": "Cash On Delivery",
+ "Delivery Date": "7/01/2017",
+ "Amount": "19141.62"
+ },
+ {
+ "Customer Name": "Vilhelmina Leipelt",
+ "Model": "7 Series",
+ "Color": "Goldenrod",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "12/20/2015",
+ "Amount": "6543.30"
+ },
+ {
+ "Customer Name": "Barby Heisler",
+ "Model": "Corvette",
+ "Color": "Red",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "11/24/2014",
+ "Amount": "13035.06"
+ },
+ {
+ "Customer Name": "Karyn Boik",
+ "Model": "Regal",
+ "Color": "Indigo",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "05/12/2014",
+ "Amount": "18488.80"
+ },
+ {
+ "Customer Name": "Jeanette Pamplin",
+ "Model": "S4",
+ "Color": "Fuscia",
+ "Payment Mode": "Net Banking",
+ "Delivery Date": "12/30/2014",
+ "Amount": "12317.04"
+ },
+ {
+ "Customer Name": "Cristi Espinos",
+ "Model": "TL",
+ "Color": "Aquamarine",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "12/18/2013",
+ "Amount": "6230.13"
+ },
+ {
+ "Customer Name": "Issy Humm",
+ "Model": "Club Wagon",
+ "Color": "Pink",
+ "Payment Mode": "Cash On Delivery",
+ "Delivery Date": "02/02/2015",
+ "Amount": "9709.49"
+ },
+ {
+ "Customer Name": "Tuesday Fautly",
+ "Model": "V8 Vantage",
+ "Color": "Crimson",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "11/19/2014",
+ "Amount": "9766.10"
+ },
+ {
+ "Customer Name": "Rosemaria Thomann",
+ "Model": "Caravan",
+ "Color": "Violet",
+ "Payment Mode": "Net Banking",
+ "Delivery Date": "02/08/2014",
+ "Amount": "7685.49"
+ },
+ {
+ "Customer Name": "Lyell Fuentez",
+ "Model": "Bravada",
+ "Color": "Violet",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "08/05/2016",
+ "Amount": "18012.45"
+ },
+ {
+ "Customer Name": "Raynell Layne",
+ "Model": "Colorado",
+ "Color": "Pink",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "05/30/2016",
+ "Amount": "2785.49"
+ },
+ {
+ "Customer Name": "Raye Whines",
+ "Model": "4Runner",
+ "Color": "Red",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "12/10/2016",
+ "Amount": "9967.74"
+ },
+ {
+ "Customer Name": "Virgina Aharoni",
+ "Model": "TSX",
+ "Color": "Pink",
+ "Payment Mode": "Cash On Delivery",
+ "Delivery Date": "10/23/2014",
+ "Amount": "5584.33"
+ },
+ {
+ "Customer Name": "Peta Cheshir",
+ "Model": "Pathfinder",
+ "Color": "Red",
+ "Payment Mode": "Net Banking",
+ "Delivery Date": "12/24/2015",
+ "Amount": "5286.53"
+ },
+ {
+ "Customer Name": "Jule Urion",
+ "Model": "Charger",
+ "Color": "Violet",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "11/20/2013",
+ "Amount": "13511.91"
+ },
+ {
+ "Customer Name": "Lew Gilyatt",
+ "Model": "Bonneville",
+ "Color": "Crimson",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "11/19/2013",
+ "Amount": "6498.19"
+ },
+ {
+ "Customer Name": "Jobey Fortun",
+ "Model": "B-Series",
+ "Color": "Blue",
+ "Payment Mode": "Net Banking",
+ "Delivery Date": "10/30/2014",
+ "Amount": "10359.67"
+ },
+ {
+ "Customer Name": "Blondie Crump",
+ "Model": "Voyager",
+ "Color": "Turquoise",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "04/06/2018",
+ "Amount": "8118.39"
+ },
+ {
+ "Customer Name": "Florentia Binns",
+ "Model": "Grand Prix",
+ "Color": "Orange",
+ "Payment Mode": "Cash On Delivery",
+ "Delivery Date": "10/13/2016",
+ "Amount": "10204.37"
+ },
+ {
+ "Customer Name": "Jaquelin Galtone",
+ "Model": "Sunbird",
+ "Color": "Red",
+ "Payment Mode": "Net Banking",
+ "Delivery Date": "10/22/2013",
+ "Amount": "6528.06"
+ },
+ {
+ "Customer Name": "Hakeem Easseby",
+ "Model": "Mirage",
+ "Color": "Crimson",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "9/12/2014",
+ "Amount": "5619.25"
+ },
+ {
+ "Customer Name": "Nickolaus Gidman",
+ "Model": "XK",
+ "Color": "Orange",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "05/12/2016",
+ "Amount": "5091.43"
+ },
+ {
+ "Customer Name": "Jenine Iglesia",
+ "Model": "Accord",
+ "Color": "Orange",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "09/03/2018",
+ "Amount": "14566.08"
+ },
+ {
+ "Customer Name": "Fax Witherspoon",
+ "Model": "Range Rover Sport",
+ "Color": "Orange",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "2/22/2018",
+ "Amount": "5284.87"
+ }
+ ];
+}
diff --git a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/index.html
new file mode 100644
index 0000000000..8b6e016434
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+ Syncfusion React Spreadsheet
+
+
+
+
+
+
+
+
+
+
+
+
+ (null);
+
+ const handleOpenFromJson = React.useCallback((): void => {
+ if (!spreadsheetRef.current) return;
+ spreadsheetRef.current.openFromJson({ file: jsonData });
+ }, []);
+
+ return (
+ Syncfusion React Spreadsheet
+
+
+
+
+
+
+
+
+
+
+
+
+ (null);
+
+ const actionBegin = (args) => {
+ // If the user is pasting, force paste to values only.
+ if (args.action === "clipboard") {
+ args.args.eventArgs.type = 'Values';
+ }
+ };
+
+ return (
+
+
+ );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render((null);
+
+ const actionBegin = (args: any): void => {
+ // If the user is pasting, force paste to values only.
+ if (args.action === "clipboard") {
+ args.args.eventArgs.type = 'Values';
+ }
+ };
+
+ return (
+
+
+ );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(> {
+ return [
+ {
+ "Customer Name": "Romona Heaslip",
+ "Model": "Taurus",
+ "Color": "Aquamarine",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "07/11/2015",
+ "Amount": "8529.22"
+ },
+ {
+ "Customer Name": "Clare Batterton",
+ "Model": "Sparrow",
+ "Color": "Pink",
+ "Payment Mode": "Cash On Delivery",
+ "Delivery Date": "7/13/2016",
+ "Amount": "17866.19"
+ },
+ {
+ "Customer Name": "Eamon Traise",
+ "Model": "Grand Cherokee",
+ "Color": "Blue",
+ "Payment Mode": "Net Banking",
+ "Delivery Date": "09/04/2015",
+ "Amount": "13853.09"
+ },
+ {
+ "Customer Name": "Julius Gorner",
+ "Model": "GTO",
+ "Color": "Aquamarine",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "12/15/2017",
+ "Amount": "2338.74"
+ },
+ {
+ "Customer Name": "Jenna Schoolfield",
+ "Model": "LX",
+ "Color": "Yellow",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "10/08/2014",
+ "Amount": "9578.45"
+ },
+ {
+ "Customer Name": "Marylynne Harring",
+ "Model": "Catera",
+ "Color": "Green",
+ "Payment Mode": "Cash On Delivery",
+ "Delivery Date": "7/01/2017",
+ "Amount": "19141.62"
+ },
+ {
+ "Customer Name": "Vilhelmina Leipelt",
+ "Model": "7 Series",
+ "Color": "Goldenrod",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "12/20/2015",
+ "Amount": "6543.30"
+ },
+ {
+ "Customer Name": "Barby Heisler",
+ "Model": "Corvette",
+ "Color": "Red",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "11/24/2014",
+ "Amount": "13035.06"
+ },
+ {
+ "Customer Name": "Karyn Boik",
+ "Model": "Regal",
+ "Color": "Indigo",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "05/12/2014",
+ "Amount": "18488.80"
+ },
+ {
+ "Customer Name": "Jeanette Pamplin",
+ "Model": "S4",
+ "Color": "Fuscia",
+ "Payment Mode": "Net Banking",
+ "Delivery Date": "12/30/2014",
+ "Amount": "12317.04"
+ },
+ {
+ "Customer Name": "Cristi Espinos",
+ "Model": "TL",
+ "Color": "Aquamarine",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "12/18/2013",
+ "Amount": "6230.13"
+ },
+ {
+ "Customer Name": "Issy Humm",
+ "Model": "Club Wagon",
+ "Color": "Pink",
+ "Payment Mode": "Cash On Delivery",
+ "Delivery Date": "02/02/2015",
+ "Amount": "9709.49"
+ },
+ {
+ "Customer Name": "Tuesday Fautly",
+ "Model": "V8 Vantage",
+ "Color": "Crimson",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "11/19/2014",
+ "Amount": "9766.10"
+ },
+ {
+ "Customer Name": "Rosemaria Thomann",
+ "Model": "Caravan",
+ "Color": "Violet",
+ "Payment Mode": "Net Banking",
+ "Delivery Date": "02/08/2014",
+ "Amount": "7685.49"
+ },
+ {
+ "Customer Name": "Lyell Fuentez",
+ "Model": "Bravada",
+ "Color": "Violet",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "08/05/2016",
+ "Amount": "18012.45"
+ },
+ {
+ "Customer Name": "Raynell Layne",
+ "Model": "Colorado",
+ "Color": "Pink",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "05/30/2016",
+ "Amount": "2785.49"
+ },
+ {
+ "Customer Name": "Raye Whines",
+ "Model": "4Runner",
+ "Color": "Red",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "12/10/2016",
+ "Amount": "9967.74"
+ },
+ {
+ "Customer Name": "Virgina Aharoni",
+ "Model": "TSX",
+ "Color": "Pink",
+ "Payment Mode": "Cash On Delivery",
+ "Delivery Date": "10/23/2014",
+ "Amount": "5584.33"
+ },
+ {
+ "Customer Name": "Peta Cheshir",
+ "Model": "Pathfinder",
+ "Color": "Red",
+ "Payment Mode": "Net Banking",
+ "Delivery Date": "12/24/2015",
+ "Amount": "5286.53"
+ },
+ {
+ "Customer Name": "Jule Urion",
+ "Model": "Charger",
+ "Color": "Violet",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "11/20/2013",
+ "Amount": "13511.91"
+ },
+ {
+ "Customer Name": "Lew Gilyatt",
+ "Model": "Bonneville",
+ "Color": "Crimson",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "11/19/2013",
+ "Amount": "6498.19"
+ },
+ {
+ "Customer Name": "Jobey Fortun",
+ "Model": "B-Series",
+ "Color": "Blue",
+ "Payment Mode": "Net Banking",
+ "Delivery Date": "10/30/2014",
+ "Amount": "10359.67"
+ },
+ {
+ "Customer Name": "Blondie Crump",
+ "Model": "Voyager",
+ "Color": "Turquoise",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "04/06/2018",
+ "Amount": "8118.39"
+ },
+ {
+ "Customer Name": "Florentia Binns",
+ "Model": "Grand Prix",
+ "Color": "Orange",
+ "Payment Mode": "Cash On Delivery",
+ "Delivery Date": "10/13/2016",
+ "Amount": "10204.37"
+ },
+ {
+ "Customer Name": "Jaquelin Galtone",
+ "Model": "Sunbird",
+ "Color": "Red",
+ "Payment Mode": "Net Banking",
+ "Delivery Date": "10/22/2013",
+ "Amount": "6528.06"
+ },
+ {
+ "Customer Name": "Hakeem Easseby",
+ "Model": "Mirage",
+ "Color": "Crimson",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "9/12/2014",
+ "Amount": "5619.25"
+ },
+ {
+ "Customer Name": "Nickolaus Gidman",
+ "Model": "XK",
+ "Color": "Orange",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "05/12/2016",
+ "Amount": "5091.43"
+ },
+ {
+ "Customer Name": "Jenine Iglesia",
+ "Model": "Accord",
+ "Color": "Orange",
+ "Payment Mode": "Debit Card",
+ "Delivery Date": "09/03/2018",
+ "Amount": "14566.08"
+ },
+ {
+ "Customer Name": "Fax Witherspoon",
+ "Model": "Range Rover Sport",
+ "Color": "Orange",
+ "Payment Mode": "Credit Card",
+ "Delivery Date": "2/22/2018",
+ "Amount": "5284.87"
+ }
+ ];
+}
diff --git a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/index.html
new file mode 100644
index 0000000000..8b6e016434
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+ Syncfusion React Spreadsheet
+
+
+
+
+
+
+
+
+
+
+
+
+ (null);
+
+ const [savedJson, setSavedJson] = React.useState(null);
+
+ const handleSaveAsJson = React.useCallback(async () => {
+ if (!spreadsheetRef.current) return;
+ const result: any = await spreadsheetRef.current.saveAsJson();
+ const content: string = JSON.stringify(result, null, 2);
+ setSavedJson(content);
+ }, []);
+
+ return (
+ Syncfusion React Spreadsheet
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-{% 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 %}
-
-## Printing the form fields
-
-Selecting the Print icon on the toolbar prints the PDF with the added form fields. This action does not modify the original document. See the following GIF for reference.
-
-
-
-You can invoke the print action using 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 %}
-
-## Open the existing PDF document
-
-Open a PDF that already contains form fields by clicking the Open icon on the toolbar. See the following GIF for reference.
-
-
-
-## Validate form fields
-
-Form fields are validated when enableFormFieldsValidation is set to true and the validateFormFields event is handled. The event triggers during download or print if required fields are not filled. The non-filled fields are available in the nonFillableFields property of the event arguments.
-
-Add the following code to validate form fields:
-
-{% 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 %}
-
-## Export and import form fields
-
-The PDF Viewer component supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods in the following formats:
-
-- FDF
-- XFDF
-- JSON
-- XML
-
-### Export and import as FDF
-
-Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters:
-
-* The first one must be the destination path for the exported data. If the path is not specified, it will ask for the location while exporting.
-* The second parameter should be the format type of the form data.
-
-The following example exports and imports form field data as FDF.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-### Export and import as XFDF
-
-The following example exports and imports form field data as XFDF.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-### Export and import as JSON
-
-The following example exports and imports form field data as JSON.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-### Export and import as Object
-
-The PDF Viewer component supports exporting the form field data as an object and importing that data back into the current PDF document.
-
-The following code shows how to export the form field data as an object and import the form field data from that object into the current PDF document via a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-### Export and import as XML
-
-The following example exports and imports form field data as XML.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Form field properties
-
-Form field properties in Syncfusion® PDF Viewer allow you to customize and interact with form fields embedded within PDF documents. This documentation provides an overview of the form field properties supported by the Syncfusion® PDF Viewer and explains how to use them effectively.
-
- * Textbox
- * Password
- * CheckBox
- * RadioButton
- * ListBox
- * DropDown
- * SignatureField
- * InitialField
-
-### Signature and initial fields settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the signature field properties on 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 %}
-
-The following code example explains how to update the properties of the signature field added to the document from the form designer toolbar.
-
-```ts
- // Properties to customize the signature field settings
- viewer.signatureFieldSettings = {
- // Set the name of the form field element.
- name: 'Signatute',
- // Specify whether the signature field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the signature field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Signatute',
- // Set the thickness of the signature field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specify the properties of the signature Dialog Settings in the signature field.
- signatureDialogSettings: {
- isplayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text,
- hideSaveSignature: false,
- },
- // Specify the properties of the signature indicator in the signature field.
- signatureIndicatorSettings: {
- opacity: 1,
- backgroundColor: '#237ba2',
- height: 50,
- fontSize: 15,
- text: 'Signature Field',
- color: 'white'
- },
- };
-
-```
-
-
-
-The following code example explains how to update the properties of the initial field added to the document from the form designer toolbar.
-
-```ts
- // Properties to customize the initial field settings
- viewer.initialFieldSettings = {
- // Set the name of the form field element.
- name: 'Initial',
- // Specify whether the initial field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the initial field.
- isPrint: true,
- // Set the text to be displayed as tooltip.
- tooltip: 'Initial',
- // Set the thickness of the initial field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specify the properties of the initial indicator in the initial field.
- initialIndicatorSettings: {
- opacity: 1,
- backgroundColor: '#237ba2',
- height: 50,
- fontSize: 15,
- text: 'Initial Field',
- color: 'white'
- },
- // Specify the properties of the initial Dialog Settings in the intial field.
- initialDialogSettings: {
- displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text,
- hideSaveSignature: false
- }
- };
-
-```
-
-
-
-### Textbox field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the Textbox field properties on a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code example explains how to update the properties of the textbox field added to the document from the form designer toolbar.
-
-{% 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 %}
-
-
-
-### Password field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the Password field properties on 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 %}
-
-
-The following code example explains how to update the properties of the password field added to the do
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-with-user-interface-interaction.md b/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-with-user-interface-interaction.md
deleted file mode 100644
index 0dfde8a19f..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-with-user-interface-interaction.md
+++ /dev/null
@@ -1,366 +0,0 @@
----
-layout: post
-title: Design form fields in the Vue PDF Viewer component | Syncfusion
-description: Learn how to add, drag, resize, edit, and manage form fields using the UI in the Syncfusion Vue PDF Viewer component.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Create form fields with UI interaction in Vue PDF Viewer control
-
-The PDF Viewer component supports interactive form field design, including drawing, dragging, and resizing fields directly on the page. Click the Form Field icon on the toolbar to add a field and place it on the document. Supported form field types include:
-
-- Textbox
-- Password
-- CheckBox
-- RadioButton
-- ListBox
-- DropDown
-- Signature field
-- Initial field
-
-## Enable or Disable form designer toolbar
-
-Inject the FormDesigner module and set enableFormDesignerToolbar to true to display the Form Designer icon on the toolbar. The default value is true. Use the following code to enable the toolbar option.
-
-{% 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 the form field dynamically
-
-Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference.
-
-
-
-## Drag the form field
-
-Drag the selected form field to reposition it within the PDF document. See the following GIF for reference.
-
-
-
-## Resize the form field
-
-Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference.
-
-
-
-## Edit or Update the form field dynamically
-
-Edit form field properties using the Form Field Properties dialog. Open it by right-clicking a form field and selecting Properties from the context menu. The following images show examples of available settings.
-
-
-
-
-
-
-
-## Clipboard operation with form field
-
-The PDF Viewer supports clipboard operations such as cut, copy, and paste for form fields. Right-click a form field to open the context menu and choose the desired clipboard action. The following image shows the available options.
-
-
-
-## Undo and Redo
-
-Undo and redo actions are supported for runtime changes made to form fields. Use the following code to perform undo and redo operations.
-
-{% 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/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/vue/form-designer/form-field-events.md
deleted file mode 100644
index 4c6feff296..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/form-designer/form-field-events.md
+++ /dev/null
@@ -1,1199 +0,0 @@
----
-layout: post
-title: Form Field Events in Vue PDF Viewer control | Syncfusion
-description: Learn here all about different form field in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more.
-control: Form Field Events
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# PDF Viewer Form Field events in Vue PDF Viewer control
-
-The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are:
-
-| Form Field events | Description |
-|---|---|
-| formFieldAdd | Event trigger when a form field is added.|
-| formFieldClick | Events trigger when the form field is selected.|
-| formFieldDoubleClick | Events trigger when the form field is double-clicked.|
-| formFieldFocusOut | Events trigger when focus out from the form fields.|
-| formFieldMouseLeave | Events trigger when the mouse cursor leaves the form field.|
-| formFieldMouseOver | Events trigger when the mouse cursor is over a form field.|
-| formFieldMove | Events trigger when a form field is moved.|
-| formFieldPropertiesChange | Events trigger when a property of form field is changed.|
-| formFieldRemove | Events trigger when a form field is removed.|
-| formFieldResize | Events trigger when a form field is resized.|
-| formFieldSelect | Events trigger when a form field is selected.|
-| formFieldUnselect | Events trigger when a form field is unselected.|
-| validateFormFields | Events trigger when validation is failed.|
-
-## formFieldAdd event
-
-The [formFieldAdd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formfieldaddargs/) event is triggered when a new form field is added, either programmatically or through user interaction. The event arguments provide the necessary information about the form field addition.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldClick event
-
-The [formFieldClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldClickArgs/) event is triggered when a form field is clicked. The event arguments provide the necessary information about the form field click event.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldDoubleClick event
-
-The [formFieldDoubleClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldDoubleClickArgs/) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldFocusOut event
-
-The [formFieldFocusOut](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formfieldfocusouteventargs/) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMouseLeave event
-
-The [formFieldMouseLeave](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formfieldmouseleaveargs/) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMouseOver event
-
-The [formFieldMouseOver](https://helpej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldMouseoverArgs/) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMove event
-
-The [formFieldMove](https://helpej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldMoveArgs/) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldPropertiesChange event
-
-The [formFieldPropertiesChange](https://helpej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldPropertiesChangeArgs/) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldRemove event
-
-The [formFieldRemove](https://helpej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldRemoveArgs/) event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldResize event
-
-The [formFieldResize](https://helpej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldResizeArgs/) events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldSelect event
-
-The [formFieldSelect](https://helpej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldSelectArgs/) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldUnselect event
-
-The [formFieldUnselect](https://helpej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldUnselectArgs/) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## validateFormFields event
-
-The [validateFormFields](https://helpej2.syncfusion.com/vue/documentation/api/pdfviewer/validateFormFieldsArgs/) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/form-filling.md b/Document-Processing/PDF/PDF-Viewer/vue/form-filling.md
deleted file mode 100644
index d512ccd2ca..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/form-filling.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-layout: post
-title: Form filling in Vue PDF Viewer | Syncfusion
-description: Learn how to view, fill, export, and import PDF form fields using the Syncfusion Vue PDF Viewer, including disabling interaction and working with signatures.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Form filling in Vue PDF Viewer
-
-The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data.
-
-The PDF Viewer supports the following form field types:
-
-* Text box
-* Password
-* Check box
-* Radio button
-* List box
-* Dropdown
-* Signature field
-* Initial field
-
-
-
-## Disabling form fields
-
-The PDF Viewer provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add a handwritten signature to a signature field
-
-Add a handwritten signature to a signature field by following these steps:
-
-* Click the signature field in the PDF document to open the signature panel.
-
-
-
-* Draw the signature in the signature panel.
-
-
-
-* Select **CREATE**. The drawn signature is added to the signature field.
-
-
-
-## Delete a signature from a signature field
-
-Delete a signature placed in a signature field by using the Delete option in the annotation toolbar.
-
-
-
-## Export and import form fields
-
-The PDF Viewer supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. The following formats are supported:
-
-* FDF
-* XFDF
-* JSON
-
-For more information, see the [Form fields documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/form-designer/create-programmatically#export-and-import-form-fields).
-
-## See also
-
-* [Handwritten signature in Vue PDF Viewer](./annotations/signature-annotation)
-* [Form Designer events](./form-designer/form-field-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/custom-data.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/custom-data.md
new file mode 100644
index 0000000000..7e5a834fd3
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/custom-data.md
@@ -0,0 +1,270 @@
+---
+layout: post
+title: Add custom data to form fields in Vue PDF Viewer | Syncfusion
+description: Learn how to attach, update, and read custom data on PDF form fields using the Form Designer UI and APIs in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Add Custom Data to PDF Form Fields in Vue PDF Viewer
+
+The **Syncfusion Vue PDF Viewer** allows you to attach **custom application-specific data** to form fields by using the `customData` property. This enables you to associate business identifiers, tags, validation hints, or workflow metadata with form fields.
+
+The custom data remains linked to the form field throughout the viewer session and can be accessed or updated whenever the field is queried or modified.
+
+This page explains how to:
+- [Add custom data when creating form fields](#add-custom-data-while-creating-pdf-form-fields)
+- [Define default custom data for fields created using the UI](#set-default-custom-data-for-pdf-form-fields-added-using-ui)
+- [Update or replace custom data for existing fields](#update-or-replace-pdf-form-field-custom-data)
+- [Read custom data from form fields](#read-custom-data-from-pdf-form-fields)
+- [Apply best practices when using custom data](#best-practices)
+
+**Key Points**
+- customData is a **free form object**; you control its structure.
+- Use only **serializable values** such as objects, arrays, strings, numbers, and booleans.
+- Custom data does not affect the field appearance or behavior unless consumed by your application logic.
+
+## Add Custom Data While Creating PDF Form Fields
+
+You can attach custom data at the time of field creation by passing a `customData` object in the settings parameter of `addFormField()`.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set Default Custom Data for PDF Form Fields Added Using UI
+
+When users add form fields using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar), you can define default `customData` so that newly created fields automatically inherit it. Default custom data can be configured using per-field settings objects such as:
+
+- [textFieldSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#textfieldsettings)
+- [passwordFieldSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#passwordfieldsettings)
+- [checkBoxFieldSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#checkboxfieldsettings)
+- [radioButtonFieldSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#radiobuttonfieldsettings)
+- [listBoxFieldSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#listboxfieldsettings)
+- [dropDownFieldSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#dropdownfieldsettings)
+- [signatureFieldSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#signaturefieldsettings)
+- [initialFieldSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#initialfieldsettings)
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Update or Replace PDF Form Field Custom Data
+
+You can modify the `customData` of an existing form field by using the [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) method. The field can be identified using either its object reference or field ID.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**Tip:**
+Merge new values with the existing customData object before calling [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data.
+
+## Read Custom Data from PDF Form Fields
+
+You can access the customData property from any form field at any point in your application flow, such as:
+- After the document is loaded
+- During save or submit operations
+- While performing validation or conditional routing
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Best Practices
+
+- Treat customData as application metadata, not display data.
+- Use it to drive business rules, validation logic, and workflow decisions.
+- Keep the data minimal and structured for easy processing.
+- When cloning or copying form fields, ensure customData is copied or updated as required.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples)
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form flags](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-constrain.md
new file mode 100644
index 0000000000..396a74c8d8
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-constrain.md
@@ -0,0 +1,430 @@
+---
+layout: post
+title: PDF form field flags in the Vue PDF Viewer | Syncfusion
+description: Learn how to apply isReadOnly, isRequired, and isPrint flags to PDF form fields in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# PDF form field flags in Vue PDF Viewer
+
+The Syncfusion **Vue PDF Viewer** allows you to control how users interact with form fields and how those fields behave during validation and printing by applying **form field flags**. These flags define whether a form field can be modified, whether it is mandatory, and whether it appears in printed output.
+
+This topic explains:
+- [Supported form field flags](#supported-pdf-form-field-flags)
+- [How each constraint affects field behavior](#key-actions)
+- [How to apply flags during field creation](#apply-pdf-form-field-flags-using-the-ui)
+- [How to update flags on existing fields](#update-flags-on-existing-fields-programmatically)
+- [How flags work with validation and printing](#control-print-behavior)
+
+## Supported PDF Form Field Flags
+
+The following flags are supported in the PDF Viewer:
+
+- [isReadOnly](#make-fields-read-only)
+ Prevents users from modifying the form field in the UI while still allowing updates through APIs.
+
+- [isRequired](#mark-fields-as-required)
+ Marks the form field as mandatory and includes it in form field validation.
+
+- [isPrint](#control-print-behavior)
+ Controls whether the form field appears when the document is printed.
+
+## Key Actions
+
+### Make Fields Read Only
+Use the **isReadOnly** property to prevent users from modifying a form field through the UI. This is useful for displaying pre filled or calculated values that should not be changed by the user.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Mark Fields as Required
+Use the **isRequired** property to mark form fields as mandatory. To enforce this constraint, enable form field validation and validate fields before allowing actions such as printing or downloading.
+
+- Enable validation using [enableFormFieldsValidation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformfieldsvalidation)
+- [Validate fields](./form-validation) using [validateFormFields()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields)
+
+If required fields are empty, validation can prevent further actions.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Control Print Behavior
+Use the **isPrint** property to control whether a form field appears in the printed output of the PDF document.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Printing can be triggered programmatically using `pdfviewer.print()`. Form fields with `isPrint: false` are excluded from the printed output.
+
+## Apply PDF Form Field Flags Using the UI
+
+**Steps**
+1. Enable **Form Designer** mode in the PDF Viewer.
+2. Select an existing form field on the PDF page.
+3. Right-click the field and choose **Properties** from the context menu.
+4. Configure the required constraint options.
+5. Click OK to apply the changes and close the properties popover.
+
+Changes are reflected immediately in the viewer.
+
+
+
+## Apply PDF Form Field Flags Programmatically
+
+You can apply or modify form field flags in the following ways.
+
+### Apply flags When Creating Fields
+Pass the flags properties in the settings object when creating form fields using **addFormField()**.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Update flags on Existing Fields programmatically
+Use the [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) method to modify constraint values on existing form fields.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Set Default Flags for New PDF Form Fields
+You can configure default flag values so that form fields added using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar) automatically inherit them. This helps ensure consistent behavior for all newly created fields.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to PDF form fields](./custom-data)
+- [Form Validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md
new file mode 100644
index 0000000000..81a4a5184f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md
@@ -0,0 +1,270 @@
+---
+layout: post
+title: Form Designer and Toolbar Customization in Vue | Syncfusion
+description: Learn here all about form designer and toolbar in the Syncfusion Vue PDF Viewer and how to customize the form designer UI and toolbar.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Designer in Vue PDF Viewer
+
+When **Form Designer mode** is enabled in the Syncfusion [Vue PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/form-designer.html) is displayed. This UI includes a built-in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields.
+
+Using the Form Designer UI, users can place form fields on the PDF, move and resize them, configure field and widget properties, preview the designed form, and remove fields when required. The Form Designer toolbar can also be shown or hidden and customized to control the available tools based on application requirements, enabling flexible and interactive form design directly within the viewer.
+
+## Key Features
+
+**Add Form Fields**
+You can add the following form fields to the PDF:
+
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
+
+**Edit Form Fields**
+You can move, resize, align, distribute, copy, paste, and undo or redo changes to form fields.
+
+**Set Field Properties**
+You can configure field properties such as name, value, font, color, border, alignment, visibility, tab order, and required or read only state.
+
+**Control Field Behavior**
+You can enable or disable read only mode, show or hide fields, and control whether fields appear when printing the document.
+
+**Manage Form Fields**
+You can select, group or ungroup, reorder, and delete form fields as needed.
+
+**Save and Print Forms**
+Designed form fields can be saved into the PDF document and printed with their appearances.
+
+## Enable Form Designer
+
+To enable form design features, inject the [FormDesigner](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the `enableFormDesigner` property or API to enable or disable the Form Designer option in the main toolbar (set to `true` to enable). The standalone examples below show `enableFormDesigner` set to `false`; change this to `true` to enable form design in those samples.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Form Designer UI
+
+When [Form Designer mode](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [Vue PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/form-designer.html) is displayed. This UI provides a built-in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer.
+
+
+
+{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
+
+For more information about creating and editing form fields in the PDF Viewer, refer to [Create form fields](./manage-form-fields/create-form-fields).
+
+## Form Designer Toolbar
+
+The **Form Designer toolbar** appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as:
+
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
+
+Each toolbar item allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document.
+
+
+
+Use the above code snippet to show or hide the Form Designer by injecting the Form Designer module. (see the Composition API sample).
+
+For more information about creating and editing form fields in the PDF Viewer, refer to [Create form fields](./manage-form-fields/create-form-fields).
+
+## Show or Hide the Built-in Form Designer Toolbar
+
+You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) property. This allows the application to display or hide the Form Designer tools in the PDF Viewer based on user or workflow requirements.
+
+**Use this property to:**
+- Show the Form Designer toolbar when form design is required
+- Hide the toolbar to provide a cleaner viewing experience
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize the Built-in Form Designer Toolbar
+
+You can customize the Form Designer toolbar by specifying the tools to display and arranging them in the required order using the [FormDesignerToolbarItems](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesignertoolbaritem) property.
+
+This customization helps you limit the available tools and simplify the user interface.
+
+**Key Points**
+- Include only the toolbar items you need, in the exact order you specify.
+- Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Move, Resize, and Edit Form Fields
+
+You can move, resize, and edit an existing form field directly in the PDF Viewer using the Form Designer.
+
+- Move a field by selecting it and dragging it to the required position.
+
+- Resize a field using the handles displayed on the field boundary.
+
+
+
+- Edit a field by selecting it to open the Form Field Properties popover. The popover allows modification of the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed.
+For more information, see Editing Form Fields.
+
+## Deleting Form Fields
+
+You can remove a form field from the PDF document by selecting the field and using one of the following methods:
+- Click the `Delete option` in the Form Designer UI.
+- Press the `Delete key` on the keyboard after selecting the form field.
+
+The selected form field and its associated widget annotation are permanently removed from the page.
+For more information, see [Deleting Form Fields](./manage-form-fields/remove-form-fields)
+
+## See Also
+
+- [Filling PDF Forms](./form-filling)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/style-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields
+- [Grouping form fields](./group-form-fields)
+- [Form Constraints](./form-constrain)
+- [Form Validation](./form-validation)
+- [Custom Data](./custom-data)
+- [Import](./import-export-form-fields/import-form-fields)/[Export Form Data](./import-export-form-fields/export-form-fields)
+- [Form field events](./form-field-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-field-events.md
new file mode 100644
index 0000000000..713915881b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-field-events.md
@@ -0,0 +1,143 @@
+---
+layout: post
+title: Form Field Events in Vue PDF Viewer | Syncfusion
+description: Learn here all about form field events in the Syncfusion Vue PDF Viewer component and how to handle them.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# PDF Viewer Form Field Events in Vue
+
+The Syncfusion **Vue PDF Viewer** provides a comprehensive set of **form field events** that allow developers to track user interactions, respond to form changes, and implement custom business logic. These events can be used for scenarios such as [validation](./form-validation), **UI updates**, **logging**, and **workflow automation**.
+
+Form field events are triggered during actions such as adding, selecting, modifying, moving, resizing, and removing form fields.
+
+## Supported PDF Form Field Events
+
+The following table lists all supported form field events and their descriptions:
+
+| Form Field events | Description |
+|---|---|
+| [formFieldAdd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldAddArgs) | Triggered when a new form field is added, either through the Form Designer UI or programmatically. |
+| [formFieldClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldClickArgs) | Fired when a form field is clicked in the viewer. |
+| [formFieldDoubleClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldDoubleClickArgs) | Fired when a form field is double clicked. |
+| [formFieldFocusOut](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldFocusOutEventArgs) | Triggered when a form field loses focus after editing. |
+| [formFieldMouseLeave](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldMouseLeaveArgs) | Fired when the mouse pointer leaves a form field. |
+| [formFieldMouseOver](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldMouseoverArgs) | Fired when the mouse pointer moves over a form field. |
+| [formFieldMove](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldMoveArgs) | Triggered when a form field is moved to a new position. |
+| [formFieldPropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldPropertiesChangeArgs) | Fired when any form field property changes, such as font, color, or constraint values. |
+| [formFieldRemove](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldRemoveArgs) | Triggered when a form field is deleted from the document. |
+| [formFieldResize](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldResizeArgs) | Fired when a form field is resized. |
+| [formFieldSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldSelectArgs) | Fired when a form field is selected in the Form Designer. |
+| [formFieldUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formFieldUnselectArgs) | Fired when a previously selected form field is unselected. |
+| [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/validateFormFieldsArgs) | Fired when form field validation fails during print or download actions. |
+
+**Common Use Cases**
+
+Form field events can be used to:
+- Validate form data before printing or downloading
+- Track user interaction with form fields
+- Update UI elements dynamically
+- Log form changes for auditing
+- Trigger workflow actions based on field changes
+- Enforce business rules during form editing
+
+## Handle PDF Form Field Events
+
+Form field events can be wired on the PDF Viewer instance to execute custom logic when specific actions occur. The following Vue Composition API example demonstrates wiring up the events and handling validation.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**Event Behavior Notes**
+
+- Events triggered through the UI and programmatic APIs use the same event handlers.
+- Property related events are raised immediately when changes occur.
+- Validation events are triggered only during print or download operations.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Edit form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Field Flags](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-fields-api.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-fields-api.md
new file mode 100644
index 0000000000..6e65bd94ea
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-fields-api.md
@@ -0,0 +1,823 @@
+---
+layout: post
+title: Form Fields API in Vue PDF Viewer | Syncfusion
+description: Learn How to use Form Fields API to enable, update, retrieve and clear in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Fields API in Vue PDF Viewer
+
+The Vue PDF Viewer provides APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available:
+
+| API | Description |
+|---|---|
+| [updateFormFieldsValue](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfieldsvalue) | Updates the value for one or more form fields.|
+| [updateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) | Updates the properties of one or more form fields.|
+| [retrieveFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#retrieveformfields) | Retrieves all form fields or by specific criteria.|
+| [resetFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#resetformfields) | Resets the specified or all form fields to their default values.|
+| [importFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#importformfields) | Imports values and states for form fields from a JSON object or file stream.|
+| [focusFormField](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#focusformfield) | Sets focus to a form field by name or ID.|
+| [exportFormFieldsAsObject](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#exportformfieldsasobject) | Exports form fields as a JSON object.|
+| [exportFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#exportformfields) | Exports form fields as a downloadable file.|
+| [clearFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#clearformfields) | Clears values of specified or all form fields without removing them.|
+| [isFormFieldDocument](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#isformfielddocument) | Indicates whether the loaded document contains form fields.|
+| [isFormDesignerToolbarVisible](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) | Gets whether the Form Designer toolbar is currently visible.|
+| [formFieldCollections](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#formfieldcollections) | Gets the collection of current form fields with their properties.|
+| [enableFormFieldsValidation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) | Enables or disables form field validation.|
+| [enableFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformfields) | Enables or disables interaction with form fields.|
+| [enableFormDesignerToolbar](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformdesignertoolbar) | Shows or hides the Form Designer toolbar.|
+
+## updateFormFieldsValue
+
+Updates the value of one or more form fields programmatically.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## updateFormFields
+
+Updates form field properties such as bounds, color, font, isReadOnly, required, and more.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## retrieveFormFields
+
+Retrieves all form fields and their properties or filters by type/name.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## resetFormFields
+
+Resets specified form fields or all fields to their default values.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## importFormFields
+
+Imports form field data from an object or file into the current document.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## focusFormField
+
+Moves focus to a form field by name or ID.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## exportFormFieldsAsObject
+
+Exports current form field values and states as a JSON object.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## exportFormFields
+
+Exports form field data to a file for download.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## clearFormFields
+
+Clears values of specified or all fields without removing the fields themselves.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## isFormFieldDocument
+
+Returns true if the loaded document contains one or more form fields.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## isFormDesignerToolbarVisible
+
+Opens the Form Designer toolbar and returns its visibility status.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## formFieldCollections
+
+Gets the current collection of form fields with their properties from the viewer instance.
+
+```html
+
+```
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormFieldsValidation
+
+Enables or disables built-in validation for required and constrained fields.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+ provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+ data() {
+ return {
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+ };
+ },
+ methods: {
+ onDocumentLoad() {
+ const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+ pdfviewer.enableFormFieldsValidation = true;
+ },
+ },
+};
+
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormFields
+
+Enables or disables user interaction with form fields globally.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormDesignerToolbar
+
+Shows or hides the Form Designer toolbar at runtime.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Edit form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form fields Validation](./form-validation)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md
new file mode 100644
index 0000000000..fa5f5d0d88
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md
@@ -0,0 +1,247 @@
+---
+layout: post
+title: Form filling in Vue PDF Viewer Control | Syncfusion
+description: Learn to view, fill, export, and import PDF form fields in Syncfusion Vue PDF Viewer, including disabling interaction and handling signatures.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Filling PDF Forms in Vue PDF Viewer
+
+The Syncfusion PDF Viewer supports three form-filling approaches:
+
+1. [Filling Form Fields Programmatically](#fill-pdf-forms-programmatically)
+
+ Form fields can be filled or updated programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This approach is useful when form data must be set dynamically by application logic.
+
+2. [Form Filling Through User Interface](#fill-pdf-forms-through-the-user-interface)
+
+ End users can fill PDF form fields directly through the PDF Viewer interface by typing text, selecting options, or interacting with supported form elements.
+
+3. [Importing Form Field Data](#fill-pdf-forms-through-import-data)
+
+ The PDF Viewer can import form field data into an existing PDF document to prefill fields from external data sources.
+
+## Fill PDF forms programmatically
+
+Form field values can be updated programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This method allows applications to set or modify form field values dynamically without end-user interaction.
+
+The following example demonstrates how to update PDF form field values programmatically:
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Fill PDF forms through the User Interface
+
+The PDF Viewer enables end users to complete form fields directly in the interface without code. Fields accept input appropriate to their type.
+
+
+
+The PDF Viewer supports common form fields such as text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Entered values remain editable during the viewing session.
+
+{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
+
+## Fill PDF forms through Import Data
+
+The PDF Viewer can import form field data into an existing PDF document using the [importFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#importformfields) API. This enables prefilling fields from external data sources without manual entry.
+
+Imported data is mapped to PDF form fields by field name. The imported values appear in the viewer and remain editable if the document permits modification. Refer to Import Form Data for details about expected data formats and mapping rules.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+For more details, see [Import Form Data](./import-export-form-fields/import-form-fields).
+
+## How to get the filled data and store it to a backing system
+
+Filled form field data can be exported from the PDF Viewer and stored in a backing system such as a database or file storage. Exported data can be re-imported later to restore form state. See Export Form Data for supported export formats and recommended persistence patterns.
+
+For more details, see [Export Form Data](./import-export-form-fields/export-form-fields).
+
+## How to Validate Form Fields using `validateFormFields` Event
+
+The [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) event fires when a download or submit action is attempted while validation is enabled. The [retrieveFormFields()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#retrieveformfields) API returns all form fields so the application can validate values before proceeding.
+
+Validation applies to all field types: a textbox is considered empty if it contains no text; a list box or dropdown is empty when no item is selected; a signature or initial field is empty if no signature exists; and radio buttons or checkboxes are empty when none are chosen.
+
+Enable [enableFormFieldsValidation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) and handle the event to cancel submit/download actions when required fields are missing.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/customize-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields
+- [Edit form fields](./manage-form-fields/edit-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-validation.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-validation.md
new file mode 100644
index 0000000000..efaa25c009
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-validation.md
@@ -0,0 +1,168 @@
+---
+layout: post
+title: Form validation in the Vue PDF Viewer component | Syncfusion
+description: Learn how to enable built-in form field validation and validate missing required fields in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Validate PDF Form Fields in Vue PDF Viewer
+
+The Syncfusion **Vue PDF Viewer** provides built-in support for **validating form fields** before end users perform actions such as **printing**, **downloading**, or **submitting** a PDF document. Validation ensures that all required form fields are completed before allowing these actions to proceed.
+
+## How PDF Form Validation Works
+
+Form field validation follows this flow:
+ - Enable validation using the [enableFormFieldsValidation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) property.
+ - Handle the [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) event to determine which required fields are not filled.
+ - When validation is enabled and an end user attempts to print, download, or submit the document:
+ - The [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) event is triggered.
+ - Unfilled required fields are listed in `args.nonFillableFields`.
+ - The application can cancel the action, display an error message, or move focus to an invalid field.
+
+## Enable PDF Form Field Validation
+
+Enable validation by setting the [enableFormFieldsValidation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) property to `true` and handling the `validateFormFields` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Mark Fields as Required
+
+Only fields marked as **required** participate in validation. Use the `isRequired` property when creating or updating a form field.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+// (inside your `onDocumentLoad` method)
+const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Email is required',
+});
+{% endhighlight %}
+{% endtabs %}
+
+## Handle PDF Form Validation Results
+
+In the [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) event, the application can control the behavior when fields are missing. Typical actions include:
+- Cancel the print or download operation
+- Display an error message to the end user
+- Set focus to the first unfilled required field
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+// (inside your `onDocumentLoad` or mounted handler)
+const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+pdfviewer.enableFormFieldsValidation = true;
+pdfviewer.validateFormFields = (args) => {
+ if (args && args.formField && args.formField.length > 0) {
+ // Example: prevent the pending action and notify the end user
+ args.cancel = true;
+ alert('Please fill all required fields. Missing: ' + args.formField[0].name);
+ // Optionally focus or scroll to the field
+ }
+};
+{% endhighlight %}
+{% endtabs %}
+
+## Tips
+
+- Use `isRequired` to clearly mark mandatory fields.
+- Validation is triggered only during [print](../print), [download](../download), or **submit** actions.
+- For custom validation logic (such as validating an email format):
+ - Retrieve all form fields using [retrieveFormFields()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#retrieveformfields).
+ - Apply custom checks before allowing the action to proceed.
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to PDF form fields](./custom-data)
+- [Form flags](./form-constrain)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/group-form-fields.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/group-form-fields.md
new file mode 100644
index 0000000000..689677a8d7
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/group-form-fields.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: Group form fields in the Vue PDF Viewer component | Syncfusion
+description: Learn how to group PDF form fields in the Syncfusion Vue PDF Viewer by assigning the same name to multiple widgets.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Group form fields in Vue PDF Viewer
+
+The Syncfusion **Vue PDF Viewer** allows you to **group multiple form fields into a single logical field** by assigning the **same Name** to them. Grouped form fields share their values and states automatically based on the field type. Group form fields using the **Form Designer UI** or programmatically via APIs to keep related fields synchronized across a PDF document.
+
+This page covers:
+- [How form field grouping works](#how-grouping-works)
+- [Field behavior based on type](#field-behavior-by-type)
+- [How to group form fields using the UI](#group-using-the-form-designer-ui)
+- [How to group form fields programmatically](#group-pdf-form-fields-programmatically)
+- [Related references and samples](#example-scenarios)
+
+
+## How grouping works
+
+In a PDF form, multiple PDF form fields can represent the same logical field. When PDF form fields share the same **Name**, they are treated as a group and stay synchronized.
+
+## Field behavior by type
+
+- **Textbox and Password** — Text entered in one widget appears in all widgets with the same Name.
+- **CheckBox** — Checking one widget sets the checked state for all checkboxes with the same Name.
+- **RadioButton** — Widgets with the same Name form a radio group; only one option can be selected.
+- **ListBox and DropDown** — The selected value is shared across widgets with the same Name.
+- **Signature and Initial fields** — Applied signature/initial is mirrored across grouped widgets.
+
+N> Form field grouping is controlled by the **Name** property. The position of each widget is determined only by its bounds; grouping is not affected by location.
+
+## Group using the Form Designer UI
+
+**Steps**
+1. Enable the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar).
+2. Add the form fields you want to group.
+3. Select a form field, open **Properties**, and set the **Name** value.
+4. Assign the same **Name** to all PDF form fields that belong to the group.
+5. Apply the changes and verify that updates in one widget reflect in the others.
+
+
+
+
+
+## Group PDF Form Fields Programmatically
+
+You can also group form fields during creation by assigning the same **Name** through code.
+
+### Example Scenarios
+- Two textboxes named **EmployeeId** share the same value.
+- A radio button group named **Gender** allows single selection.
+- Two checkboxes named **Subscribe** share the checked state.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/export-form-fields.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/export-form-fields.md
new file mode 100644
index 0000000000..c66f0f8b0f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/export-form-fields.md
@@ -0,0 +1,243 @@
+---
+layout: post
+title: Export form data in the Vue PDF Viewer | Syncfusion
+description: Learn how to export PDF form field data (FDF, XFDF, JSON, and as an object) using the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Export PDF Form Data from Vue PDF Viewer
+
+The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats:
+
+- [FDF](#export-as-fdf)
+- [XFDF](#export-as-xfdf)
+- [JSON](#export-as-json)
+- [JavaScript Object](#export-as-object) (for custom persistence)
+
+## Available methods
+
+- [exportFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#exportformfields)(destination?, format) — Exports data to a file in the specified format.
+- [exportFormFieldsAsObject](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#exportformfieldsasobject)(format) — Exports data as a JavaScript object for custom handling.
+- [importFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) — Import data back into the PDF.
+
+## How to export
+
+Use [exportFormFields()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#exportformfields) with an optional destination path and the format type.
+
+### Export as FDF
+The following example exports form field data as FDF.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Export as XFDF
+The following example exports form field data as XFDF.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Export as JSON
+The following example exports form field data as JSON.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Export as Object
+
+Use [exportFormFieldsAsObject()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#exportformfieldsasobject) to obtain form data as a JavaScript object for database or API integration.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Common Use Cases
+
+- Save user-entered data to your server without altering the original PDF.
+- Export as JSON for REST API integration.
+- Export as FDF/XFDF for compatibility with other PDF tools.
+- Export as Object to merge with app state or store securely.
+- Automate exports after [validation](../form-validation) using [validateFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#validateformfields)
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Import form fields](./import-form-fields)
+- [Import Export Events](./import-export-events)
+- [Create form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/import-export-events.md
new file mode 100644
index 0000000000..70f2b8eab8
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/import-export-events.md
@@ -0,0 +1,169 @@
+---
+layout: post
+title: Import/Export events in the Vue PDF Viewer | Syncfusion
+description: Learn how to handle Import/Export events for PDF form fields in the Syncfusion Vue PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# PDF Form Import and Export Events in Vue
+
+Import/Export events let you **track and customize the entire life cycle** of form data being imported into or exported from the PDF Viewer.
+Use these events to:
+- Validate inputs before processing.
+- Show progress indicators.
+- Log audit trails.
+- Block operations based on business rules.
+
+Each event provides detailed context through event arguments such as [ImportStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importstarteventargs), [ImportSuccessEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importsuccesseventargs), [ImportFailureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importfailureeventargs), [ExportStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportstarteventargs), [ExportSuccessEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportsuccesseventargs), and [ExportFailureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportfailureeventargs).
+
+## Import Events
+- [importStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#importstart) — Fires when an import begins.
+- [importSuccess](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#importsuccess) — Fires when form fields are successfully imported.
+- [importFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#importfailed) — Fires if the import fails.
+
+**Example: Handle Import Events**
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Export Events
+- [exportStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#exportstart) — Fires when an export begins.
+- [exportSuccess](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#exportsuccess) — Fires when form fields are successfully exported.
+- [exportFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#exportfailed) — Fires if the export fails.
+
+**Example: Handle Export Events**
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Key Notes
+- importStart, importSuccess, importFailed cover the full import life cycle.
+- exportStart, exportSuccess, exportFailed cover the full export life cycle.
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Import form fields](./import-form-fields)
+- [Export form fields](./export-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/import-form-fields.md
new file mode 100644
index 0000000000..12d474fe0a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/import-form-fields.md
@@ -0,0 +1,189 @@
+---
+layout: post
+title: Import form data in the Vue PDF Viewer | Syncfusion
+description: Learn how to import PDF form field data (FDF, XFDF, JSON, and from an object) using the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Import PDF Form Data into Vue PDF Viewer
+
+The **PDF Viewer** lets you import values into interactive form fields in the currently loaded PDF. You can import data from these formats:
+
+- [FDF](#import-as-fdf)
+- [XFDF](#import-xfdf)
+- [JSON](#import-json)
+
+## API to use
+- [importFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format)
+
+N> If a **server-backed viewer** is used, set `serviceUrl` before importing.
+
+### Import FDF
+
+The following Vue example imports FDF data into the currently loaded PDF.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Import XFDF
+
+The following example imports XFDF data.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Import JSON
+
+The following example imports JSON form data.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Common Use Cases
+
+- Pre-fill application forms from a database using JSON.
+- Migrate data from other PDF tools using FDF/XFDF.
+- Restore user progress saved locally or on the server.
+- Combine with validation to block print/download until required fields are completed.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Export form fields](./export-form-fields)
+- [Import Export Events](./import-export-events)
+- [Create Edit form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/create-form-fields.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/create-form-fields.md
new file mode 100644
index 0000000000..3c1cef8290
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/create-form-fields.md
@@ -0,0 +1,633 @@
+---
+layout: post
+title: Create form fields in the Vue PDF Viewer | Syncfusion
+description: Learn how to add each PDF form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Create PDF Form Fields in Vue
+
+You can create or add new form fields either visually using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/form-designer.html) or dynamically using APIs.
+
+## Create Form Fields Using the Form Designer UI
+Use this approach when you want to design forms manually without writing code.
+
+**Steps:**
+
+1. Enable [Form Designer](../form-designer) mode in the PDF Viewer.
+2. Click a form field type (Textbox, Checkbox, Dropdown, etc.) from the toolbar.
+3. Click on the PDF page to place the form field.
+4. Move or resize the field as required.
+5. Configure field properties using the **Properties** panel.
+
+
+
+## Add Form Fields Programmatically (API)
+
+Use this approach when you want to generate form fields dynamically based on data or application logic.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**Use programmatic creation when:**
+
+- Building dynamic forms
+- Pre-filling forms from databases
+- Automating form creation workflows
+
+## PDF Form Field Types and How to Add Them
+Each field can be added via the **Form Designer** or **programmatically**.
+
+### Textbox
+
+**Add via Toolbar (UI)**
+- Open **Form Designer** → select **Textbox** → click on the page → configure in **Properties**.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Password
+
+**Add via Toolbar (UI)**
+- Select **Password** → place it → configure tooltip, required, max length.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### CheckBox
+**Add via Toolbar (UI)**
+- Select **CheckBox** → click to place → duplicate for options → set isChecked, tooltip, appearance.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### RadioButton
+**Add via Toolbar (UI)**
+- Select **RadioButton** → place buttons with the **same Name** to group → configure selection/colors.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### ListBox
+**Add via Toolbar (UI)**
+- Select **ListBox** → place → add items in **Properties**.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### DropDown
+**Add via Toolbar (UI)**
+- Select **DropDown** → place → add items → set default value.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Signature Field
+**Add via Toolbar (UI)**
+- Select **Signature Field** → place where signing is required → configure indicator text, thickness, tooltip, required.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Initial Field
+**Add via Toolbar (UI)**
+- Select **Initial Field** → place where initials are needed → configure text and required state.
+
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Fields Dynamically with setFormFieldMode
+
+Use **setFormFieldMode()** to add fields on the fly based on user actions.
+
+### Edit Form Fields in TypeScript PDF Viewer
+You can edit form fields using the UI or API.
+
+#### Edit Using the UI
+- Right click a field → **Properties** to update settings. (Image here)
+- Drag to move; use handles to resize.
+- Use the toolbar to toggle field mode or add new fields.
+
+#### Edit Programmatically
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples)
+
+## See Also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Modify form fields](./modify-form-fields)
+- [Style form fields](./style-form-fields)
+- [Remove form fields](./remove-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form Fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/customize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/customize-form-fields.md
new file mode 100644
index 0000000000..42d6c965be
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/customize-form-fields.md
@@ -0,0 +1,160 @@
+---
+layout: post
+title: Customize form fields in the Vue PDF Viewer | Syncfusion
+description: Learn how to customize PDF form fields using the UI and programmatically with APIs in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Customize the appearance of PDF Form Fields in Vue PDF Viewer
+
+**Styling** customizes appearance only (font, color, alignment, border, background, indicator text).
+
+## Customize Appearance of Form Fields Using the UI
+Use the **Properties** panel to adjust:
+- Font family/size, text color, alignment
+- Border color/thickness
+- Background color
+
+
+## Customize appearance Form Fields Programmatically
+Use [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) to apply styles.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set Default Styles for New Form Fields
+Define defaults so fields added from the toolbar inherit styles.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Modify form fields](./modify-form-fields)
+- [Remove form fields](./remove-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/modify-form-fields.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/modify-form-fields.md
new file mode 100644
index 0000000000..dad4fcd2e1
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/modify-form-fields.md
@@ -0,0 +1,577 @@
+---
+layout: post
+title: Modify form fields in the Vue PDF Viewer | Syncfusion
+description: Learn how to modify PDF form fields using the UI and programmatically with APIs in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Modify PDF Form Field Properties in Vue
+You can modify form fields using the **UI** or **API**.
+
+## Modify PDF Form Field Properties using the UI
+- Right click a field → **Properties** to update settings.
+
+- Drag to move; use handles to resize.
+- Use the toolbar to toggle field mode or add new fields.
+
+## Modify PDF Form Field Properties programmatically
+Use [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) to change behavior/data (including position and size).
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Modify PDF Form Field Properties by Field type
+
+### Textbox
+- UI: Update value, font, size, colors, border thickness, alignment, max length, multiline.
+
+Use [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) for value, typography, alignment, colors, borders.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Password
+
+- UI: Tooltip, required, max length, font, appearance.
+
+Use [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, validation flags, typography, colors, alignment, borders.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### CheckBox
+- UI: Toggle checked state.
+
+Use [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) for isChecked, tooltip, colors, borders.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### RadioButton
+• UI: Set selected item in a group (same Name).
+
+• API: [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) to set selected value and border appearance.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### ListBox
+• UI: Add/remove items, set selection, adjust fonts/colors.
+
+• API: [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) for items, selection, borders.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### DropDown
+• UI: Add/remove items, default value, appearance.
+
+• API: [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Signature Field
+• UI: Tooltip, thickness, indicator text, required/visibility.
+
+• API: [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### Initial Field
+• UI: Tooltip, indicator text, thickness, required/visibility.
+
+• API: [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Remove form Fields](./remove-form-fields)
+- [Style form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/move-resize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/move-resize-form-fields.md
new file mode 100644
index 0000000000..74391d64b7
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/move-resize-form-fields.md
@@ -0,0 +1,82 @@
+---
+layout: post
+title: Move and Resize form fields in the Vue PDF Viewer | Syncfusion
+description: Learn how to move and resize PDF form fields using the UI and programmatically with APIs in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Move and Resize PDF Form Fields in Vue
+- **Move**: Drag the form field to reposition it.
+- **Resize**: Use the resize handles to change width and height.
+
+
+
+## Move and Resize Fields Programmatically (API)
+You can set absolute bounds or move fields by a delta.
+
+**Set absolute bounds**
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Remove form Fields](./remove-form-fields)
+- [Customize form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/remove-form-fields.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/remove-form-fields.md
new file mode 100644
index 0000000000..636819bb44
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/remove-form-fields.md
@@ -0,0 +1,88 @@
+---
+layout: post
+title: Remove form fields in the Vue PDF Viewer | Syncfusion
+description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Remove PDF Form Fields from a PDF in Vue
+
+## Remove Form Fields Using the UI
+**Steps:**
+1. Enable **Form Designer mode**.
+2. Select the form field.
+3. Click **Delete** in the toolbar or press the **Delete** key.
+
+
+## Remove Form Fields Programmatically
+Use **deleteFormField()** with a field reference or ID.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Modify form fields](./modify-form-fields)
+- [Customize form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/overview-create-forms.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/overview-create-forms.md
new file mode 100644
index 0000000000..9c92ef76e1
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/overview-create-forms.md
@@ -0,0 +1,19 @@
+---
+layout: post
+title: Overview of Create form fields in Vue PDF Viewer | Syncfusion
+description: Learn how to create edit each form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion Vue PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Create, Edit, Style, and Remove Form Fields in Vue PDF Viewer
+
+The [Vue PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/overview) enables the creation, editing, styling, and removal of interactive PDF form fields. These operations are available through the [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/form-designer) or programmatically via the Vue APIs.
+
+This section links to step-by-step guidance for each operation:
+
+- [Create PDF form fields](./manage-form-fields/create-form-fields)
+- [Edit form field behavior and values](./manage-form-fields/modify-form-fields)
+- [Style the appearance of form fields](./manage-form-fields/customize-form-fields)
+- [Remove form fields from a PDF document](./manage-form-fields/remove-form-fields)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/overview.md
new file mode 100644
index 0000000000..3c00d44fab
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/overview.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: Overview of Forms in Vue PDF Viewer Control | Syncfusion
+description: Learn what the Form Designer in Syncfusion Vue PDF Viewer offers, supported field types, and how the topics are organized.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Overview of Forms in Vue PDF Viewer
+
+The Syncfusion PDF Viewer provides a full-featured PDF forms experience for Vue applications. Users can read, fill, add, edit, and remove form fields in PDF documents using the viewer's UI or programmatic APIs.
+
+Flexible import and export of form data simplifies integration in automated workflows or user-driven scenarios. APIs offer developers control over form behavior while the viewer presents a concise, accessible interface for end users.
+
+## Filling PDF Forms
+
+Use the viewer UI or APIs to fill PDF forms, import/export form data, or integrate automated form workflows.
+
+See the [Filling PDF Forms](./form-filling) page for full details.
+
+Use the following code-snippet to enable form-filling by injecting the `FormFields` module.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+1. [Programmatically Form fill](./form-filling#fill-pdf-forms-programmatically)
+2. [Form Fill Using UI](./form-filling#fill-pdf-forms-through-the-user-interface)
+3. [Import the Form data](./form-filling#fill-pdf-forms-through-import-data)
+
+## Form Designer
+
+A built-in Form Designer enables creating, positioning, and editing form fields directly on the PDF page. Use the built-in designer tools for common tasks or extend them to build a customized form-design workflow.
+
+See the [Form Designer](./form-designer) page for full details.
+
+Use the following Code-snippet to enable Form Designer by injecting `FormDesigner` Module.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+Create and customize interactive fields directly on the PDF page.
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), or [remove](./manage-form-fields/remove-form-fields) forms
+- [Add a Signature Field](./manage-form-fields/create-form-fields#add-signature-field)
+- [Edit Form Field](./manage-form-fields/modify-form-fields)
+- [Remove Form Field](./manage-form-fields/remove-form-fields)
+- [Form Field Constraints](./form-constrain)
+
+## Supported form field types
+
+- [Textbox](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password](../forms/manage-form-fields/create-form-fields#add-password)
+- [CheckBox](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [RadioButton](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [ListBox](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [DropDown](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md
index f62429649a..ae4f9a5b4b 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md
@@ -10,11 +10,13 @@ domainurl: ##DomainURL##
# Getting started with Syncfusion PDF Viewer in Vue 3
-This guide explains how to create a Vue 3 application with Vite and integrate the Syncfusion® Vue PDF Viewer component.using the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) / [Options API](https://vuejs.org/guide/introduction.html#options-api).
+This guide demonstrates how to create a Vue 3 application with Vite and integrate the Syncfusion® Vue PDF Viewer component using either the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) or [Options API](https://vuejs.org/guide/introduction.html#options-api).
-The `Composition API` is a new feature introduced in Vue.js 3 that provides an alternative way to organize and reuse component logic. It allows developers to write components as functions that use smaller, reusable functions called composition functions to manage their properties and behavior.
+## API Approaches
-The `Options API` is the traditional way of writing Vue.js components, where the component logic is organized into a series of options that define the component's properties and behavior. These options include data, methods, computed properties, watchers, life cycle hooks, and more.
+**Composition API** – A modern approach to organizing component logic by composing smaller, reusable functions. This method offers better code organization and reusability for complex components.
+
+**Options API** – The traditional Vue approach that organizes component logic into a series of options (data, methods, computed properties, watchers, lifecycle hooks, etc.).
## Prerequisites
@@ -23,7 +25,7 @@ Install Node.js (version 18 or later recommended) along with npm or Yarn before
## Set up the Vite project
-A recommended approach for beginning with Vue is to scaffold a project using [Vite](https://vitejs.dev/). Run one of the following commands to create a new project.
+Use [Vite](https://vitejs.dev/) to quickly scaffold a Vue 3 project. Run one of the following commands to create a new project:
```bash
npm create vite@latest
@@ -66,7 +68,7 @@ Vanilla
Nuxt ↗
```
-4. After the scaffold completes, install the dependencies for `my-project`:
+4. After the scaffold completes, install the project dependencies:
```bash
cd my-project
@@ -80,16 +82,12 @@ cd my-project
yarn install
```
-With the scaffold ready, add the Syncfusion Vue PDF Viewer component to the project.
-
## Add Syncfusion® Vue packages
-Syncfusion Vue component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). Install the Vue PDF Viewer package with one of the following commands.
-
-This tutorial uses the [Vue PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk). Install the `@syncfusion/ej2-vue-pdfviewer` package with the following command:
+Install the `@syncfusion/ej2-vue-pdfviewer` package using npm or Yarn. This package includes the PDF Viewer component and all required dependencies:
```bash
- npm install @syncfusion/ej2-vue-pdfviewer --save
+npm install @syncfusion/ej2-vue-pdfviewer --save
```
or
@@ -100,9 +98,9 @@ yarn add @syncfusion/ej2-vue-pdfviewer
## Import Syncfusion® CSS styles
-You can import themes for the Syncfusion Vue components by using CSS or SASS assets from npm packages, a CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator), or [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). Refer to the [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) for details about built-in themes and additional options for referencing them in a Vue project.
+Import the required theme CSS for the PDF Viewer component. Syncfusion offers multiple theme options (Material, Bootstrap, Fabric, Tailwind, etc.) available from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator), or [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). For full details, see the [themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme).
-This tutorial applies the Material theme by importing the required CSS from the installed packages into the `
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/systemjs.config.js
new file mode 100644
index 0000000000..9290509c4a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/systemjs.config.js
@@ -0,0 +1,58 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+ "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+ },
+ packages: {
+ 'app': { main: 'app', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/Document-Processing/code-snippet/spreadsheet/react/comment-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/comment-cs1/app/app.jsx
index 6be75e56be..670fe3782d 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/comment-cs1/app/app.jsx
+++ b/Document-Processing/code-snippet/spreadsheet/react/comment-cs1/app/app.jsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective } from '@syncfusion/ej2-react-spreadsheet';
-import { RangeDirective, ColumnsDirective, ColumnDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
+import { RangeDirective, ColumnsDirective, ColumnDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { shipmentData } from './datasource';
function App() {
@@ -34,6 +34,45 @@ function App() {
}
}
+ // prepare comments as an array and bind by index in the JSX below
+ const cellComments = [
+ {
+ author: 'Julius Gorner', text: 'Confirm delivery status for Order 10248.', createdTime: 'November 18, 2025 at 3:00 PM',
+ isResolved: true, replies: [{ author: 'Cristi Espinos', text: 'Status verified as delivered.', createdTime: 'November 18, 2025 at 3:30 PM' },
+ { author: 'Julius Gorner', text: 'Acknowledged, thank you.', createdTime: 'November 18, 2025 at 3:45 PM' }]
+ },
+ {
+ author: 'Julius Gorner', text: 'Order 10250 is marked as Shipped, any update on current status?', createdTime: 'November 16, 2025 at 9:00 PM',
+ isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Shipment is in transit.', createdTime: 'November 17, 2025 at 3:30 PM' },
+ { author: 'Julius Gorner', text: 'Thanks for the update.', createdTime: 'November 17, 2025 at 3:45 PM' }]
+ },
+ {
+ author: 'Julius Gorner', text: 'Reason for cancellation of Order 10253?', createdTime: 'November 18, 2025 at 1:00 PM',
+ isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Customer requested cancellation.', createdTime: 'November 18, 2025 at 1:30 PM' },
+ { author: 'Julius Gorner', text: 'Understood, thanks.', createdTime: 'November 18, 2025 at 3:15 PM' }]
+ },
+ {
+ author: 'Julius Gorner', text: 'Pending status for Order 10254 - any progress?', createdTime: 'November 19, 2025 at 3:00 PM',
+ isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Awaiting customs clearance.', createdTime: 'November 19, 2025 at 3:30 PM' },
+ { author: 'Julius Gorner', text: 'Please keep me posted,', createdTime: 'November 19, 2025 at 3:45 PM' }]
+ },
+ {
+ author: 'Julius Gorner', text: 'Order 10256 shipped, tracking details shared?', createdTime: 'November 18, 2025 at 3:00 AM',
+ isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Tracking sent via email,', createdTime: 'November 18, 2025 at 3:30 AM' },
+ { author: 'Julius Gorner', text: 'Received, thank you,', createdTime: 'November 18, 2025 at 3:45 AM' }]
+ },
+ {
+ author: 'Julius Gorner', text: 'Delivered order 10257, confirm recipient name.', createdTime: 'November 18, 2025 at 2:00 PM',
+ isResolved: true, replies: [{ author: 'Cristi Espinos', text: 'Recipient verified as Michael Holz.', createdTime: 'November 18, 2025 at 2:30 PM' },
+ { author: 'Julius Gorner', text: 'Great, noted.', createdTime: 'November 18, 2025 at 2:45 PM' }]
+ },
+ {
+ author: 'Julius Gorner', text: 'Order 10258 cancelled, reason documented?', createdTime: 'November 18, 2025 at 12:00 PM',
+ isResolved: false, replies: [{ author: 'Cristi Espinos', text: 'Customer changed requirements', createdTime: 'November 18, 2025 at 12:30 PM' },
+ { author: 'Julius Gorner', text: 'Understood, thanks.', createdTime: 'November 18, 2025 at 12:45 PM' }]
+ }
+ ];
+
return (
Loading....
+
+
+
+
+
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/systemjs.config.js
new file mode 100644
index 0000000000..9290509c4a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1/systemjs.config.js
@@ -0,0 +1,58 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+ "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+ },
+ packages: {
+ 'app': { main: 'app', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/Document-Processing/code-snippet/spreadsheet/react/events/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/events/app/app.jsx
new file mode 100644
index 0000000000..8ae1a1fb3e
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/events/app/app.jsx
@@ -0,0 +1,70 @@
+import React, { useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
+import { data } from './datasource';
+
+function App() {
+ const spreadsheetRef = useRef(null);
+
+ const actionBegin = (args) => {
+ appendElement(`actionBegin triggered for ${args.action} actionLoading....
+ `); + console.log(args); + } + + const actionComplete = (args) => { + appendElement(`actionComplete triggered for ${args.action} action
`); + console.log(args); + } + + const clearBtnClick = () => { + const eventLog = document.getElementById('EventLog'); + if (eventLog) { + eventLog.innerHTML = ""; + } + }; + const appendElement = (html) => { + const span = document.createElement("span"); + span.innerHTML = html; + const log = document.getElementById('EventLog'); + if (log) { + log.insertBefore(span, log.firstChild); + } + }; + + return ( +
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Event Trace
+
+
+
+
+
+
+ `); + console.log(args); + } + + const actionComplete = (args: any) => { + appendElement(`actionComplete triggered for ${args.action} action
`); + console.log(args); + } + + const clearBtnClick = () => { + const eventLog = document.getElementById('EventLog'); + if (eventLog) { + eventLog.innerHTML = ""; + } + }; + const appendElement = (html: any) => { + const span = document.createElement("span"); + span.innerHTML = html; + const log = document.getElementById('EventLog'); + if (log) { + log.insertBefore(span, log.firstChild); + } + }; + + return ( +
+
+ );
+};
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Event Trace
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/events/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/events/systemjs.config.js
new file mode 100644
index 0000000000..47e87d758c
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/events/systemjs.config.js
@@ -0,0 +1,58 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/32.2.3/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+ "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+ },
+ packages: {
+ 'app': { main: 'app', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/Document-Processing/code-snippet/spreadsheet/react/filter-cs2/index.html b/Document-Processing/code-snippet/spreadsheet/react/filter-cs2/index.html
index 5d3b90fc38..86d550a7a5 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/filter-cs2/index.html
+++ b/Document-Processing/code-snippet/spreadsheet/react/filter-cs2/index.html
@@ -7,7 +7,7 @@
-
+
diff --git a/Document-Processing/code-snippet/spreadsheet/react/filter-cs2/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/filter-cs2/systemjs.config.js
index 692d0d2ef2..9290509c4a 100644
--- a/Document-Processing/code-snippet/spreadsheet/react/filter-cs2/systemjs.config.js
+++ b/Document-Processing/code-snippet/spreadsheet/react/filter-cs2/systemjs.config.js
@@ -14,7 +14,7 @@ System.config({
}
},
paths: {
- "syncfusion:": "https://cdn.syncfusion.com/ej2/24.1.41/"
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
},
map: {
app: 'app',
diff --git a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx
new file mode 100644
index 0000000000..8908b167a8
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { getDefaultData } from './datasource';
+
+function App() {
+ const spreadsheetRef = React.useRef(null);
+
+ const actionBegin = (args) => {
+ const action = args.action;
+ const eventArgs = args.args.eventArgs;
+
+ // Check the action is beforeReplaceAll.
+ if (action === 'beforeReplaceAll') {
+ const spreadsheet = spreadsheetRef.current;
+ if (!spreadsheet) return;
+
+ // Get the active sheet's selected range.
+ const selectedRange = spreadsheet.getActiveSheet().selectedRange;
+ if (!selectedRange) return;
+
+ // Convert the selected range into cell collection.
+ const selectedRangeCollection = generateCellCollection(selectedRange, spreadsheet);
+ const replaceAllCollection = eventArgs.addressCollection;
+ if (!Array.isArray(replaceAllCollection)) return;
+
+ // Create a Set from selectedRangeCollection for efficient lookup.
+ const selectedSet = new Set(selectedRangeCollection);
+ const updatedCollection = [];
+
+ // Iterate through replaceAllCollection and keep only cells within selection.
+ for (const cell of replaceAllCollection) {
+ if (cell && selectedSet.has(cell)) {
+ updatedCollection.push(cell);
+ } else {
+ // If the cell is not in selectedRangeCollection, add null to the updated collection
+ updatedCollection.push(null);
+ }
+ }
+
+ if (updatedCollection.length > 0) {
+ // Assign the newly created cell collection to the addressCollection of replaceAll action.
+ eventArgs.addressCollection = updatedCollection;
+ }
+ }
+ };
+
+ const generateCellCollection = (range, spreadsheet) => {
+ // Initialize the collection that will hold cell references.
+ const collection = [];
+
+ // Split the range string into start and end cell references.
+ let [startCell, endCell] = range.split(':');
+ endCell = endCell || startCell;
+
+ // Get the name of the active sheet.
+ const activeSheetName = spreadsheet.getActiveSheet().name;
+
+ // Extract column and row numbers from start and end cell references.
+ const [startCol, startRow] = startCell.match(/[A-Z]+|\d+/g) || [];
+ const [endCol, endRow] = endCell.match(/[A-Z]+|\d+/g) || [];
+
+ // Calculate ASCII codes for start and end columns.
+ const colRange = [startCol.toUpperCase().charCodeAt(0), endCol.toUpperCase().charCodeAt(0)];
+
+ // Parse start and end row numbers.
+ const rowRange = [parseInt(startRow, 10), parseInt(endRow, 10)];
+
+ // Iterate over columns and rows within the specified range.
+ for (let col = colRange[0]; col <= colRange[1]; col++) {
+ for (let row = rowRange[0]; row <= rowRange[1]; row++) {
+ // Push each cell reference into the collection array
+ collection.push(`${activeSheetName}!${String.fromCharCode(col)}${row}`);
+ }
+ }
+ // Return the array of cell references.
+ return collection;
+ };
+
+ return (
+ Loading....
+
+
+
+
+
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/systemjs.config.js
new file mode 100644
index 0000000000..9290509c4a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/find-and-replace-cs1/systemjs.config.js
@@ -0,0 +1,58 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+ "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+ },
+ packages: {
+ 'app': { main: 'app', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx
new file mode 100644
index 0000000000..7cb12bb8f0
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/app/app.jsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { jsonData } from './datasource';
+
+function App() {
+ const spreadsheetRef = React.useRef(null);
+
+ const handleOpenFromJson = React.useCallback(() => {
+ if (!spreadsheetRef.current) return;
+ spreadsheetRef.current.openFromJson({ file: jsonData });
+ }, []);
+
+ return (
+ Loading....
+
+
+ );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+
+
+
+
+
+
+
+
+ );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/systemjs.config.js
new file mode 100644
index 0000000000..9290509c4a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/open-from-json-cs1/systemjs.config.js
@@ -0,0 +1,58 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+ "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+ },
+ packages: {
+ 'app': { main: 'app', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx
new file mode 100644
index 0000000000..e3b77918da
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/app/app.jsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+import { getDefaultData } from './datasource';
+
+function App() {
+ const spreadsheetRef = React.useRefLoading....
+
+
+
+
+
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/systemjs.config.js
new file mode 100644
index 0000000000..9290509c4a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/paste-values-cs1/systemjs.config.js
@@ -0,0 +1,58 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+ "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+ },
+ packages: {
+ 'app': { main: 'app', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx
new file mode 100644
index 0000000000..b86cad1997
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/app/app.jsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
+
+function App() {
+ const spreadsheetRef = React.useRef(null);
+
+ const [savedJson, setSavedJson] = React.useState(null);
+
+ const handleSaveAsJson = React.useCallback(async () => {
+ if (!spreadsheetRef.current) return;
+ const result = await spreadsheetRef.current.saveAsJson();
+ const content = JSON.stringify(jsonObject, null, 2);
+ setSavedJson(content);
+ }, []);
+
+ return (
+ Loading....
+
+
+ );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+
+
+
+
+
+
+
+
+ {savedJson && (
+
+ Saved JSON
+
+ )}
+
+ {savedJson}
+
+
+
+ );
+}
+
+export default App;
+
+const root = createRoot(document.getElementById('root')!);
+root.render(
+
+
+
+
+
+
+
+
+ {savedJson && (
+
+ Saved JSON
+
+ )}
+
+ {savedJson}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/systemjs.config.js
new file mode 100644
index 0000000000..9290509c4a
--- /dev/null
+++ b/Document-Processing/code-snippet/spreadsheet/react/save-as-json-cs1/systemjs.config.js
@@ -0,0 +1,58 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+ "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+ },
+ packages: {
+ 'app': { main: 'app', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
Loading....
+