From 0f45af199ac4bcb855eaa65107305b0eb14f8509 Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Wed, 4 Feb 2026 18:24:15 +0530
Subject: [PATCH 1/7] 1004885: UG Forms Revamp in Vue Platform

---
 Document-Processing-toc.html                  |   34 +-
 .../form-designer/create-programmatically.md  | 2528 -----------------
 .../create-with-user-interface-interaction.md |  366 ---
 .../vue/form-designer/form-field-events.md    | 1199 --------
 .../PDF/PDF-Viewer/vue/forms/custom-data.md   |  270 ++
 .../PDF-Viewer/vue/forms/form-constrain.md    |  430 +++
 .../PDF/PDF-Viewer/vue/forms/form-designer.md |  223 ++
 .../PDF-Viewer/vue/forms/form-field-events.md |  143 +
 .../PDF-Viewer/vue/forms/form-fields-api.md   |  824 ++++++
 .../PDF/PDF-Viewer/vue/forms/form-filling.md  |  246 ++
 .../PDF-Viewer/vue/forms/form-validation.md   |  169 ++
 .../PDF-Viewer/vue/forms/group-form-fields.md |  172 ++
 .../export-form-fields.md                     |  243 ++
 .../import-export-events.md                   |  169 ++
 .../import-form-fields.md                     |  189 ++
 .../manage-form-fields/create-form-fields.md  |  633 +++++
 .../customize-form-fields.md                  |  160 ++
 .../manage-form-fields/modify-form-fields.md  |  577 ++++
 .../move-resize-form-fields.md                |   82 +
 .../manage-form-fields/remove-form-fields.md  |   88 +
 .../vue/forms/overview-create-forms.md        |   20 +
 .../PDF/PDF-Viewer/vue/forms/overview.md      |  172 ++
 .../PDF/PDF-Viewer/vue/how-to/custom-fonts.md |   56 +-
 23 files changed, 4880 insertions(+), 4113 deletions(-)
 delete mode 100644 Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-programmatically.md
 delete mode 100644 Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-with-user-interface-interaction.md
 delete mode 100644 Document-Processing/PDF/PDF-Viewer/vue/form-designer/form-field-events.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/custom-data.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/form-constrain.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/form-field-events.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/form-fields-api.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/form-validation.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/group-form-fields.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/export-form-fields.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/import-export-events.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/import-form-fields.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/create-form-fields.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/customize-form-fields.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/modify-form-fields.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/move-resize-form-fields.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/remove-form-fields.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/overview-create-forms.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/forms/overview.md

diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index b41625838..80f3294b1 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -1140,16 +1140,36 @@
 								</ul>
 							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/vue/interaction-mode">Interaction Mode</a></li>
-							<li>Form Designer
+							<li>Forms
 								<ul>
-									<li><a href="/document-processing/pdf/pdf-viewer/vue/form-designer/create-programmatically">Create form fields programmatically</a></li>
-									<li><a href="/document-processing/pdf/pdf-viewer/vue/form-designer/create-with-user-interface-interaction">Create form fields with UI interaction</a></li>
-									<li><a href="/document-processing/pdf/pdf-viewer/vue/toolbar-customization/form-designer-toolbar">Form Designer Toolbar</a></li>
-									<li><a href="/document-processing/pdf/pdf-viewer/vue/form-designer/form-field-events">Form Field events</a></li>
-									<li><a href="/document-processing/pdf/pdf-viewer/vue/how-to/custom-fonts">Custom Fonts</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/overview">Overview</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/form-filling">Fill form fields</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/form-designer">Form Designer and Toolbar</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/overview-create-forms">Create, Edit, Style and Remove Form Fields</a>
+										<ul>
+											<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/manage-form-fields/create-form-fields">Create form fields</a></li>
+											<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/manage-form-fields/modify-form-fields">Modify form fields</a></li>
+											<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/manage-form-fields/customize-form-fields">Customize form fields</a></li>
+											<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/manage-form-fields/move-resize-form-fields">Move and Resize form fields</a></li>
+											<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/manage-form-fields/remove-form-fields">Remove form fields</a></li>
+										</ul>
+									</li>
+									<li>Import/Export form data
+										<ul>
+											<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/import-export-form-fields/import-form-fields">Import form data</a></li>
+											<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/import-export-form-fields/export-form-fields">Export form data</a></li>
+											<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/import-export-form-fields/import-export-events">Import/Export events</a></li>
+										</ul>
+									</li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/custom-data">Add custom data in form fields</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/group-form-fields">Grouping form fields</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/form-constrain">Form Field Flags</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/form-validation">Form Validation</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/how-to/custom-fonts">Custom fonts</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/form-field-events">Form Field events</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/forms/form-fields-api">APIs</a></li>
 								</ul>
 							</li>
