diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/overview.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/overview.md
index 4803b5bb8..6191c5535 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/overview.md
@@ -14,6 +14,9 @@ The Angular PDF Viewer component provides an Organize Pages panel that helps you
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.
+Check the following video to learn how to organize pages in PDF Document in React PDF Viewer.
+{% youtube "https://www.youtube.com/watch?v=08kPdR0AZQk" %}
+
The Organize Pages panel supports the following actions:
* **Rotate pages**: Fix page orientation in 90-degree increments to correct scanned pages.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/programmatic-support.md
index f7b59da21..e47bc762b 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/programmatic-support.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/programmatic-support.md
@@ -12,6 +12,9 @@ domainurl: ##DomainURL##
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.
+Check the following video to learn how to organize pages in PDF Document in React PDF Viewer.
+{% youtube "https://www.youtube.com/watch?v=08kPdR0AZQk" %}
+
## 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.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/ui-interactions.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/ui-interactions.md
index 390f79487..a09b2b50d 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/ui-interactions.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/ui-interactions.md
@@ -12,6 +12,9 @@ domainurl: ##DomainURL##
The PDF Viewer provides an intuitive user interface for managing and organizing pages within a PDF document. This section covers the various UI interactions available in the `Organize Pages` dialog.
+Check the following video to learn how to organize pages in PDF Document in React PDF Viewer.
+{% youtube "https://www.youtube.com/watch?v=08kPdR0AZQk" %}
+
## Rotating PDF pages
You can adjust the orientation of pages to ensure proper alignment. The rotate icon in the Organize Pages dialog provides the following options:
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pdf-overview.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pdf-overview.md
deleted file mode 100644
index eb9cfacbc..000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pdf-overview.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-layout: post
-title: Organize pages in Angular PDF Viewer | Syncfusion
-description: Learn how to reorder, rotate, insert, delete, and save pages with the Syncfusion Angular PDF Viewer component.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Organize pages in Angular PDF Viewer
-
-The Angular 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.
-
-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.
-
-The Organize Pages panel supports the following actions:
-
-* **Rotate pages**: Fix page orientation in 90-degree increments to correct scanned pages.
-* **Rearrange pages**: Drag and drop thumbnails to update the reading order.
-* **Insert new pages**: Add blank pages at the required position.
-* **Delete pages**: Remove pages that are no longer needed.
-* **Copy pages**: Duplicate selected pages to reuse content elsewhere in the document.
-* **Import a PDF document**: Merge the current document with pages from another PDF file.
-* **Select all pages**: Apply bulk actions, such as rotation or deletion, to every page.
-* **Save updates**: Review changes in real time and use **Save** or **Save As** to download the revised document.
-
-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 Angular, see the feature landing page: [Organize pages in Angular 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)
-
diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md
index aac8d316e..1373b5c84 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md
@@ -14,6 +14,9 @@ When **Form Designer mode** is enabled in the Syncfusion [React PDF Viewer](http
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.
+Check the following video to learn how to work with form Designer in React PDF Viewer.
+{% youtube "https://www.youtube.com/watch?v=MUWTCg1MoAE" %}
+
## Key Features
**Add Form Fields**
diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md
index b8dbb6a36..edbbb456e 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md
@@ -24,6 +24,9 @@ The Syncfusion PDF Viewer supports three types of form-filling:
The PDF Viewer allows you to import form field data into an existing PDF document. This enables pre filled forms using external data sources.
+Check the following video to learn how to work with form filling in React PDF Viewer.
+{% youtube "https://www.youtube.com/watch?v=MUWTCg1MoAE" %}
+
## Fill PDF forms programmatically
You can update the values of PDF form fields programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This method allows you to set or modify form field values dynamically based on application logic, without user interaction.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/overview-create-forms.md b/Document-Processing/PDF/PDF-Viewer/react/forms/overview-create-forms.md
index f370aaac8..009743b70 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/overview-create-forms.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/overview-create-forms.md
@@ -12,6 +12,9 @@ documentation: ug
The [React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/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/react/#/tailwind3/pdfviewer/form-designer) or [React APIs.](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/overview)
+Check the following video to learn how to work with form Designer in React PDF Viewer.
+{% youtube "https://www.youtube.com/watch?v=MUWTCg1MoAE" %}
+
This section explains how to:
- [Create PDF form fields](./manage-form-fields/create-form-fields)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md b/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md
index dec60d235..79f511ae3 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md
@@ -13,6 +13,9 @@ The Syncfusion PDF Viewer delivers a complete, easy-to-use PDF forms experience.
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.
+Check the following video to learn how to work with form Designer in React PDF Viewer.
+{% youtube "https://www.youtube.com/watch?v=MUWTCg1MoAE" %}
+
## 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.
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 db2c1a9e7..000000000
--- 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)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% 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 0dfde8a19..000000000
--- 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 4c6feff29..000000000
--- 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/forms/custom-data.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/custom-data.md
new file mode 100644
index 000000000..7e5a834fd
--- /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 000000000..001d789fd
--- /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. 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 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 000000000..1b8f0beb3
--- /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 [TypeScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.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](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformdesigner) API to show or hide the Form Designer option in the main toolbar.
+
+{% 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 PDF Viewer, a default Form Designer user interface (UI) 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 Vue example above to enable the Form Designer (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) method. 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 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 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/vue/forms/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-field-events.md
new file mode 100644
index 000000000..65a5d077e
--- /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
+
+You can wire up form field events on the PDF Viewer component 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 000000000..2c48d451a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-fields-api.md
@@ -0,0 +1,824 @@
+---
+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 PDF Viewer provides comprehensive 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 when the PDF document is loaded in the PDF Viewer control initially
+and get the form designer Toolbar Visible 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 %}
+
+## 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 000000000..0e33b0d5d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md
@@ -0,0 +1,246 @@
+---
+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 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://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#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://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#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 html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+{% 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.
+
+{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
+
+## Fill PDF forms through Import Data
+
+The Syncfusion PDF Viewer allows you to 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 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 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
+
+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://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#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/vue/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.
+
+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://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) and wiring the event, you can go through each field and stop the action if required fields are not filled.
+
+{% 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 000000000..4b3f1bc41
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-validation.md
@@ -0,0 +1,169 @@
+---
+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 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://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 a 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.
+ - 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://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) property to true and wire 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, 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 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 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 000000000..9df451860
--- /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. 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 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 000000000..c66f0f8b0
--- /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 000000000..70f2b8eab
--- /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 000000000..ed56a597d
--- /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)
+
+Note: If you’re using a **server-backed viewer**, 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 000000000..3c1cef829
--- /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 000000000..42d6c965b
--- /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 000000000..dad4fcd2e
--- /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 %}
+
+### 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 %}
+
+### 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 000000000..74391d64b
--- /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 000000000..636819bb4
--- /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 000000000..6cefadaf3
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/overview-create-forms.md
@@ -0,0 +1,20 @@
+---
+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) 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/vue/#/tailwind3/pdfviewer/form-designer.html) or [Vue APIs.](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/overview)
+
+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/vue/forms/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/overview.md
new file mode 100644
index 000000000..9099b8ede
--- /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 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 code-snippet to enable form-filling by injecting `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 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 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/how-to/custom-fonts.md b/Document-Processing/PDF/PDF-Viewer/vue/how-to/custom-fonts.md
index cb89cf890..f7e5160ab 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/how-to/custom-fonts.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/how-to/custom-fonts.md
@@ -2,27 +2,45 @@
layout: post
title: Add custom fonts in Vue PDF Viewer | Syncfusion
description: Learn how to add and load custom TTF fonts for documents displayed in the Vue PDF Viewer using the customFonts property.
-control: PDF Viewer
platform: document-processing
+control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# How to add custom fonts to the PDF viewer
+# Add Custom Fonts to PDF Forms in Vue PDF Viewer
+
+The Syncfusion **Vue 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.
-The Vue PDF Viewer supports loading, editing, and saving custom fonts in form fields such as text boxes, list boxes, and drop-downs by using the customFonts property. Add the required TTF files to the resource URL directory used by the viewer so they can be loaded at runtime and used in forms.
-
-## Integrating Custom Font Collections into Form Fields in PDF Viewer
-
-To ensure proper rendering and saving of form fields that use custom fonts, especially when the fonts are not installed on the system, place the TTF files in the resource URL path referenced by the viewer and specify their names through the customFonts property (string array). These fonts will then be available for loading, editing, and saving form fields in the PDF.
+## 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.
-To use custom fonts in the Syncfusion 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.
+## 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
-Steps to add custom fonts
+## Steps to Add Custom Fonts
-**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.
+### 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.
-**Step 2:** Use the following code to configure custom fonts in the PDF Viewer.
+### Configure Custom Fonts in the PDF Viewer
+Specify the required font names in the customFonts property.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -82,6 +100,18 @@ export default {
{% 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**.
-> 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 PDF Viewer. To avoid this, use a font size that fits within the field or enlarge the field before saving/downloading.
\ No newline at end of file
+## 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.
\ No newline at end of file