From 872ef61b1c5fff9b2d27aa189ee7d6ad7b06ff49 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Thu, 23 Jul 2026 18:46:54 +0530 Subject: [PATCH 1/9] Revamped the import-export files and manage-form-fields files in forms --- .../export-form-fields.md | 4 ++-- .../import-export-events.md | 6 ++---- .../import-form-fields.md | 2 +- .../manage-form-fields/create-form-fields.md | 20 +++++++++---------- .../customize-form-fields.md | 2 +- .../manage-form-fields/modify-form-fields.md | 16 +++++++-------- .../move-resize-form-fields.md | 7 ++++--- .../manage-form-fields/remove-form-fields.md | 4 ++-- 8 files changed, 30 insertions(+), 31 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/import-export-form-fields/export-form-fields.md b/Document-Processing/PDF/PDF-Viewer/react/forms/import-export-form-fields/export-form-fields.md index 3371cc992e..d8197408b2 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/import-export-form-fields/export-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/import-export-form-fields/export-form-fields.md @@ -16,7 +16,7 @@ This guide shows concise, actionable steps to export PDF form field data for sto ## Steps -### 1. Configure the PDF Viewer +### 1. Import the required modules Install and import the viewer with required services. @@ -29,7 +29,7 @@ import { import { RefObject, useRef } from 'react'; {% endhighlight %} -### 2. Initialize ref +### 2. Initialize the viewer reference Initialize the viewer with a `ref` so you can call export methods. diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/import-export-form-fields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/react/forms/import-export-form-fields/import-export-events.md index d94c3fd9a8..6dd7bf2742 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/import-export-form-fields/import-export-events.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/import-export-form-fields/import-export-events.md @@ -22,7 +22,7 @@ Each event provides detailed context through typed event arguments such as [Impo ## Import Events - [importStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#importstart) — Fires when an import begins. - [importSuccess](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#importsuccess) — Fires when form fields are successfully imported. -- [importFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#importfailed) — Fires if the import fails. +- [importFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#importfailed) — Fires when an import fails. **Example: Handle Import Events** @@ -45,7 +45,7 @@ viewer.importFailed = (args) => { ## Export Events - [exportStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportstart) — Fires when an export begins. - [exportSuccess](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportsuccess) — Fires when form fields are successfully exported. -- [exportFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportfailed) — Fires if the export fails. +- [exportFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportfailed) — Fires when an export fails. **Example: Handle Export Events** @@ -79,6 +79,4 @@ viewer.exportFailed = (args) => { - [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/react/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/react/forms/import-export-form-fields/import-form-fields.md index 0fa5e1ff68..c6323a0041 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/import-export-form-fields/import-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/import-export-form-fields/import-form-fields.md @@ -95,7 +95,7 @@ export default function App() { - [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) +- [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) diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/create-form-fields.md b/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/create-form-fields.md index c97494df3d..c3f6becb95 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/create-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/create-form-fields.md @@ -134,7 +134,7 @@ root.render(); ### Password -**Add via UI**: Open form designer toolbar → Select Password → place → configure properties +**Add via UI**: Open Form Designer toolbar → Select Password → place → configure properties ![Password Properties Panel](../../../javascript-es6/images/ui-password-edit.png) @@ -184,7 +184,7 @@ root.render(); ### CheckBox -**Add via UI**: Open form designer toolbar → Select CheckBox → click to place → duplicate for options. +**Add via UI**: Open Form Designer toolbar → Select CheckBox → click to place → duplicate for options. ![CheckBox Properties Panel](../../../javascript-es6/images/ui-checkbox-edit.png) @@ -233,7 +233,7 @@ root.render(); ### RadioButton -**Add via UI**: Open form designer toolbar → Select RadioButton → place buttons using the same `name` to group them. +**Add via UI**: Open Form Designer toolbar → Select RadioButton → place buttons using the same `name` to group them. ![Radio Button Properties Panel](../../../javascript-es6/images/ui-radiobutton-edit.png) @@ -254,14 +254,14 @@ export function App() { viewerRef.current?.formDesignerModule.addFormField('RadioButton', { name: 'Gender', value: 'Male', - pageNumber: 0, + pageNumber: 1, bounds: { X: 100, Y: 270, Width: 16, Height: 16 } }); viewerRef.current?.formDesignerModule.addFormField('RadioButton', { name: 'Gender', value: 'Female', - pageNumber: 0, + pageNumber: 1, bounds: { X: 160, Y: 270, Width: 16, Height: 16 } }); }; @@ -289,7 +289,7 @@ root.render(); ### ListBox -**Add via UI**: Open form designer toolbar → Select ListBox → place → add items in Properties. +**Add via UI**: Open Form Designer toolbar → Select ListBox → place → add items in Properties. ![ListBox Properties Panel](../../../javascript-es6/images/ui-listbox-edit.png) @@ -343,7 +343,7 @@ root.render(); ### DropDown -**Add via UI**: Open form designer toolbar → Select DropDown → place → add items → set default value. +**Add via UI**: Open Form Designer toolbar → Select DropDown → place → add items → set default value. ![DropDown Properties Panel](../../../javascript-es6/images/ui-dropdown-edit.png) @@ -396,7 +396,7 @@ root.render(); ### Signature Field -**Add via UI**: Open form designer toolbar → select Signature Field → place where signing is required → configure indicator text/thickness/tooltip/isRequired. +**Add via UI**: Open Form Designer toolbar → select Signature Field → place where signing is required → configure indicator text/thickness/tooltip/isRequired. ![Signature Field](../../../javascript-es6/images/ui-signature-edit.png) @@ -416,7 +416,7 @@ export function App() { viewerRef.current?.formDesignerModule.addFormField('SignatureField', { name: 'Sign', bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, - tooltip: 'sign Here', + tooltip: 'Sign here', isRequired: true, }); }; @@ -444,7 +444,7 @@ root.render(); ### Initial Field -**Add via UI**: Open form designer toolbar → select Initial Field → place where initials are needed → configure text/isRequired. +**Add via UI**: Open Form Designer toolbar → select Initial Field → place where initials are needed → configure text/isRequired. ![Initial field Properties Panel](../../../javascript-es6/images/ui-initial-edit.png) diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/customize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/customize-form-fields.md index dacb315180..6f9b51b485 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/customize-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/customize-form-fields.md @@ -127,7 +127,7 @@ root.render(); [View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) -## See also +## Related topics - [Form Designer overview](../overview) - [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/modify-form-fields.md b/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/modify-form-fields.md index f4cfb8974e..f42e88626f 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/modify-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/modify-form-fields.md @@ -71,7 +71,7 @@ root.render(); {% endhighlight %} {% endtabs %} -## Modify PDF Form Field Properties by Field type +## Modify PDF Form Field Properties by Field Type ### Textbox - UI: Update value, font, size, colors, border thickness, alignment, max length, multiline. @@ -243,7 +243,7 @@ root.render(); ### RadioButton - UI: Set selected item in a group (same Name). ![RadioButton properties panel showing grouped options](../../../javascript-es6/images/ui-radiobutton-edit.png) -- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) to set selected value and border appearance. +- API: [`updateFormField()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner#updateformfield) to set selected value and border appearance. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -290,7 +290,7 @@ root.render(); ### ListBox - UI: Add/remove items, set selection, adjust fonts/colors. ![ListBox properties panel showing items and selection](../../../javascript-es6/images/ui-listbox-edit.png) -- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for items, selection, borders. +- API: [`updateFormField()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner#updateformfield) for items, selection, borders. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -348,7 +348,7 @@ root.render(); ### DropDown - UI: Add/remove items, default value, appearance. ![DropDown properties panel showing list items and default value](../../../javascript-es6/images/ui-dropdown-edit.png) -- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders. +- API: [`updateFormField()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner#updateformfield) for items, value, borders. {% tabs %} {% highlight js tabtitle="index.js" %} import * as ReactDOM from 'react-dom/client'; @@ -405,7 +405,7 @@ root.render(); ### Signature Field - UI: Tooltip, thickness, indicator text, required/visibility. ![Signature field properties panel showing indicator and appearance](../../../javascript-es6/images/ui-signature-edit.png) -- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders. +- API: [`updateFormField()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner#updateformfield) for tooltip, required, colors, borders. {% tabs %} {% highlight js tabtitle="index.js" %} import * as ReactDOM from 'react-dom/client'; @@ -457,7 +457,7 @@ root.render(); ### Initial Field - UI: Tooltip, indicator text, thickness, required/visibility. ![Initial field properties panel showing indicator and tooltip](../../../javascript-es6/images/ui-initial-edit.png) -- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders. +- API: [`updateFormField()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner#updateformfield) for tooltip, required, colors, borders. {% tabs %} {% highlight js tabtitle="index.js" %} import * as ReactDOM from 'react-dom/client'; @@ -508,12 +508,12 @@ root.render(); [View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) -## See also +## Related topics - [Form Designer overview](../overview) - [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) - [Create form fields](./create-form-fields) -- [Remove form Fields](./remove-form-fields) +- [Remove form fields](./remove-form-fields) - [Style form fields](./customize-form-fields) - [Group form fields](../group-form-fields) - [Form validation](../form-validation) diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/move-resize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/move-resize-form-fields.md index 4cc6618915..ae20f6b62f 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/move-resize-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/move-resize-form-fields.md @@ -17,7 +17,7 @@ The PDF Viewer supports moving and resizing form fields. ## Move and resize fields programmatically -The API supports setting absolute bounds or moving fields by a delta. +The API supports setting absolute bounds. Pass a `bounds` object with the shape `{ X, Y, Width, Height }` (in PDF page coordinates) to `updateFormField`. ### Set absolute bounds @@ -124,12 +124,13 @@ root.render(); {% endtabs %} -## See also +## Related topics - [Form Designer overview](../overview) - [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) - [Create form fields](./create-form-fields) -- [Remove form Fields](./remove-form-fields) +- [Modify form fields](./modify-form-fields) +- [Remove form fields](./remove-form-fields) - [Customize form fields](./customize-form-fields) - [Group form fields](../group-form-fields) - [Form validation](../form-validation) diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/remove-form-fields.md b/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/remove-form-fields.md index 97b49cb3a9..0cc2808ea1 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/remove-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/remove-form-fields.md @@ -21,7 +21,7 @@ The PDF Viewer supports removing form fields using the Form Designer UI or progr ![Form Designer toolbar showing Delete form field icon](../../../javascript-es6/images/ui-del-formfields.png) ## Remove form fields programmatically -Use `deleteFormField()` with a field reference or the field `id`. The method accepts either a field object returned by `retrieveFormFields()` or a numeric/string id. Example usage is shown in the code sample below. +Use [`deleteFormField()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner#deleteformfield) with a field reference or the field `id`. The method accepts either a field object returned by `retrieveFormFields()` or a numeric/string id. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -99,7 +99,7 @@ root.render(); [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) -## See also +## Related topics - [Form Designer overview](../overview) - [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) From 24cfe282e4cc6fdc13028c251df6360fc145f7b8 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Thu, 23 Jul 2026 21:31:35 +0530 Subject: [PATCH 2/9] Revamped the formfield files --- .../PDF/PDF-Viewer/react/forms/custom-data.md | 10 +++++----- .../PDF-Viewer/react/forms/flatten-form-fields.md | 6 +++--- .../PDF/PDF-Viewer/react/forms/form-constrain.md | 4 ++-- .../PDF/PDF-Viewer/react/forms/form-designer.md | 14 +++++++------- .../PDF-Viewer/react/forms/form-field-events.md | 7 +++---- .../PDF/PDF-Viewer/react/forms/form-fields-api.md | 5 ++--- .../PDF/PDF-Viewer/react/forms/form-filling.md | 1 - .../PDF-Viewer/react/forms/group-form-fields.md | 2 +- .../react/forms/overview-create-forms.md | 2 +- .../PDF/PDF-Viewer/react/forms/overview.md | 4 ++-- .../react/forms/read-form-field-values.md | 2 +- .../PDF/PDF-Viewer/react/forms/submit-form-data.md | 4 ++-- 12 files changed, 29 insertions(+), 32 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/custom-data.md b/Document-Processing/PDF/PDF-Viewer/react/forms/custom-data.md index f88ac959ed..bd3c69a458 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/custom-data.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/custom-data.md @@ -1,7 +1,7 @@ --- layout: post -title: Add custom data to form fields in React 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 React PDF Viewer. +title: Add custom data to form fields in React 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 React PDF Viewer. platform: document-processing control: PDF Viewer documentation: ug @@ -143,7 +143,7 @@ export function App() { const viewerRef = useRef(null); const updateFirstField = () => { - const fields = viewerRef.current?.formFieldCollection || []; + const fields = viewerRef.current?.formFieldCollections || []; if (!fields.length) { return; } const target = fields[0]; viewerRef.current?.formDesignerModule.updateFormField(target, { @@ -196,7 +196,7 @@ export function App() { const viewerRef = useRef(null); const onDocumentLoad = () => { - const fields = viewerRef.current?.formFieldCollection || []; + const fields = viewerRef.current?.formFieldCollections || []; fields.forEach((f) => { console.log('Field', f.name, 'customData:', f.customData); }); @@ -239,7 +239,7 @@ root.render(); - [Form Designer overview](./overview) - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) -- [Create form fields](./overview-create-forms) +- [Create form fields](./manage-form-fields/create-form-fields) - [Group form fields](../group-form-fields) - [Form flags](./form-constrain) - [Form validation](./form-validation) diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/flatten-form-fields.md b/Document-Processing/PDF/PDF-Viewer/react/forms/flatten-form-fields.md index 1eec8f4ee2..46fc5d4bb7 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/flatten-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/flatten-form-fields.md @@ -1,7 +1,7 @@ --- layout: post title: Flatten PDF form fields in React PDF Viewer | Syncfusion -description: Learn hoow to flatten interactive PDF form fields before download or save-as in EJ2 React PDF Viewer. +description: Learn how to flatten interactive PDF form fields before download or save-as in EJ2 React PDF Viewer. platform: document-processing control: PDF Viewer documentation: ug @@ -25,7 +25,7 @@ Flattening PDF forms converts interactive fields such as textboxes, dropdowns, c 2. Intercept the download flow using [`downloadStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstart) and cancel the default flow. 3. Retrieve the viewer's blob via [`saveAsBlob()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#saveasblob) and convert the blob to base64. 4. Use `PdfDocument` from Syncfusion PDF Library to open the document, set `field.flatten = true` for each form field, then save. -5. For the flattening the form fields when downloading through *Save As* option in Page Organizer, repeat steps 2–4 by using [`pageOrganizerSaveAs`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pageorganizersaveas) event. +5. To flatten the form fields when downloading through the *Save As* option in Page Organizer, repeat steps 2–4 by using [`pageOrganizerSaveAs`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pageorganizersaveas) event. ## Complete example @@ -62,7 +62,7 @@ export default function App() { let field: PdfField = document.form.fieldAt(index); field.flatten = true; } - // If both annotations and form fields needs to be flattened, use + // If both annotations and form fields need to be flattened, use // document.flatten = true document.save(`${viewerRef.current.fileName}.pdf`); document.destroy(); diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/react/forms/form-constrain.md index 7faa7cb5b5..b33a863a9f 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-constrain.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-constrain.md @@ -1,6 +1,6 @@ --- layout: post -title: Form constraints in the React PDF Viewer component | Syncfusion +title: PDF form field flags in React PDF Viewer component | Syncfusion description: Learn how to configure form field constraints such as isReadOnly, isRequired, and isPrint in the Syncfusion React PDF Viewer. platform: document-processing control: PDF Viewer @@ -530,7 +530,7 @@ root.render(); {% endhighlight %} {% endtabs %} -### Set default flags for new PDF form fields +### Set default flags for new 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 %} 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 1ae006a591..46bf5d3e87 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Form Designer in React PDF Viewer -When **Form Designer mode** is enabled in the Syncfusion [React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/form-designer) 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. +When **Form Designer mode** is enabled in the Syncfusion [React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/form-designer) 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. @@ -43,9 +43,9 @@ Form fields can be selected, grouped or ungrouped, reordered, and deleted as nee **Save and Print Forms:** Designed form fields can be saved into the PDF document and printed with their appearances. -## Design Forms with UI interaction +## Design Forms Using the UI -When [Form Designer mode](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/form-designer) 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/react/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/form-designer) 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](../../javascript-es6/images/FormDesigner.gif) @@ -116,7 +116,7 @@ This customization helps limit the available tools and simplify the user interfa ### Adding Form Fields -Each toolbar item in form designer toolbar allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document. +Each toolbar item in the Form Designer toolbar allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document. ![Adding a text box using the Form Designer toolbar](../../javascript-es6/images/AddTextBox.gif) @@ -130,12 +130,12 @@ Fields can be moved, resized, and edited directly in the PDF Viewer using the Fo - Fields are resized using the handles displayed on the field boundary. -![Moveing and Resizing a form field](../../javascript-es6/images/move-resize-forms.gif) +![Moving and Resizing a form field](../../javascript-es6/images/move-resize-forms.gif) - Selecting a field opens the Form Field Properties popover, which allows modification of the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed. -For more information, see Editing Form Fields +For more information, see [Editing Form Fields](./manage-form-fields/modify-form-fields) -### Edit Form Field properties +### Edit Form Field Properties The **Properties** panel lets you customize the styles of form fields. Open the panel by selecting the **Properties** option in a field's context menu. diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/react/forms/form-field-events.md index f88d936fc6..2817b5d066 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-field-events.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-field-events.md @@ -1,8 +1,7 @@ --- layout: post -title: Form Field Events in React Pdfviewer control | Syncfusion -description: Learn here all about different form field in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. -control: Form Field Events +title: Form Field Events in React PDF Viewer control | Syncfusion +description: Learn here all about different form fields in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more. control: PDF Viewer documentation: ug domainurl: ##DomainURL## @@ -18,7 +17,7 @@ Validation‑related events are emitted when the viewer performs operations that The following table lists all supported form field events and their descriptions: -| Form Field events | Description | Arguments | +| Form Field Events | Description | Arguments | |---|---|---| | [`formFieldAdd`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#formfieldadd) | Triggered when a new form field is added, either through the Form Designer UI or programmatically. | [`formFieldAddArgs`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldAddArgs) | | [`formFieldClick`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#formfieldclick) | Fired when a form field is clicked in the viewer. | [`formFieldClickArgs`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formFieldClickArgs) | diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/form-fields-api.md b/Document-Processing/PDF/PDF-Viewer/react/forms/form-fields-api.md index 26fc2c47f2..d5aa63acf4 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-fields-api.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-fields-api.md @@ -586,7 +586,7 @@ export function App() { @@ -661,8 +661,7 @@ root.render(); ## 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. +Shows the Form Designer toolbar when the PDF document is loaded into the PDF Viewer. Use the API to get the Form Designer toolbar's current visible status. {% tabs %} {% highlight ts tabtitle="index.ts" %} 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 937d0040fc..654d5f58f4 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md @@ -249,7 +249,6 @@ export default function App() { - [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) diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/group-form-fields.md b/Document-Processing/PDF/PDF-Viewer/react/forms/group-form-fields.md index a7bde62e1c..af2bc1229f 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/group-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/group-form-fields.md @@ -36,7 +36,7 @@ N> form field grouping is controlled by the `Name` property. The position of eac 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. +4. Assign the same **Name** to all PDF form fields that belong to the group. 5. Apply the changes and verify that updates in one widget reflect in the others. ![Grouping textboxes with the same name](../../javascript-es6/images/groupTextFileds.png) 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 4c8463c6cd..c617f90680 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 @@ -1,7 +1,7 @@ --- layout: post title: Overview of Create form fields in React 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 React PDF Viewer. +description: Learn how to create and edit each form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion React PDF Viewer. platform: document-processing control: PDF Viewer documentation: ug diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md b/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md index 3cde8b0a5f..5a3722c755 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md @@ -58,7 +58,7 @@ root.render(); ## 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. +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. @@ -80,7 +80,7 @@ export function App() { style={{ 'height': '680px' }} > + Print, TextSelection, TextSearch, FormFields, FormDesigner]} /> ); diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/read-form-field-values.md b/Document-Processing/PDF/PDF-Viewer/react/forms/read-form-field-values.md index d94eed5563..ca25d73477 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/read-form-field-values.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/read-form-field-values.md @@ -16,7 +16,7 @@ This guide shows common patterns with concise code snippets you can copy into yo ## Access the Form Field Collection -Get all available form field data by reading viewer's `formFieldCollections`. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections). +Get all available form field data by reading the viewer's `formFieldCollections`. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections). ```ts const formFields = viewer.formFieldCollections; diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/submit-form-data.md b/Document-Processing/PDF/PDF-Viewer/react/forms/submit-form-data.md index 20d6454458..9612b84aca 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/submit-form-data.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/submit-form-data.md @@ -1,7 +1,7 @@ --- layout: post title: Submit PDF Form Data to a Server using React PDF Viewer | Syncfusion -description: Submit filled PDF form data from the EJ2 React PDF Viewer to a backend server, with a complete frontend example and a minimal Node receiver. +description: Submit filled PDF form data from the EJ2 React PDF Viewer to a backend server, with a complete frontend example. platform: document-processing control: PDF Viewer documentation: ug @@ -112,7 +112,7 @@ export default function SubmitFormExample() { - Enable remote verification and approval workflows by sending submitted form data to a back end service for review and sign-off. - Store submitted form responses in a database to persist user inputs for auditing, reporting, or later retrieval. -- Trigger workflow automation and downstream processing by sending form data to business systems or server less functions. +- Trigger workflow automation and downstream processing by sending form data to business systems or serverless functions. - Merge submitted values into a final flattened PDF on the server to produce a non-editable document that combines the form data with the original PDF. ## Related topics From 88a67421ee7e680a09fc09a65ba7b22aa2426b00 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Thu, 23 Jul 2026 22:35:04 +0530 Subject: [PATCH 3/9] Resolve CI errors --- .../react/forms/manage-form-fields/customize-form-fields.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/customize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/customize-form-fields.md index 6f9b51b485..fb42b87c71 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/customize-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/manage-form-fields/customize-form-fields.md @@ -1,7 +1,7 @@ --- layout: post title: Style form fields in the React PDF Viewer | Syncfusion -description: Learn how to configure typography, colors, borders, alignment, and other style settings for form fields using the UI and Programmatically. +description: Explore the various ways to style form fields by configuring fonts, colors, borders, alignment, and other visual properties using the UI or code. platform: document-processing control: PDF Viewer documentation: ug From 2ada837a1246cd1698363ba77a7b441c5a76baa7 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Thu, 23 Jul 2026 23:27:32 +0530 Subject: [PATCH 4/9] Revamped the accessibility.md file --- .../PDF/PDF-Viewer/react/accessibility.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/accessibility.md b/Document-Processing/PDF/PDF-Viewer/react/accessibility.md index 5f4dcc6e8f..7407123b48 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/react/accessibility.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Accessibility in PDF Viewer components React +# Accessibility in React PDF Viewer component The PDF Viewer component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and the WCAG ARIA roles specified by WAI-ARIA. The component's accessibility compliance is outlined below. @@ -51,7 +51,7 @@ The PDF Viewer component follows accessibility guidelines and standards, includi | `aria-describedby` | This attribute points to the PDF Viewer element describing the one it's set on. | | `aria-orientation` | Indicates whether the PDF Viewer element is oriented horizontally or vertically. | | `aria-valuetext` | Returns the current text of the PDF Viewer. | -| `aria-valuemax` | Indicates the Maximum value of the PDF Viewer. | +| `aria-valuemax` | Indicates the maximum value of the PDF Viewer. | | `aria-valuemin` | Indicates the Minimum value of the PDF Viewer. | | `aria-valuenow` | Indicates the current value of the PDF Viewer. | | `aria-controls` | Attribute is set to the button and it points to the corresponding content. | @@ -67,7 +67,7 @@ The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/W | CONTROL + Right Arrow (or) CONTROL + Down Arrow |COMMAND + Right Arrow (or) COMMAND + Down Arrow |Navigate to the last page | |Left Arrow | Left Arrow (or) Shift + Space |Navigate to the previous page| | Right Arrow | Right Arrow (or) Space | Navigate to the next page | -| CONTROL + G | COMMAND + G | Go To The Page| +| CONTROL + G | COMMAND + G | Go to the page| |Up Arrow |Up Arrow |Scroll up| | Down Arrow | Down Arrow | Scroll down| |||**Shortcuts for Zooming**| @@ -78,8 +78,8 @@ The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/W | CONTROL + F | COMMAND + F |Open the search toolbar| |||**Shortcut for Text Selection**| |CONTROL + C |CONTROL + C | Copy the selected text or annotation or form field | -| CONTROL + X | CONTROL + X |Cut the selected text or annotation of the form field| -|CONTROL + Y |CONTROL + Y |Paste the selected text or annotation or form field| +| CONTROL + X |CONTROL + X |Cut the selected text, annotation, or form field| +|CONTROL + V |COMMAND + V |Paste the selected text, annotation, or form field| |||**Shortcuts for the general operation**| | CONTROL + Z | CONTROL + Z |Undo the action| |CONTROL + Y |CONTROL + Y |Redo the action| @@ -252,4 +252,4 @@ The PDF Viewer component's accessibility levels are ensured through an [accessib ## See also -* [Accessibility in React components](../common/accessibility) \ No newline at end of file +* [Accessibility in React components](../common/accessibility) \ No newline at end of file From 68746d07d8c2e948a2881664d7afa6f97f435be1 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Fri, 24 Jul 2026 09:10:13 +0530 Subject: [PATCH 5/9] Revamped the download and feature-module.md files --- .../PDF/PDF-Viewer/react/download.md | 2 +- .../PDF/PDF-Viewer/react/feature-module.md | 54 +++++++++---------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/download.md b/Document-Processing/PDF/PDF-Viewer/react/download.md index 40012f9f2d..227171a2eb 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/download.md +++ b/Document-Processing/PDF/PDF-Viewer/react/download.md @@ -174,5 +174,5 @@ export default function App() { ## See also -- [Toolbar items](./toolbar) +- [Toolbar items](./toolbar-customization/overview) - [Feature Modules](./feature-module) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/feature-module.md b/Document-Processing/PDF/PDF-Viewer/react/feature-module.md index db443f94ad..4477832640 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/feature-module.md +++ b/Document-Processing/PDF/PDF-Viewer/react/feature-module.md @@ -1,7 +1,7 @@ --- layout: post -title: Feature module in React Pdfviewer component | Syncfusion -description: Learn here all about Feature module in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Feature module in React PDF Viewer component | Syncfusion +description: Learn here all about Feature module in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more. control: PDF Viewer platform: document-processing documentation: ug @@ -12,18 +12,18 @@ domainurl: ##DomainURL## The PDF Viewer features are organized into discrete modules so applications can include only the functionality they require. Inject the required modules to extend the viewer. The following modules are available: -* [**Toolbar**](./toolbar-customization/annotation-toolbar-customization): Built-in toolbar for user interaction. -* [**Magnification**](./magnification): Perform zoom operations for a better viewing experience. -* [**Navigation**](./interactive-pdf-navigation/page-navigation): Navigate across pages. -* [**LinkAnnotation**](./interactive-pdf-navigation/hyperlink-navigation): Navigate within the document or to external destinations via hyperlinks. -* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail-navigation): Navigate within the document using page thumbnails. -* [**BookmarkView**](./interactive-pdf-navigation/bookmark-navigation): Navigate using document bookmarks (table of contents). -* [**TextSelection**](./textselection): Select and copy text from the document. -* [**TextSearch**](./text-search): Search for text across the document. -* [**Print**](./print): Print the entire document or specific pages directly from the browser. +* [**Toolbar**](./toolbar-customization/annotation-toolbar): Built-in toolbar for user interaction. +* [**Magnification**](./magnification/magnification): Perform zoom operations for a better viewing experience. +* [**Navigation**](./interactive-pdf-navigation/page): Navigate across pages. +* [**LinkAnnotation**](./interactive-pdf-navigation/hyperlink): Navigate within the document or to external destinations via hyperlinks. +* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail): Navigate within the document using page thumbnails. +* [**BookmarkView**](./interactive-pdf-navigation/bookmark): Navigate using document bookmarks (table of contents). +* [**TextSelection**](./text-selection/overview): Select and copy text from the document. +* [**TextSearch**](./text-search/overview): Search for text across the document. +* [**Print**](./print/overview): Print the entire document or specific pages directly from the browser. * [**Annotation**](./annotation/text-markup-annotation): Add and edit annotations. -* [**FormFields**](./form-designer/create-programmatically): Work with form fields in the document. -* [**FormDesigner**](./form-designer/create-programmatically): Add or edit form fields in the document. +* [**FormFields**](./forms/form-designer): Work with form fields in the document. +* [**FormDesigner**](./forms/form-designer): Add or edit form fields in the document. N> In addition to injecting required modules in an application, enable the corresponding properties to extend functionality for a PDF Viewer instance. @@ -31,20 +31,20 @@ Refer to the following table. | Module | Property to enable the functionality for a PDF Viewer instance | |---|---| -|Toolbar|``| -|Magnification|``| -|Navigation|``| -|LinkAnnotation|``| -|ThumbnailView|``| -|BookmarkView|``| -|TextSelection|``| -|TextSearch|``| -|Print|``| -|Annotation|``| -|FormFields|``| -|FormDesigner|``| +|Toolbar|``| +|Magnification|``| +|Navigation|``| +|LinkAnnotation|``| +|ThumbnailView|``| +|BookmarkView|``| +|TextSelection|``| +|TextSearch|``| +|Print|``| +|Annotation|``| +|FormFields|``| +|FormDesigner|``| ## See also -* [Toolbar items](./toolbar) -* [Toolbar customization](./how-to/toolbar-customization) \ No newline at end of file +* [Toolbar customization](./toolbar-customization/overview) +* [Custom toolbar](./toolbar-customization/custom-toolbar) \ No newline at end of file From fda208fba7529b504cfac2d3efb88eeb928e8e24 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Fri, 24 Jul 2026 10:26:32 +0530 Subject: [PATCH 6/9] Revamped the events, server-to-standalone.md, theming-and-styling.md, open and save-pdf-files.md files --- Document-Processing/PDF/PDF-Viewer/react/events.md | 14 +++++++------- .../PDF/PDF-Viewer/react/open-pdf-files.md | 2 +- .../PDF/PDF-Viewer/react/save-pdf-files.md | 4 ++-- .../PDF/PDF-Viewer/react/server-to-standalone.md | 4 ++-- .../PDF/PDF-Viewer/react/theming-and-styling.md | 6 +++--- 5 files changed, 15 insertions(+), 15 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/events.md b/Document-Processing/PDF/PDF-Viewer/react/events.md index 9c29ec9233..6c63566f79 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/events.md +++ b/Document-Processing/PDF/PDF-Viewer/react/events.md @@ -1003,7 +1003,7 @@ root.render(); The [hyperlinkMouseOver](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#hyperlinkmouseoverevent) event triggers when hovering over a hyperlink. -- Event arguments: HyperlinkMouseOverArgs. +- Event arguments: [HyperlinkMouseOverArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/hyperlinkMouseOverArgs). Example: @@ -1217,7 +1217,7 @@ root.render(); The [moveSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#movesignatureevent) event triggers when a signature is moved across the page. -- Event arguments: `MoveSignatureEventArgs`. +- Event arguments: [MoveSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/moveSignatureEventArgs). Example: @@ -1331,7 +1331,7 @@ root.render(); The [pageMouseover](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pagemouseoverevent) event triggers when the mouse moves over a page. -- Event arguments: `PageMouseoverEventArgs`. +- Event arguments: [PageMouseoverEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageMouseoverEventArgs). Example: @@ -1369,7 +1369,7 @@ root.render(); The [pageOrganizerSaveAs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pageorganizersaveasevent) event triggers when a Save As action is performed in the page organizer. -- Event arguments: `PageOrganizerSaveAsEventArgs`. +- Event arguments: [PageOrganizerSaveAsEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageOrganizerSaveAsEventArgs). Example: @@ -1939,7 +1939,7 @@ root.render(); The [textSelectionStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#textselectionstartevent) event triggers when text selection is initiated. -- Event arguments: `TextSelectionStartEventArgs`. +- Event arguments: [TextSelectionStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSelectionStartEventArgs). Example: @@ -2017,5 +2017,5 @@ root.render(); See also: - [Annotation events](./annotation/annotation-event) -- [Form field events](./form-designer/form-field-events) -- [Organize PDF events](./organize-pdf/organize-pdf-events) +- [Form field events](./forms/form-field-events) +- [Organize PDF events](./organize-pages/events) diff --git a/Document-Processing/PDF/PDF-Viewer/react/open-pdf-files.md b/Document-Processing/PDF/PDF-Viewer/react/open-pdf-files.md index 2a4f991ba1..f526166f72 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/open-pdf-files.md +++ b/Document-Processing/PDF/PDF-Viewer/react/open-pdf-files.md @@ -54,7 +54,7 @@ Below are concise instructions and short snippets for loading PDFs from several ### Open PDF from URL -- Set [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) to the external URL (see example above). +- Set [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) to the external URL (see example above). - Note: the remote server must permit cross-origin requests (CORS); the external file must allow CORS if hosted on a different domain. ### Open PDF from a Base64 string diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md index 83c198ecd6..2d179353f8 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md +++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md @@ -84,7 +84,7 @@ function App() { {/* Render the PDF Viewer */} @@ -130,7 +130,7 @@ return (
diff --git a/Document-Processing/PDF/PDF-Viewer/react/server-to-standalone.md b/Document-Processing/PDF/PDF-Viewer/react/server-to-standalone.md index 7722fca811..6f65d26747 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/server-to-standalone.md +++ b/Document-Processing/PDF/PDF-Viewer/react/server-to-standalone.md @@ -47,7 +47,7 @@ When you migrate to standalone mode, the processing location for various feature | **Thumbnail View** | Thumbnail images are generated on the server and transmitted to the client. | Thumbnails are rendered directly in the browser without server involvement. | | **Bookmark View** | Bookmark data is processed on the server and sent to the client for rendering. | Bookmark navigation is managed locally using the Syncfusion EJ2 PDF Viewer. | | **Text Search** | Text search operations are performed on the server, and results are returned to the client. | Text search is executed entirely within the browser. | -| **Print** | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | +| **Print** | The server handles print preparation and formatting, then sends the processed output back to the client for printing. | Print preparation and formatting are handled locally within the browser, providing quick and responsive print output. | | **Toolbar** | Toolbar actions such as zoom, navigation, and export are processed on the server, and results are returned to the client. | Toolbar operations are executed instantly on the client without requiring server communication. | **Key Insight:** In standalone mode, all PDF processing occurs in the browser, eliminating the need for server coordination. Your server only serves the PDF file as a static resource or through a simple API endpoint. @@ -57,7 +57,7 @@ When you migrate to standalone mode, the processing location for various feature Migrating to standalone mode provides several architectural and operational benefits: **API Compatibility:** -- **No API Breaks:** There are no breaking API changes when migrating from the server-backed PDF Viewer to the standalone PDF Viewer. However, APIs that are specific to server interaction, such as [serviceUrl](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#serviceurl), [serverActionSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#serveractionsettings), [ajaxRequestSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#ajaxrequestssettings), [retryCount](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#retrycount), [retryTimeout](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#retrytimeout), and [retryStatusCodes](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#retrystatuscodes), are not applicable in standalone mode. Apart from these server-dependent APIs, all other APIs remain consistent and are supported in the standalone PDF Viewer. +- **No API Breaks:** There are no breaking API changes when migrating from the server-backed PDF Viewer to the standalone PDF Viewer. However, APIs that are specific to server interaction, such as [serviceUrl](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#serviceurl), [serverActionSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#serveractionsettings), [ajaxRequestSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#ajaxrequestsettings), [retryCount](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#retrycount), [retryTimeout](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#retrytimeout), and [retryStatusCodes](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#retrystatuscodes), are not applicable in standalone mode. Apart from these server-dependent APIs, all other APIs remain consistent and are supported in the standalone PDF Viewer. **Performance and User Experience:** - **Instant Rendering:** PDF operations execute immediately in the browser without server round-trips diff --git a/Document-Processing/PDF/PDF-Viewer/react/theming-and-styling.md b/Document-Processing/PDF/PDF-Viewer/react/theming-and-styling.md index f9462f656b..6b1ac326dd 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/theming-and-styling.md +++ b/Document-Processing/PDF/PDF-Viewer/react/theming-and-styling.md @@ -25,7 +25,7 @@ The PDF Viewer applies styles to the toolbar, buttons, panels, annotations, and **Step-1:** Create a PDF Viewer sample by following the [React PDF Viewer getting started guide](./getting-started). -**Step-2:** To change the theme to tailwind, add the imports to tailwind theme in `app.css`. +**Step-2:** To change the theme to tailwind, add the imports to the tailwind theme in `app.css`. ```css @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; @@ -42,13 +42,13 @@ The PDF Viewer applies styles to the toolbar, buttons, panels, annotations, and This short, guided walkthrough shows a minimal end-to-end customization flow: -1. Create a new React app and install the viewer +1. Create a new React app and install the viewer. 2. Add the Tailwind theme imports to your global CSS (see Quick start). 3. Render the PDF Viewer in `src/App` and verify the default look. -4. Add a theme switcher using the dark-mode logic in later shown in this file +4. Add a theme switcher using the dark-mode logic shown later in this file 5. Add additional CSS rules under `.e-custom-style` and load it after the theme CSS, and verify appearance and accessibility. From dc7a41b384e3ae62dd27e23a5a3c220d516a7b5d Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Fri, 24 Jul 2026 12:47:42 +0530 Subject: [PATCH 7/9] Revamped the interaction-mode, keyboard-accessibility, mobile-toolbar and overview.md files --- .../PDF/PDF-Viewer/react/interaction-mode.md | 8 ++++---- .../PDF/PDF-Viewer/react/keyboard-accessibility.md | 4 ++-- .../PDF/PDF-Viewer/react/mobile-toolbar.md | 11 +++++------ Document-Processing/PDF/PDF-Viewer/react/overview.md | 6 +++--- 4 files changed, 14 insertions(+), 15 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/interaction-mode.md b/Document-Processing/PDF/PDF-Viewer/react/interaction-mode.md index eba7f3b02f..9198a1f2aa 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/interaction-mode.md +++ b/Document-Processing/PDF/PDF-Viewer/react/interaction-mode.md @@ -31,7 +31,7 @@ import * as ReactDOM from 'react-dom'; import * as React from 'react'; import './index.css'; import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, - ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer'; + ThumbnailView, Print, TextSelection, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer'; function App() { return (
@@ -61,7 +61,7 @@ import * as ReactDOM from 'react-dom'; import * as React from 'react'; import './index.css'; import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, - ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer'; + ThumbnailView, Print, TextSelection, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer'; function App() { return (
@@ -200,7 +200,7 @@ root.render(); ## Disable text selection (enable pan mode) -Disable text selection by setting `enableTextSelection={false}` to enable pan mode for document navigation. When text selection is disabled, users can only pan through the document and cannot select or copy text. +Disable text selection by setting [`enableTextSelection={false}`] (https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enabletextselection) to enable pan mode for document navigation. When text selection is disabled, users can only pan through the document and cannot select or copy text. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -265,7 +265,7 @@ root.render(); {% endhighlight %} {% endtabs %} -## Programmatically toggle interaction mode during runtime +## Programmatically toggle interaction mode at runtime Toggle interaction modes at runtime in response to events or user actions, such as when opening annotation tools. diff --git a/Document-Processing/PDF/PDF-Viewer/react/keyboard-accessibility.md b/Document-Processing/PDF/PDF-Viewer/react/keyboard-accessibility.md index 440b7265ca..48b6d19d26 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/keyboard-accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/react/keyboard-accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Keyboard accessibility in React Pdfviewer component | Syncfusion +title: Keyboard accessibility in React PDF Viewer component | Syncfusion description: Learn here all about Keyboard accessibility in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. control: PDF Viewer platform: document-processing @@ -28,7 +28,7 @@ The React PDF Viewer supports the keyboard interactions listed below. |**Shortcuts for text selection**||| |Copy the selected text, annotation, or form field|CONTROL + C|COMMAND + C| |Cut the selected text, annotation, or form field|CONTROL + X|COMMAND + X| -|Paste the selected text, annotation, or form field|CONTROL + Y|COMMAND + Y| +|Paste the selected text, annotation, or form field|CONTROL + V|COMMAND + V| |**Shortcuts for general operations**||| |Undo the action|CONTROL + Z|COMMAND + Z| |Redo the action|CONTROL + Y|COMMAND + Y| diff --git a/Document-Processing/PDF/PDF-Viewer/react/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/mobile-toolbar.md index 87a766bdaa..bf02ea3cfe 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/react/mobile-toolbar.md @@ -1,13 +1,13 @@ --- layout: post -title: Mobile Toolbar Interface in React Pdfviewer component | Syncfusion -description: Learn All About the Mobile Toolbar Interface in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Mobile Toolbar Interface in React PDF Viewer component | Syncfusion +description: Learn all about the Mobile Toolbar Interface in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more. control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Mobile toolbar interface in React PDF Viewer component +# Mobile Toolbar Interface in React PDF Viewer component The mobile PDF Viewer provides features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes Essential® tools such as search, download, bookmarking, annotation, and page organization. The desktop toolbar can be enabled in mobile mode to expose additional actions when required. @@ -38,9 +38,8 @@ N> In mobile mode, the annotation toolbar is displayed at the bottom of the view When you open the "more options" menu, you will see additional actions such as: -**DownloadOption:** Tap to download the currently opened PDF document. - -**BookmarkOption:** Allows you to view bookmarks within the document. +- **DownloadOption:** Tap to download the currently opened PDF document. +- **BookmarkOption:** Allows you to view bookmarks within the document. ![More options menu showing additional actions like download and bookmark](images/more-options.png) diff --git a/Document-Processing/PDF/PDF-Viewer/react/overview.md b/Document-Processing/PDF/PDF-Viewer/react/overview.md index 4b8bd0b37d..0831422ee5 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/react/overview.md @@ -1,6 +1,6 @@ --- title: Overview of React PDF Viewer Component | Syncfusion -description: Learn here all about the Syncfusion React PDF Viewer, features, its capabilities, and supported platforms. +description: Learn all about the Syncfusion React PDF Viewer, its features, capabilities, and supported platforms. platform: document-processing control: PDF Viewer documentation: UG @@ -32,8 +32,8 @@ The [`React PDF Viewer`](https://www.syncfusion.com/pdf-viewer-sdk) component is * [Form filling](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/forms/form-filling) * [Form designer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/forms/form-designer) * [Handwritten signature](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/annotation/signature-annotation) -* [Toolbar](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/toolbar-customization/overview) - Built-in toolbar and custom toolbars for common viewer actions. -* [Globalization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/localization/default-language) - Localize the UI. +* [Toolbar](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/toolbar-customization/overview): Built-in toolbar and custom toolbars for common viewer actions. +* [Globalization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/localization/default-language): Localize the UI. * Open and display [normal and protected PDF files](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) ## Supported Web platforms From c7cdff6180dc8ac1ef7098f502d4eba03bf127c6 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Fri, 24 Jul 2026 13:00:08 +0530 Subject: [PATCH 8/9] Revamped the document-handling files --- .../PDF/PDF-Viewer/react/document-handling/load-large-pdf.md | 2 +- .../PDF-Viewer/react/document-handling/load-password-pdf.md | 2 +- .../PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md | 2 +- .../PDF-Viewer/react/document-handling/retrieve-loadedDoc.md | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-large-pdf.md b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-large-pdf.md index 384c2b809b..bfd45a63ec 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-large-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-large-pdf.md @@ -130,7 +130,7 @@ require more storage for: Enabling local storage in the PDF Viewer can improve performance and smoothness when working with large files. This allows the viewer to cache document data locally, reducing repeated network requests and memory spikes. -Use the [`enableLocalStorage`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enablelocalstorage) property to control this behavior. When set to `true`, session data is stored in memory for the current session; when `false` (default), browser session storage is used. +Use the [`enableLocalStorage`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enablelocalstorage) property to control this behavior. When set to `true`, session data is stored in the browser's local storage; when `false` (default), browser session storage is used. **How the viewer stores this data by default** diff --git a/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-password-pdf.md b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-password-pdf.md index 0cbc4e8d17..2dd4ccd0d0 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-password-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-password-pdf.md @@ -53,7 +53,7 @@ viewer.load( This is useful when the password is known beforehand. -### 2.2 Loading a Password-Protected Document's URL Using `documentPath` +### 2.2 Loading a Password-Protected PDF Using `documentPath` If the [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) points to a password-protected PDF: diff --git a/Document-Processing/PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md b/Document-Processing/PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md index 913babcf99..d9c51cd65a 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md @@ -75,7 +75,7 @@ const bytes = await doc.save(); ### Flatten on Load -Use the following code-snippet, when you want uploaded PDFs to be flattened before they are loaded into the viewer. +Use the following code-snippet when you want uploaded PDFs to be flattened before they are loaded into the viewer. {% tabs %} {% highlight js tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/react/document-handling/retrieve-loadedDoc.md b/Document-Processing/PDF/PDF-Viewer/react/document-handling/retrieve-loadedDoc.md index e6f8bf89e5..829c54b0a2 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/document-handling/retrieve-loadedDoc.md +++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/retrieve-loadedDoc.md @@ -1,6 +1,6 @@ --- layout: post -title: Retrieve the Loaded Document in React PDF Viewer | syncfusion +title: Retrieve the Loaded Document in React PDF Viewer | Syncfusion description: Learn how to access the loaded PDF document instance in the React PDF Viewer using refs and the documentLoad event. platform: document-processing documentation: ug @@ -64,7 +64,7 @@ function App() { // 2) Read loaded document details (shape depends on event payload/version) console.log('documentLoad args:', args); - // 4) Call viewer APIs (after load) + // 3) Call viewer APIs (after load) const pageCount = (viewer && viewer.pageCount) || (args && args.pageCount) || From 6c7f0fb6ccbfa684c3f995e60c41f5bb3be8d31a Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Fri, 24 Jul 2026 13:51:26 +0530 Subject: [PATCH 9/9] Resolved the CI errors --- Document-Processing-toc.html | 7 +++++++ .../react/document-handling/retrieve-loadedDoc.md | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 5290647ebd..db044ee277 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -286,6 +286,7 @@
  • Feature Modules
    • @@ -514,6 +515,7 @@
  • Feature Modules
    • @@ -715,6 +717,7 @@
  • Agentic UI Builder Skill
    • @@ -1269,6 +1272,7 @@
  • Agentic UI Builder Skill
    • @@ -1591,6 +1595,7 @@
  • with Server-Backed PDF Viewer
  • Vue 3
  • Quasar
    • +
  • Migrating from Server-Backed to Standalone
  • Feature Modules
    • @@ -1818,6 +1823,7 @@
  • Feature Modules
    • @@ -2085,6 +2091,7 @@
  • Module Injection
    • diff --git a/Document-Processing/PDF/PDF-Viewer/react/document-handling/retrieve-loadedDoc.md b/Document-Processing/PDF/PDF-Viewer/react/document-handling/retrieve-loadedDoc.md index 829c54b0a2..7777269805 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/document-handling/retrieve-loadedDoc.md +++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/retrieve-loadedDoc.md @@ -13,7 +13,7 @@ This page explains how to access the React PDF Viewer instance using a React ref ## Explanation: Why access the loaded document instance? -- The viewer instance (via **React ref**) gives you a stable handle to call APIs such as [`zoom`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/magnification), [`print`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/print), [`download`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/download), and [`navigation`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/navigation). +- The viewer instance (via **React ref**) gives you a stable handle to call APIs such as [`zoom`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/magnification), [`print`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/print), [`download`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/download), and [`navigation`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/interactive-pdf-navigation/overview). - The **document load event** (fires after the PDF is parsed and pages are ready) is the correct moment to read **document information** (title, author, page count, etc.) and **page metrics**, and to trigger post‑load UI logic. - Accessing the instance too early (before load completes) may cause null/undefined errors or incomplete information.