-							<li><a href="/document-processing/pdf/pdf-viewer/vue/form-filling">Form Filling</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/vue/organize-pdf">Organize Pages</a>
 								<ul>
 									<li><a href="/document-processing/pdf/pdf-viewer/vue/organize-pages/overview">Overview</a></li>
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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const documentLoad = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.formDesignerModule.addFormField("Textbox", { name: "First Name", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } });
-  viewer.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 } });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'Last Name', bounds: { X: 530, Y: 229, Width: 150, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 148, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, });
-  viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 292, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Month', bounds: { X: 146, Y: 320, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Date', bounds: { X: 193, Y: 320, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Year', bounds: { X: 242, Y: 320, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('InitialField', { name: 'Agree', bounds: { X: 148, Y: 408, Width: 200, Height: 43 }, });
-  viewer.formDesignerModule.addFormField('InitialField', { name: 'Do Not Agree', bounds: { X: 148, Y: 466, Width: 200, Height: 43 }, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Text Message', bounds: { X: 56, Y: 664, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Email', bounds: { X: 242, Y: 664, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Appointment Reminder', bounds: { X: 56, Y: 740, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Request for Customerservice', bounds: { X: 56, Y: 778, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Information Billing', bounds: { X: 290, Y: 740, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'My Email', bounds: { X: 146, Y: 850, Width: 200, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'My Phone', bounds: { X: 482, Y: 850, Width: 200, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('SignatureField', { name: 'Sign', bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Month', bounds: { X: 386, Y: 923, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Date', bounds: { X: 434, Y: 923, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Year', bounds: { X: 482, Y: 923, Width: 35, Height: 24 }, });
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    documentLoad: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.formDesignerModule.addFormField("Textbox", { name: "First Name", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } });
-      viewer.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 } });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'Last Name', bounds: { X: 530, Y: 229, Width: 150, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 148, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, });
-      viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 292, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Month', bounds: { X: 146, Y: 320, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Date', bounds: { X: 193, Y: 320, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Year', bounds: { X: 242, Y: 320, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('InitialField', { name: 'Agree', bounds: { X: 148, Y: 408, Width: 200, Height: 43 }, });
-      viewer.formDesignerModule.addFormField('InitialField', { name: 'Do Not Agree', bounds: { X: 148, Y: 466, Width: 200, Height: 43 }, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Text Message', bounds: { X: 56, Y: 664, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Email', bounds: { X: 242, Y: 664, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Appointment Reminder', bounds: { X: 56, Y: 740, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Request for Customerservice', bounds: { X: 56, Y: 778, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Information Billing', bounds: { X: 290, Y: 740, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'My Email', bounds: { X: 146, Y: 850, Width: 200, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'My Phone', bounds: { X: 482, Y: 850, Width: 200, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('SignatureField', { name: 'Sign', bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Month', bounds: { X: 386, Y: 923, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Date', bounds: { X: 434, Y: 923, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Year', bounds: { X: 482, Y: 923, Width: 35, Height: 24 }, });
-    }
-  }
-}
-</script>
-
-{% 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 <div> 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const documentLoad = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.formDesignerModule.addFormField("Textbox", { name: "First Name", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } });
-  viewer.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 } });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'Last Name', bounds: { X: 530, Y: 229, Width: 150, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 148, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, });
-  viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 292, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Month', bounds: { X: 146, Y: 320, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Date', bounds: { X: 193, Y: 320, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Year', bounds: { X: 242, Y: 320, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('InitialField', { name: 'Agree', bounds: { X: 148, Y: 408, Width: 200, Height: 43 }, });
-  viewer.formDesignerModule.addFormField('InitialField', { name: 'Do Not Agree', bounds: { X: 148, Y: 466, Width: 200, Height: 43 }, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Text Message', bounds: { X: 56, Y: 664, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Email', bounds: { X: 242, Y: 664, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Appointment Reminder', bounds: { X: 56, Y: 740, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Request for Customerservice', bounds: { X: 56, Y: 778, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Information Billing', bounds: { X: 290, Y: 740, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'My Email', bounds: { X: 146, Y: 850, Width: 200, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'My Phone', bounds: { X: 482, Y: 850, Width: 200, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('SignatureField', { name: 'Sign', bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Month', bounds: { X: 386, Y: 923, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Date', bounds: { X: 434, Y: 923, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Year', bounds: { X: 482, Y: 923, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.updateFormField(viewer.formFieldCollections[0], { backgroundColor: 'red' });
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-
-  methods: {
-    documentLoad: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.formDesignerModule.addFormField("Textbox", { name: "First Name", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } });
-      viewer.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 } });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'Last Name', bounds: { X: 530, Y: 229, Width: 150, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 148, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, });
-      viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 292, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Month', bounds: { X: 146, Y: 320, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Date', bounds: { X: 193, Y: 320, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Year', bounds: { X: 242, Y: 320, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('InitialField', { name: 'Agree', bounds: { X: 148, Y: 408, Width: 200, Height: 43 }, });
-      viewer.formDesignerModule.addFormField('InitialField', { name: 'Do Not Agree', bounds: { X: 148, Y: 466, Width: 200, Height: 43 }, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Text Message', bounds: { X: 56, Y: 664, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Email', bounds: { X: 242, Y: 664, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Appointment Reminder', bounds: { X: 56, Y: 740, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Request for Customerservice', bounds: { X: 56, Y: 778, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Information Billing', bounds: { X: 290, Y: 740, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'My Email', bounds: { X: 146, Y: 850, Width: 200, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'My Phone', bounds: { X: 482, Y: 850, Width: 200, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('SignatureField', { name: 'Sign', bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Month', bounds: { X: 386, Y: 923, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Date', bounds: { X: 434, Y: 923, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Year', bounds: { X: 482, Y: 923, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.updateFormField(viewer.formFieldCollections[0], { backgroundColor: 'red' });
-    }
-  }
-}
-</script>
-
-{% 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 <div> 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const documentLoad = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.formDesignerModule.addFormField("Textbox", { name: "First Name", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } });
-  viewer.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 } });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'Last Name', bounds: { X: 530, Y: 229, Width: 150, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 148, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, });
-  viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 292, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Month', bounds: { X: 146, Y: 320, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Date', bounds: { X: 193, Y: 320, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Year', bounds: { X: 242, Y: 320, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('InitialField', { name: 'Agree', bounds: { X: 148, Y: 408, Width: 200, Height: 43 }, });
-  viewer.formDesignerModule.addFormField('InitialField', { name: 'Do Not Agree', bounds: { X: 148, Y: 466, Width: 200, Height: 43 }, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Text Message', bounds: { X: 56, Y: 664, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Email', bounds: { X: 242, Y: 664, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Appointment Reminder', bounds: { X: 56, Y: 740, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Request for Customerservice', bounds: { X: 56, Y: 778, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('CheckBox', { name: 'Information Billing', bounds: { X: 290, Y: 740, Width: 20, Height: 20 }, isChecked: false, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'My Email', bounds: { X: 146, Y: 850, Width: 200, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'My Phone', bounds: { X: 482, Y: 850, Width: 200, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('SignatureField', { name: 'Sign', bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Month', bounds: { X: 386, Y: 923, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Date', bounds: { X: 434, Y: 923, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Year', bounds: { X: 482, Y: 923, Width: 35, Height: 24 }, });
-  viewer.formDesignerModule.deleteFormField(viewer.formFieldCollections[0]);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    documentLoad: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.formDesignerModule.addFormField("Textbox", { name: "First Name", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } });
-      viewer.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 } });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'Last Name', bounds: { X: 530, Y: 229, Width: 150, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 148, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, });
-      viewer.formDesignerModule.addFormField('RadioButton', { bounds: { X: 292, Y: 289, Width: 18, Height: 18 }, name: 'Gender', isSelected: false, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Month', bounds: { X: 146, Y: 320, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Date', bounds: { X: 193, Y: 320, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOB Year', bounds: { X: 242, Y: 320, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('InitialField', { name: 'Agree', bounds: { X: 148, Y: 408, Width: 200, Height: 43 }, });
-      viewer.formDesignerModule.addFormField('InitialField', { name: 'Do Not Agree', bounds: { X: 148, Y: 466, Width: 200, Height: 43 }, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Text Message', bounds: { X: 56, Y: 664, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Email', bounds: { X: 242, Y: 664, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Appointment Reminder', bounds: { X: 56, Y: 740, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Request for Customerservice', bounds: { X: 56, Y: 778, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('CheckBox', { name: 'Information Billing', bounds: { X: 290, Y: 740, Width: 20, Height: 20 }, isChecked: false, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'My Email', bounds: { X: 146, Y: 850, Width: 200, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'My Phone', bounds: { X: 482, Y: 850, Width: 200, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('SignatureField', { name: 'Sign', bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Month', bounds: { X: 386, Y: 923, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Date', bounds: { X: 434, Y: 923, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.addFormField('Textbox', { name: 'DOS Year', bounds: { X: 482, Y: 923, Width: 35, Height: 24 }, });
-      viewer.formDesignerModule.deleteFormField(viewer.formFieldCollections[0]);
-    }
-  }
-}
-</script>
-
-{% 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 <div> 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.
-
-![Alt text](../images/saveformfield.gif)
-
-You can invoke the download action using the following code snippet.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="downloadClicked">Download</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const downloadClicked = function (args) {
-  pdfviewer.value.ej2Instances.download();
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="downloadClicked">Download</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    downloadClicked: function (args) {
-      this.$refs.pdfviewer.ej2Instances.download();
-    }
-  }
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="downloadClicked">Download</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath"
-      :documentLoad="documentLoad">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const downloadClicked = function (args) {
-  pdfviewer.value.ej2Instances.download();
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="downloadClicked">Download</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath"
-      :documentLoad="documentLoad">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    downloadClicked: function (args) {
-      this.$refs.pdfviewer.ej2Instances.download();
-    }
-  }
-}
-</script>
-
-{% 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.
-
-![Alt text](../images/printformfield.gif)
-
-You can invoke the print action using the following code snippet:
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="printClicked">Print</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const printClicked = function () {
-  this.$refs.pdfviewer.ej2Instances.print.print();
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="printClicked">Print</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    printClicked: function (args) {
-      this.$refs.pdfviewer.ej2Instances.print.print();
-    }
-  }
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="printClicked">Print</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath"
-      :documentLoad="documentLoad">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const printClicked = function () {
-  pdfviewer.value.ej2Instances.print.print();
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="printClicked">Print</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath"
-      :documentLoad="documentLoad">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-  "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    printClicked: function (args) {
-      this.$refs.pdfviewer.ej2Instances.print.print();
-    }
-  }
-}
-</script>
-
-{% 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.
-
-![Open a PDF with existing form fields](../images/openexistingpdf.gif)
-
-## 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad"
-      :enableFormFieldsValidation="true" :validateFormFields="validateFormFields">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const documentLoad = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 70, Y: 229, Width: 150, Height: 24 } });
-}
-const validateFormFields = function (args) {
-  var nonfilledFormFields = args.nonFillableFields
-}
-
-</script>
-<style>
-@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-vue-pdfviewer/styles/material.css';
-
-#pdfViewer {
-  height: 640px;
-}
-</style>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad"
-      :enableFormFieldsValidation="true" :validateFormFields="validateFormFields">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    documentLoad: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 70, Y: 229, Width: 150, Height: 24 } });
-    },
-    validateFormFields: function (args) {
-      var nonfilledFormFields = args.nonFillableFields
-    }
-  }
-}
-</script>
-<style>
-@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-vue-pdfviewer/styles/material.css';
-
-#pdfViewer {
-  height: 640px;
-}
-</style>
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-backed)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath"
-      :documentLoad="documentLoad" :enableFormFieldsValidation="true" :validateFormFields="validateFormFields">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const documentLoad = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 70, Y: 229, Width: 150, Height: 24 } });
-}
-const validateFormFields = function (args) {
-  var nonfilledFormFields = args.nonFillableFields
-}
-
-</script>
-<style>
-@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-vue-pdfviewer/styles/material.css';
-
-#pdfViewer {
-  height: 640px;
-}
-</style>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath"
-      :documentLoad="documentLoad" :enableFormFieldsValidation="true" :validateFormFields="validateFormFields">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    documentLoad: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.formDesignerModule.addFormField("Textbox", { name: "Textbox", bounds: { X: 70, Y: 229, Width: 150, Height: 24 } });
-    },
-    validateFormFields: function (args) {
-      var nonfilledFormFields = args.nonFillableFields
-    }
-  }
-}
-</script>
-<style>
-@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-vue-pdfviewer/styles/material.css';
-
-#pdfViewer {
-  height: 640px;
-}
-</style>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="exportFdf">Export FDF</button>
-    <button v-on:click="importFdf">Import FDF</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields, FormFieldDataFormat
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
-
-// Event triggers on the Export FDF button click.
-const exportFdf = function () {
-  // Data must be the desired path for the exported document.
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.exportFormFields('Data', FormFieldDataFormat.Fdf);
-}
-
-// Event triggers on the Import FDF button click.
-const importFdf = function () {
-  const viewer = pdfviewer.value.ej2Instances;
-  // The file for importing the form fields should be placed in the desired location and the path should be provided correctly
-  viewer.importFormFields('File', FormFieldDataFormat.Fdf);
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="exportFdf">Export FDF</button>
-    <button v-on:click="importFdf">Import FDF</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields, FormFieldDataFormat
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: 'app',
-  components: {
-    'ejs-pdfviewer': PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-    ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    // Event triggers on the Export FDF button click.
-    exportFdf: function () {
-      // Data must be the desired path for the exported document.
-      const  viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.exportFormFields('Data', FormFieldDataFormat.Fdf);
-    },
-
-    // Event triggers on the Import FDF button click.
-    importFdf: function () {
-      const  viewer = this.$refs.pdfviewer.ej2Instances;
-      // The file for importing the form fields should be placed in the desired location and the path should be provided correctly
-      viewer.importFormFields('File', FormFieldDataFormat.Fdf);
-    },
-  }
-}
-
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="exportXfdf">Export XFDF</button>
-    <button v-on:click="importXfdf">Import XFDF</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields, FormFieldDataFormat
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
-
-// Event triggers on the Export XFDF button click.
-const exportXfdf = function () {
-  // Data must be the desired path for the exported document.
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.exportFormFields('Data', FormFieldDataFormat.Xfdf);
-}
-
-// Event triggers on the Import XFDF button click.
-const importXfdf = function () {
-  const viewer = pdfviewer.value.ej2Instances;
-  // The file for importing the form fields should be placed in the desired location and the path should be provided correctly
-  viewer.importFormFields('File', FormFieldDataFormat.Xfdf);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="exportXfdf">Export XFDF</button>
-    <button v-on:click="importXfdf">Import XFDF</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields, FormFieldDataFormat
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: 'app',
-  components: {
-    'ejs-pdfviewer': PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
-    };
-  },
-
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-    ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    // Event triggers on the Export XFDF button click.
-    exportXfdf: function () {
-      // Data must be the desired path for the exported document.
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.exportFormFields('Data', FormFieldDataFormat.Xfdf);
-    },
-
-    // Event triggers on the Import XFDF button click.
-    importXfdf: function () {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      // The file for importing the form fields should be placed in the desired location and the path should be provided correctly
-      viewer.importFormFields('File', FormFieldDataFormat.Xfdf);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="exportJson">Export JSON</button>
-    <button v-on:click="importJson">Import JSON</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields, FormFieldDataFormat
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
-
-// Event triggers on the Export JSON button click.
-const exportJson = function () {
-  // Data must be the desired path for the exported document.
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.exportFormFields('Data', FormFieldDataFormat.Json);
-}
-
-// Event triggers on the Import JSON button click.
-const importJson = function () {
-  const viewer = pdfviewer.value.ej2Instances;
-  // The file for importing the form fields should be placed in the desired location and the path should be provided correctly
-  viewer.importFormFields('File', FormFieldDataFormat.Json);
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="exportJson">Export JSON</button>
-    <button v-on:click="importJson">Import JSON</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields, FormFieldDataFormat
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: 'app',
-  components: {
-    'ejs-pdfviewer': PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    // Event triggers on the Export JSON button click.
-    exportJson: function () {
-      // Data must be the desired path for the exported document.
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.exportFormFields('Data', FormFieldDataFormat.Json);
-    },
-
-    // Event triggers on the Import JSON button click.
-    importJson: function () {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      // The file for importing the form fields should be placed in the desired location and the path should be provided correctly
-      viewer.importFormFields('File', FormFieldDataFormat.Json);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="exportDataAsObject">Export Object</button>
-    <button v-on:click="importData">Import Data</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields, FormFieldDataFormat
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-let exportedData;
-
-export default {
-  name: 'app',
-  components: {
-    'ejs-pdfviewer': PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    // Event triggers on the Export Object button click.
-    exportDataAsObject: function (args) {
-      // Export the form fields data to an FDF object.
-      exportedData = this.$refs.pdfviewer.ej2Instances.exportFormFieldsAsObject(FormFieldDataFormat.Fdf);
-      //// Export the form fields data to an XFDF object.
-      //exportedData = viewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf);
-      //// Export the form fields data to an JSON object.
-      //exportedData = viewer.exportFormFieldsAsObject(FormFieldDataFormat.Json);
-    },
-
-    // Event triggers on the Import Data button click.
-    importData: function (args) {
-      // Import the form fields data from the FDF object into the current PDF document.
-      this.$refs.pdfviewer.ej2Instances.importFormFields(exportedData, FormFieldDataFormat.Fdf);
-      //// Import the form fields data from the XFDF object into the current PDF document.
-      //viewer.importFormFields(exportedData, FormFieldDataFormat.Xfdf);
-      //// Import the form fields data from the JSON object into the current PDF document.
-      //viewer.importFormFields(exportedData, FormFieldDataFormat.Json);
-    },
-
-  }
-}
-</script>
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="exportXml">Export XML</button>
-    <button v-on:click="importXml">Import XML</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields, FormFieldDataFormat
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
-
-// Event triggers on the Export XML button click.
-const exportXml = function () {
-  // Data must be the desired path for the exported document.
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.exportFormFields('Data', FormFieldDataFormat.Xml);
-}
-
-// Event triggers on the Import XML button click.
-const importXml = function () {
-  const viewer = pdfviewer.value.ej2Instances;
-  // The file for importing the form fields should be placed in the desired location and the path should be provided correctly
-  viewer.importFormFields('File', FormFieldDataFormat.Xml);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="exportXml">Export XML</button>
-    <button v-on:click="importXml">Import XML</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields, FormFieldDataFormat
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: 'app',
-  components: {
-    'ejs-pdfviewer': PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    // Event triggers on the Export XML button click.
-    exportXml: function () {
-      // Data must be the desired path for the exported document.
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.exportFormFields('Data', FormFieldDataFormat.Xml);
-    },
-
-    // Event triggers on the Import XML button click.
-    importXml: function () {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      // The file for importing the form fields should be placed in the desired location and the path should be provided correctly
-      viewer.importFormFields('File', FormFieldDataFormat.Xml);
-    },
-  }
-}
-</script>
-
-{% endhighlight %}
-{% endtabs %}
-
-## Form field properties
-
-Form field properties in Syncfusion<sup style="font-size:70%">&reg;</sup> 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<sup style="font-size:70%">&reg;</sup> 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)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="updateProperties">Update Properties</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation,
-  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
-  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
-
-// Event triggers on the Update Properties button click.
-const updateProperties = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  const formField = viewer.retrieveFormFields();
-  viewer.formDesignerModule.updateFormField(formField[0], {
-    name: 'Signature',
-    isReadOnly: true,
-    visibility: 'visible',
-    isRequired: false,
-    isPrint: true,
-    tooltip: 'Signature',
-    thickness: 4
-  });
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="updateProperties">Update Properties</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation,
-  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
-      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    // Event triggers on the Update Properties button click.
-    updateProperties: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      const formField = viewer.retrieveFormFields();
-      viewer.formDesignerModule.updateFormField(formField[0], {
-        name: 'Signature',
-        isReadOnly: true,
-        visibility: 'visible',
-        isRequired: false,
-        isPrint: true,
-        tooltip: 'Signature',
-        thickness: 4
-      });
-    },
-  }
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="updateProperties">Update Properties</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation,
-  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
-  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
-
-// Event triggers on the Update Properties button click.
-const updateProperties = function (args) {
-  viewer = pdfviewer.value.ej2Instances;
-  const formField = viewer.retrieveFormFields();
-  viewer.formDesignerModule.updateFormField(formField[0], {
-    name: 'Signature',
-    isReadOnly: true,
-    visibility: 'visible',
-    isRequired: false,
-    isPrint: true,
-    tooltip: 'Signature',
-    thickness: 4
-  });
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="updateProperties">Update Properties</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation,
-  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
-      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    // Event triggers on the Update Properties button click.
-    updateProperties: function (args) {
-      viewer = this.$refs.pdfviewer.ej2Instances;
-      const formField = viewer.retrieveFormFields();
-      viewer.formDesignerModule.updateFormField(formField[0], {
-        name: 'Signature',
-        isReadOnly: true,
-        visibility: 'visible',
-        isRequired: false,
-        isPrint: true,
-        tooltip: 'Signature',
-        thickness: 4
-      });
-    },
-  }
-}
-</script>
-
-{% 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'
-    },
-  };
-
-```
-
-![Signature Field Settings](../images/SignatureField.png)
-
-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
-    }
-  };
-
-```
-
-![Initial Field Settings](../images/InitialField.png)
-
-### 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)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="updateProperties">updateProperties</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Annotation,
-  Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
-
-// Event triggers on the Update Properties button click.
-const updateProperties = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  var formField = viewer.retrieveFormFields();
-  viewer.formDesignerModule.updateFormField(formField[0], {
-    name: 'Textbox',
-    isReadOnly: true,
-    visibility: 'visible',
-    isRequired: false,
-    isPrint: true,
-    tooltip: 'Textbox',
-    thickness: 4,
-    value: 'Textbox',
-    fontFamily: 'Courier',
-    fontSize: 10,
-    fontStyle: 'None',
-    color: 'black',
-    borderColor: 'black',
-    backgroundColor: '#daeaf7ff',
-    alignment: 'Left',
-    maxLength: 0,
-    isMultiline: false,
-    bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
-  });
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="updateProperties">updateProperties</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Annotation,
-  Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    // Event triggers on the Update Properties button click.
-    updateProperties: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      var formField = viewer.retrieveFormFields();
-      viewer.formDesignerModule.updateFormField(formField[0], {
-        name: 'Textbox',
-        isReadOnly: true,
-        visibility: 'visible',
-        isRequired: false,
-        isPrint: true,
-        tooltip: 'Textbox',
-        thickness: 4,
-        value: 'Textbox',
-        fontFamily: 'Courier',
-        fontSize: 10,
-        fontStyle: 'None',
-        color: 'black',
-        borderColor: 'black',
-        backgroundColor: '#daeaf7ff',
-        alignment: 'Left',
-        maxLength: 0,
-        isMultiline: false,
-        bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
-      });
-    }
-  }
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="updateProperties">updateProperties</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Annotation,
-  Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
-
-// Event triggers on the Update Properties button click.
-const updateProperties = function () {
-  const viewer = pdfviewer.value.ej2Instances;
-  var formField = viewer.retrieveFormFields();
-  viewer.formDesignerModule.updateFormField(formField[0], {
-    name: 'Textbox',
-    isReadOnly: true,
-    visibility: 'visible',
-    isRequired: false,
-    isPrint: true,
-    tooltip: 'Textbox',
-    thickness: 4,
-    value: 'Textbox',
-    fontFamily: 'Courier',
-    fontSize: 10,
-    fontStyle: 'None',
-    color: 'black',
-    borderColor: 'black',
-    backgroundColor: '#daeaf7ff',
-    alignment: 'Left',
-    maxLength: 0,
-    isMultiline: false,
-    bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
-  });
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="updateProperties">updateProperties</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Annotation,
-  Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    // Event triggers on the Update Properties button click.
-    updateProperties: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      var formField = viewer.retrieveFormFields();
-      viewer.formDesignerModule.updateFormField(formField[0], {
-        name: 'Textbox',
-        isReadOnly: true,
-        visibility: 'visible',
-        isRequired: false,
-        isPrint: true,
-        tooltip: 'Textbox',
-        thickness: 4,
-        value: 'Textbox',
-        fontFamily: 'Courier',
-        fontSize: 10,
-        fontStyle: 'None',
-        color: 'black',
-        borderColor: 'black',
-        backgroundColor: '#daeaf7ff',
-        alignment: 'Left',
-        maxLength: 0,
-        isMultiline: false,
-        bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
-      });
-    }
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation,
-  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
-  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
-
-const documentLoad = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.textFieldSettings = {
-    // Set the name of the form field element.
-    name: 'Textbox',
-    // Specify whether the Textbox 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 Textbox field.
-    isPrint: true,
-    // Set the text to be displayed as a tooltip.
-    tooltip: 'Textbox',
-    // Set the thickness of the Textbox field. To hide the borders, set the value to 0 (zero).
-    thickness: 4,
-    // Set the value of the form field element.
-    value: 'Textbox',
-    // Set the font family of the textbox field.
-    fontFamily: 'Courier',
-    // Set the font size of the textbox field.
-    fontSize: 10,
-    // Specify the font style
-    fontStyle: 'None',
-    // Set the font color of the textbox field.
-    color: 'black',
-    // Set the border color of the textbox field.
-    borderColor: 'black',
-    // Set the background color of the textbox field.
-    backgroundColor: '#daeaf7ff',
-    // Set the alignment of the text.
-    alignment: 'Left',
-    // Set the maximum character length.
-    maxLength: 0,
-    // Allows multiline input in the text field. FALSE, by default.
-    isMultiline: false
-  }
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation,
-  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
-      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    documentLoad: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.textFieldSettings = {
-        // Set the name of the form field element.
-        name: 'Textbox',
-        // Specify whether the Textbox 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 Textbox field.
-        isPrint: true,
-        // Set the text to be displayed as a tooltip.
-        tooltip: 'Textbox',
-        // Set the thickness of the Textbox field. To hide the borders, set the value to 0 (zero).
-        thickness: 4,
-        // Set the value of the form field element.
-        value: 'Textbox',
-        // Set the font family of the textbox field.
-        fontFamily: 'Courier',
-        // Set the font size of the textbox field.
-        fontSize: 10,
-        // Specify the font style
-        fontStyle: 'None',
-        // Set the font color of the textbox field.
-        color: 'black',
-        // Set the border color of the textbox field.
-        borderColor: 'black',
-        // Set the background color of the textbox field.
-        backgroundColor: '#daeaf7ff',
-        // Set the alignment of the text.
-        alignment: 'Left',
-        // Set the maximum character length.
-        maxLength: 0,
-        // Allows multiline input in the text field. FALSE, by default.
-        isMultiline: false
-      }
-    },
-  }
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath"
-      :documentLoad="documentLoad">
-    </ejs-pdfviewer>
-
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation,
-  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
-  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
-
-const documentLoad = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.textFieldSettings = {
-    // Set the name of the form field element.
-    name: 'Textbox',
-    // Specify whether the Textbox 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 Textbox field.
-    isPrint: true,
-    // Set the text to be displayed as a tooltip.
-    tooltip: 'Textbox',
-    // Set the thickness of the Textbox field. To hide the borders, set the value to 0 (zero).
-    thickness: 4,
-    // Set the value of the form field element.
-    value: 'Textbox',
-    // Set the font family of the textbox field.
-    fontFamily: 'Courier',
-    // Set the font size of the textbox field.
-    fontSize: 10,
-    // Specify the font style
-    fontStyle: 'None',
-    // Set the font color of the textbox field.
-    color: 'black',
-    // Set the border color of the textbox field.
-    borderColor: 'black',
-    // Set the background color of the textbox field.
-    backgroundColor: '#daeaf7ff',
-    // Set the alignment of the text.
-    alignment: 'Left',
-    // Set the maximum character length.
-    maxLength: 0,
-    // Allows multiline input in the text field. FALSE, by default.
-    isMultiline: false
-  }
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath"
-      :documentLoad="documentLoad">
-    </ejs-pdfviewer>
-
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation,
-  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
-      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    documentLoad: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.textFieldSettings = {
-        // Set the name of the form field element.
-        name: 'Textbox',
-        // Specify whether the Textbox 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 Textbox field.
-        isPrint: true,
-        // Set the text to be displayed as a tooltip.
-        tooltip: 'Textbox',
-        // Set the thickness of the Textbox field. To hide the borders, set the value to 0 (zero).
-        thickness: 4,
-        // Set the value of the form field element.
-        value: 'Textbox',
-        // Set the font family of the textbox field.
-        fontFamily: 'Courier',
-        // Set the font size of the textbox field.
-        fontSize: 10,
-        // Specify the font style
-        fontStyle: 'None',
-        // Set the font color of the textbox field.
-        color: 'black',
-        // Set the border color of the textbox field.
-        borderColor: 'black',
-        // Set the background color of the textbox field.
-        backgroundColor: '#daeaf7ff',
-        // Set the alignment of the text.
-        alignment: 'Left',
-        // Set the maximum character length.
-        maxLength: 0,
-        // Allows multiline input in the text field. FALSE, by default.
-        isMultiline: false
-      }
-    },
-  }
-}
-</script>
-
-{% endhighlight %}
-{% endtabs %}
-
-![Textbox Field Settings](../images/textbox.png)
-
-### 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)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="updateProperties">updateProperties</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Annotation,
-  Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
-
-
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]);
-
-// Event triggers on the Update Properties button click.
-const updateProperties = function () {
-  const viewer = this.$refs.pdfviewer.ej2Instances;
-  const formField = viewer.retrieveFormFields();
-  viewer.formDesignerModule.updateFormField(formField[0], {
-    name: 'Password',
-    isReadOnly: true,
-    visibility: 'visible',
-    isRequired: false,
-    isPrint: true,
-    tooltip: 'Password',
-    thickness: 4,
-    value: 'Password',
-    fontFamily: 'Courier',
-    fontSize: 10,
-    fontStyle: 'None',
-    color: 'black',
-    borderColor: 'black',
-    backgroundColor: '#daeaf7ff',
-    alignment: 'Left',
-    maxLength: 0,
-    bounds: { X: 148, Y: 229, Width: 150, Height: 24 }
-  });
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="updateProperties">updateProperties</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Annotation,
-  Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    // Event triggers on the Update Properties button click.
-    updateProperties: function () {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      const formField = viewer.retrieveFormFields();
-      viewer.formDesignerModule.updateFormField(formField[0], {
-        name: 'Password',
-        isReadOnly: true,
-        visibility: 'visible',
-        isRequired: false,
-        isPrint: true,
-        tooltip: 'Password',
-        thickness: 4,
-        value: 'Password',
-        fontFamily: 'Courier',
-        fontSize: 10,
-        fontStyle: 'None',
-        color: 'black',
-        borderColor: 'black',
-        backgroundColor: '#daeaf7ff',
-        alignment: 'Left',
-        maxLength: 0,
-        bounds: { X: 148, Y: 229, Width: 150, Height: 24 }
-      });
-    }
-  }
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="updateProperties">updateProperties</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Annotation,
-  Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])
-
-// Event triggers on the Update Properties button click.
-const updateProperties = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  var formField = viewer.retrieveFormFields();
-  viewer.formDesignerModule.updateFormField(formField[0], {
-    name: 'Password',
-    isReadOnly: true,
-    visibility: 'visible',
-    isRequired: false,
-    isPrint: true,
-    tooltip: 'Password',
-    thickness: 4,
-    value: 'Password',
-    fontFamily: 'Courier',
-    fontSize: 10,
-    fontStyle: 'None',
-    color: 'black',
-    borderColor: 'black',
-    backgroundColor: '#daeaf7ff',
-    alignment: 'Left',
-    maxLength: 0,
-    bounds: { X: 148, Y: 229, Width: 150, Height: 24 }
-  });
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="updateProperties">updateProperties</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-import {
-  PdfViewerComponent, Toolbar, Magnification, Annotation,
-  Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, FormFields, FormDesigner
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
-      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
-  },
-  methods: {
-    // Event triggers on the Update Properties button click.
-    updateProperties: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      var formField = viewer.retrieveFormFields();
-      viewer.formDesignerModule.updateFormField(formField[0], {
-        name: 'Password',
-        isReadOnly: true,
-        visibility: 'visible',
-        isRequired: false,
-        isPrint: true,
-        tooltip: 'Password',
-        thickness: 4,
-        value: 'Password',
-        fontFamily: 'Courier',
-        fontSize: 10,
-        fontStyle: 'None',
-        color: 'black',
-        borderColor: 'black',
-        backgroundColor: '#daeaf7ff',
-        alignment: 'Left',
-        maxLength: 0,
-        bounds: { X: 148, Y: 229, Width: 150, Height: 24 }
-      });
-    }
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :enableFormDesignerToolbar="false">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
-
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :enableFormDesignerToolbar="false">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  }
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :serviceUrl="serviceUrl"
-      :enableFormDesignerToolbar="false">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide } from 'vue';
-
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :serviceUrl="serviceUrl"
-      :enableFormDesignerToolbar="false">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  }
-}
-</script>
-
-{% 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.
-
-![Add a form field using the toolbar](../images/addformfield.gif)
-
-## Drag the form field
-
-Drag the selected form field to reposition it within the PDF document. See the following GIF for reference.
-
-![Drag a selected form field in the PDF Viewer](../images/dragformfield.gif)
-
-## Resize the form field
-
-Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference.
-
-![Resize a selected form field in the PDF Viewer](../images/resizeformfield.gif)
-
-## 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.
-
-![Form field general properties dialog](../images/generalproperties.png)
-
-![Form field appearance properties dialog](../images/appearanceproperties.png)
-
-![DropDown field properties dialog](../images/dropdownproperties.png)
-
-## 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.
-
-![Clipboard options for a form field in the context menu](../images/clipboardformfield.png)
-
-## 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)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="undoClicked">Undo</button>
-    <button v-on:click="redoClicked">Redo</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const undoClicked = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.undo();
-}
-const redoClicked = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.redo();
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="undoClicked">Undo</button>
-    <button v-on:click="redoClicked">Redo</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    undoClicked: function (args) {
-      const viewer = pdfviewer.value.ej2Instances;
-      viewer.undo();
-    },
-    redoClicked: function (args) {
-      const viewer = pdfviewer.value.ej2Instances;
-      viewer.redo();
-    },
-  }
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="undoClicked">Undo</button>
-    <button v-on:click="redoClicked">Redo</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const undoClicked = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.undo();
-}
-const redoClicked = function (args) {
-  const viewer = pdfviewer.value.ej2Instances;
-  viewer.redo();
-}
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-<template>
-  <div id="app">
-    <button v-on:click="undoClicked">Undo</button>
-    <button v-on:click="redoClicked">Redo</button>
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    undoClicked: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.undo();
-    },
-    redoClicked: function (args) {
-      const viewer = this.$refs.pdfviewer.ej2Instances;
-      viewer.redo();
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldAdd="formFieldAdded"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const formFieldAdded = function (args) {
-    console.log('form field page number: ' + args.pageIndex);
-    console.log('form field event name: ' + args.name);
-    console.log('form field data: ', args.field);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldAdd="formFieldAdded"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    formFieldAdded: function (args) {
-        console.log('form field page number: ' + args.pageIndex);
-        console.log('form field event name: ' + args.name);
-        console.log('form field data: ', args.field);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldClick="formFieldClicked"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const formFieldClicked = function (args) {
-    console.log('Form field event name: ' + args.name);
-    console.log('Is form field cancel: ' + args.cancel);
-    console.log('Form field data: ',  args.field);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldClick="formFieldClicked"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    formFieldClicked: function (args) {
-        console.log('Form field event name: ' + args.name);
-        console.log('Is form field cancel: ' + args.cancel);
-        console.log('Form field data: ',  args.field);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldDoubleClick="formFieldDoubleClicked"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const formFieldDoubleClicked = function (args) {
-    console.log('Form field event name: ' + args.name);
-    console.log('Is form field cancel: ' + args.cancel);
-    console.log('Form field data: ',  args.field);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldDoubleClick="formFieldDoubleClicked"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    formFieldDoubleClicked: function (args) {
-        console.log('Form field event name: ' + args.name);
-        console.log('Is form field cancel: ' + args.cancel);
-        console.log('Form field data: ',  args.field);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldFocusOut="formFieldFocusOuted"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const formFieldFocusOuted = function (args) {
-    console.log('Form field event name: ' + args.name);
-    console.log('Is form field cancel: ' + args.cancel);
-    console.log('Form field data: ',  args.field);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldFocusOut="formFieldFocusOuted"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    formFieldFocusOuted: function (args) {
-        console.log('Form field event name: ' + args.name);
-        console.log('Is form field cancel: ' + args.cancel);
-        console.log('Form field data: ',  args.field);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldMouseLeave="formFieldMouseLeaved"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const formFieldMouseLeaved = function (args) {
-    console.log('Form field event name: ' + args.name);
-    console.log('Is form field cancel: ' + args.cancel);
-    console.log('Form field data: ',  args.field);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldMouseLeave="formFieldMouseLeaved"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    formFieldMouseLeaved: function (args) {
-        console.log('Form field event name: ' + args.name);
-        console.log('Is form field cancel: ' + args.cancel);
-        console.log('Form field data: ',  args.field);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldMouseover="formFieldMouseovered"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const formFieldMouseovered = function (args) {
-    console.log('form field page number: ', args.pageIndex);
-    console.log('form field event name: ' + args.name);
-    console.log('form field data: ', args.field);
-    console.log(' mouse over x position '+ args.X + ' mouse over y position '+ args.Y );
-    console.log(' mouse over X position respect to the page '+ args.pageX + ' mouse over Y position respect to the page '+ args.pageY);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldMouseover="formFieldMouseovered"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    formFieldMouseovered: function (args) {
-        console.log('form field page number: ', args.pageIndex);
-        console.log('form field event name: ' + args.name);
-        console.log('form field data: ', args.field);
-        console.log(' mouse over x position '+ args.X + ' mouse over y position '+ args.Y );
-        console.log(' mouse over X position respect to the page '+ args.pageX + ' mouse over Y position respect to the page '+ args.pageY);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldMove="formFieldMoved"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const formFieldMoved = function (args) {
-    console.log('form field page number: ', args.pageIndex);
-    console.log('form field event name: ' + args.name);
-    console.log('form field data: ', args.field);
-    console.log('mouse current position '+ args.currentPosition);
-    console.log('mouse current position '+ args.previousPosition);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldMove="formFieldMoved"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    formFieldMoved: function (args) {
-        console.log('form field page number: ', args.pageIndex);
-        console.log('form field event name: ' + args.name);
-        console.log('form field data: ', args.field);
-        console.log('mouse current position '+ args.currentPosition);
-        console.log('mouse current position '+ args.previousPosition);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldPropertiesChange="formFieldPropertiesChanged"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const formFieldPropertiesChanged = function (args) {
-    console.log('form field page number: ', args.pageIndex);
-    console.log('form field event name: ' + args.name);
-    console.log('form field data: ', args.field);
-    console.log('Whether form field alignment changed '+ args.isAlignmentChanged);
-    console.log('Whether form field backgropund color changed '+ args.isBackgroundColorChanged);
-    console.log('Whether form field border color changed '+ args.isBorderColorChanged);
-    console.log('Whether form field border width changed '+ args.isBorderWidthChanged);
-    console.log('Whether form field color changed changed '+ args.isColorChanged);
-    console.log('Whether form field custom data changed '+ args.isCustomDataChanged);
-    console.log('Whether form field font family changed '+ args.isFontFamilyChanged);
-    console.log('Whether form field font size changed '+ args.isFontSizeChanged);
-    console.log('Whether form field font style changed '+ args.isFontStyleChanged);
-    console.log('Whether form field maximum length changed '+ args.isMaxLengthChanged);
-    console.log('Whether form field name changed '+ args.isNameChanged);
-    console.log('Whether form field readonly changed '+ args.isReadOnlyChanged);
-    console.log('Whether form field required changed '+ args.isRequiredChanged);
-    console.log('Whether form field print changed '+ args.isPrintChanged);
-    console.log('Whether form field tool tip changed '+ args.isToolTipChanged);
-    console.log('Whether form field visiblity changed '+ args.isVisibilityChanged);
-    console.log('Whether form field value changed '+ args.isValueChanged);
-    console.log('Whether form field new value changed '+ args.newValue);
-    console.log('Whether form field old valuue changed '+ args.oldValue);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldPropertiesChange="formFieldPropertiesChanged"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    formFieldPropertiesChanged: function (args) {
-        console.log('form field page number: ', args.pageIndex);
-        console.log('form field event name: ' + args.name);
-        console.log('form field data: ', args.field);
-        console.log('Whether form field alignment changed '+ args.isAlignmentChanged);
-        console.log('Whether form field backgropund color changed '+ args.isBackgroundColorChanged);
-        console.log('Whether form field border color changed '+ args.isBorderColorChanged);
-        console.log('Whether form field border width changed '+ args.isBorderWidthChanged);
-        console.log('Whether form field color changed changed '+ args.isColorChanged);
-        console.log('Whether form field custom data changed '+ args.isCustomDataChanged);
-        console.log('Whether form field font family changed '+ args.isFontFamilyChanged);
-        console.log('Whether form field font size changed '+ args.isFontSizeChanged);
-        console.log('Whether form field font style changed '+ args.isFontStyleChanged);
-        console.log('Whether form field maximum length changed '+ args.isMaxLengthChanged);
-        console.log('Whether form field name changed '+ args.isNameChanged);
-        console.log('Whether form field readonly changed '+ args.isReadOnlyChanged);
-        console.log('Whether form field required changed '+ args.isRequiredChanged);
-        console.log('Whether form field print changed '+ args.isPrintChanged);
-        console.log('Whether form field tool tip changed '+ args.isToolTipChanged);
-        console.log('Whether form field visiblity changed '+ args.isVisibilityChanged);
-        console.log('Whether form field value changed '+ args.isValueChanged);
-        console.log('Whether form field new value changed '+ args.newValue);
-        console.log('Whether form field old valuue changed '+ args.oldValue);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldRemove="formFieldRemoved"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const formFieldRemoved = function (args) {
-    console.log('form field page number: ', args.pageIndex);
-    console.log('form field event name: ' + args.name);
-    console.log('form field data: ', args.field);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldRemove="formFieldRemoved"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    formFieldRemoved: function (args) {
-        console.log('form field page number: ', args.pageIndex);
-        console.log('form field event name: ' + args.name);
-        console.log('form field data: ', args.field);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldResize="formFieldResized"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const formFieldResized = function (args) {
-    console.log('form field page number: ', args.pageIndex);
-    console.log('form field event name: ' + args.name);
-    console.log('form field data: ', args.field);
-    console.log('form field current position: ', args.currentPosition);
-    console.log('form field previous position: ', args.previousPosition);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldResize="formFieldResized"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    formFieldResized: function (args) {
-        console.log('form field page number: ', args.pageIndex);
-        console.log('form field event name: ' + args.name);
-        console.log('form field data: ', args.field);
-        console.log('form field current position: ', args.currentPosition);
-        console.log('form field previous position: ', args.previousPosition);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldSelect="formFieldSelected"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const formFieldSelected = function (args) {
-    console.log('form field page number: ', args.pageIndex);
-    console.log('form field event name: ' + args.name);
-    console.log('form field data: ', args.field);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldSelect="formFieldSelected"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    formFieldSelected: function (args) {
-        console.log('form field page number: ', args.pageIndex);
-        console.log('form field event name: ' + args.name);
-        console.log('form field data: ', args.field);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldUnselect="formFieldUnselected"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const formFieldUnselected = function (args) {
-    console.log('form field page number: ', args.pageIndex);
-    console.log('form field event name: ' + args.name);
-    console.log('form field data: ', args.field);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :formFieldUnselect="formFieldUnselected"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    formFieldUnselected: function (args) {
-        console.log('form field page number: ', args.pageIndex);
-        console.log('form field event name: ' + args.name);
-        console.log('form field data: ', args.field);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :validateFormFields="validateFormField"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script setup>
-
-import {
-  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-import { provide, ref } from 'vue';
-
-const pdfviewer = ref(null);
-const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
-
-provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
-
-const validateFormField = function (args) {
-    console.log('form field event name: ' + args.name);
-    console.log('form field document name: ' + args.documentName);
-    console.log('form field data: ', args.formField);
-    console.log('non fillable form field details: ', args.nonFillableFields);
-}
-
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<template>
-  <div id="app">
-    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :validateFormFields="validateFormField"
-      :resourceUrl="resourceUrl">
-    </ejs-pdfviewer>
-  </div>
-</template>
-
-<script>
-
-import {
-  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-  Annotation, FormDesigner, FormFields
-} from '@syncfusion/ej2-vue-pdfviewer';
-
-export default {
-  name: "App",
-  components: {
-    "ejs-pdfviewer": PdfViewerComponent
-  },
-  data() {
-    return {
-      documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-    };
-  },
-  provide: {
-    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
-  },
-  methods: {
-    validateFormField: function (args) {
-        console.log('form field event name: ' + args.name);
-        console.log('form field document name: ' + args.documentName);
-        console.log('form field data: ', args.formField);
-        console.log('non fillable form field details: ', args.nonFillableFields);
-    },
-  }
-}
-</script>
-
-{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const meta = { businessId: 'C-1024', tags: ['profile','kiosk'], requiredRole: 'admin' };
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'Email',
+        bounds: { X: 146, Y: 229, Width: 200, Height: 24 },
+        customData: meta
+      });
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Example for textbox defaults
+      pdfviewer.textFieldSettings = {
+        name: 'Textbox',
+        customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' }
+      };
+
+      // Example for checkbox defaults
+      pdfviewer.checkBoxFieldSettings = {
+        name: 'Checkbox',
+        customData: { consentType: 'marketing', defaultChecked: false }
+      };
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const fields = pdfviewer.retrieveFormFields();
+      const target = fields.find((f) => f.name === 'Email');
+      if (target) {
+        const merged = Object.assign({}, target.customData || {}, { updatedAt: Date.now(), verified: true });
+        pdfviewer.formDesignerModule.updateFormField(target, { customData: merged });
+      }
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const fields = pdfviewer.retrieveFormFields();
+      fields.forEach((f) => {
+        console.log('Field:', f.name, 'customData:', f.customData);
+        if (f.customData && f.customData.requiredRole === 'admin') {
+          // mark field for special handling
+        }
+      });
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Read-only Textbox
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'EmployeeId',
+        bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+        isReadOnly: true,
+        value: 'EMP-0001'
+      });
+
+      // Read-only Signature field
+      pdfviewer.formDesignerModule.addFormField('SignatureField', {
+        name: 'ApplicantSign',
+        bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+        isReadOnly: true,
+        tooltip: 'Sign to accept the terms'
+      });
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // 1) Default for new Textbox fields
+      pdfviewer.textFieldSettings = { isRequired: true };
+
+      // 2) Validation wiring
+      pdfviewer.enableFormFieldsValidation = true;
+      pdfviewer.validateFormFields = (args) => {
+        if (args && args.formField && args.formField.length > 0) {
+          alert('Please fill all required fields. Missing: ' + args.formField[0].name);
+        }
+      };
+
+      // 3) Creation (add a Textbox form field)
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'Email',
+        bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+        isRequired: true,
+        tooltip: 'Email is required'
+      });
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // 1) Default for new signature fields
+      pdfviewer.signatureFieldSettings = { isPrint: false };
+
+      // 2) Creation (do not print a signature field)
+      pdfviewer.formDesignerModule.addFormField('SignatureField', {
+        name: 'ApplicantSign',
+        bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+        isPrint: false
+      });
+
+      // 3) Update existing field (toggle to print)
+      const sign = pdfviewer.formFieldCollections.find(f => f.name === 'ApplicantSign');
+      if (sign) {
+        pdfviewer.formDesignerModule.updateFormField(sign, { isPrint: true });
+      }
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Read-only Textbox that is printed but not required
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'EmployeeId',
+        bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+        isReadOnly: true,
+        isRequired: false,
+        isPrint: true,
+        value: 'EMP-0001'
+      });
+
+      // Required Signature field that is not included in print
+      pdfviewer.formDesignerModule.addFormField('SignatureField', {
+        name: 'ApplicantSign',
+        bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+        isReadOnly: false,
+        isRequired: true,
+        isPrint: false,
+        tooltip: 'Sign to accept the terms'
+      });
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Add a sample textbox
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'Email',
+        bounds: { X: 146, Y: 260, Width: 220, Height: 24 }
+      });
+
+      // Retrieve it and update constraint flags
+      const field = pdfviewer.formFieldCollections.find(f => f.name === 'Email');
+      if (field) {
+        pdfviewer.formDesignerModule.updateFormField(field, {
+          isReadOnly: false,
+          isRequired: true,
+          isPrint: true,
+          tooltip: 'Enter a valid email'
+        });
+      }
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Textbox fields will be editable, required, and included in print by default
+      pdfviewer.textFieldSettings = {
+        isReadOnly: false,
+        isRequired: true,
+        isPrint: true,
+        tooltip: 'Required field'
+      };
+
+      // Signature fields will be optional and hidden when printing
+      pdfviewer.signatureFieldSettings = {
+        isReadOnly: false,
+        isRequired: false,
+        isPrint: false,
+        tooltip: 'Sign if applicable'
+      };
+    },
+  },
+};
+</script>
+{% 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..3de5654bb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md
@@ -0,0 +1,223 @@
+---
+layout: post
+title: Form Designer and Toolbar Customization in TypeScript | Syncfusion
+description: Learn here all about form designer and toolbar in Syncfusion TypeScript PDF Viewer of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Designer in TypeScript 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/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the [enableFormDesigner](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformdesigner) API to show or hide the Form Designer option in the main toolbar.
+
+```ts
+import {
+  PdfViewer,
+  FormFields,
+  FormDesigner,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(
+  FormFields,
+  FormDesigner,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch
+);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath =
+  'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl =
+  'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.enableFormDesigner = false;
+pdfviewer.appendTo('#PdfViewer');
+```
+
+## Form Designer UI
+
+When [Form Designer mode](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesigner) 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 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.
+
+![FormDesigner](../images/FormDesigner.gif)
+
+{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
+
+For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) in TypeScript PDF Viewer documentation.
+
+## Form Designer Toolbar
+
+The **Form Designer toolbar** appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as:
+
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
+
+Each toolbar item allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document.
+
+![Adding Text Box](../images/AddTextBox.gif)
+
+Use the following Code-snippet to enable Form Designer by injecting **Form Designer mode** Module.
+
+```ts
+import {
+  PdfViewer,
+  FormFields,
+  FormDesigner,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(
+  FormFields,
+  FormDesigner,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch
+);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath =
+  'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl =
+  'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.enableFormDesigner = false;
+pdfviewer.appendTo('#PdfViewer');
+```
+
+For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation in TypeScript PDF Viewer documentation](./manage-form-fields/create-form-fields).
+
+## Show or Hide the Built-in Form Designer Toolbar
+
+You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/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
+
+```html
+<!-- Buttons to toggle the Form Designer toolbar -->
+<button id="showDesignerBtn">Show Form Designer Toolbar</button>
+<button id="hideDesignerBtn">Hide Form Designer Toolbar</button>
+```
+```ts
+//  Wire up buttons 
+document.getElementById('showDesignerBtn')!.onclick = () => {
+  pdfviewer.isFormDesignerToolbarVisible=true;
+};
+document.getElementById('hideDesignerBtn')!.onclick = () => {
+  pdfviewer.isFormDesignerToolbarVisible=false;
+};
+```
+
+## 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/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.
+
+```ts
+//Customize the Built-in Form Designer Toolbar
+pdfviewer.toolbarSettings = {
+    formDesignerToolbarItems: [
+        "TextboxTool",
+        "PasswordTool",
+        "CheckBoxTool",
+        "RadioButtonTool",
+        "DropdownTool",
+        "ListboxTool",
+        "DrawSignatureTool",
+        "DeleteTool"
+    ]
+};
+```
+
+## 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.
+
+![Moveing and Resizing a form field](../images/move-resize-forms.gif)
+
+- 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..7cf1a624a
--- /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 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      @formFieldAdd="onFormFieldAdd"
+      @formFieldRemove="onFormFieldRemove"
+      @formFieldPropertiesChange="onFormFieldPropertiesChange"
+      @formFieldClick="onFormFieldClick"
+      @formFieldDoubleClick="onFormFieldDoubleClick"
+      @formFieldFocusOut="onFormFieldFocusOut"
+      @formFieldMouseOver="onFormFieldMouseOver"
+      @formFieldMouseLeave="onFormFieldMouseLeave"
+      @formFieldMove="onFormFieldMove"
+      @formFieldResize="onFormFieldResize"
+      @formFieldSelect="onFormFieldSelect"
+      @formFieldUnselect="onFormFieldUnselect"
+      @validateFormFields="onValidateFormFields"
+      style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onFormFieldAdd(args) { console.log('formFieldAdd', args); },
+    onFormFieldRemove(args) { console.log('formFieldRemove', args); },
+    onFormFieldPropertiesChange(args) { console.log('formFieldPropertiesChange', args); },
+    onFormFieldClick(args) { console.log('formFieldClick', args); },
+    onFormFieldDoubleClick(args) { console.log('formFieldDoubleClick', args); },
+    onFormFieldFocusOut(args) { console.log('formFieldFocusOut', args); },
+    onFormFieldMouseOver(args) { console.log('formFieldMouseOver', args); },
+    onFormFieldMouseLeave(args) { console.log('formFieldMouseLeave', args); },
+    onFormFieldMove(args) { console.log('formFieldMove', args); },
+    onFormFieldResize(args) { console.log('formFieldResize', args); },
+    onFormFieldSelect(args) { console.log('formFieldSelect', args); },
+    onFormFieldUnselect(args) { console.log('formFieldUnselect', args); },
+    onValidateFormFields(args) {
+      if (args && args.formField && args.formField.length > 0) {
+        args.cancel = true;
+        alert('Please fill all required fields. Missing: ' + args.formField[0].name);
+        // Optionally focus or scroll to the field via EJ2 instance
+        //const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      }
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <button id="updateFormFields">updateFormFields</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+  import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer],
+  },
+  mounted() {
+    const btn = document.getElementById('updateFormFields');
+    if (btn) {
+      btn.onclick = () => {
+        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+        const fields = pdfviewer.retrieveFormFields();
+        const field = fields.find((f) => f.name === 'First Name') || fields[0];
+        if (field) {
+          field.value = 'John Doe';
+          field.tooltip = 'First';
+          pdfviewer.updateFormFieldsValue(field);
+        }
+      };
+    }
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <button id="updateFormFields">updateFormFields</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  mounted() {
+    const btn = document.getElementById('updateFormFields');
+    if (btn) {
+      btn.onclick = () => {
+        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+        const fields = pdfviewer.retrieveFormFields();
+        const field = fields.find((f) => f.name === 'First Name') || fields[0];
+        if (field) {
+          pdfviewer.formDesignerModule.updateFormField(field, {
+            value: 'John',
+            fontFamily: 'Courier',
+            fontSize: 12,
+            color: 'black',
+            backgroundColor: 'white',
+            borderColor: 'black',
+            thickness: 2,
+            alignment: 'Left',
+            maxLength: 50,
+          });
+        }
+      };
+    }
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## retrieveFormFields
+
+Retrieves all form fields and their properties or filters by type/name.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button id="retrieveFormFields">retrieveFormFields</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  mounted() {
+    const btn = document.getElementById('retrieveFormFields');
+    if (btn) {
+      btn.onclick = () => {
+        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+        const fields = pdfviewer.retrieveFormFields();
+        console.log(fields);
+      };
+    }
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## resetFormFields
+
+Resets specified form fields or all fields to their default values.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button id="resetFormFields">resetFormFields</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  mounted() {
+    const btn = document.getElementById('resetFormFields');
+    if (btn) {
+      btn.onclick = () => {
+        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+        pdfviewer.resetFormFields();
+      };
+    }
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <button id="importFormFields">importFormFields</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  mounted() {
+    const btn = document.getElementById('importFormFields');
+    if (btn) {
+      btn.onclick = () => {
+        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+        pdfviewer.importFormFields('File', FormFieldDataFormat.Json);
+      };
+    }
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## focusFormField
+
+Moves focus to a form field by name or ID.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button id="focusFormField">focusFormField</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  mounted() {
+    const btn = document.getElementById('focusFormField');
+    if (btn) {
+      btn.onclick = () => {
+        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+        pdfviewer.focusFormField('FirstName');
+      };
+    }
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## exportFormFieldsAsObject
+
+Exports current form field values and states as a JSON object.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button id="exportFormFieldsAsObject">exportFormFieldsAsObject</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  mounted() {
+    const btn = document.getElementById('exportFormFieldsAsObject');
+    if (btn) {
+      btn.onclick = () => {
+        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+        pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then((data) => {
+          console.log('Exported object:', data);
+        });
+      };
+    }
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## exportFormFields
+
+Exports form field data to a file for download.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button id="exportFormFields">exportFormFields</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  mounted() {
+    const btn = document.getElementById('exportFormFields');
+    if (btn) {
+      btn.onclick = () => {
+        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+        pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json);
+      };
+    }
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## clearFormFields
+
+Clears values of specified or all fields without removing the fields themselves.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button id="clearFormFields">clearFormFields</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  mounted() {
+    const btn = document.getElementById('clearFormFields');
+    if (btn) {
+      btn.onclick = () => {
+        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+        const field = pdfviewer.retrieveFormFields();
+        pdfviewer.clearFormFields(field[0]);
+      };
+    }
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## isFormFieldDocument
+
+Returns true if the loaded document contains one or more form fields.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button id="checkFormFieldDocument">checkFormFieldDocument</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  mounted() {
+    const element = document.getElementById('checkFormFieldDocument');
+    if (element) {
+      element.onclick = () => {
+        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+        console.log(pdfviewer.isFormFieldDocument);
+      };
+    }
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" @documentLoad="onDocumentLoad" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Open the Form Designer toolbar and read its visibility state
+      pdfviewer.enableFormDesignerToolbar(true);
+      console.log(pdfviewer.isFormDesignerToolbarVisible);
+    },
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## formFieldCollections
+
+Gets the current collection of form fields with their properties from the viewer instance.
+
+```html
+<button id="formfieldcollection">formfieldcollection</button>
+```
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button id="formfieldcollection">formfieldcollection</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  mounted() {
+    const element = document.getElementById('formfieldcollection');
+    if (element) {
+      element.onclick = () => {
+        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+        console.log(pdfviewer.formFieldCollections);
+      };
+    }
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormFieldsValidation
+
+Enables or disables built-in validation for required and constrained fields.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  mounted() {
+    const element = document.getElementById('checkFormFieldDocument');
+    if (element) {
+      element.onclick = () => {
+        const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+        console.log(pdfviewer.isFormFieldDocument);
+      };
+    }
+  },
+};
+</script>
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      pdfviewer.enableFormFieldsValidation = true;
+    },
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormFields
+
+Enables or disables user interaction with form fields globally.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" @documentLoad="onDocumentLoad" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      pdfviewer.enableFormFields = false; // Disable interaction with all fields
+    },
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormDesignerToolbar
+
+Shows or hides the Form Designer toolbar at runtime.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" @documentLoad="onDocumentLoad" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      pdfviewer.enableFormDesignerToolbar(true); // show
+      // pdfviewer.enableFormDesignerToolbar(false); // hide
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <button @click="fillForm">Fill Form Fields</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer],
+  },
+  methods: {
+    fillForm() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const fields = pdfviewer.retrieveFormFields?.() || pdfviewer.formFieldCollection || [];
+      const field = fields.find((f) => f?.name === 'name') || fields[0];
+      if (field) {
+        field.value = 'John Doe';
+        field.tooltip = 'First';
+        pdfviewer.updateFormFieldsValue(field);
+      } else {
+        console.warn('No form fields available to update.');
+      }
+    },
+  },
+};
+</script>
+{% 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.
+
+![Form Filling](../../javascript-es6/images/FormFields.gif)
+
+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)" %}
+<template>
+  <div>
+    <button @click="importJson">Import JSON</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+  FormFieldDataFormat
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer],
+  },
+  methods: {
+    importJson() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // The file for importing should be accessible at the given path or as a file stream depending on your integration
+      pdfviewer.importFormFields('File', FormFieldDataFormat.Json);
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" @documentLoad="onDocumentLoad" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  provide: {
+    PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer],
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      pdfviewer.enableFormFieldsValidation = true;
+
+      // Add required fields
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'Email',
+        bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+        isRequired: true,
+        tooltip: 'Email is required',
+      });
+
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'Phone',
+        bounds: { X: 146, Y: 300, Width: 220, Height: 24 },
+        isRequired: true,
+        tooltip: 'Phone number is required',
+      });
+
+      // Validate only the added fields
+      pdfviewer.validateFormFields = (args) => {
+        const fields = pdfviewer.retrieveFormFields();
+        fields.forEach((field) => {
+          if ((field.name === 'Email' || field.name === 'Phone') && !field.value) {
+            alert(field.name + ' field cannot be empty.');
+            args.isFormSubmitCancelled = true;
+          }
+        });
+      };
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div id="app">
+    <ejs-pdfviewer
+      id="pdfViewer"
+      ref="pdfviewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      style="height: 640px"
+      @documentLoad="onDocumentLoad"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  name: 'App',
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent,
+  },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  provide: {
+    PdfViewer: [
+      Toolbar,
+      Magnification,
+      Navigation,
+      Annotation,
+      TextSelection,
+      TextSearch,
+      FormFields,
+      FormDesigner,
+      PageOrganizer,
+    ],
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+
+      // 1) Default for new Textbox fields
+      pdfviewer.textFieldSettings = { isRequired: true };
+
+      // 2) Validation wiring
+      pdfviewer.enableFormFieldsValidation = true;
+      pdfviewer.validateFormFields = (args) => {
+        // Triggers when required fields are empty on submit/validate
+        if (args && args.formField && args.formField.length > 0) {
+          alert('Please fill all required fields. Missing: ' + args.formField[0].name);
+        }
+      };
+
+      // 3) Creation (add a Textbox form field)
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'Email',
+        bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+        isRequired: true,
+        tooltip: 'Email is required',
+      });
+    },
+  },
+};
+</script>
+{% 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.
+
+![Grouping textboxes with the same name](../../javascript-es6/images/groupTextFileds.png)
+
+![Grouping radio buttons with the same name](../../javascript-es6/images/groupRadiobutton.png)
+
+## 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)" %}
+<template>
+  <div id="app">
+    <ejs-pdfviewer
+      id="pdfViewer"
+      ref="pdfviewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      style="height: 640px"
+      @documentLoad="onDocumentLoad"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  name: 'App',
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent,
+  },
+  data() {
+    return {
+      // ❗ Remove the leading space
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  provide: {
+    // ✅ Keep the key name exactly as 'PdfViewer'
+    PdfViewer: [
+      Toolbar,
+      Magnification,
+      Navigation,
+      Annotation,
+      TextSelection,
+      TextSearch,
+      FormFields,
+      FormDesigner,
+      PageOrganizer,
+    ],
+  },
+  methods: {
+    onDocumentLoad() {
+      // Get the EJ2 instance from the Vue wrapper
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+
+      // Textbox group: same name => mirrored value
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'EmployeeId',
+        bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+      });
+
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'EmployeeId',
+        bounds: { X: 338, Y: 229, Width: 150, Height: 24 },
+      });
+
+      // Radio group: same name => exclusive selection
+      pdfviewer.formDesignerModule.addFormField('RadioButton', {
+        name: 'Gender',
+        bounds: { X: 148, Y: 289, Width: 18, Height: 18 },
+        isSelected: false,
+      });
+
+      pdfviewer.formDesignerModule.addFormField('RadioButton', {
+        name: 'Gender',
+        bounds: { X: 292, Y: 289, Width: 18, Height: 18 },
+        isSelected: false,
+      });
+
+      // CheckBox group: same name => mirrored checked state
+      pdfviewer.formDesignerModule.addFormField('CheckBox', {
+        name: 'Subscribe',
+        bounds: { X: 56, Y: 664, Width: 20, Height: 20 },
+        isChecked: false,
+      });
+
+      pdfviewer.formDesignerModule.addFormField('CheckBox', {
+        name: 'Subscribe',
+        bounds: { X: 242, Y: 664, Width: 20, Height: 20 },
+        isChecked: false,
+      });
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <button @click="exportFdf">Export FDF</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    exportFdf() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Destination is optional; if omitted the browser will prompt.
+      pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);
+    }
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### Export as XFDF
+The following example exports form field data as XFDF.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button @click="exportXfdf">Export XFDF</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    exportXfdf() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
+    }
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### Export as JSON
+The following example exports form field data as JSON.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button @click="exportJson">Export JSON</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    exportJson() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json);
+    }
+  }
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <button @click="exportObj">Export Object</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+      exportedData: null
+    };
+  },
+  methods: {
+    exportObj() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => {
+        this.exportedData = data; // Persist or send to server
+        console.log('Exported object:', this.exportedData);
+      });
+    }
+  }
+};
+</script>
+{% 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..94768c629
--- /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.
+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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer
+      id="pdfViewer"
+      ref="pdfviewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      @importStart="onImportStart"
+      @importSuccess="onImportSuccess"
+      @importFailed="onImportFailed"
+      style="height:640px"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onImportStart(args) {
+      console.log('Import started', args);
+      // e.g. show spinner, validate inputs
+    },
+    onImportSuccess(args) {
+      console.log('Import success', args);
+      // e.g. hide spinner, show toast
+    },
+    onImportFailed(args) {
+      console.error('Import failed', args);
+      // e.g. show error dialog
+    }
+  }
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer
+      id="pdfViewer"
+      ref="pdfviewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      @exportStart="onExportStart"
+      @exportSuccess="onExportSuccess"
+      @exportFailed="onExportFailed"
+      style="height:640px"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onExportStart(args) {
+      console.log('Export started', args);
+      // e.g. disable export UI
+    },
+    onExportSuccess(args) {
+      console.log('Export success', args);
+      // e.g. enable UI, provide download link
+    },
+    onExportFailed(args) {
+      console.error('Export failed', args);
+      // e.g. re-enable UI, notify user
+    }
+  }
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <button @click="importFdf">Import FDF</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    importFdf() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // The file for importing should be accessible at the given path or as a file stream depending on your integration
+      pdfviewer.importFormFields('File', FormFieldDataFormat.Fdf);
+    }
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### Import XFDF
+
+The following example imports XFDF data.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button @click="importXfdf">Import XFDF</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    importXfdf() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // The file for importing should be accessible at the given path or as a file stream depending on your integration
+      pdfviewer.importFormFields('File', FormFieldDataFormat.Xfdf);
+    }
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### Import JSON
+
+The following example imports JSON form data.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button @click="importJson">Import JSON</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+import { FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    importJson() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // The file for importing should be accessible at the given path or as a file stream depending on your integration
+      pdfviewer.importFormFields('File', FormFieldDataFormat.Json);
+    }
+  }
+};
+</script>
+{% 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.
+
+![Adding a form field using the Form Designer UI](../../../javascript-es6/images/FormDesigner.gif)
+
+## 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Add Text Box using addFormField
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'First Name',
+        bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+        pageNumber: 1,
+        isRequired: true,
+        tooltip: 'Enter your first name'
+      });
+    },
+  },
+};
+</script>
+{% 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**.
+![Textbox properties panel](../../../javascript-es6/images/ui-textbox-edit.png)
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Add Text Box using addFormField
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'FirstName',
+        pageNumber: 1,
+        bounds: { X: 100, Y: 150, Width: 200, Height: 24 },
+        isRequired: true,
+        tooltip: 'Enter your first name',
+        maxLength: 40
+      });
+    },
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### Password
+
+**Add via Toolbar (UI)**
+- Select **Password** → place it → configure tooltip, required, max length.
+![Password Properties Panel](../../../javascript-es6/images/ui-password-edit.png)
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Add Password Field
+      pdfviewer.formDesignerModule.addFormField('Password', {
+        name: 'AccountPassword',
+        pageNumber: 1,
+        bounds: { X: 100, Y: 190, Width: 200, Height: 24 },
+        isRequired: true,
+        maxLength: 32,
+        tooltip: 'Enter a secure password',
+      });
+    },
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### CheckBox
+**Add via Toolbar (UI)**
+- Select **CheckBox** → click to place → duplicate for options → set isChecked, tooltip, appearance.
+![CheckBox Properties Panel](../../../javascript-es6/images/ui-checkbox-edit.png)
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Add CheckBox Field
+      pdfviewer.formDesignerModule.addFormField('CheckBox', {
+        name: 'AgreeTerms',
+        pageNumber: 1,
+        bounds: { X: 100, Y: 230, Width: 18, Height: 18 },
+        isChecked: false,
+        tooltip: 'I agree to the terms',
+      });
+    },
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### RadioButton
+**Add via Toolbar (UI)**
+- Select **RadioButton** → place buttons with the **same Name** to group → configure selection/colors.
+![Radio Button Properties Panel](../../../javascript-es6/images/ui-radiobutton-edit.png)
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Add Radio Buttons
+      pdfviewer.formDesignerModule.addFormField('RadioButton', {
+        name: 'Gender',
+        value: 'Male',
+        pageNumber: 0,
+        bounds: { X: 100, Y: 270, Width: 16, Height: 16 }
+      });
+      pdfviewer.formDesignerModule.addFormField('RadioButton', {
+        name: 'Gender',
+        value: 'Female',
+        pageNumber: 0,
+        bounds: { X: 160, Y: 270, Width: 16, Height: 16 }
+      });
+    },
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### ListBox
+**Add via Toolbar (UI)**
+- Select **ListBox** → place → add items in **Properties**.
+![ListBox Properties Panel](../../../javascript-es6/images/ui-listbox-edit.png)
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const option = [
+        { itemName: 'Item 1', itemValue: 'item1' },
+        { itemName: 'Item 2', itemValue: 'item2' },
+        { itemName: 'Item 3', itemValue: 'item3' }
+      ];
+      pdfviewer.formDesignerModule.addFormField('ListBox', {
+        name: 'States',
+        pageNumber: 1,
+        bounds: { X: 100, Y: 310, Width: 220, Height: 70 },
+        options: option,
+      });
+    },
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### DropDown
+**Add via Toolbar (UI)**
+- Select **DropDown** → place → add items → set default value.
+![DropDown Properties Panel](../../../javascript-es6/images/ui-dropdown-edit.png)
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const options = [
+        { itemName: 'Item 1', itemValue: 'item1' },
+        { itemName: 'Item 2', itemValue: 'item2' },
+        { itemName: 'Item 3', itemValue: 'item3' },
+      ];
+      pdfviewer.formDesignerModule.addFormField('DropDown', {
+        name: 'Country',
+        options,
+        bounds: { X: 560, Y: 320, Width: 150, Height: 24 },
+      });
+    },
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### Signature Field
+**Add via Toolbar (UI)**
+- Select **Signature Field** → place where signing is required → configure indicator text, thickness, tooltip, required.
+![Signature Field](../../../javascript-es6/images/ui-signature-edit.png)
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Add Signature Field
+      pdfviewer.formDesignerModule.addFormField('SignatureField', {
+        name: 'Sign',
+        bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+        tooltip: 'sign Here',
+        isRequired: true,
+      });
+    },
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### Initial Field
+**Add via Toolbar (UI)**
+- Select **Initial Field** → place where initials are needed → configure text and required state.
+![Initial field Properties Panel](../../../javascript-es6/images/ui-initial-edit.png)
+
+**Add Programmatically (API)**
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Add Initial Field
+      pdfviewer.formDesignerModule.addFormField('InitialField', {
+        name: 'Sign',
+        bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+        tooltip: 'sign Here',
+        isRequired: true,
+      });
+    },
+  },
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <button @click="editTextbox">EditTextBox</button>
+    <button @click="addPasswordField">Add Form Field</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    editTextbox() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Retrieve form fields collection
+      const fields = pdfviewer.retrieveFormFields();
+      // Find the textbox field by name (Here field name is First Name)
+      const field = fields.find(f => f.name === 'First Name') || fields[0];
+      if (field) {
+        // Update textbox field styling and value
+        pdfviewer.formDesignerModule.updateFormField(field, {
+          value: 'John',
+          fontFamily: 'Courier',
+          fontSize: 12,
+          fontStyle: 'None',
+          color: 'black',
+          backgroundColor: 'white',
+          borderColor: 'black',
+          thickness: 2,
+          alignment: 'Left',
+          maxLength: 50
+        });
+      }
+    },
+    addPasswordField() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      if (pdfviewer) {
+        pdfviewer.formDesignerModule.setFormFieldMode('Password');
+      }
+    }
+  },
+};
+</script>
+{% 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
+![Textbox style from UI](../../../javascript-es6/images/ui-textbox-style.png)
+
+## 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)" %}
+<template>
+  <div>
+    <button @click="updateTextboxStyle">Update Textbox Style</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    updateTextboxStyle() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Retrieve form fields collection
+      const fields = pdfviewer.retrieveFormFields();
+      // Find the textbox field by name
+      const tb = fields.find(f => f.name === 'First Name') || fields[0];
+      if (tb) {
+        // Update textbox field styling
+        pdfviewer.formDesignerModule.updateFormField(tb, {
+          value: 'John',
+          fontFamily: 'Courier',
+          fontSize: 12,
+          fontStyle: 'None',
+          color: 'black',
+          borderColor: 'black',
+          backgroundColor: 'white',
+          alignment: 'Left',
+          thickness: 2
+        });
+      }
+    }
+  }
+};
+</script>
+{% 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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" @documentLoad="onDocumentLoad" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    onDocumentLoad() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Apply defaults for Textbox added from toolbar
+      pdfviewer.textFieldSettings = {
+        name: 'Textbox',
+        isReadOnly: false,
+        visibility: 'visible',
+        isRequired: false,
+        isPrint: true,
+        tooltip: 'Textbox',
+        thickness: 4,
+        value: 'Textbox',
+        fontFamily: 'Courier',
+        fontSize: 10,
+        fontStyle: 'None',
+        color: 'black',
+        borderColor: 'black',
+        backgroundColor: 'White',
+        alignment: 'Left',
+        maxLength: 0,
+        isMultiline: false
+      };
+    }
+  }
+};
+</script>
+{% 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..2db0d3769
--- /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
+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.
+![Textbox properties panel](../../../javascript-es6/images/ui-textbox-edit.png)
+- 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)" %}
+<template>
+  <div>
+    <button @click="modifyTextbox">Apply Textbox Changes</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    modifyTextbox() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Retrieve form fields collection
+      const fields = pdfviewer.retrieveFormFields();
+      // Find the textbox field by name (Here field name is First Name)
+      const field = fields.find(f => f.name === 'First Name') || fields[0];
+      if (field) {
+        // Update textbox field styling and value
+        pdfviewer.formDesignerModule.updateFormField(field, {
+          value: 'John',
+          fontFamily: 'Courier',
+          fontSize: 12,
+          fontStyle: 'None',
+          color: 'black',
+          backgroundColor: 'white',
+          borderColor: 'black',
+          thickness: 2,
+          alignment: 'Left',
+          maxLength: 50
+        });
+      }
+    }
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## Modify PDF Form Field Properties by Field type
+
+### Textbox
+- UI: Update value, font, size, colors, border thickness, alignment, max length, multiline.
+![Textbox properties panel](../../../javascript-es6/images/ui-textbox-edit.png)
+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)" %}
+<template>
+  <div>
+    <button @click="modifyTextbox">Apply Textbox Changes</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    modifyTextbox() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const fields = pdfviewer.retrieveFormFields();
+      const field = fields.find(f => f.name === 'First Name') || fields[0];
+      if (field) {
+        pdfviewer.formDesignerModule.updateFormField(field, {
+          value: 'John',
+          fontFamily: 'Courier',
+          fontSize: 12,
+          fontStyle: 'None',
+          color: 'black',
+          backgroundColor: 'white',
+          borderColor: 'black',
+          thickness: 2,
+          alignment: 'Left',
+          maxLength: 50
+        });
+      }
+    }
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### Password
+
+- UI: Tooltip, required, max length, font, appearance.
+![Password edited from UI](../../../javascript-es6/images/ui-password-edit.png)
+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)" %}
+<template>
+  <div>
+    <button @click="modifyPasswordBox">Edit PasswordBox</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    modifyPasswordBox() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const fields = pdfviewer.retrieveFormFields();
+      const field = fields.find(f => f.name === 'Password');
+      if (field) {
+        pdfviewer.formDesignerModule.updateFormField(field, {
+          tooltip: 'Enter your password',
+          isReadOnly: false,
+          isRequired: true,
+          isPrint: true,
+          fontFamily: 'Courier',
+          fontSize: 10,
+          color: 'black',
+          borderColor: 'black',
+          backgroundColor: 'white',
+          alignment: 'Left',
+          maxLength: 20,
+          thickness: 1
+        });
+      }
+    }
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### CheckBox
+- UI: Toggle checked state.
+![CheckBox edited from UI](../../../javascript-es6/images/ui-checkbox-edit.png)
+Use [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) for isChecked, tooltip, colors, borders.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button @click="modifyCheckbox">Modify CheckBox</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    modifyCheckbox() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const fields = pdfviewer.retrieveFormFields();
+      const cb = fields.find(f => f.name === 'Subscribe');
+      if (cb) {
+        pdfviewer.formDesignerModule.updateFormField(cb, {
+          isChecked: true,
+          backgroundColor: 'white',
+          borderColor: 'black',
+          thickness: 2,
+          tooltip: 'Subscribe to newsletter'
+        });
+      }
+    }
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### RadioButton
+•	UI: Set selected item in a group (same Name).
+![RadioButton edited from UI](../../../javascript-es6/images/ui-radiobutton-edit.png)
+•	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)" %}
+<template>
+  <div>
+    <button @click="editRadio">Modify RadioButton</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    editRadio() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const fields = pdfviewer.retrieveFormFields();
+      const genderRadios = fields.filter(f => f.name === 'Gender');
+      if (genderRadios[1]) {
+        pdfviewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false });
+        pdfviewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' });
+      }
+    }
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### ListBox
+•	UI: Add/remove items, set selection, adjust fonts/colors.
+![ListBox edited from UI](../../../javascript-es6/images/ui-listbox-edit.png)
+•	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)" %}
+<template>
+  <div>
+    <button @click="editListBox">Edit ListBox</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    editListBox() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const fields = pdfviewer.retrieveFormFields();
+      const lb = fields.find(f => f.name === 'States');
+      if (lb) {
+        const option = [
+          { itemName: 'Alabama', itemValue: 'AL' },
+          { itemName: 'Alaska', itemValue: 'AK' },
+          { itemName: 'Arizona', itemValue: 'AZ' },
+        ];
+        pdfviewer.formDesignerModule.updateFormField(lb, {
+          fontFamily: 'Courier',
+          fontSize: 5,
+          color: 'black',
+          backgroundColor: 'white',
+          tooltip: 'listbox',
+          options: option,
+        });
+      }
+    }
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### DropDown
+•	UI: Add/remove items, default value, appearance.
+![DropDown edited from UI](../../../javascript-es6/images/ui-dropdown-edit.png)
+•	API: [updateFormField()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders.
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button @click="editDropDown">Edit DropDown</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    editDropDown() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const fields = pdfviewer.retrieveFormFields();
+      const dd = fields.find(f => f.name === 'Country');
+      if (dd) {
+        pdfviewer.formDesignerModule.updateFormField(dd, {
+          options: [
+            { itemName: 'USA', itemValue: 'US' },
+            { itemName: 'Canada', itemValue: 'CA' },
+            { itemName: 'Mexico', itemValue: 'MX' }
+          ],
+          value: 'US',
+          fontFamily: 'Courier',
+          fontSize: 10,
+          color: 'black',
+          borderColor: 'black',
+          backgroundColor: 'white'
+        });
+      }
+    }
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### Signature Field
+•	UI: Tooltip, thickness, indicator text, required/visibility.
+![Signature field edited from UI](../../../javascript-es6/images/ui-signature-edit.png)
+•	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)" %}
+<template>
+  <div>
+    <button @click="editSignature">Edit Signature</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    editSignature() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const fields = pdfviewer.retrieveFormFields();
+      const sig = fields.find(f => f.name === 'Sign');
+      if (sig) {
+        pdfviewer.formDesignerModule.updateFormField(sig, {
+          tooltip: 'Please sign here',
+          thickness: 3,
+          isRequired: true,
+          isPrint: true,
+          backgroundColor: 'white',
+          borderColor: 'black'
+        });
+      }
+    }
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+### Initial Field
+•	UI: Tooltip, indicator text, thickness, required/visibility.
+![Initial field edited from UI](../../../javascript-es6/images/ui-initial-edit.png)
+•	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)" %}
+<template>
+  <div>
+    <button @click="editInitial">Edit Initial</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    editInitial() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const fields = pdfviewer.retrieveFormFields();
+      const init = fields.find(f => f.name === 'Initial');
+      if (init) {
+        pdfviewer.formDesignerModule.updateFormField(init, {
+          tooltip: 'Add your initials',
+          thickness: 2,
+          isRequired: true,
+          isPrint: true,
+          backgroundColor: 'white',
+          borderColor: 'black'
+        });
+      }
+    }
+  }
+};
+</script>
+{% 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..40b31a87d
--- /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
+- **Move**: Drag the form field to reposition it.
+- **Resize**: Use the resize handles to change width and height.
+
+![Moveing and Resizing a form field](../../../javascript-es6/images/move-resize-forms.gif)
+
+## 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)" %}
+<template>
+  <div>
+    <button @click="resizeMove">Resize and Move FormFields</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    resizeMove() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      // Retrieve form fields collection
+      const fields = pdfviewer.retrieveFormFields();
+      // Find the textbox field by name (Here field name is First Name)
+      const field = fields.find(f => f.name === 'First Name') || fields[0];
+      if (field) {
+        // Update bounds to move or resize form fields
+        pdfviewer.formDesignerModule.updateFormField(field, {
+          bounds: { X: 140, Y: 210, Width: 220, Height: 24 }, // new absolute position & size
+        });
+      }
+    }
+  }
+};
+</script>
+{% 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..d8f1e29bc
--- /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 
+
+## 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.
+![Form Designer toolbar with Delete icon](../../../javascript-es6/images/ui-del-formfields.png)
+
+## Remove Form Fields Programmatically
+Use **deleteFormField()** with a field reference or ID.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button @click="deleteAllFields">Delete Form Fields</button>
+    <button @click="deleteById">Delete First Field By ID</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer] },
+  data() {
+    return {
+      documentPath:'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    deleteAllFields() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      const fields = [...pdfviewer.formFieldCollections]; // clone to avoid mutation issues
+      fields.forEach(field => pdfviewer.formDesignerModule.deleteFormField(field));
+    },
+    deleteById() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      if (pdfviewer.formFieldCollections.length > 0) {
+        const id = pdfviewer.formFieldCollections[0].id;
+        if (id) {
+          pdfviewer.formDesignerModule.deleteFormField(id);
+        }
+      }
+    }
+  }
+};
+</script>
+{% 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)" %}
+<template>
+  <div id="app">
+    <ejs-pdfviewer
+      id="pdfViewer"
+      ref="pdfviewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      style="height: 640px;"
+    >
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  name: 'App',
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent,
+  },
+  data() {
+    return {
+        documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+        resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+    };
+  },
+  provide: {
+    PdfViewer: [
+      Toolbar,
+      Magnification,
+      Navigation,
+      Annotation,
+      TextSelection,
+      TextSearch,
+      FormFields,
+      FormDesigner,
+      PageOrganizer,
+    ],
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![FormFilling](../../javascript-es6/images/FormFields.gif)
+
+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)" %}
+<template>
+  <div id="app">
+    <ejs-pdfviewer
+      id="pdfViewer"
+      ref="pdfviewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      style="height: 640px;"
+    >
+    </ejs-pdfviewer>
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+  PageOrganizer,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  name: 'App',
+  components: {
+    'ejs-pdfviewer': PdfViewerComponent,
+  },
+  data() {
+    return {
+        documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+        resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+    };
+  },
+  provide: {
+    PdfViewer: [
+      Toolbar,
+      Magnification,
+      Navigation,
+      Annotation,
+      TextSelection,
+      TextSearch,
+      FormFields,
+      FormDesigner,
+      PageOrganizer,
+    ],
+  },
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+![FormDesigner](../../javascript-es6/images/FormDesigner.gif)
+
+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

From a6cd7afe06ec524f015e49813ab094a89915bd66 Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Wed, 4 Feb 2026 19:24:11 +0530
Subject: [PATCH 2/7] 1004885: Resolved CI failures

---
 .../PDF/PDF-Viewer/vue/forms/form-designer.md | 231 +++++++++++-------
 .../PDF-Viewer/vue/forms/form-field-events.md |   2 +-
 .../import-export-events.md                   |   2 +-
 .../manage-form-fields/modify-form-fields.md  |   2 +-
 .../move-resize-form-fields.md                |   2 +-
 .../manage-form-fields/remove-form-fields.md  |   2 +-
 6 files changed, 144 insertions(+), 97 deletions(-)

diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md
index 3de5654bb..1b8f0beb3 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md
@@ -1,14 +1,14 @@
 ---
 layout: post
-title: Form Designer and Toolbar Customization in TypeScript | Syncfusion
-description: Learn here all about form designer and toolbar in Syncfusion TypeScript PDF Viewer of Syncfusion Essential JS 2 and more.
+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 TypeScript PDF Viewer
+# 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.
 
@@ -45,48 +45,59 @@ Designed form fields can be saved into the PDF document and printed with their a
 
 ## Enable Form Designer
 
-To enable form design features, inject the [FormDesigner](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the [enableFormDesigner](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformdesigner) API to show or hide the Form Designer option in the main toolbar.
-
-```ts
+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)" %}
+<template>
+  <div>
+    <ejs-pdfviewer
+      id="pdfViewer"
+      ref="pdfviewer"
+      :documentPath="documentPath"
+      :resourceUrl="resourceUrl"
+      :enableFormDesigner="false"
+      style="height:640px"
+    />
+  </div>
+</template>
+
+<script>
 import {
-  PdfViewer,
-  FormFields,
-  FormDesigner,
+  PdfViewerComponent,
   Toolbar,
   Magnification,
   Navigation,
   Annotation,
   TextSelection,
   TextSearch,
-} from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(
   FormFields,
   FormDesigner,
-  Toolbar,
-  Magnification,
-  Navigation,
-  Annotation,
-  TextSelection,
-  TextSearch
-);
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath =
-  'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
-pdfviewer.resourceUrl =
-  'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.enableFormDesigner = false;
-pdfviewer.appendTo('#PdfViewer');
-```
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  }
+};
+</script>
+{% endhighlight %}
+{% endtabs %}
 
 ## Form Designer UI
 
-When [Form Designer mode](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesigner) 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 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.
+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.
 
-![FormDesigner](../images/FormDesigner.gif)
+![FormDesigner](../../javascript-es6/images/FormDesigner.gif)
 
 {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
 
-For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) in TypeScript PDF Viewer documentation.
+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
 
@@ -103,69 +114,70 @@ The **Form Designer toolbar** appears at the top of the PDF Viewer and provides
 
 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.
 
-![Adding Text Box](../images/AddTextBox.gif)
+![Adding Text Box](../../javascript-es6/images/AddTextBox.gif)
+
+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).
 
-Use the following Code-snippet to enable Form Designer by injecting **Form Designer mode** Module.
+## 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
 
-```ts
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <button @click="showDesigner">Show Form Designer Toolbar</button>
+    <button @click="hideDesigner">Hide Form Designer Toolbar</button>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
 import {
-  PdfViewer,
-  FormFields,
-  FormDesigner,
+  PdfViewerComponent,
   Toolbar,
   Magnification,
   Navigation,
   Annotation,
   TextSelection,
   TextSearch,
-} from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(
   FormFields,
   FormDesigner,
-  Toolbar,
-  Magnification,
-  Navigation,
-  Annotation,
-  TextSelection,
-  TextSearch
-);
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath =
-  'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
-pdfviewer.resourceUrl =
-  'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.enableFormDesigner = false;
-pdfviewer.appendTo('#PdfViewer');
-```
-
-For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation in TypeScript PDF Viewer documentation](./manage-form-fields/create-form-fields).
-
-## Show or Hide the Built-in Form Designer Toolbar
-
-You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/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
-
-```html
-<!-- Buttons to toggle the Form Designer toolbar -->
-<button id="showDesignerBtn">Show Form Designer Toolbar</button>
-<button id="hideDesignerBtn">Hide Form Designer Toolbar</button>
-```
-```ts
-//  Wire up buttons 
-document.getElementById('showDesignerBtn')!.onclick = () => {
-  pdfviewer.isFormDesignerToolbarVisible=true;
-};
-document.getElementById('hideDesignerBtn')!.onclick = () => {
-  pdfviewer.isFormDesignerToolbarVisible=false;
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  methods: {
+    showDesigner() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      pdfviewer.isFormDesignerToolbarVisible = true;
+    },
+    hideDesigner() {
+      const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+      pdfviewer.isFormDesignerToolbarVisible = false;
+    }
+  }
 };
-```
+</script>
+{% 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/documentation/api/pdfviewer/formdesignertoolbaritem) property.
+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.
 
@@ -173,21 +185,56 @@ This customization helps you limit the available tools and simplify the user int
 - 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.
 
-```ts
-//Customize the Built-in Form Designer Toolbar
-pdfviewer.toolbarSettings = {
-    formDesignerToolbarItems: [
-        "TextboxTool",
-        "PasswordTool",
-        "CheckBoxTool",
-        "RadioButtonTool",
-        "DropdownTool",
-        "ListboxTool",
-        "DrawSignatureTool",
-        "DeleteTool"
-    ]
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+<template>
+  <div>
+    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
+  </div>
+</template>
+
+<script>
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  TextSelection,
+  TextSearch,
+  FormFields,
+  FormDesigner,
+} from '@syncfusion/ej2-vue-pdfviewer';
+
+export default {
+  components: { 'ejs-pdfviewer': PdfViewerComponent },
+  provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner] },
+  data() {
+    return {
+      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
+    };
+  },
+  mounted() {
+    const pdfviewer = this.$refs.pdfviewer.ej2Instances;
+    // Customize the Built-in Form Designer Toolbar
+    pdfviewer.toolbarSettings = {
+      formDesignerToolbarItems: [
+        'TextboxTool',
+        'PasswordTool',
+        'CheckBoxTool',
+        'RadioButtonTool',
+        'DropdownTool',
+        'ListboxTool',
+        'DrawSignatureTool',
+        'DeleteTool'
+      ]
+    };
+  }
 };
-```
+</script>
+{% endhighlight %}
+{% endtabs %}
 
 ## Move, Resize, and Edit Form Fields
 
@@ -197,7 +244,7 @@ You can move, resize, and edit an existing form field directly in the PDF Viewer
 
 - Resize a field using the handles displayed on the field boundary.
 
-![Moveing and Resizing a form field](../images/move-resize-forms.gif)
+![Moveing and Resizing a form field](../../javascript-es6/images/move-resize-forms.gif)
 
 - 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
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
index 7cf1a624a..65a5d077e 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-field-events.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-field-events.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Form Field Events in Vue PDF Viewer | Syncfusion
-description: Learn about form field events in the Syncfusion Vue PDF Viewer component and how to handle them.
+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
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
index 94768c629..70f2b8eab 100644
--- 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
@@ -1,7 +1,7 @@
 ---
 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.
+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
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
index 2db0d3769..dad4fcd2e 100644
--- 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
@@ -7,7 +7,7 @@ control: PDF Viewer
 documentation: ug
 ---
 
-# Modify PDF Form Field Properties
+# 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
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
index 40b31a87d..74391d64b 100644
--- 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
@@ -7,7 +7,7 @@ control: PDF Viewer
 documentation: ug
 ---
 
-# Move and Resize PDF Form Fields
+# 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.
 
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
index d8f1e29bc..636819bb4 100644
--- 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
@@ -7,7 +7,7 @@ control: PDF Viewer
 documentation: ug
 ---
 
-# Remove PDF Form Fields from a PDF 
+# Remove PDF Form Fields from a PDF in Vue
 
 ## Remove Form Fields Using the UI
 **Steps:**

From 9eda08b66ccfb18bfd69194fb6bff84530f4fb50 Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Tue, 10 Feb 2026 12:59:58 +0530
Subject: [PATCH 3/7] 1009207: Updated Proper Heading name in JS Forms

---
 Document-Processing-toc.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index 80f3294b1..11da36fe1 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -1376,7 +1376,7 @@
 								</ul>
 							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/interaction-mode">Interaction Mode</a></li>
-							<li>Form Designer
+							<li>Forms
 								<ul>
 									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/forms/overview">Overview</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/forms/form-filling">Fill form fields</a></li>

From f17577cfe5271ebcf2dee39cb0ef43ca14fbc6ce Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Tue, 10 Feb 2026 14:52:22 +0530
Subject: [PATCH 4/7] 1009207: Updated Video URL in React Forms, Angular
 Organize Pages

---
 .../PDF/PDF-Viewer/angular/organize-pages/overview.md          | 3 +++
 .../PDF-Viewer/angular/organize-pages/programmatic-support.md  | 3 +++
 .../PDF/PDF-Viewer/angular/organize-pages/ui-interactions.md   | 3 +++
 .../PDF/PDF-Viewer/react/forms/form-designer.md                | 3 +++
 Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md | 3 +++
 .../PDF/PDF-Viewer/react/forms/overview-create-forms.md        | 3 +++
 Document-Processing/PDF/PDF-Viewer/react/forms/overview.md     | 3 +++
 7 files changed, 21 insertions(+)

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/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.

From 9d161bd8dfd58d0973d8c0d5b5352ad35a3489c0 Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Tue, 10 Feb 2026 15:08:35 +0530
Subject: [PATCH 5/7] 1009207: Resolved CI failure by removing unused file

---
 .../angular/organize-pdf-overview.md          | 39 -------------------
 1 file changed, 39 deletions(-)
 delete mode 100644 Document-Processing/PDF/PDF-Viewer/angular/organize-pdf-overview.md

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)
-

From fec850a17b0a3ba64f523bd382311f7658e47b96 Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Wed, 11 Feb 2026 11:25:05 +0530
Subject: [PATCH 6/7] 1009207: Updated requested suggestion in Video URL

---
 .../PDF/PDF-Viewer/angular/organize-pages/overview.md          | 2 +-
 .../PDF-Viewer/angular/organize-pages/programmatic-support.md  | 3 ---
 .../PDF/PDF-Viewer/angular/organize-pages/ui-interactions.md   | 3 ---
 .../PDF/PDF-Viewer/react/forms/form-designer.md                | 3 ---
 Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md | 3 ---
 .../PDF/PDF-Viewer/react/forms/overview-create-forms.md        | 2 +-
 Document-Processing/PDF/PDF-Viewer/react/forms/overview.md     | 2 +-
 7 files changed, 3 insertions(+), 15 deletions(-)

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 6191c5535..5b2bb1c06 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/overview.md
@@ -14,7 +14,7 @@ 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.
+Check out the following video to learn how to organize pages in a PDF document with the React PDF Viewer.
 {% youtube "https://www.youtube.com/watch?v=08kPdR0AZQk" %}
 
 The Organize Pages panel supports the following actions:
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 e47bc762b..f7b59da21 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,9 +12,6 @@ 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 a09b2b50d..390f79487 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,9 +12,6 @@ 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/react/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md
index 1373b5c84..aac8d316e 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md
@@ -14,9 +14,6 @@ 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 edbbb456e..b8dbb6a36 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md
@@ -24,9 +24,6 @@ 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 009743b70..36e18518c 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,7 +12,7 @@ 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.
+Check out the following video to learn how to use the Form Fields in the React PDF Viewer.
 {% youtube "https://www.youtube.com/watch?v=MUWTCg1MoAE" %}
 
 This section explains how to:
diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md b/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md
index 79f511ae3..773e67fff 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md
@@ -13,7 +13,7 @@ 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.
+Check out the following video to learn how to use the Form Fields in the React PDF Viewer.
 {% youtube "https://www.youtube.com/watch?v=MUWTCg1MoAE" %}
 
 ## Filling PDF Forms

From 84982f5495a267b243e7363b462e9ce9dc10a605 Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <166115263+SF4524LogeshKumar@users.noreply.github.com>
Date: Wed, 11 Feb 2026 12:33:21 +0530
Subject: [PATCH 7/7] 1009207: Update overview-create-forms

---
 .../PDF/PDF-Viewer/react/forms/overview-create-forms.md        | 3 ---
 1 file changed, 3 deletions(-)

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 36e18518c..f370aaac8 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,9 +12,6 @@ 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 out the following video to learn how to use the Form Fields in the 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)