Troubleshooting
diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md
index c10795c987..3148282393 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md
@@ -7,11 +7,11 @@ control: PdfViewer
documentation: ug
---
-# Redaction in Mobile View in React PdfViewer Component
+# Redaction in mobile view in React PdfViewer component
-The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the React PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices.
+The Redaction tool lets users permanently mark and remove sensitive content from PDF documents in mobile view. It is optimized for touch interactions and provides a streamlined redaction workflow for phones and tablets.
-
+
N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens.
@@ -69,129 +69,129 @@ root.render();
{% endhighlight %}
{% endtabs %}
-## Understanding Mobile Redaction Toolbar Tools
+## Understanding mobile redaction toolbar tools
-When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow.
+When entering redaction mode in mobile view, a specialized redaction toolbar appears with tools optimized for touch. Each tool supports a specific step in the redaction workflow.
-### Redaction Annotation Tool
+### Redaction annotation tool
-The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content:
+The Redaction Annotation tool creates rectangular overlays that mark content for removal.
-Function: Creates visual redaction annotations that mark content for permanent removal
-Usage:
-Touch and drag to draw rectangular redaction overlays on any content area.
+Function: create visual redaction annotations that mark content for permanent removal.
+
+Usage: touch and drag to draw rectangular redaction overlays.
Process:
-- Selected content appears with a customizable overlay (default black)
-- Annotations remain editable until explicitly applied
-- Can be repositioned or deleted before final application
-
+- Selected content shows a customizable overlay (default black).
+- Annotations remain editable until explicitly applied and can be repositioned or deleted.
+
+
+
+### Page redaction tool
+
+The Page Redaction tool supports batch redaction of entire pages based on patterns.
+
+
-### Page Redaction Tool
+Function: redact complete pages or page ranges with one action.
-The Page Redaction tool enables batch redaction of entire pages based on specific patterns.
+Options:
-
+- **Odd pages**: redact pages 1, 3, 5, etc.
+- **Even pages**: redact pages 2, 4, 6, etc.
+- **Specific pages**: specify single pages, ranges (for example, 1-5), or comma-separated lists (for example, 1,3,5-7).
+- **Current page**: redact the currently displayed page.
-Function: Redacts complete pages or page ranges with a single action
-Options Available:
-- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.)
-- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.)
-- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7)
-- Current Page: Redacts only the currently displayed page
+Usage: choose a pattern, review affected pages in the viewer, and confirm the redaction scope.
-Usage:
-Select desired pattern → Review affected pages in the viewer → Confirm redaction scope
+
-
+### Redaction properties tool
-### Redaction Properties Tool
+The Redaction Properties tool customizes redaction appearance before applying changes.
-The Redaction Properties tool allows customization of redaction appearance before application.
+
-
+Customizable properties include:
-Function: Customize the visual appearance of redaction overlays and text replacement
-Customizable Properties:
-- Fill Color: Change the redaction overlay color (default: black)
-- Outline Color: Set outline color for redaction boxes (optional)
-- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL")
-- Text Color: Change overlay text color for better visibility
-- Text Font: Select font family for overlay text
-- Text Alignment: Position overlay text within redaction boxes
-- Text Size: Adjust overlay text size relative to redaction area
+- **Fill color**: redaction overlay color (default black).
+- **Outline color**: optional outline for redaction boxes.
+- **Overlay text**: custom text shown on redacted areas (for example, "REDACTED").
+- **Text color and font**: control visibility and style of overlay text.
+- **Text alignment and size**: position and scale overlay text within the redaction area.
-
+
-## Enabling Redaction Mode in Mobile View
+## Enabling redaction mode in mobile view
-Step 1: Tap the Redaction button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer.
+1. Tap the Redaction button in the mobile toolbar to activate redaction mode; the redaction toolbar appears at the bottom of the viewer.
-Step 2: From the redaction toolbar, select your desired redaction tool:
-- First Tool (Redaction Annotation): For selective content redaction
-- Second Tool (Page Redaction): For page-wide or pattern-based redaction
-- Third Tool (Redaction Properties): For appearance customization
+2. From the redaction toolbar, select a redaction tool:
-Step 3: Configure your redaction parameters using the selected tool interface.
+- **Redaction Annotation**: selective content redaction.
+- **Page Redaction**: page-wide or pattern-based redaction.
+- **Redaction Properties**: configure appearance options.
-## Applying Different Redaction Types in Mobile View
+3. Configure redaction parameters using the selected tool interface.
-### Selective Content Redaction
-1. Select Redaction Annotation tool (first button)
-2. Choose Content: Tap and drag over text or draw rectangular areas
-3. Preview: Check redaction overlays for accuracy
-4. Apply: Tap "Apply Redactions" button
+## Applying different redaction types in mobile view
-### Page-Wide Redaction
-1. Select Page Redaction tool (second button)
-2. Choose Pattern: Select odd pages, even pages, or custom range
-3. Review: Verify affected pages in the viewer
-4. Apply: Confirm page redaction scope and apply
+### Selective content redaction
-### Custom Appearance Redaction
-1. Select Redaction Properties tool (third button)
-2. Customize: Adjust colors, overlay text, and formatting
-3. Preview: See changes applied to existing annotations
-4. Apply: Use customized appearance for final redaction
+1. Select the Redaction Annotation tool.
+2. Tap and drag to select content or draw rectangular areas.
+3. Preview overlays for accuracy.
+4. Tap **Apply Redactions** to apply selected annotations.
-## Applying Redactions in Mobile View
+### Page-wide redaction
-N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered.
+1. Select the Page Redaction tool.
+2. Choose a pattern (odd, even, specific range).
+3. Review affected pages in the viewer.
+4. Confirm and apply redaction for chosen pages.
-Once you have configured redactions using any combination of tools.
+### Custom appearance redaction
-Step 1: Review all redaction marks and configurations.
+1. Select the Redaction Properties tool.
+2. Adjust colors, overlay text, and formatting.
+3. Preview changes on existing annotations.
+4. Apply to use the customized appearance for final redaction.
-
+## Applying redactions in mobile view
-Step 2: Tap the Apply Redactions button in the redaction toolbar
+Note: Applying redactions is permanent. After applying, underlying content and extracted text are removed and cannot be recovered. Back up the original document before applying redactions.
-
+After configuring redactions using any combination of tools:
-Step 3: Confirm the action when prompted - this operation is permanent and cannot be undone
+1. Review all redaction marks and configurations.
-
+
+2. Tap the **Apply Redactions** button in the redaction toolbar.
-The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text).
+
-
+3. Confirm the action when prompted — this operation is irreversible.
-## Removing Redaction Annotations
+
-To remove existing redaction annotations before they are applied:
+The selected content is permanently removed and replaced according to redaction properties (solid overlays or custom overlay text).
+
+
-- Step 1: Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode
-- Step 2: Tap on any existing redaction annotation you wish to remove
-- Step 3: Select Delete from the context menu that appears
+## Removing redaction annotations
+
+To remove existing redaction annotations before they are applied:
-Alternative: Tap redaction annotation → Use delete button in annotation properties panel
+1. Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode.
+2. Tap an existing redaction annotation to select it.
+3. Choose **Delete** from the context menu or use the delete option in the annotation properties panel.
-
+
-N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified.
+N> Once redactions are applied they become part of the PDF content and cannot be removed or modified.
## See Also
diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md
index e7062848aa..07b1108feb 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Redaction in React PdfViewer
-Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion React PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action.
+Redaction annotations hide confidential or sensitive information in a PDF. The Syncfusion React PDF Viewer (EJ2) enables marking areas or entire pages for redaction, customizing appearance, and applying changes permanently.
## Enable the redaction toolbar
@@ -109,7 +109,7 @@ A confirmation dialog appears before applying redaction to ensure you acknowledg
-N> After redaction is applied, the original content cannot be recovered.
+N> After redaction is applied the original content cannot be recovered.
## Comment Support
diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md
index 1a925cb76a..d873279070 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md
@@ -7,7 +7,7 @@ control: PdfViewer
documentation: ug
---
-# Programmatic support for redaction in React PdfViewer
+# Programmatic support for redaction in React PDF Viewer
The Syncfusion React PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel.
@@ -15,7 +15,7 @@ The Syncfusion React PDF Viewer provides APIs to add, update, delete, and apply
To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
-The following example shows how to enable the redaction toolbar:
+The example below shows a PdfViewer with the redaction toolbar enabled:
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -70,6 +70,8 @@ root.render();
You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. You can listen to the `annotationAdd` event to track when annotations are added.
+The example below adds a redaction annotation at a fixed location on the first page.
+
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -186,6 +188,8 @@ root.render();
Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code.
+This example removes a redaction annotation by id.
+
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -281,12 +285,14 @@ root.render();
{% endtabs %}
-Alternatively, you can remove annotations by selecting them in the UI and pressing the **Delete** key.
+Annotations can also be removed by selecting them in the UI and pressing the **Delete** key.
## Update redaction annotation properties programmatically
You can update properties of an existing redaction annotation using the `editAnnotation` API. For example, to change overlay text or fill color:
+The example below updates properties of existing redaction annotations.
+
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -399,6 +405,8 @@ root.render();
Entire pages can be marked for redaction using the `addPageRedactions` method:
+This example marks full pages for redaction.
+
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -496,6 +504,8 @@ root.render();
Once annotations are added, you can permanently apply them to the document using the `redact` method:
+This example applies all pending redactions, permanently modifying the document.
+
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -589,12 +599,14 @@ root.render();
{% endhighlight %}
{% endtabs %}
-N> Applying redaction is irreversible. Once applied, the original content cannot be recovered.
+N> Applying redaction is irreversible. Create a backup of the original document before applying redactions; once applied, the original content cannot be recovered.
## Configure default redaction annotation properties
You can configure default properties for redaction annotations (such as fill color, overlay text, and font) when adding them programmatically:
+The example below sets default redaction properties during viewer initialization.
+
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -704,7 +716,7 @@ The redaction property panel allows users to update annotation properties throug
## See also
* [Overview of Redaction](./overview)
-* [Redaction UI interactions](./ui-interaction)
+* [Redaction UI interactions](./ui-interactions)
* [Redaction Toolbar](./toolbar)
-* [Reaction in Mobile view](./mobile-view)
+* [Redaction in Mobile view](./mobile-view)
* [Search Text and Redact](./search-redact)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/search-redact.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/search-redact.md
index 4cfd7e47f9..4a7a708d80 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/search-redact.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/search-redact.md
@@ -8,18 +8,17 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Search text and redact in React PdfViewer
+# Search text and redact in React PDF Viewer
-You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result.
+You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the `extractTextCompleted` event, triggers text extraction, performs a search, and places redaction annotations for every result.
-N> Prerequisites: Add the PdfViewer control to your React application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content.
+N> Prerequisites — add the PdfViewer control to your React application and ensure a document is loaded. Confirm that the redaction feature is available in the product version you are using. Create a backup of the original document before applying redactions; applied redactions are permanent and cannot be recovered.
-## Steps to add Redaction annotations on search Text Bounds
+## Steps to add redaction annotations to search text bounds
**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample.
-
-**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds.
+**Step 2:** The example below searches for a term, adds redaction annotations for each match, and exposes a button to apply redactions. Use the following code snippets to add redaction annotations on search text bounds.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -159,12 +158,12 @@ root.render();
- Ensure the PDF is fully loaded before triggering extraction and search.
- Bounds from search are in points (72 DPI). Convert to pixels (96 DPI) to align with annotation coordinates.
- Customize overlay text, colors, and typography as needed.
-- Adding a redaction annotation covers the content visually. To permanently remove sensitive data, use the viewer's Apply Redaction action or equivalent API if available in your version.
+- Adding a redaction annotation only marks the content visually. To permanently remove sensitive data, use the viewer's Apply Redaction action or the `annotation.redact()` API; this operation is irreversible.
## See also
* [Overview of Redaction](./overview)
* [Programmatic Support in Redaction](./programmatic-support)
-* [UI interactions](./ui-interaction)
+* [Redaction UI interactions](./ui-interactions)
* [Redaction in Mobile View](./mobile-view)
* [Redaction Toolbar](./toolbar)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/toolbar.md
index c3c367aa5d..b12d8f142e 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/toolbar.md
@@ -7,15 +7,15 @@ control: PDF Viewer
documentation: ug
---
-# Redaction toolbar customization in React
+# Redaction toolbar customization in React PDF Viewer
-The redaction toolbar in the Syncfusion React PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items.
+The redaction toolbar in the Syncfusion React PDF Viewer can be customized by rearranging, hiding, or adding toolbar items. You can also insert custom items at specific positions among the existing toolbar items.
## Enable the redaction toolbar
To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
-The following example shows how to enable the redaction toolbar:
+The following example shows how to enable the redaction toolbar.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -84,7 +84,7 @@ When **RedactionEditTool** is included in the toolbar settings, clicking the red
You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`.
-The following example demonstrates toggling the redaction toolbar programmatically:
+The example below demonstrates toggling the redaction toolbar programmatically.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -189,7 +189,7 @@ Refer to the following image for details:
## See also
* [Adding the redaction annotation in PDF viewer](../redaction/overview)
-* [UI interactions](./ui-interaction)
+* [Redaction UI interactions](./ui-interactions)
* [Programmatic support](./programmatic-support)
* [Mobile view](./mobile-view)
* [Search Text and Redact](./search-redact)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/ui-interaction.md
index f0ddd480e6..1d96fcdd8c 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/ui-interaction.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/ui-interaction.md
@@ -1,13 +1,13 @@
---
layout: post
title: Redaction UI interactions in React PDF Viewer | Syncfusion
-description: Learn about UI interactions in Redaction annotations of the Syncfusion React PDF Viewer component.
+description: Learn about UI interactions like add, edit and modify in Redaction annotations of the Syncfusion React PDF Viewer component.
platform: document-processing
control: PDF Viewer
documentation: ug
---
-# Redaction UI interactions in React PdfViewer
+# Redaction UI interactions in React PDF Viewer
## Add redaction annotations from the toolbar
@@ -51,7 +51,7 @@ The property panel can be opened in two ways:
Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover.
-* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area.
+* Enable 'Overlay Text' to show text (for example, Confidential) over the redacted area.
* Overlay Text – Enter the text to display.
* Repeat Overlay Text – Tile the text to cover the whole region.
@@ -62,7 +62,7 @@ Use the General tab to define how the content will look after redaction. These s
-Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes.
+N> Hovering the mouse over a redaction annotation shows a preview of the final look. After you click Apply Redaction, these settings are flattened into the page and cannot be edited. Tip: Click Save in the dialog to keep your changes.
#### Appearance tab
@@ -124,7 +124,7 @@ A confirmation dialog appears before applying redaction to ensure you acknowledg
-N> Redaction is permanent. Once applied, the original content cannot be restored.
+N> Redaction is permanent. Create a backup of the original document before applying redaction; once applied, the original content cannot be restored.
## See also
diff --git a/Document-Processing/PDF/PDF-Viewer/react/accessibility.md b/Document-Processing/PDF/PDF-Viewer/react/accessibility.md
index 07fe349bc3..bd111fd596 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/accessibility.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/accessibility.md
@@ -10,9 +10,7 @@ domainurl: ##DomainURL##
# Accessibility in Syncfusion PDF Viewer components React
-The PDF Viewer component followed the 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/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
-
-The accessibility compliance for the PDF Viewer component is outlined below.
+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.
| Accessibility Criteria | Compatibility |
| -- | -- |
@@ -40,7 +38,7 @@ The accessibility compliance for the PDF Viewer component is outlined below.
## WAI-ARIA attributes
-[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript,and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used in the PDF Viewer component
+[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessible Rich Internet Applications) provides semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used by the PDF Viewer component.
| Attributes | Purpose |
| --- | --- |
@@ -60,7 +58,7 @@ The accessibility compliance for the PDF Viewer component is outlined below.
## Keyboard interaction
-The PDF Viewer component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Message component.
+The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline to support users of assistive technologies and users who rely on keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer component.
| **Press (Windows)** |**Press (Macintosh)** | **To do this** |
| --- | --- | --- |
@@ -95,15 +93,13 @@ The PDF Viewer component followed the [keyboard interaction](https://www.w3.org/
|Shift + H |Shift + H |Enable pan mode|
|Shift + V |Shift + V |Enable text selection mode|
-The current implementation of our PDF Viewer includes keyboard shortcuts for various functions like scrolling, zooming, text search, printing, and annotation deletion.
-
-To enhance user experience, we're adding additional keyboard shortcuts for actions such as navigating between pages, accessing specific pages, toggling annotation tools, and displaying PDF elements like outlines, annotations, bookmarks, and thumbnails.
+The current implementation of the PDF Viewer includes keyboard shortcuts for scrolling, zooming, text search, printing, annotation deletion, and other common actions.
-To support this, we're introducing a new class called **commandManager**, which handles custom commands triggered by specific key gestures. These custom commands will be defined by users and executed accordingly.
+Additional keyboard shortcuts support navigation between pages, direct access to specific pages, toggling annotation tools, and displaying PDF elements such as outlines, annotations, bookmarks, and thumbnails.
-The **commandManager** will have a parameter called Commands, which will hold the collection of custom keyboard commands specified by users. Each custom command will be represented by a KeyboardCommand class, containing the `command name` and associated `keyboard combination`.
+To support custom keyboard actions, the implementation includes a `commandManager` construct that handles commands triggered by specific key gestures. The `commandManager` exposes a `Commands` parameter that contains a collection of custom keyboard commands. Each custom command is represented by a `KeyboardCommand` object containing a `name` and an associated `gesture` description.
-Additionally, we're introducing the **keyboardCustomCommands** parameter for the CommandManager, which will utilize the EventCallback to handle keyboard events and trigger appropriate methods when specific key combinations are pressed.
+A `keyboardCustomCommands` callback is available to handle keyboard events and trigger custom behavior when a defined key combination is detected.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -237,18 +233,18 @@ root.render();
{% endhighlight %}
{% endtabs %}
-Each `keyboardCommand` object consists of a name property, specifying the `name` of the `custom command`, and a `gesture property`, defining the key gesture associated with the command.
+Each `keyboardCommand` object includes a `name` property that identifies the command and a `gesture` property that defines the key gesture associated with the command.
-For example, the first command named `customCopy` is associated with the **G** key and requires both the **Shift** and **Alt** modifier keys to be pressed simultaneously.
+For example, a command named `customCopy` can be associated with the **G** key together with the **Shift** and **Alt** modifiers.
-Additionally, there's an explanation of the key modifiers used in the gestures:
+Key modifier encodings used in gesture definitions are as follows:
-* Ctrl corresponds to the Control key, represented by the value `1`.
-* Alt corresponds to the Alt key, represented by the value `2`.
-* Shift corresponds to the Shift key, represented by the value `4`.
-* Meta corresponds to the Command key on macOS or the Windows key on Windows, represented by the value `8`.
+- Control (Ctrl): `1`
+- Alt: `2`
+- Shift: `4`
+- Meta (Command on macOS or Windows key on Windows): `8`
-This setup allows users to perform custom actions within the PDF viewer by pressing specific key combinations, enhancing the user experience and providing more efficient navigation and interaction options.
+These gesture definitions enable users to invoke custom actions in the PDF Viewer by pressing specified key combinations, improving navigation and interaction efficiency.
## Ensuring accessibility
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-event.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-event.md
index edecf46068..5b159c7aac 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-event.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-event.md
@@ -8,39 +8,39 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Annotations Events in React PDF Viewer control
+# Annotation events in React PDF Viewer component
-The PDF Viewer component triggers various events based on user interactions and changes in the component's state. These events can be used to perform actions when a specific event occurs. This section describes the events available in the PDF Viewer component.
+The PDF Viewer raises events for annotation and signature interactions (add, remove, move, resize, select, etc.). Handle these events to integrate custom workflows, telemetry, or UI updates. Code samples below demonstrate typical handlers — code blocks are preserved unchanged.
| Event | Description |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------- |
-| [`annotationAdd`](#annotationadd) | Triggers when an annotation is added to a page in the PDF document. |
-| [`annotationDoubleClick`](#annotationdoubleclick) | Triggers when an annotation is double-clicked. |
-| [`annotationMouseLeave`](#annotationmouseleave) | Triggers when the mouse pointer moves away from an annotation object. |
-| [`annotationMouseover`](#annotationmouseover) | Triggers when the mouse pointer moves over an annotation object. |
-| [`annotationMove`](#annotationmove) | Triggers when an annotation is moved on a page in the PDF document. |
-| [`annotationMoving`](#annotationmoving) | Triggers while an annotation is being moved. |
-| [`annotationPropertiesChange`](#annotationpropertieschange) | Triggers when the properties of an annotation are modified on a PDF page. |
-| [`annotationRemove`](#annotationremove) | Triggers when an annotation is removed from a page in the PDF document. |
-| [`annotationResize`](#annotationresize) | Triggers when an annotation is resized on a page in the PDF document. |
-| [`annotationSelect`](#annotationselect) | Triggers when an annotation is selected on a page in the PDF document. |
-| [`annotationUnSelect`](#annotationunselect) | Triggers when an annotation is unselected on a page in the PDF document. |
-| [`beforeAddFreeText`](#beforeaddfreetext) | Triggers before adding a text in the freeText annotation. |
-| [`addSignature`](#addsignature) | Triggers when a signature is added to a page in the PDF document. |
-| [`removeSignature`](#removesignature) | Triggers when a signature is removed from a page in the PDF document. |
-| [`resizeSignature`](#resizesignature) | Triggers when a signature is resized on a page in the PDF document. |
-| [`signaturePropertiesChange`](#signaturepropertieschange) | Triggers when the properties of a signature are changed on a page in the PDF document. |
-| [`signatureSelect`](#signatureselect) | Triggers when a signature is selected on a page in the PDF document. |
-| [`signatureUnselect`](#signatureunselect) | Triggers when a signature is unselected on a page in the PDF document. |
+| [`annotationAdd`](#annotationadd) | Fires when an annotation is added to a page in the PDF document. |
+| [`annotationDoubleClick`](#annotationdoubleclick) | Fires when an annotation is double-clicked. |
+| [`annotationMouseLeave`](#annotationmouseleave) | Fires when the mouse pointer moves away from an annotation object. |
+| [`annotationMouseover`](#annotationmouseover) | Fires when the mouse pointer moves over an annotation object. |
+| [`annotationMove`](#annotationmove) | Fires when an annotation is moved on a page in the PDF document. |
+| [`annotationMoving`](#annotationmoving) | Fires while an annotation is being moved. |
+| [`annotationPropertiesChange`](#annotationpropertieschange) | Fires when the properties of an annotation are modified on a PDF page. |
+| [`annotationRemove`](#annotationremove) | Fires when an annotation is removed from a page in the PDF document. |
+| [`annotationResize`](#annotationresize) | Fires when an annotation is resized on a page in the PDF document. |
+| [`annotationSelect`](#annotationselect) | Fires when an annotation is selected on a page in the PDF document. |
+| [`annotationUnSelect`](#annotationunselect) | Fires when an annotation is unselected on a page in the PDF document. |
+| [`beforeAddFreeText`](#beforeaddfreetext) | Fires before a free-text annotation is added. |
+| [`addSignature`](#addsignature) | Fires when a signature is added to a page in the PDF document. |
+| [`removeSignature`](#removesignature) | Fires when a signature is removed from a page in the PDF document. |
+| [`resizeSignature`](#resizesignature) | Fires when a signature is resized on a page in the PDF document. |
+| [`signaturePropertiesChange`](#signaturepropertieschange) | Fires when the properties of a signature are changed on a page in the PDF document. |
+| [`signatureSelect`](#signatureselect) | Fires when a signature is selected on a page in the PDF document. |
+| [`signatureUnselect`](#signatureunselect) | Fires when a signature is unselected on a page in the PDF document. |
### annotationAdd
-The [annotationAdd](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationaddevent) event is triggered when an annotation is added to a PDF document's page.
+The [annotationAdd](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationaddevent) event is triggered when an annotation is added to a PDF document's page.
#### Event Arguments
-For event data, see [AnnotationAddEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationAddEventArgs/). It provides properties such as `annotationId`, `pageNumber`, `annotationType`, and `bounds`.
+For event data, see [AnnotationAddEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationAddEventArgs). It provides properties such as `annotationId`, `pageNumber`, `annotationType`, and `bounds`.
The following example illustrates how to handle the `annotationAdd` event.
@@ -112,11 +112,11 @@ export default App;
### annotationDoubleClick
-The [annotationDoubleClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationdoubleclickevent) event is triggered when an annotation is double-clicked.
+The [annotationDoubleClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationdoubleclickevent) event is triggered when an annotation is double-clicked.
#### Event Arguments
-For event data, see [AnnotationDoubleClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationDoubleClickEventArgs/).
+For event data, see [AnnotationDoubleClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationDoubleClickEventArgs).
The following example illustrates how to handle the `annotationDoubleClick` event.
@@ -187,11 +187,11 @@ export default App;
### annotationMouseLeave
-The [annotationMouseLeave](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationmouseleaveevent) event is triggered when the user's mouse pointer moves away from an annotation object.
+The [annotationMouseLeave](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationmouseleaveevent) event is triggered when the user's mouse pointer moves away from an annotation object.
#### Event Arguments
-For event data, see [AnnotationMouseLeaveEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMouseLeaveEventArgs/).
+For event data, see [AnnotationMouseLeaveEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMouseLeaveEventArgs).
The following example illustrates how to handle the `annotationMouseLeave` event.
@@ -262,11 +262,11 @@ export default App;
### annotationMouseover
-The [annotationMouseover](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationmouseoverevent) event is triggered when the mouse is moved over an annotation object.
+The [annotationMouseover](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationmouseoverevent) event is triggered when the mouse is moved over an annotation object.
#### Event Arguments
-For event data, see [AnnotationMouseOverEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMouseOverEventArgs/).
+For event data, see [AnnotationMouseOverEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMouseOverEventArgs).
The following example illustrates how to handle the `annotationMouseover` event.
@@ -337,11 +337,11 @@ export default App;
### annotationMove
-The [annotationMove](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationmoveevent) event is triggered when an annotation is moved over the page of the PDF document.
+The [annotationMove](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationmoveevent) event is triggered when an annotation is moved over the page of the PDF document.
#### Event Arguments
-For event data, see [AnnotationMoveEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMoveEventArgs/).
+For event data, see [AnnotationMoveEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMoveEventArgs).
The following example illustrates how to handle the `annotationMove` event.
@@ -412,11 +412,11 @@ export default App;
### annotationMoving
-The [annotationMoving](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationmovingevent) event is triggered while an annotation is being moved.
+The [annotationMoving](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationmovingevent) event is triggered while an annotation is being moved.
#### Event Arguments
-For event data, see [AnnotationMovingEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMovingEventArgs/).
+For event data, see [AnnotationMovingEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationMovingEventArgs).
The following example illustrates how to handle the `annotationMoving` event.
@@ -487,11 +487,11 @@ export default App;
### annotationPropertiesChange
-The [annotationPropertiesChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationpropertieschangeevent) event is triggered when an annotation's property is modified on a PDF document page.
+The [annotationPropertiesChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationpropertieschangeevent) event is triggered when an annotation's property is modified on a PDF document page.
#### Event Arguments
-For event data, see [AnnotationPropertiesChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs/). It provides properties such as `annotationId`, `pageNumber`, and `action`.
+For event data, see [AnnotationPropertiesChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs). It provides properties such as `annotationId`, `pageNumber`, and `action`.
The following example illustrates how to handle the `annotationPropertiesChange` event.
@@ -563,11 +563,11 @@ export default App;
### annotationRemove
-The [annotationRemove](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationremoveevent) event is triggered when an annotation is removed from a PDF document's page.
+The [annotationRemove](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationremoveevent) event is triggered when an annotation is removed from a PDF document's page.
#### Event Arguments
-For event data, see [AnnotationRemoveEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationRemoveEventArgs/). It provides properties such as `annotationId` and `pageNumber`.
+For event data, see [AnnotationRemoveEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationRemoveEventArgs). It provides properties such as `annotationId` and `pageNumber`.
The following example illustrates how to handle the `annotationRemove` event.
@@ -638,11 +638,11 @@ export default App;
### annotationResize
-The [annotationResize](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationresizeevent) event is triggered when an annotation is resized on a PDF document page.
+The [annotationResize](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationresizeevent) event is triggered when an annotation is resized on a PDF document page.
#### Event Arguments
-For event data, see [AnnotationResizeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationResizeEventArgs/).
+For event data, see [AnnotationResizeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationResizeEventArgs).
The following example illustrates how to handle the `annotationResize` event.
@@ -713,11 +713,11 @@ export default App;
### annotationSelect
-The [annotationSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationselectevent) event is triggered when an annotation is selected on a PDF document's page.
+The [annotationSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationselectevent) event is triggered when an annotation is selected on a PDF document's page.
#### Event Arguments
-For event data, see [AnnotationSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationSelectEventArgs/).
+For event data, see [AnnotationSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationSelectEventArgs).
The following example illustrates how to handle the `annotationSelect` event.
@@ -788,11 +788,11 @@ export default App;
### annotationUnselect
-The [annotationUnselect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationunselectevent) event is triggered when an annotation is unselected from the PDF document's page.
+The [annotationUnselect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#annotationunselectevent) event is triggered when an annotation is unselected from the PDF document's page.
#### Event Arguments
-For event data, see [AnnotationUnSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationUnSelectEventArgs/).
+For event data, see [AnnotationUnSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationUnSelectEventArgs).
The following example illustrates how to handle the `annotationUnselect` event.
@@ -863,11 +863,11 @@ export default App;
### beforeAddFreeText
-The [beforeAddFreeText](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#beforeaddfreetextevent) event is triggered before adding a text in the freeText annotation.
+The [beforeAddFreeText](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#beforeaddfreetextevent) event is triggered before adding a text in the freeText annotation.
#### Event Arguments
-For event data, see [BeforeAddFreeTextEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/beforeAddFreeTextEventArgs/).
+For event data, see [BeforeAddFreeTextEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/beforeAddFreeTextEventArgs).
The following example illustrates how to handle the `beforeAddFreeText` event.
@@ -942,11 +942,11 @@ export default App;
### addSignature
-The [addSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#addsignatureevent) event is triggered when a signature is added to a page of a PDF document.
+The [addSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#addsignatureevent) event is triggered when a signature is added to a page of a PDF document.
#### Event Arguments
-For event data, see [AddSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/addSignatureEventArgs/). It provides properties such as `pageNumber`.
+For event data, see [AddSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/addSignatureEventArgs). It provides properties such as `pageNumber`.
The following example illustrates how to handle the `addSignature` event.
@@ -1017,11 +1017,11 @@ export default App;
### removeSignature
-The [removeSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#removesignatureevent) event is triggered when the signature is removed from the page of a PDF document.
+The [removeSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#removesignatureevent) event is triggered when the signature is removed from the page of a PDF document.
#### Event Arguments
-For event data, see [RemoveSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/removeSignatureEventArgs/). It provides properties such as `pageNumber`.
+For event data, see [RemoveSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/removeSignatureEventArgs). It provides properties such as `pageNumber`.
The following example illustrates how to handle the `removeSignature` event.
@@ -1092,11 +1092,11 @@ export default App;
### resizeSignature
-The [resizeSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#resizesignatureevent) event is triggered when the signature is resized and placed on a page of a PDF document.
+The [resizeSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resizesignatureevent) event is triggered when the signature is resized and placed on a page of a PDF document.
#### Event Arguments
-For event data, see [ResizeSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/resizeSignatureEventArgs/).
+For event data, see [ResizeSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/resizeSignatureEventArgs).
The following example illustrates how to handle the `resizeSignature` event.
@@ -1167,11 +1167,11 @@ export default App;
### signaturePropertiesChange
-The [signaturePropertiesChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#signaturepropertieschangeevent) event is triggered when the property of the signature is changed in the page of the PDF document.
+The [signaturePropertiesChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#signaturepropertieschangeevent) event is triggered when the property of the signature is changed in the page of the PDF document.
#### Event Arguments
-For event data, see [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/).
+For event data, see [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs).
The following example illustrates how to handle the `signaturePropertiesChange` event.
@@ -1242,11 +1242,11 @@ export default App;
### signatureSelect
-The [signatureSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#signatureselectevent) event is triggered when signature is selected over the page of the PDF document.
+The [signatureSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#signatureselectevent) event is triggered when signature is selected over the page of the PDF document.
#### Event Arguments
-For event data, see [SignatureSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signatureSelectEventArgs/).
+For event data, see [SignatureSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signatureSelectEventArgs).
The following example illustrates how to handle the `signatureSelect` event.
@@ -1317,11 +1317,11 @@ export default App;
### signatureUnselect
-The [signatureUnselect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#signatureunselectevent) event is triggered when signature is unselected over the page of the PDF document.
+The [signatureUnselect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#signatureunselectevent) event is triggered when signature is unselected over the page of the PDF document.
#### Event Arguments
-For event data, see [SignatureUnSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signatureUnSelectEventArgs/).
+For event data, see [SignatureUnSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signatureUnSelectEventArgs).
The following example illustrates how to handle the `signatureUnselect` event.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/arrow-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/arrow-annotation.md
new file mode 100644
index 0000000000..09c6e251c3
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/arrow-annotation.md
@@ -0,0 +1,285 @@
+---
+layout: post
+title: Arrow Annotation (Shape) in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Arrow annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Arrow Annotation (Shape) in React PDF Viewer
+Arrow annotations let users point, direct attention, or indicate flow on PDFs—useful for callouts, direction markers, and connectors during reviews. You can add arrows from the toolbar, switch to arrow mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.
+
+
+
+---
+
+## Enable Arrow Annotation in the Viewer
+
+To enable Arrow annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render();
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Apply Arrow Annotation
+
+### Apply Arrow Annotation Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Arrow**.
+3. Click and drag on the PDF page to draw the arrow.
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+---
+
+### Enable Arrow Mode
+Switch the viewer into highlight mode using `setAnnotationMode('Arrow')`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function enableArrowMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Arrow');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Arrow Mode
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function exitArrowMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('None');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Add Arrow Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) API to draw an arrow at a specific location (defined by two **vertexPoints**).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addArrow() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Arrow', {
+ offset: { x: 200, y: 370 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 370 },
+ { x: 350, y: 370 }
+ ]
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Customize Arrow Appearance
+Configure default arrow appearance (fill color, stroke color, thickness, opacity) using the [`arrowSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#arrowsettings) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+N> For **Line** and **Arrow** annotations, **Fill Color** is available only when an arrowhead style is applied at the **Start** or **End**. If both are `None`, lines do not render fill and the Fill option remains disabled.
+
+---
+
+## Manage Arrow (Edit, Move, Resize, Delete)
+### Edit Arrow
+
+#### Edit Arrow (UI)
+- Select a Arrow to view resize handles.
+- Drag endpoints to adjust length/angle.
+- Edit stroke color, opacity, and thickness using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Line Properties**
+Open the Line Properties dialog via **Right Click → Properties**.
+
+
+
+#### Edit Arrow Programmatically
+
+Modify an existing Arrow programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editArrowProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const annot of viewer.annotationCollection) {
+ if (annot.subject === 'Arrow') {
+ annot.strokeColor = '#0000ff';
+ annot.thickness = 2;
+ annot.fillColor = '#ffff00';
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Delete Arrow
+
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+---
+
+### Comments
+
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to arrow annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+---
+
+## Set properties while adding Individual Annotation
+
+Set properties for individual arrow annotations by passing values directly during [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleArrows() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Arrow 1
+ viewer.annotation.addAnnotation('Arrow', {
+ offset: { x: 200, y: 230 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 230 },
+ { x: 350, y: 230 }
+ ],
+ fillColor: '#ffff00',
+ strokeColor: '#0066ff',
+ thickness: 2,
+ opacity: 0.9,
+ author: 'User 1'
+ });
+
+ // Arrow 2
+ viewer.annotation.addAnnotation('Arrow', {
+ offset: { x: 220, y: 300 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 220, y: 300 },
+ { x: 400, y: 300 }
+ ],
+ fillColor: '#ffef00',
+ strokeColor: '#ff1010',
+ thickness: 3,
+ opacity: 0.9,
+ author: 'User 2'
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Disable Arrow Annotation
+
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Handle Arrow Events
+
+The PDF viewer provides annotation life-cycle events that notify when Arrow annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+---
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+---
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/circle-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/circle-annotation.md
new file mode 100644
index 0000000000..95c0160893
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/circle-annotation.md
@@ -0,0 +1,279 @@
+---
+layout: post
+title: Circle Annotation (Shape) in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Circle annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Circle Annotation (Shape) in React PDF Viewer
+Circle annotations let users highlight circular regions or draw emphasis bubbles on PDFs for reviews and markups. You can add circles from the toolbar, switch to circle mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.
+
+
+
+---
+
+## Enable Circle Annotation in the Viewer
+
+To enable Line annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render();
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Apply Circle Annotation
+
+### Apply Circle Annotation Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Circle**.
+3. Click and drag on the PDF page to draw the circle (ellipse).
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+---
+
+### Enable Circle Mode
+
+Switch the viewer into highlight mode using `setAnnotationMode('Circle')`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function enableCircleMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Circle');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Circle Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function exitCircleMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('None');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Add Circle Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) API to draw a circle (ellipse) at a specific location.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addCircle() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Circle', {
+ offset: { x: 200, y: 620 },
+ pageNumber: 1,
+ width: 90,
+ height: 90
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Customize Circle Appearance
+Configure default circle appearance (fill color, stroke color, thickness, opacity) using the [`circleSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#circlesettings) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Manage Circle (Edit, Move, Resize, Delete)
+
+### Edit Circle
+
+#### Edit Circle (UI)
+
+- Select a Circle to view resize handles.
+- Drag any side/corner to resize; drag inside the shape to move it.
+- Edit **fill**, **stroke**, **thickness**, and **opacity** using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit fill Color** tool
+
+
+- **Edit stroke Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Edit Thickness** slider
+
+
+#### Edit Circle Programmatically
+
+Modify an existing Circle programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editCircleProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const annot of viewer.annotationCollection) {
+ if (annot.subject === 'Circle') {
+ annot.strokeColor = '#0000ff';
+ annot.thickness = 2;
+ annot.fillColor = '#ffff00';
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Delete Circle
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+---
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to circle annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+---
+
+## Set properties while adding Individual Annotation
+Set properties for individual circle annotations by passing values directly during [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleCircles() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Circle 1
+ viewer.annotation.addAnnotation('Circle', {
+ offset: { x: 200, y: 620 },
+ pageNumber: 1,
+ width: 100,
+ height: 100,
+ opacity: 0.9,
+ strokeColor: '#ff6a00',
+ fillColor: '#ffa500',
+ author: 'User 1'
+ });
+
+ // Circle 2
+ viewer.annotation.addAnnotation('Circle', {
+ offset: { x: 340, y: 620 },
+ pageNumber: 1,
+ width: 80,
+ height: 80,
+ opacity: 0.85,
+ strokeColor: '#ff1010',
+ fillColor: '#ffe600',
+ author: 'User 2'
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Disable Circle Annotation
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Handle Circle Events
+
+The PDF viewer provides annotation life-cycle events that notify when Circle annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+---
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+---
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/highlight-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/highlight-annotation.md
new file mode 100644
index 0000000000..e3c76865fd
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/highlight-annotation.md
@@ -0,0 +1,294 @@
+---
+layout: post
+title: Highlight Text in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Highlight annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Highlight Annotation (Text Markup) in React PDF Viewer
+
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Highlight* text markup annotations in the Syncfusion **React PDF Viewer**.
+You can highlight text using the toolbar or context menu, programmatically invoke highlight mode, customize default settings, handle events, and export the PDF with annotations.
+
+---
+
+## Enable Highlight in the Viewer
+
+To enable Highlight annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and highlighting.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import {
+ PdfViewerComponent,
+ Inject,
+ Toolbar,
+ Annotation,
+ TextSelection
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render();
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Apply Highlight Annotation
+
+### Apply Highlight Using the Toolbar
+
+1. Select the text you want to highlight.
+2. Click the **Highlight** icon in the annotation toolbar.
+ - If **Pan Mode** is active, the viewer automatically switches to **Text Selection** mode.
+
+
+
+---
+
+### Apply highlight using Context Menu
+
+Right-click a selected text region → select **Highlight**.
+
+
+
+To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+
+---
+
+### Enable Highlight Mode
+
+Switch the viewer into highlight mode using `setAnnotationMode('Highlight')`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function enableHighlight() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Highlight');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Highlight Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function disableHighlightMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('None');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Add Highlight Programmatically
+
+Use [`addAnnotation()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) to insert highlight at a specific location.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addHighlight() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ viewer.annotation.addAnnotation('Highlight', {
+ bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
+ pageNumber: 1
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Customize Highlight Appearance
+
+Configure default highlight settings such as **color**, **opacity**, and **author** using [`highlightSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#highlightsettings).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Manage Highlight (Edit, Delete, Comment)
+
+### Edit Highlight
+
+#### Edit Highlight Appearance (UI)
+
+Use the annotation toolbar:
+- **Edit Color** tool
+
+
+- **Edit Opacity** slider
+
+
+---
+
+#### Edit Highlight Programmatically
+
+Modify an existing highlight programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editHighlightProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ for (let annot of viewer.annotationCollection) {
+ if (annot.textMarkupAnnotationType === 'Highlight') {
+ annot.color = '#0000ff';
+ annot.opacity = 0.8;
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Delete Highlight
+
+The PDF Viewer supports deleting existing annotations through both the UI and API.
+For detailed behavior, supported deletion workflows, and API reference, see [Delete Annotation](../remove-annotations)
+
+---
+
+### Comments
+
+Use the [Comments panel](../comments) to add, view, and reply to threaded discussions linked to underline annotations.
+It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation‑related notes within the PDF Viewer.
+
+---
+
+## Set properties while adding Individual Annotation
+
+Set properties for individual annotation before creating the control using [highlightSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#highlightsettings)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleHighlights() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Highlight 1
+ viewer.annotation.addAnnotation('Highlight', {
+ bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
+ pageNumber: 1,
+ author: 'User 1',
+ color: '#ffff00',
+ opacity: 0.9
+ });
+
+ // Highlight 2
+ viewer.annotation.addAnnotation('Highlight', {
+ bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
+ pageNumber: 1,
+ author: 'User 2',
+ color: '#ff1010',
+ opacity: 0.9
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Disable TextMarkup Annotation
+
+Disable text markup annotations (including highlight) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Handle Highlight Events
+
+The PDF viewer provides annotation life-cycle events that notify when highlight annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+---
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer.
+For full details on supported formats and steps to export or import annotations, see [Export and Import Annotation](../export-import-annotations)
+
+---
+
+## See Also
+
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/line-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/line-annotation.md
new file mode 100644
index 0000000000..cf9ac1b395
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/line-annotation.md
@@ -0,0 +1,291 @@
+---
+layout: post
+title: Line Annotation (Shape) in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Line annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Line Annotation (Shape) in React PDF Viewer
+
+Line annotations allow users to draw straight connectors or callouts on PDFs for markup, review, diagrams, or measurement guides. They support customization of color, thickness, opacity, and arrowheads, and can be edited, resized, deleted, or exported along with the document.
+
+
+
+---
+
+## Enable Line Annotation in the Viewer
+
+To enable Line annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render();
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Apply Line Annotation
+
+### Apply Line Annotation Using the Toolbar
+
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Line**.
+3. Click and drag on the PDF page to draw the line.
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+---
+
+### Enable Line Mode
+
+Switch the viewer into highlight mode using `setAnnotationMode('Line')`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function enableLineMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Line');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Line Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function exitLineMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('None');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Add Line Programmatically
+
+You can add line annotations using the [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) API.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addLine() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Line', {
+ offset: { x: 200, y: 230 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 230 },
+ { x: 350, y: 230 }
+ ]
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Customize Line Appearance
+
+Configure default line appearance using the [`lineSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#linesettings) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+N> Fill color is available only when an arrowhead style is applied at the Start or End of the line. If both are set to `None`, the Fill option is disabled.
+
+---
+
+## Manage Line (Edit, Move, Resize, Delete)
+
+### Edit Line
+
+#### Edit Line Appearance (UI)
+- Select a line to view resize handles.
+- Drag endpoints to adjust length/angle.
+- Edit stroke color, opacity, and thickness using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Line Properties**
+Open the Line Properties dialog via **Right Click → Properties**.
+
+
+
+#### Edit Line Programmatically
+
+Modify an existing Line programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editLineProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const annot of viewer.annotationCollection) {
+ if (annot.subject === 'Line') {
+ annot.strokeColor = '#ff0000';
+ annot.thickness = 3;
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Delete Line
+
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+---
+
+### Comments
+
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to line annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+---
+
+## Set properties while adding Individual Annotation
+
+Set properties for individual line annotations using the [`lineSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#linesettings) API or by passing per‑annotation values during [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleLines() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Line 1
+ viewer.annotation.addAnnotation('Line', {
+ offset: { x: 200, y: 230 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 230 },
+ { x: 350, y: 230 }
+ ],
+ strokeColor: '#0066ff',
+ thickness: 2,
+ opacity: 0.9,
+ author: 'User 1'
+ });
+
+ // Line 2
+ viewer.annotation.addAnnotation('Line', {
+ offset: { x: 220, y: 300 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 220, y: 300 },
+ { x: 400, y: 300 }
+ ],
+ strokeColor: '#ff1010',
+ thickness: 3,
+ opacity: 0.9,
+ author: 'User 2'
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Disable Line Annotation
+
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Handle Line Events
+
+The PDF viewer provides annotation life-cycle events that notify when Line annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+---
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+---
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/polygon-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/polygon-annotation.md
new file mode 100644
index 0000000000..c36c8452b6
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/polygon-annotation.md
@@ -0,0 +1,293 @@
+---
+layout: post
+title: Polygon Annotation (Shape) in React PDF Viewer \ Syncfusion
+description: Learn how to enable, apply, customize, and manage Polygon annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Polygon Annotation (Shape) in React PDF Viewer
+Polygon annotations allow users to outline irregular regions, draw custom shapes, highlight non-rectangular areas, or create specialized callouts on PDFs for review and markup.
+
+
+
+---
+
+## Enable Polygon Annotation in the Viewer
+
+To enable Line annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render();
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Apply Polygon Annotation
+
+### Apply Polygon Annotation Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Polygon**.
+3. Click multiple points on the page to draw the polygon.
+4. Double-click to finalize the shape.
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+---
+
+### Enable Polygon Mode
+
+Switch the viewer into highlight mode using `setAnnotationMode('Polygon')`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function enablePolygonMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Polygon');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Polygon Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function exitPolygonMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('None');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Add Polygon Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) API to draw a polygon by specifying multiple `vertexPoints`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addPolygon() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Polygon', {
+ offset: { x: 200, y: 800 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 800 }, { x: 242, y: 771 },
+ { x: 289, y: 799 }, { x: 278, y: 842 },
+ { x: 211, y: 842 }, { x: 200, y: 800 }
+ ]
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Customize Polygon Appearance
+Configure default polygon appearance (fill color, stroke color, thickness, opacity) using the [`polygonSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#polygonsettings) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Manage Polygon (Edit, Move, Resize, Delete)
+
+### Edit Circle
+
+#### Edit Circle (UI)
+
+- Select a Circle to view resize handles.
+- Drag any side/corner to resize; drag inside the shape to move it.
+- Edit **fill**, **stroke**, **thickness**, and **opacity** using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit fill Color** tool
+
+
+- **Edit stroke Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Edit Thickness** slider
+
+
+#### Edit Polygon Programmatically
+
+Modify an existing Circle programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editPolygonProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ for (const annot of viewer.annotationCollection) {
+ if (annot.subject === 'Polygon') {
+ annot.strokeColor = '#0000ff';
+ annot.thickness = 2;
+ annot.fillColor = '#ffff00';
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Delete Polygon
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+---
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to polygon annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+---
+
+## Set properties while adding Individual Annotation
+Configure per-annotation appearance while adding a polygon using [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation).
+
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultiplePolygons() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Polygon 1
+ viewer.annotation.addAnnotation('Polygon', {
+ offset: { x: 200, y: 800 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 800 }, { x: 242, y: 771 },
+ { x: 289, y: 799 }, { x: 278, y: 842 },
+ { x: 211, y: 842 }, { x: 200, y: 800 }
+ ],
+ fillColor: '#ffa5d8',
+ strokeColor: '#ff6a00',
+ thickness: 2,
+ opacity: 0.9,
+ author: 'User 1'
+ });
+
+ // Polygon 2
+ viewer.annotation.addAnnotation('Polygon', {
+ offset: { x: 360, y: 800 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 360, y: 800 }, { x: 410, y: 770 },
+ { x: 450, y: 810 }, { x: 430, y: 850 },
+ { x: 380, y: 850 }, { x: 360, y: 800 }
+ ],
+ fillColor: '#ffe600',
+ strokeColor: '#ff1010',
+ thickness: 3,
+ opacity: 0.85,
+ author: 'User 2'
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Disable Shape Annotation
+Disable shape annotations (Polygon, Line, Rectangle, Circle, Arrow) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Handle Polygon Events
+
+The PDF viewer provides annotation life-cycle events that notify when Polygon annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+---
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+---
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/rectangle-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/rectangle-annotation.md
new file mode 100644
index 0000000000..db95e0ece3
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/rectangle-annotation.md
@@ -0,0 +1,271 @@
+---
+layout: post
+title: Rectangle Annotation (Shape) in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Rectangle annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Rectangle Annotation (Shape) in React PDF Viewer
+Rectangle annotations let users highlight regions, group content, or draw callout boxes on PDFs for reviews and markups. You can add rectangles from the toolbar, switch to rectangle mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.
+
+
+
+---
+
+## Enable Rectangle Annotation in the Viewer
+
+To enable Line annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { PdfViewerComponent, Inject, Toolbar, Annotation } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render();
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Apply Rectangle Annotation Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Rectangle**.
+3. Click and drag on the PDF page to draw the rectangle.
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+---
+
+## Enable Rectangle Mode
+Switch the viewer into highlight mode using `setAnnotationMode('Rectangle')`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function enableRectangleMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Rectangle');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Rectangle Mode
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function exitRectangleMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('None');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Add Rectangle Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) API to draw a rectangle at a specific location.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addRectangle() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Rectangle', {
+ offset: { x: 200, y: 480 },
+ pageNumber: 1,
+ width: 150,
+ height: 75
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Customize Rectangle Appearance
+Configure default rectangle appearance (fill color, stroke color, thickness, opacity) using the [`rectangleSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#rectanglesettings) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Manage Rectangle (Edit, Move, Resize, Delete)
+### Edit Rectangle
+
+#### Edit Rectangle (UI)
+- Select a rectangle to view resize handles.
+- Drag any side/corner to resize; drag inside the shape to move it.
+- Edit **fill**, **stroke**, **thickness**, and **opacity** using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit fill Color** tool
+
+
+- **Edit stroke Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Edit Thickness** slider
+
+
+
+#### Edit Rectangle Programmatically
+
+Modify an existing Rectangle programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editRectangleProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (const annot of viewer.annotationCollection) {
+ if (annot.subject === 'Rectangle') {
+ annot.strokeColor = '#0000ff';
+ annot.thickness = 2;
+ annot.fillColor = '#ffff00';
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Delete Rectangle
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+---
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to rectangle annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+---
+
+## Set properties while adding Individual Annotation
+Set properties for individual rectangle annotations by passing values directly during [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleRectangles() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+
+ // Rectangle 1
+ viewer.annotation.addAnnotation('Rectangle', {
+ offset: { x: 200, y: 480 },
+ pageNumber: 1,
+ width: 150,
+ height: 75,
+ opacity: 0.9,
+ strokeColor: '#ff6a00',
+ fillColor: '#ffff00',
+ author: 'User 1'
+ });
+
+ // Rectangle 2
+ viewer.annotation.addAnnotation('Rectangle', {
+ offset: { x: 380, y: 480 },
+ pageNumber: 1,
+ width: 120,
+ height: 60,
+ opacity: 0.85,
+ strokeColor: '#ff1010',
+ fillColor: '#ffe600',
+ author: 'User 2'
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Disable Rectangle Annotation
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Handle Rectangle Events
+
+The PDF viewer provides annotation life-cycle events that notify when Rectangle annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+---
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+---
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/squiggly-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/squiggly-annotation.md
new file mode 100644
index 0000000000..4c14cee77e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/squiggly-annotation.md
@@ -0,0 +1,274 @@
+---
+layout: post
+title: Squiggly Annotation (Text Markup) in React PDF Viewer \ Syncfusion
+description: Learn how to enable, apply, customize, and manage Squiggly annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Squiggly Annotation (Text Markup) in React PDF Viewer
+
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Squiggly* text markup annotations in the Syncfusion **React PDF Viewer**.
+You can add squiggly underlines from the toolbar or context menu, programmatically invoke squiggly mode, customize default settings, handle events, and export the PDF with annotations.
+
+---
+
+## Enable Squiggly in the Viewer
+To enable Squiggly annotations, inject the following modules into the React PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and squiggly markup.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import {
+ PdfViewerComponent,
+ Inject,
+ Toolbar,
+ Annotation,
+ TextSelection
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render();
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Apply Squiggly Annotation
+
+### Apply Squiggly Using the Toolbar
+
+1. Select the text you want to annotate.
+2. Click the **Squiggly** icon in the annotation toolbar.
+ - If **Pan Mode** is active, the viewer automatically switches to **Text Selection** mode.
+
+
+---
+
+### Apply Squiggly Using the Context Menu
+
+Right-click a selected text region → select **Squiggly**.
+
+To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+
+---
+
+### Enable Squiggly Mode
+Switch the viewer into squiggly mode using `setAnnotationMode('Squiggly')`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function enableSquiggly() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Squiggly');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Squiggly Mode
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function disableSquigglyMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('None');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Add Squiggly Programmatically
+Use [`addAnnotation()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) to insert a squiggly at a specific location.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addSquiggly() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Squiggly', {
+ bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
+ pageNumber: 1
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Customize Squiggly Appearance
+Configure default squiggly settings such as **color**, **opacity**, and **author** using [`squigglySettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#squigglysettings).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Manage Squiggly (Edit, Delete, Comment)
+
+### Edit Squiggly
+
+#### Edit Squiggly Appearance (UI)
+
+Use the annotation toolbar:
+- **Edit Color** tool
+
+- **Edit Opacity** slider
+
+
+---
+
+#### Edit Squiggly Programmatically
+Modify an existing squiggly programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editSquigglyProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let annot of viewer.annotationCollection) {
+ if (annot.textMarkupAnnotationType === 'Squiggly') {
+ annot.color = '#ff0000';
+ annot.opacity = 0.8;
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Delete Squiggly
+The PDF Viewer supports deleting existing annotations through both the UI and API.
+For detailed behavior, supported deletion workflows, and API reference, see [**Delete Annotation**](../remove-annotations)
+
+---
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to squiggly annotations.
+It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation‑related notes within the PDF Viewer.
+
+---
+
+## Set properties while adding Individual Annotation
+Set properties for individual squiggly annotations at the time of creation using the [`addAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) API.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleSquigglies() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ // Squiggly 1
+ viewer.annotation.addAnnotation('Squiggly', {
+ bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
+ pageNumber: 1,
+ author: 'User 1',
+ color: '#ffff00',
+ opacity: 0.9
+ });
+ // Squiggly 2
+ viewer.annotation.addAnnotation('Squiggly', {
+ bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
+ pageNumber: 1,
+ author: 'User 2',
+ color: '#ff1010',
+ opacity: 0.9
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Disable TextMarkup Annotation
+Disable text markup annotations (including squiggly) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Handle Squiggly Events
+The PDF viewer provides annotation life‑cycle events that notify when squiggly annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+---
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer.
+For full details on supported formats and steps to export or import annotations, see [**Export and Import annotations**](../export-import-annotations)
+
+---
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/strikethrough-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/strikethrough-annotation.md
new file mode 100644
index 0000000000..53da1cbbbb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/strikethrough-annotation.md
@@ -0,0 +1,266 @@
+---
+layout: post
+title: Strikethrough Text in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Strikethrough annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Strikethrough Annotation (Text Markup) in React PDF Viewer
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Strikethrough* text markup annotations in the Syncfusion **React PDF Viewer**. You can apply strikethrough using the toolbar or context menu, programmatically invoke strikethrough mode, customize default settings, handle events, and export the PDF with annotations.
+
+---
+
+## Enable Strikethrough in the Viewer
+To enable Strikethrough annotations, inject the following modules into the React PDF Viewer:
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and strikethrough.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import {
+ PdfViewerComponent,
+ Inject,
+ Toolbar,
+ Annotation,
+ TextSelection
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render();
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Apply Strikethrough Annotation
+
+### Apply Strikethrough Using the Toolbar
+1. Select the text you want to strike through.
+2. Click the **Strikethrough** icon in the annotation toolbar.
+ - If **Pan Mode** is active, the viewer automatically switches to **Text Selection** mode.
+
+
+
+---
+
+### Apply strikethrough using Context Menu
+Right-click a selected text region → select **Strikethrough**.
+
+
+To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+
+---
+
+### Enable Strikethrough Mode
+Switch the viewer into strikethrough mode using `setAnnotationMode('Strikethrough')`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function enableStrikethrough() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Strikethrough');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Strikethrough Mode
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function disableStrikethroughMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('None');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Add Strikethrough Programmatically
+Use [`addAnnotation()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) to insert a strikethrough at a specific location.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addStrikethrough() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Strikethrough', {
+ bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
+ pageNumber: 1
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Customize Strikethrough Appearance
+Configure default strikethrough settings such as **color**, **opacity**, and **author** using [`strikethroughSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#strikethroughsettings).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Manage Strikethrough (Edit, Delete, Comment)
+
+### Edit Strikethrough
+
+#### Edit Strikethrough Appearance (UI)
+Use the annotation toolbar:
+- **Edit Color** tool
+
+- **Edit Opacity** slider
+
+
+---
+
+#### Edit Strikethrough Programmatically
+Modify an existing strikethrough programmatically using `editAnnotation()` and `annotationCollection`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editStrikethroughProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let annot of viewer.annotationCollection) {
+ if (annot.textMarkupAnnotationType === 'Strikethrough') {
+ annot.color = '#ff0000';
+ annot.opacity = 0.8;
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Delete Strikethrough
+The PDF Viewer supports deleting existing annotations through both the UI and API. For detailed behavior, supported deletion workflows, and API reference, see [**Delete Annotation**](../remove-annotation).
+
+---
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to strikethrough annotations. It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation–related notes within the PDF Viewer.
+
+---
+
+## Set properties while adding Individual Annotation
+Set properties for individual annotations when adding them programmatically by supplying fields on each `addAnnotation('Strikethrough', …)` call.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleStrikethroughs() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ // Strikethrough 1
+ viewer.annotation.addAnnotation('Strikethrough', {
+ bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
+ pageNumber: 1,
+ author: 'User 1',
+ color: '#ffff00',
+ opacity: 0.9
+ });
+ // Strikethrough 2
+ viewer.annotation.addAnnotation('Strikethrough', {
+ bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
+ pageNumber: 1,
+ author: 'User 2',
+ color: '#ff1010',
+ opacity: 0.9
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Disable TextMarkup Annotation
+Disable text markup annotations (including strikethrough) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Handle Strikethrough Events
+The PDF viewer provides annotation life-cycle events that notify when strikethrough annotations are added, modified, selected, or removed. For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event).
+
+---
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer. For full details on supported formats and steps to export or import annotations, see [**Export and Import Annotation**](../export-import-annotations).
+
+---
+
+## See Also
+
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/underline-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/underline-annotation.md
new file mode 100644
index 0000000000..1ae0b11aba
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/underline-annotation.md
@@ -0,0 +1,267 @@
+---
+layout: post
+title: Underline Text in React PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Underline annotations in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Underline Annotation (Text Markup) in React PDF Viewer
+
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Underline* text markup annotations in the Syncfusion **React PDF Viewer**. You can underline text using the toolbar or context menu, programmatically invoke underline mode, customize default settings, handle events, and export the PDF with annotations.
+
+---
+
+## Enable Underline in the Viewer
+To enable Underline annotations, inject the following modules into the React PDF Viewer:
+- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and underlining.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import {
+ PdfViewerComponent,
+ Inject,
+ Toolbar,
+ Annotation,
+ TextSelection
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+ReactDOM.createRoot(document.getElementById('sample')).render();
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Apply Underline Annotation
+
+### Apply Underline Using the Toolbar
+1. Select the text you want to underline.
+2. Click the **Underline** icon in the annotation toolbar.
+ - If **Pan Mode** is active, the viewer automatically switches to **Text Selection** mode.
+
+
+
+---
+
+### Apply underline using Context Menu
+Right-click a selected text region → select **Underline**.
+
+
+
+To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+
+---
+
+### Enable Underline Mode
+Switch the viewer into underline mode using `setAnnotationMode('Underline')`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function enableUnderline() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Underline');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Underline Mode
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function disableUnderlineMode() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.setAnnotationMode('None');
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Add Underline Programmatically
+Use [`addAnnotation()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) to insert an underline at a specific location.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addUnderline() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ viewer.annotation.addAnnotation('Underline', {
+ bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
+ pageNumber: 1
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Customize Underline Appearance
+Configure default underline settings such as **color**, **opacity**, and **author** using [`underlineSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#underlinesettings).
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Manage Underline (Edit, Delete, Comment)
+
+### Edit Underline
+
+#### Edit Underline Appearance (UI)
+Use the annotation toolbar:
+- **Edit Color** tool
+
+- **Edit Opacity** slider
+
+
+---
+
+#### Edit Underline Programmatically
+Modify an existing underline programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function editUnderlineProgrammatically() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ for (let annot of viewer.annotationCollection) {
+ if (annot.textMarkupAnnotationType === 'Underline') {
+ annot.color = '#0000ff';
+ annot.opacity = 0.8;
+ viewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+### Delete Underline
+The PDF Viewer supports deleting existing annotations through both the UI and API. For detailed behavior, supported deletion workflows, and API reference, see [**Delete Annotation**](../remove-annotations).
+
+---
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to underline annotations. It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation–related notes within the PDF Viewer.
+
+---
+
+## Set properties while adding Individual Annotation
+Set properties for individual annotations when adding them programmatically by supplying fields on each `addAnnotation('Underline', …)` call.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+function addMultipleUnderlines() {
+ const viewer = document.getElementById('container').ej2_instances[0];
+ // Underline 1
+ viewer.annotation.addAnnotation('Underline', {
+ bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
+ pageNumber: 1,
+ author: 'User 1',
+ color: '#ffff00',
+ opacity: 0.9
+ });
+ // Underline 2
+ viewer.annotation.addAnnotation('Underline', {
+ bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
+ pageNumber: 1,
+ author: 'User 2',
+ color: '#ff1010',
+ opacity: 0.9
+ });
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Disable TextMarkup Annotation
+Disable text markup annotations (including underline) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## Handle Underline Events
+The PDF viewer provides annotation life-cycle events that notify when underline annotations are added, modified, selected, or removed. For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event).
+
+---
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer. For full details on supported formats and steps to export or import annotations, see [**Export and Import Annotation**](../export-import-annotations)
+
+---
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotations-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotations-in-mobile-view.md
index deb9a7eb27..ed67e4ec94 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/annotations-in-mobile-view.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/annotations-in-mobile-view.md
@@ -7,27 +7,27 @@ control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# Annotations in mobile view in React PDF Viewer control
+# Annotations in mobile view in React PDF Viewer component
## Open the annotation toolbar
-**Step 1:** Click Edit Annotation on the toolbar to enable the annotation toolbar.
+**Step 1:** Tap Edit Annotation on the toolbar to open the annotation toolbar.
-
+
**Step 2:** The annotation toolbar appears below the main toolbar.
-
+
## Add sticky note annotations
-**Step 1:** Click the Sticky Notes icon, then tap the page where the note should be placed.
+**Step 1:** Tap the Sticky Notes icon, then tap the page where the note should be placed.
-
+
**Step 2:** Tap the page to add the sticky note annotation.
-
+
## Add text markup annotations
@@ -35,9 +35,9 @@ domainurl: ##DomainURL##
-**Step 2:** The text markup annotation is applied to the selected text.
+**Step 2:** The text markup appears on the selected text.
-
+
## Add shape and measurement annotations
@@ -49,67 +49,67 @@ domainurl: ##DomainURL##
-**Step 3:** The annotation appears on the PDF page.
+**Step 3:** The annotation is placed on the PDF page.
-
+
## Add stamp annotations
**Step 1:** Tap the Stamp icon and select a stamp type from the menu.
-
+
**Step 2:** Tap the page to place the stamp annotation.
-
+
## Add signature annotations
-**Step 1:** Tap the Signature icon to open the canvas. Draw the signature, tap Create, then tap the viewer to place it.
+**Step 1:** Tap the Signature icon to open the signature canvas. Draw the signature, tap Create, then tap the viewer to place it.
-
+
**Step 2:** The signature is added to the page.
-
+
## Add ink annotations
**Step 1:** Tap the Ink tool and draw on the page.
-
+
**Step 2:** The ink annotation appears on the page.
-
+
## Change annotation properties (before adding)
-**Step 1:** Change properties before placing the annotation.
+**Step 1:** Change properties before placing the annotation by opening the property toolbar.
-**Step 2:** Tap the annotation icon to open the property toolbar, adjust properties, then place the annotation on the page.
+**Step 2:** Adjust properties, then place the annotation on the page.
## Change annotation properties (after adding)
-**Step 1:** Change annotation properties after adding the annotation.
+**Step 1:** Change annotation properties after placing the annotation.
-**Step 2:** Select the annotation to show the property toolbar, then adjust the properties.
+**Step 2:** Select the annotation to open the property toolbar, then adjust properties.
-
+
## Delete annotations
**Step 1:** Select the annotation to show the property toolbar, then tap the Delete icon to remove it.
-
+
## Open the comment panel
**Step 1:** Open the comment panel using the icon in the property toolbar or the annotation toolbar.
-
+
**Step 2:** The comment panel appears.
@@ -119,4 +119,4 @@ domainurl: ##DomainURL##
**Step 1:** Tap the Close button to close the comment panel.
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/comments.md
index 03ec468e40..cd8bb731b4 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/comments.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/comments.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Comments in React PDF Viewer
-The PDF Viewer control provides options to add, edit, and delete comments for the following annotations in PDF documents:
+The PDF Viewer component lets you add, edit, reply to, and delete comments for many annotation types, including:
* Shape annotation
* Stamp annotation
@@ -22,67 +22,54 @@ The PDF Viewer control provides options to add, edit, and delete comments for th
-## Adding a comment to the annotation
+## Adding a comment to an annotation
+Use the comment panel to manage annotation comments, replies, and status.
-Annotation comments, replies, and status can be managed to the PDF document using the comment panel.
+### Opening the comment panel
-### Comment panel
-
-Annotation comments can be added to the PDF using the comment panel. The comment panel can be opened in the following ways:
+Open the comment panel in one of these ways:
1. Using the annotation menu
- * Click the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it.
- * Click the Comment Panel button. The comment panel opens.
-
-2. Using Context menu
+ * Click the Edit Annotation button in the PDF Viewer toolbar. A secondary toolbar appears below it.
+ * Click the Comment Panel button to open the panel.
- * Select the annotation in the PDF document and right-click it.
- * Select Comment from the context menu.
+2. Using the context menu
-3. Using the Mouse click
+ * Select an annotation and right-click it.
+ * Choose Comment from the context menu.
- * Select the annotation in the PDF document and double-click it. The comment panel opens.
+3. Using double-click
-If the comment panel is already open, select the annotation and add comments using the panel.
+ * Select the annotation and double-click it to open the comment panel.
-### Adding comments
+If the comment panel is already open, select the annotation to view or add comments.
-* Select the annotation in the PDF document.
-* The corresponding comment thread is highlighted in the comment panel.
-* Add comments and replies using the comment panel.
+### Adding comments and replies
-
+- Select the annotation in the PDF document.
+- The corresponding comment thread is highlighted in the comment panel.
+- Add comments and replies using the panel.
-### Adding Comment Replies
+
-* Multiple replies can be added to a comment.
-* After adding a comment, add replies as needed.
+### Setting a comment or reply status
-### Adding Comment or Reply Status
-
-* Select the annotation comment in the comment panel.
-* Click More options in the comment or reply container.
-* Select Set Status from the context menu.
-* Choose a status for the comment.
+- Select the comment in the comment panel.
+- Click More options on the comment or reply container.
+- Choose Set Status and pick a status.
-### Editing the comments and comments replies of the annotations
-
-Comments, replies, and status can be edited using the comment panel.
+### Editing comments and replies
-### Editing the Comment or Comment Replies
+Edit comments in two ways:
-Edit comments and replies in the following ways:
+1. Context menu
-1. Using the Context menu
-
- * Select the annotation comment in the comment panel.
- * Click More options in the comment or reply container.
- * Select Edit from the context menu.
- * An editable text box appears. Change the content of the comment or reply.
+ * Select the comment in the comment panel and click More options.
+ * Choose Edit to open an editable text box.
2. Using the Mouse Click
@@ -100,15 +87,17 @@ Edit comments and replies in the following ways:
-### Delete Comment or Comment Replies
+### Deleting comments or replies
-* Select the annotation comment in the comment panel.
-* Click More options in the comment or reply container.
-* Select Delete from the context menu.
+* Select the comment in the comment panel.
+* Click More options and choose Delete.
+
+Deleting a root comment also removes the associated annotation.
->Deleting the root comment from the comment panel also deletes the associated annotation.
+N> Deleting the root comment from the comment panel also deletes the associated annotation.
+
```html
```
@@ -116,7 +105,7 @@ Edit comments and replies in the following ways:
Comments added to the PDF document can be read using the annotation's `comments` property.
-The following example logs comments in response to a button click.
+The following example logs comments when a button is clicked:
```html
@@ -151,16 +140,16 @@ pdfviewer.appendTo('#PdfViewer');
{% endtabs %}
```typescript
-//Method to check the comments added in the PDF document.
+// Method to check the comments added in the PDF document.
document.getElementById('checkComments').addEventListener('click', function () {
var annotationCollections = pdfviewer.annotationCollection;
for (var x = 0; x < annotationCollections.length; x++) {
- //Prints the annotation id in the console window.
+ // Prints the annotation id in the console window.
console.log("annotation Id : " +annotationCollections[x].annotationId);
var comments = annotationCollections[x].comments;
for (var y = 0; y < comments.length; y++) {
var comment = comments[y];
- //Prints the PDF document's comments in the console window.
+ // Prints the PDF document's comments in the console window.
console.log("comment" + "[" + y + "] :" + comment.note);
}
var note = annotationCollections[x].note;
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/free-text-annotation.md
index cf8d844f2e..47648690d2 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/free-text-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/free-text-annotation.md
@@ -8,23 +8,23 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Free text annotation in React PDF Viewer
+# Free text annotation in React PDF Viewer component
-The PDF Viewer control provides options to add, edit, and delete free text annotations.
+The PDF Viewer provides tools to add, edit, and remove free-text annotations.
-## Add a free text annotation to the PDF document
+## Add a free-text annotation
-The PDF Viewer control provides options to add, edit, and delete free text annotations.
+To add a free-text annotation:
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
-* Select the **Free Text Annotation** button to enable free text annotation mode.
-* Add text anywhere on the pages of the PDF document.
+* Click the **Edit Annotation** button in the PDF Viewer toolbar to reveal the annotation toolbar.
+* Select the **Free Text Annotation** button to enter free*text annotation mode.
+* Tap or click anywhere on the page to add text.
-When in pan mode, selecting free text annotation switches the PDF Viewer to text select mode.
+When the viewer is in pan mode, selecting the Free Text annotation switches the viewer to text-selection mode.
-
+
-The following example switches to free text annotation mode using a button click.
+The example below shows switching to free-text annotation mode via a button click.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -101,11 +101,11 @@ root.render();
{% endhighlight %}
{% endtabs %}
-## Add a Free Text annotation to the PDF document Programmatically
+## Add a free-text annotation programmatically
-The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation/#annotation) method.
+You can add a free-text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#annotation) method.
-Here is an example of adding a free text annotation programmatically using addAnnotation():
+Example: add a free-text annotation using `addAnnotation()`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -212,11 +212,9 @@ root.render();
{% endhighlight %}
{% endtabs %}
-## Change the content of an existing free text annotation programmatically
+## Change the content of an existing free-text annotation programmatically
-To change the content of an existing free text annotation programmatically, use the editAnnotation() method.
-
-Here is an example of changing the content of a free text annotation using editAnnotation():
+To update the content of an existing free-text annotation, use the `editAnnotation()` method. Example below demonstrates editing an annotation's bounds and text.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -311,71 +309,69 @@ root.render();
{% endhighlight %}
{% endtabs %}
-N> The current version of the PDF Viewer does not edit existing document text. New free text annotations can be added and modified within the document.
+N> The PDF Viewer does not edit original document text. You can add and modify free-text annotations only.
-## Edit the properties of free text annotations
+## Edit free-text annotation properties
-Font family, font size, styles, font color, text alignment, fill color, stroke color, border thickness, and opacity can be edited using the Font Family, Font Size, Font Color, Text Align, Font Style, Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+Use the annotation toolbar to configure font family, size, style, font color, text alignment, fill color, stroke color, border thickness, and opacity.
-### Edit font family
+### Font family
-Edit the font family by selecting a font in the Font Family tool.
+Choose a font from the Font Family tool.
-
+
-### Edit font size
+### Font size
-Edit the font size by selecting a size in the Font Size tool.
+Select a size in the Font Size tool.
-
+
-### Edit font color
+### Font color
-Edit the font color using the color palette in the Font Color tool.
+Pick a color from the Font Color palette.
-
+
-### Edit the text alignment
+### Text alignment
-Align text by selecting an option from the Text Align tool.
+Set alignment using the Text Align tool.
-
+
-### Edit text styles
+### Text styles
-Edit text styles by selecting options in the Font Style tool.
+Toggle styles in the Font Style tool.
-
+
-### Edit fill color
+### Fill color
-Edit the fill color using the color palette in the Edit Color tool.
+Set the annotation's fill color with the Edit Color tool.
-
+
-### Edit stroke color
+### Stroke color
-Edit the stroke color using the color palette in the Edit Stroke Color tool.
+Set the stroke color with the Edit Stroke Color tool.
-
+
-### Edit thickness
+### Thickness
-Edit border thickness using the range slider in the Edit Thickness tool.
+Adjust border thickness with the Edit Thickness slider.
-
+
-### Edit opacity
+### Opacity
-Edit opacity using the range slider in the Edit Opacity tool.
+Adjust opacity with the Edit Opacity slider.
-
+
## Set default properties during control initialization
-Default properties for free text annotations can be set before creating the control using FreeTextSettings.
-
-After changing default values, the selected values are applied. The following example sets default free text annotation settings.
+Set default properties for free-text annotations using `freeTextSettings` when initializing the control. The selected defaults are applied when annotations are created. The example below sets default values.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/ink-annotation.md
index 1fc9cf86d1..a29c7840a7 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/ink-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/ink-annotation.md
@@ -18,13 +18,13 @@ The PDF Viewer control provides options to add, edit, and delete ink annotations
Ink annotations can be added to the PDF document using the annotation toolbar.
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
+* Use the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
* Select the **Draw Ink** button to enable ink annotation mode.
-* Draw on any page of the PDF document.
+* Draw on any page of the PDF document to create an ink annotation.
-The following example switches to ink annotation mode.
+The following example switches the viewer to ink annotation mode.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -105,9 +105,9 @@ root.render();
## Add an ink annotation programmatically to the PDF document
-The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation/#annotation) method.
+The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#annotation) method.
-Here is an example of adding an ink annotation programmatically using addAnnotation():
+The following examples demonstrate how to add an ink annotation programmatically using `addAnnotation()`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -200,9 +200,9 @@ root.render();
## Edit an existing ink annotation programmatically
-To modify an existing ink annotation programmatically, use the editAnnotation() method.
+Use the `editAnnotation()` method to modify an existing ink annotation programmatically.
-Here is an example of using editAnnotation():
+The following example demonstrates `editAnnotation()`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -309,27 +309,27 @@ Stroke color, thickness, and opacity can be edited using the Edit Stroke Color,
### Edit stroke color
-Edit the stroke color using the color palette in the Edit Stroke Color tool.
+Change the stroke color using the color palette in the Edit Stroke Color tool.
### Edit thickness
-Edit thickness using the range slider in the Edit Thickness tool.
+Change the stroke thickness using the range slider in the Edit Thickness tool.
### Edit opacity
-Edit opacity using the range slider in the Edit Opacity tool.
+Change the opacity using the range slider in the Edit Opacity tool.
## Set default properties during the control initialization
-Default properties for ink annotations can be set before creating the control using InkAnnotationSettings.
+Default properties for ink annotations can be set before creating the control by using the `inkAnnotationSettings` property on `PdfViewerComponent` (example below).
-After changing default values, the selected values are applied.
+Supported settings include `author`, `strokeColor`, `thickness`, and `opacity`. Set these values on initialization so the viewer uses them when creating new ink annotations.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/line-angle-constraints.md
index fb2e1df41b..d355dbf81d 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/line-angle-constraints.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/line-angle-constraints.md
@@ -9,12 +9,12 @@ documentation: ug
# Line angle constraints in React PDF Viewer
-The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents.
+The PDF Viewer control provides robust **line angle constraints** for line-type annotations. This enables angle snapping to improve accuracy and consistency in technical drawings and measurements within PDF documents.
-## Enable line angle constraints
-Configure the `enableLineAngleConstraints` property within `annotationDrawingOptions`. When enabled, supported line-type annotations snap to fixed angles.
+## Enable line angle constraintsSet
+Configure the `enableLineAngleConstraints` property inside `annotationDrawingOptions`. When enabled, supported line-type annotations snap to fixed angles according to the `restrictLineAngleTo` setting.
-The following code demonstrates how to enable line angle constraints:
+The following example demonstrates how to enable line angle constraints:
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -55,7 +55,7 @@ root.render();
### enableLineAngleConstraints
-The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types will snap to fixed angles as defined by the `restrictLineAngleTo` property:
+Setting `enableLineAngleConstraints` activates angle snapping for line-based annotations. When set to `true`, the following annotation types snap to fixed angles defined by `restrictLineAngleTo`:
- Lines
- Arrows
@@ -67,25 +67,25 @@ The `enableLineAngleConstraints` property activates angle snapping for line-base
**Key Benefits:**
-- Automatic angle snapping during the drawing
-- Enhanced precision for technical drawings and measurements
-- Desktop behavior: hold Shift while drawing to toggle constraints (when disabled, Shift temporarily enables; when enabled, Shift enforces snapping)
-- Real-time visual feedback showing angle snapping behavior
+- Automatic angle snapping while drawing
+- Improved precision for technical drawings and measurements
+- On desktop, holding `Shift` toggles snapping: when constraints are disabled, `Shift` temporarily enables snapping; when enabled, `Shift` enforces snapping
+- Visual feedback indicates snapping in real time
### restrictLineAngleTo
-Defines the angle increment (in degrees) used to constrain supported annotations. The default is 45.
+`restrictLineAngleTo` defines the angle increment (in degrees) used to constrain supported annotations. The default value is `45`.
Angle snapping rules:
- The initial drawing direction is treated as the 0° reference point
-- Snapped angles are calculated based on the increment
-- If the increment doesn’t divide 360 evenly, angles reset after 360°
+- Snapped angles are calculated by adding the configured increment to the reference angle
+- If the increment does not divide 360 evenly, snapped angles wrap after 360°
-Examples
+Examples:
-- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°
-- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360°
+- `restrictLineAngleTo: 45` → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°
+- `restrictLineAngleTo: 100` → Snapped angles: 0°, 100°, 200°, 300°, 360°
## Work with constrained annotations
@@ -93,25 +93,24 @@ Examples
When line angle constraints are enabled:
-- Start drawing a supported annotation (Line, Arrow, Polyline, Distance, or Perimeter).
-- The segment snaps to the nearest allowed angle.
-- A visual indicator reflects snapping in real time.
-- Release to complete the annotation.
+- Drawing a supported annotation (Line, Arrow, Polyline, Distance, or Perimeter) causes the current segment to snap to the nearest allowed angle.
+- A visual indicator shows the snapping behavior in real time.
+- Releasing completes the annotation.
### Keyboard Shortcuts
-Desktop platforms:
-- Shift + drag: toggles snapping. If constraints are disabled, Shift temporarily enables them; if enabled, Shift enforces snapping.
+On desktop:
+- `Shift` + drag toggles snapping. If constraints are disabled, `Shift` temporarily enables snapping; if enabled, `Shift` enforces snapping.
### Selector-Based Modifications
-When modifying existing line annotations using selectors:
+Selector-based modifications:
-- Constraints apply based on the original line direction.
-- The reference angle (0°) is determined by the line’s current orientation.
-- Constraint snapping during modification is supported for Line and Arrow.
+- Constraints apply relative to the annotation's original direction.
+- The reference angle (0°) is determined by the annotation's current orientation.
+- Constraint snapping during modification is supported for Line and Arrow annotations.
- Adjustments snap to the configured angle increment.
-[View a sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)
+[View samples on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)
-N> Refer to the React PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/react-pdf-viewer) for feature highlights. Explore the [React PDF Viewer examples](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) to learn how to render and configure the PDF Viewer.
+N> Refer to the React PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/react-pdf-viewer) for feature highlights, and the React PDF Viewer examples repository to see full rendering and configuration samples.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/measurement-annotation.md
index d691411a0b..38876bd4de 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/measurement-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/measurement-annotation.md
@@ -10,7 +10,9 @@ domainurl: ##DomainURL##
# Measurement annotation in React PDF Viewer
-The PDF Viewer provides options to add measurement annotations. The supported measurement annotations are:
+The PDF Viewer supports measurement annotations for capturing distances, perimeters, areas, radius, and volumes.
+
+Supported measurement annotations:
* Distance
* Perimeter
@@ -20,20 +22,19 @@ The PDF Viewer provides options to add measurement annotations. The supported me
-## Adding measurement annotations to the PDF document
+## Add measurement annotations
-The measurement annotations can be added to the PDF document using the annotation toolbar.
+Measurement annotations are available from the annotation toolbar.
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Measurement Annotation** drop-down button. The pop-up lists available measurement annotation types.
-* Select a measurement type to enable its annotation mode.
-* Measure and add annotations on the pages of the PDF document.
+* Open the annotation toolbar using the **Edit Annotation** button in the PDF Viewer toolbar.
+* Use the **Measurement Annotation** drop-down to choose a measurement type.
+* Select a measurement type to enable its annotation mode, then place the measurement on the page.
-When in pan mode, selecting a measurement annotation switches the PDF Viewer to text select mode.
+If the viewer is in pan mode, selecting a measurement annotation activates text selection mode where applicable.
- 
+
-The following example switches to distance annotation mode.
+The following example switches the viewer to distance annotation mode.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -110,9 +111,9 @@ root.render();
## Add a measurement annotation to the PDF document programmatically
-The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation/#annotation) method.
+The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#annotation) method.
-Here is an example showing how to add measurement annotations programmatically using addAnnotation():
+The following examples demonstrate how to add measurement annotations programmatically using `addAnnotation()`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -274,9 +275,9 @@ root.render();
## Edit an existing measurement annotation programmatically
-To modify an existing measurement annotation programmatically, use the editAnnotation() method.
+Use the `editAnnotation()` method to modify existing measurement annotations programmatically.
-Here is an example of using editAnnotation():
+The following example demonstrates `editAnnotation()`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -474,45 +475,45 @@ root.render();
{% endhighlight %}
{% endtabs %}
-## Edit the properties of measurement annotations
+## Edit properties of measurement annotations
-The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+Change fill color, stroke color, thickness, and opacity using the annotation toolbar tools: Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity.
### Edit fill color
-The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+Change the fill color with the color palette in the Edit Color tool.
### Edit stroke color
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+Change the stroke color with the Edit Stroke Color tool.
### Edit thickness
-Edit border thickness using the range slider provided in the Edit Thickness tool.
+Adjust border thickness with the range slider in the Edit Thickness tool.
### Edit opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Adjust annotation opacity with the range slider in the Edit Opacity tool.
-### Edit the line properties
+### Edit line properties
-Line-based measurement annotations (distance and perimeter) have additional options in the Line Properties window. Open it by right-clicking the annotation and selecting Properties from the context menu.
+Line-based measurement annotations (distance and perimeter) include additional options in the Line Properties window. Open it by right-clicking the annotation and choosing Properties.
-## Set default properties during control initialization
+## Set default properties during initialization
-Default properties for measurement annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings, and volumeSettings.
+Default properties for measurement annotations can be configured on the viewer before creation using the `distanceSettings`, `perimeterSettings`, `areaSettings`, `radiusSettings`, and `volumeSettings` properties.
-Refer to the following code snippet to set the default annotation settings.
+The following code snippet shows how to set default measurement annotation settings on initialization.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -587,13 +588,13 @@ root.render();
{% endhighlight %}
{% endtabs %}
-## Editing scale ratio and unit of the measurement annotation
+## Scale ratio and measurement units
-The scale ratio and unit of measurement can be modified using the scale ratio option provided in the context menu of the PDF Viewer control.
+Modify the scale ratio and measurement unit via the Scale Ratio option in the viewer's context menu.
- 
+
-The Units of measurements support for the measurement annotations in the PDF Viewer are
+Supported units for measurement annotations:
* Inch
* Millimeter
@@ -604,10 +605,9 @@ The Units of measurements support for the measurement annotations in the PDF Vie
-## Setting default scale ratio settings during control initialization
-
-The properties of scale ratio for measurement annotation can be set before creating the control using ScaleRatioSettings as shown in the following code snippet,
+## Set default scale ratio during initialization
+Configure scale ratio defaults using `measurementSettings` (for example, `scaleRatio`, `conversionUnit`, and `displayUnit`) before creating the viewer. The following snippet demonstrates these settings.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
{% raw %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/shape-annotation.md
index 120f01c6ed..eee775acdc 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/shape-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/shape-annotation.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Shape annotation in React PDF Viewer
-The PDF Viewer control provides options to add, edit, and delete shape annotations. The supported shape annotation types are:
+The PDF Viewer provides tools to add, edit, and delete shape annotations. Supported shape types:
* Line
* Arrow
@@ -20,20 +20,19 @@ The PDF Viewer control provides options to add, edit, and delete shape annotatio
-## Adding a shape annotation to the PDF document
+## Add a shape annotation
-Shape annotations can be added to the PDF document using the annotation toolbar.
+Shape annotations are available from the annotation toolbar.
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Shape Annotation** drop-down button. The pop-up lists available shape annotation types.
-* Select a shape type to enable its annotation mode.
-* Draw the shape on the pages of the PDF document.
+- Open the annotation toolbar with the **Edit Annotation** button in the PDF Viewer toolbar.
+- Use the **Shape Annotation** drop-down to choose the desired shape type.
+- Select a shape type to enable its annotation mode, then draw the shape on the page.
-N> When in pan mode and a shape annotation tool is selected, the PDF Viewer switches to text select mode automatically to ensure a smooth interaction experience.
+N> When the viewer is in pan mode and a shape tool is selected, the viewer switches to text selection mode where applicable to ensure a smooth interaction.
-Refer to the following code sample to switch to the circle annotation mode.
+The following sample shows how to switch the viewer to circle annotation mode.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -110,9 +109,9 @@ root.render();
## Add a shape annotation to the PDF document programmatically
-The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#annotation) method.
+The PDF Viewer library allows adding shape annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#annotation) method.
-Here is an example showing how to add shape annotations programmatically using addAnnotation():
+The following examples show how to add shape annotations programmatically using `addAnnotation()`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -274,9 +273,9 @@ root.render();
## Edit an existing shape annotation programmatically
-To modify an existing shape annotation programmatically, use the editAnnotation() method.
+Use the `editAnnotation()` method to modify existing shape annotations programmatically.
-Here is an example of using editAnnotation():
+The following example demonstrates `editAnnotation()`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -475,45 +474,43 @@ root.render();
## Editing the properties of the shape annotation
-The fill color, stroke color, thickness, and opacity of shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+## Edit properties of shape annotations
-### Editing fill color
+Change fill color, stroke color, thickness, and opacity using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
-The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+### Edit fill color
+
+Change the fill color using the color palette in the Edit Color tool.
-### Editing stroke color
+### Edit stroke color
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+Change the stroke color using the Edit Stroke Color tool.
-### Editing thickness
+### Edit thickness
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
+Adjust border thickness using the Edit Thickness range slider.
-### Editing opacity
+### Edit opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Adjust opacity using the Edit Opacity range slider.
-### Editing the line properties
-
-Line and arrow annotations have additional options in the Line Properties window. Open it by right-clicking a line or arrow annotation and selecting Properties from the context menu.
+### Line properties
-Refer to the following code sample to set the default annotation settings.
+Line and arrow annotations include additional options in the Line Properties dialog. Open it by right-clicking a line or arrow annotation and choosing Properties.
### Edit annotation programmatically
-We can edit the annotations programmatically using the **editAnnotation()** method.
-
-Here is an example of how you can use this method to modify an annotation:
+Modify annotations programmatically using the `editAnnotation()` method. The example below demonstrates selecting and editing an annotation.
```
@@ -530,9 +527,7 @@ var pdfviewer = document.getElementById('container').ej2_instances[0];
```
### Delete annotation programmatically
-We can delete a specific annotation using the **deleteAnnotationById()** method. This method is used to delete a specific annotation using its id.
-
-Here is an example of how you can use this method to delete an annotation:
+Delete a specific annotation with `deleteAnnotationById()` by providing the annotation's id. The example below demonstrates usage.
```
@@ -546,9 +541,9 @@ Here is an example of how you can use this method to delete an annotation:
```
-## Set default properties during the control initialization
+## Set default properties during initialization
-Default properties for shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings.
+Default properties for shape annotations can be configured before creating the viewer using `lineSettings`, `arrowSettings`, `rectangleSettings`, `circleSettings`, and `polygonSettings`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -623,4 +618,4 @@ root.render();
{% endhighlight %}
{% endtabs %}
-N> In both [Arrow](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#arrowsettings) and [Line](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#linesettings) annotations Settings, the Fill Color option is available only when an arrowhead style is applied at the Start or End. If both Start and End arrowhead styles are set to None, lines do not support fill rendering and the Fill Color option remains disabled.
+N> In both the Arrow and Line settings, the Fill Color option is available only when an arrowhead style is applied at the Start or End. If both Start and End arrowhead styles are set to `None`, lines do not support fill rendering and the Fill Color option is disabled. See Arrow settings and Line settings for API details.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/signature-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/signature-annotation.md
index 2a3550eb41..93f2166f5c 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/signature-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/signature-annotation.md
@@ -10,26 +10,26 @@ domainurl: ##DomainURL##
# Handwritten signature in React PDF Viewer
-The PDF Viewer control supports adding handwritten signatures to a PDF document. Handwritten signatures reduce paperwork and enable digital verification.
+The PDF Viewer supports handwritten signatures for adding sign-offs and initials directly within a PDF document. Handwritten signatures streamline document workflows and support common signature capture modes (draw, text, upload).
-## Adding a handwritten signature to the PDF document
+## Add a handwritten signature
-The handwritten signature can be added to the PDF document using the annotation toolbar.
+Handwritten signatures are available from the annotation toolbar.
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Select the **HandWritten Signature** button in the annotation toolbar. The signature panel appears.
+* Open the annotation toolbar by using the **Edit Annotation** button in the PDF Viewer toolbar.
+* Choose the **HandWritten Signature** button to open the signature panel.
-* Draw the signature in the panel.
+* Draw the signature inside the signature panel.
-* Click **Create**, move the signature, and place it at the desired location.
+* Click **Create**, then move and place the signature at the desired location on the page.
-Refer to the following code sample to switch to the handwritten signature mode programmatically.
+The sample below demonstrates switching the viewer to handwritten signature mode programmatically.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -178,9 +178,9 @@ root.render();
## Add a handwritten signature programmatically to the PDF document
-With the PDF Viewer library, you can programmatically add handwritten signature to the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation/#addannotation) method.
+The PDF Viewer API supports programmatic creation of handwritten signatures via the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#addannotation) method.
-Here is an example of adding a handwritten signature programmatically using addAnnotation():
+The examples below demonstrate how to add handwritten signatures programmatically using `addAnnotation()`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -326,26 +326,26 @@ root.render();
{% endhighlight %}
{% endtabs %}
-[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/blob/master/How%20to/Add%20Handwritten%20Signature%20Programmatically)
+[View sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/blob/master/How%20to/Add%20Handwritten%20Signature%20Programmatically)
-## Edit the properties of handwritten signatures
+## Edit properties of handwritten signatures
-Stroke color, border thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+Change stroke color, border thickness, and opacity using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
### Edit stroke color
-Edit the stroke color using the color palette in the Edit Stroke Color tool.
+Change the stroke color using the color palette in the Edit Stroke Color tool.
### Edit thickness
-Edit border thickness using the range slider in the Edit Thickness tool.
+Change border thickness using the range slider in the Edit Thickness tool.
### Edit opacity
-Edit opacity using the range slider in the Edit Opacity tool.
+Change opacity using the range slider in the Edit Opacity tool.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/stamp-annotation.md
index 5726449e41..e2640c0201 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/stamp-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/stamp-annotation.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Stamp annotation in React PDF Viewer
-The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotations in PDF documents:
+The PDF Viewer provides options to add, edit, delete, and rotate the following stamp annotations:
* Dynamic
* Sign Here
@@ -21,22 +21,22 @@ The PDF Viewer control provides options to add, edit, delete, and rotate the fol
## Add stamp annotations to the PDF document
-The stamp annotations can be added to the PDF document using the annotation toolbar.
+Stamp annotations are added using the annotation toolbar.
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types.
+* Use the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
+* Use the **Stamp Annotation** drop-down to view available stamp annotation types.
- 
+ 
-* Select a stamp type to enable its annotation mode.
+* Selecting a stamp type enables its annotation mode.
- 
+ 
-* Place the stamp on the pages of the PDF document.
+* Place the stamp on a page in the PDF document.
-N> When in pan mode and a stamp annotation tool is selected, the PDF Viewer switches to text select mode automatically for a smooth interaction experience.
+N> When the viewer is in pan mode and a stamp annotation tool is selected, the PDF Viewer automatically switches to text select mode to provide a smoother interaction.
-The following examples switch to stamp annotation modes.
+The following examples show how to switch to stamp annotation modes.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -130,23 +130,21 @@ root.render();
{% endhighlight %}
{% endtabs %}
-## Add a custom stamp to the PDF document
+## Add a custom stamp
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types.
-* Click the Custom Stamp button.
+Use the **Edit Annotation** button and the **Stamp Annotation** drop-down to access the Custom Stamp option.
- 
+
-* In the file explorer dialog, choose an image and add it to the PDF page.
+Select the Custom Stamp option, then choose an image file to add as a custom stamp on the PDF page.
->Only JPG and JPEG image formats are supported for custom stamp annotations.
+Only JPG and JPEG image formats are supported for custom stamp annotations.
-## Add a stamp annotation to the PDF document programmatically
+## Add a stamp annotation programmatically
-The PDF Viewer library allows adding a stamp annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation/#annotation) method.
+Use the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#annotation) method to add stamp annotations programmatically.
-Here are examples showing how to add stamp annotations programmatically using addAnnotation():
+The examples below demonstrate using `addAnnotation()` to create stamp annotations.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -305,9 +303,9 @@ root.render();
## Edit an existing stamp annotation programmatically
-To modify an existing stamp annotation programmatically, use the editAnnotation() method.
+Use the `editAnnotation()` method to modify existing stamp annotations programmatically.
-Here is an example of using editAnnotation():
+The following example demonstrates `editAnnotation()`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -404,9 +402,9 @@ root.render();
## Set default properties during control initialization
-Default properties for stamp annotations can be set before creating the control using StampSettings.
+Set default properties for stamp annotations before creating the control by specifying `stampSettings`.
-After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default stamp annotation settings.
+After changing the default opacity using the Edit Opacity tool, the selected value is applied. The example below shows how to set default stamp annotation settings.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/sticky-notes-annotation.md
index a91ffa2948..bdb8eb8c28 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/sticky-notes-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/sticky-notes-annotation.md
@@ -10,34 +10,26 @@ domainurl: ##DomainURL##
# Sticky notes annotation in React PDF Viewer
-The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document.
+The PDF Viewer provides options to add, edit, and delete sticky note annotations.
-## Add a sticky note annotation to the PDF document
+## Add a sticky note annotation
-Annotation comments can be added using the comment panel.
+Annotation comments are added using the comment panel.
-* Select a sticky note annotation in the PDF document and right-click it.
-* Select Comment from the context menu.
-* Add comments, replies, and status using the comment panel.
+* Right-click a sticky note annotation and choose **Comment** from the context menu.
+* Use the comment panel to add comments, reply, and change status.
- 
-
- Annotation comments can be added to the PDF document using the comment panel.
-
-* Select a Sticky note annotation in the PDF document and right-click it.
-* Select the Comment option in the context menu that appears.
-* Now, you can add Comments, Reply, and Status using the Comment Panel.
-* Now, you can add Comments, Reply, and Status using the Comment Panel.
+
## Add a sticky note annotation to the PDF document programmatically
-With the PDF Viewer library, you can add a sticky note annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation/#annotation) method.
+Use the [addAnnotation()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#annotation) method to add a sticky note annotation programmatically.
-Here is an example showing how to add a sticky note annotation programmatically using addAnnotation():
+The following example demonstrates using `addAnnotation()` to create a sticky note annotation.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -126,9 +118,9 @@ root.render();
## Edit an existing sticky note annotation programmatically
-To modify an existing sticky note annotation programmatically, use the editAnnotation() method.
+Use the `editAnnotation()` method to modify existing sticky note annotations programmatically.
-Here is an example of using editAnnotation():
+The following example demonstrates `editAnnotation()`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -245,9 +237,9 @@ Modify or delete comments or replies, and change status using the menu options i
## Set default properties during control initialization
-Default properties for sticky note annotations can be set before creating the control using StickyNotesSettings.
+Set default properties for sticky note annotations before creating the control by specifying `stickyNotesSettings`.
-After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default sticky note annotation settings.
+After changing the default opacity using the Edit Opacity tool, the selected value is applied. The example below shows how to set default sticky note annotation settings.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/text-markup-annotation.md
index 77b9737e54..b734c54b21 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/text-markup-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/text-markup-annotation.md
@@ -12,27 +12,27 @@ domainurl: ##DomainURL##
The PDF Viewer provides options to add, edit, and delete text markup annotations, including Highlight, Underline, Strikethrough, and Squiggly.
-
+
## Highlight text
-There are two ways to highlight text:
+Two ways to add highlights:
-1.Using the context menu
+1. Using the context menu
* Select text in the PDF document and right-click it.
* Select **Highlight** in the context menu.
- 
+ 
-2.Using the annotation toolbar
+2. Using the annotation toolbar
* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
* Select **Highlight** to enable highlight mode.
* Select text to add the highlight annotation.
* Alternatively, select text first and then click **Highlight**.
- 
+ 
-When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection.
+When pan mode is active, entering any text markup mode switches the PDF Viewer to text selection mode.
Refer to the following code snippet to switch to highlight mode.
@@ -203,7 +203,7 @@ root.render();
## Highlight text programmatically
-Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation/#addannotation) method.
+Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#addannotation) method.
Example:
@@ -292,23 +292,23 @@ root.render();
## Underline text
-There are two ways to underline text:
+Two ways to add underlines:
-1.Using the context menu
+1. Using the context menu
* Select text in the PDF document and right-click it.
* Select **Underline** in the context menu.
- 
+ 
-2.Using the annotation toolbar
+2. Using the annotation toolbar
* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
* Select **Underline** to enable underline mode.
* Select text to add the underline annotation.
* Alternatively, select text first and then click **Underline**.
- 
+ 
-In the pan mode, if the underline mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for underlining the text.
+When pan mode is active, entering underline mode switches the PDF Viewer to text selection mode to enable text selection for underlining.
Refer to the following code snippet to switch to underline mode.
@@ -476,7 +476,7 @@ root.render();
## Underline text programmatically
-Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation/#addannotation) method.
+Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#addannotation) method.
Example:
@@ -565,23 +565,23 @@ root.render();
## Strikethrough text
-There are two ways to strikethrough text:
+There are two ways to add strikethrough:
-1.Using the context menu
+1. Using the context menu
* Select text in the PDF document and right-click it.
* Select **Strikethrough** in the context menu.
- 
+ 
-2.Using the annotation toolbar
+2. Using the annotation toolbar
* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
* Select **Strikethrough** to enable strikethrough mode.
* Select text to add the strikethrough annotation.
* Alternatively, select text first and then click **Strikethrough**.
- 
+ 
-In the pan mode, if the strikethrough mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for striking through the text.
+When pan mode is active, entering strikethrough mode switches the PDF Viewer to text selection mode to enable text selection for striking through.
Refer to the following code snippet to switch to strikethrough mode.
@@ -754,7 +754,7 @@ root.render();
## Strikethrough text programmatically
-Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation/#addannotation) method.
+Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#addannotation) method.
Example:
@@ -843,23 +843,23 @@ root.render();
## Add squiggly to text
-There are two ways to add squiggly to text:
+Two ways to add squiggly annotations:
-1.Using the context menu
+1. Using the context menu
* Select text in the PDF document and right-click it.
* Select **Squiggly** in the context menu.
- 
+ 
-2.Using the annotation toolbar
+2. Using the annotation toolbar
* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
* Select **Squiggly** to enable squiggly mode.
* Select text to add the squiggly annotation.
* Alternatively, select text first and then click **Squiggly**.
- 
+ 
-In the pan mode, if the squiggly mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for adding squiggly to the text.
+When pan mode is active, entering squiggly mode switches the PDF Viewer to text selection mode to enable text selection for adding squiggly annotations.
Refer to the following code snippet to switch to squiggly mode.
@@ -1032,7 +1032,7 @@ root.render();
## Add squiggly to text programmatically
-Programmatically add squiggly using the [addAnnotation](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation/#addannotation) method.
+Programmatically add squiggly using the [addAnnotation](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation#addannotation) method.
Example:
@@ -1123,15 +1123,15 @@ root.render();
The selected annotation can be deleted in the following ways:
-1.Using the Delete/Backspace key
- * Select the annotation.
- * Press Delete (or Backspace). The selected annotation is removed.
+1. Using the Delete/Backspace key
+ * Select the annotation.
+ * Press Delete (or Backspace). The selected annotation is removed.
-2.Using the annotation toolbar
- * Select the annotation.
- * Click **Delete Annotation** in the annotation toolbar. The selected annotation is removed.
+2. Using the annotation toolbar
+ * Select the annotation.
+ * Click **Delete Annotation** in the annotation toolbar. The selected annotation is removed.
- 
+ 
## Edit text markup annotation properties
@@ -1141,13 +1141,13 @@ The color and the opacity of the text markup annotation can be edited using the
Use the color palette in the Edit Color tool to change the annotation color.
-
+
### Edit opacity
Use the range slider in the Edit Opacity tool to change annotation opacity.
-
+
## Set default properties during control initialization
diff --git a/Document-Processing/PDF/PDF-Viewer/react/context-menu/builtin-context-menu.md b/Document-Processing/PDF/PDF-Viewer/react/context-menu/builtin-context-menu.md
new file mode 100644
index 0000000000..556307ee6a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/context-menu/builtin-context-menu.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Built-in Context Menu in React PDF Viewer | Syncfusion
+description: Explore the default context menu items in the React PDF Viewer, including options for text selection, annotations, and form fields.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Built-in Context Menu Items in React PDF Viewer
+
+The React PDF Viewer includes a context-sensitive menu that updates dynamically based on the right-clicked element within the document. This page lists the default menu items available for different document elements.
+
+## Context Menu Scenarios
+
+Menu items vary depending on the target element:
+
+* **Text**: Displays options to annotate and copy selected text.
+
+ 
+
+* **Annotations**: Provides options to copy, cut, paste, or remove annotations, and add comments.
+
+ 
+
+* **Form Fields**: Shows standard form field interactions, such as modifying properties. The context menu for form fields appears only when the viewer is in **designer mode**.
+
+ 
+
+* **Empty Space**: Displays the option to paste a previously copied annotation or form field.
+
+ 
+
+## Default Item Reference
+
+### Text Menu Items
+
+The following table describes the default items available when right-clicking selected text:
+
+| Item | Description |
+| :--- | :--- |
+| **Copy** | Copies selected text to the clipboard. |
+| **Highlight** | Highlights selected text using the default highlight color. |
+| **Underline** | Applies an underline to the selected text. |
+| **Strikethrough** | Applies a strikethrough to the selected text. |
+| **Squiggly** | Applies a squiggly underline to the selected text. |
+| **Redact Text** | Redacts the selected text. |
+
+### Annotation Menu Items
+
+The following items are available when interacting with annotations:
+
+| Item | Description |
+| :--- | :--- |
+| **Copy** | Copies the selected annotation for pasting within the same page. |
+| **Cut** | Removes the selected annotation and copies it to the clipboard. |
+| **Paste** | Pastes a previously copied or cut annotation. |
+| **Delete** | Permanently removes the selected annotation. |
+| **Comments** | Opens the comment panel to manage discussions on the annotation. |
+
+### Form Field Menu Items
+
+These items appear when the viewer is in designer mode and a form field is selected:
+
+| Item | Description |
+| :--- | :--- |
+| **Copy** | Copies the selected form field for duplication. |
+| **Cut** | Removes the selected form field for relocation. |
+| **Paste** | Pastes a copied or cut form field. |
+| **Delete** | Removes the selected form field from the document. |
+| **Properties** | Launches the properties dialog for the specific form field. |
+
+N> The availability of the context menu is a client-side feature and is independent of server configurations.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/context-menu/context-menu.md b/Document-Processing/PDF/PDF-Viewer/react/context-menu/context-menu.md
new file mode 100644
index 0000000000..567434090a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/context-menu/context-menu.md
@@ -0,0 +1,34 @@
+---
+layout: post
+title: Context Menu in React PDF Viewer | Syncfusion
+description: Learn about the contextual menu options in the Syncfusion React PDF Viewer, including default behavior and customization possibilities.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Context Menu in React PDF Viewer
+
+The React PDF Viewer provides a built-in context menu for interacting with text, annotations, form fields, and document elements. This feature enhances the user experience by offering quick access to relevant actions based on the current selection or the specific area of the document being interacted with.
+
+## Understanding the Context Menu
+
+The context menu is designed to be context-aware, meaning it dynamically updates its items based on the target element. For instance, right-clicking on selected text will show annotation options, while right-clicking on an annotation will display management options like copy, cut, and delete.
+
+### Core Capabilities
+
+The context menu supports several configurations:
+
+* **Default Behavior**: Provides standard actions such as cut, copy, and annotation management.
+* **Customization**: Allows adding new menu items, removing default ones, or reordering them to meet specific application requirements.
+* **Granular Control**: Developers can fully disable the menu or replace it with custom logic using events.
+
+### Client-side Interaction
+
+The availability and behavior of the context menu are governed primarily by client-side logic. It is not affected by server-side configurations or cloud environments, ensuring consistent performance across different deployment scenarios.
+
+## Further Reading
+
+* [Built-in Context Menu](builtin-context-menu) – A technical reference for default menu behavior and items.
+* [Customize Context Menu](custom-context-menu) – A guide on how to implement custom menu items and dynamic updates.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/context-menu/custom-context-menu.md b/Document-Processing/PDF/PDF-Viewer/react/context-menu/custom-context-menu.md
new file mode 100644
index 0000000000..5db1ef5749
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/context-menu/custom-context-menu.md
@@ -0,0 +1,233 @@
+---
+layout: post
+title: Customize the context menu in React PDF Viewer | Syncfusion
+description: Learn how to add and customize custom context menu options in the React PDF Viewer using addCustomMenu, customContextMenuSelect, and related events.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# How to Customize the context menu in PDF Viewer in React
+
+The PDF Viewer supports extensive customization of the context menu, including reaching specific goals like adding new items, hiding default options, and handling custom click events.
+
+## Add Custom Context Menu Items
+
+You can add custom options to the context menu using the [addCustomMenu()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#addcustommenu) method. This is typically implemented during the [`documentLoad`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#documentload) event.
+
+### Implementation Guide
+
+1. Define the menu items as an array of objects.
+2. Call the [`addCustomMenu`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#addcustommenu) method within the [`documentLoad`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#documentload) event handler.
+
+```js
+export function App() {
+ let menuItems = [
+ {
+ text: 'Search In Google',
+ id: 'search_in_google',
+ iconCss: 'e-icons e-search'
+ },
+ {
+ text: 'Lock Annotation',
+ iconCss: 'e-icons e-lock',
+ id: 'lock_annotation'
+ },
+ {
+ text: 'Unlock Annotation',
+ iconCss: 'e-icons e-unlock',
+ id: 'unlock_annotation'
+ },
+ {
+ text: 'Lock Form Field',
+ iconCss: 'e-icons e-lock',
+ id: 'read_only_true'
+ },
+ {
+ text: 'Unlock Form Field',
+ iconCss: 'e-icons e-unlock',
+ id: 'read_only_false'
+ },
+ ];
+ function documentLoad(args) {
+ var viewer = document.getElementById('container').ej2_instances[0];
+ viewer.addCustomMenu(menuItems, false);
+ }
+ return (
+
+
+ {/* Render the PDF Viewer */}
+
+
+
+
+
+ );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+```
+
+## Handle Click Events for Custom Menu Items
+
+The [customContextMenuSelect()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#customcontextMenuselect) method defines actions for custom menu items.
+
+```js
+function customContextMenuSelect(args) {
+ var viewer = document.getElementById('container').ej2_instances[0];
+ switch (args.id) {
+ case 'search_in_google':
+ for (var i = 0; i < viewer.textSelectionModule.selectionRangeArray.length; i++) {
+ var content = viewer.textSelectionModule.selectionRangeArray[i].textContent;
+ if ((viewer.textSelectionModule.isTextSelection) && (\/\S\/.test(content))) {
+ window.open('http://google.com/search?q=' + content);
+ }
+ }
+ break;
+ case 'lock_annotation':
+ lockAnnotations(args);
+ break;
+ case 'unlock_annotation':
+ unlockAnnotations(args);
+ break;
+ case 'read_only_true':
+ setReadOnlyTrue(args);
+ break;
+ case 'read_only_false':
+ setReadOnlyFalse(args);
+ break;
+ default:
+ break;
+ }
+}
+
+function lockAnnotations(args) {
+ for (var i = 0; i < viewer.annotationCollection.length; i++) {
+ if (viewer.annotationCollection[i].uniqueKey === viewer.selectedItems.annotations[0].id) {
+ viewer.annotationCollection[i].annotationSettings.isLock = true;
+ viewer.annotationCollection[i].isCommentLock = true;
+ viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
+ }
+ args.cancel = false;
+ }
+}
+
+function unlockAnnotations(args) {
+ for (var i = 0; i < viewer.annotationCollection.length; i++) {
+ if (viewer.annotationCollection[i].uniqueKey === viewer.selectedItems.annotations[0].id) {
+ viewer.annotationCollection[i].annotationSettings.isLock = false;
+ viewer.annotationCollection[i].isCommentLock = false;
+ viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
+ }
+ args.cancel = false;
+ }
+}
+
+function setReadOnlyTrue(args) {
+ var viewer = document.getElementById('container').ej2_instances[0];
+ var selectedFormFields = viewer.selectedItems.formFields;
+ for (var i = 0; i < selectedFormFields.length; i++) {
+ var selectedFormField = selectedFormFields[i];
+ if (selectedFormField) {
+ viewer.formDesignerModule.updateFormField(selectedFormField, {
+ isReadOnly: true,
+ });
+ }
+ args.cancel = false;
+ }
+}
+
+function setReadOnlyFalse(args) {
+ var viewer = document.getElementById('container').ej2_instances[0];
+ var selectedFormFields = viewer.selectedItems.formFields;
+ for (var i = 0; i < selectedFormFields.length; i++) {
+ var selectedFormField = selectedFormFields[i];
+ if (selectedFormField) {
+ viewer.formDesignerModule.updateFormField(selectedFormField, {
+ isReadOnly: false,
+ });
+ }
+ args.cancel = false;
+ }
+}
+```
+
+## Dynamic Context Menu Customization
+
+The [customContextMenuBeforeOpen()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#customcontextMenubeforeopen) event allows for dynamic showing or hiding of items based on selection or document state.
+
+```js
+function customContextMenuBeforeOpen(args) {
+ for (var i = 0; i < args.ids.length; i++) {
+ var search = document.getElementById(args.ids[i]);
+ var viewer = document.getElementById('container').ej2_instances[0];
+ if (search) {
+ search.style.display = 'none';
+ if (args.ids[i] === 'search_in_google' && (viewer.textSelectionModule) && viewer.textSelectionModule.isTextSelection) {
+ search.style.display = 'block';
+ } else if (args.ids[i] === "lock_annotation" || args.ids[i] === "unlock_annotation") {
+ var isLockOption = args.ids[i] === "lock_annotation";
+ for (var j = 0; j < viewer.selectedItems.annotations.length; j++) {
+ var selectedAnnotation = viewer.selectedItems.annotations[j];
+ if (selectedAnnotation && selectedAnnotation.annotationSettings) {
+ var shouldDisplay = (isLockOption && !selectedAnnotation.annotationSettings.isLock) ||
+ (!isLockOption && selectedAnnotation.annotationSettings.isLock);
+ search.style.display = shouldDisplay ? 'block' : 'none';
+ }
+ }
+ } else if (args.ids[i] === "read_only_true" && viewer.selectedItems.formFields.length !== 0) {
+ var selectedFormField = viewer.selectedItems.formFields[0].isReadonly;
+ search.style.display = selectedFormField ? 'none' : 'block';
+ } else if (args.ids[i] === "read_only_false" && viewer.selectedItems.formFields.length !== 0) {
+ var selectedFormField = viewer.selectedItems.formFields[0].isReadonly;
+ search.style.display = selectedFormField ? 'block' : 'none';
+ } else if (args.ids[i] === 'formfield properties' && viewer.selectedItems.formFields.length !== 0) {
+ search.style.display = 'block';
+ }
+ }
+ }
+}
+```
+
+## Disable the Context Menu Entirely
+
+The context menu in the PDF Viewer can be fully disabled by setting the [`contextMenuOption`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#contextmenuoption) property to `None`.
+
+```js
+
+
+
+```
+
+The following is the output of the custom context menu with customization.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/pdfviewer/react/custom-context-menu/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/pdfviewer/react/custom-context-menu/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` within the
element in either the `index.TSX` or `index.JSX` file: **serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**.
+
+[View the sample in Stack blitz](https://stackblitz.com/edit/react-zmbkebwq?file=index.js)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md
new file mode 100644
index 0000000000..966478f3f3
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Getting started with React PDF Viewer in Gatsby | Syncfusion
+description: How to integrate the Syncfusion React PDF Viewer into a Gatsby site (quickstart, how-to, reference, explanation).
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Getting started with the React PDF Viewer in Gatsby
+
+How to integrate the Syncfusion React PDF Viewer into a Gatsby site. Use the Quickstart below to get a working viewer, then consult the How-to and Reference sections for configuration details (WASM, static assets, and SSR notes).
+
+## Quickstart for Gatsby
+
+1. Create or open your Gatsby site.
+
+```bash
+# create a new Gatsby site (or use an existing one)
+gatsby new my-gatsby-site
+cd my-gatsby-site
+npm install
+```
+
+2. Install the PDF Viewer package:
+
+```bash
+npm install @syncfusion/ej2-react-pdfviewer --save
+```
+
+3. Optional — host runtime locally or use the CDN
+
+If you want to host the viewer runtime and WASM locally, copy the runtime files into Gatsby's `static` directory so they are served at the root URL (`/`). The example component below uses the CDN `resourceUrl` for a quick demo; hosting locally is recommended for production.
+
+Optional local copy (Unix/macOS / Git Bash / WSL):
+
+```bash
+cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib static/ej2-pdfviewer-lib
+# copy a sample PDF to static/assets (create folder if needed)
+mkdir -p static/assets && cp ./path/to/sample.pdf static/assets/sample.pdf
+```
+
+4. Add viewer CSS imports to `src/components/layout.css` (recommended for Gatsby component-scoped styling):
+
+Create `src/components/layout.css` and add the imports below (relative path to `node_modules` used from `src/components`):
+
+```css
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+```
+
+Then import the stylesheet in `gatsby-browser.js` at your project root so it is included in the client bundle:
+
+```js
+// gatsby-browser.js
+import './src/components/layout.css';
+```
+
+5. Use a client-only approach (Gatsby is server-side rendered). A simple and reliable pattern is to render the viewer after mount with a mounted flag. Create `src/components/pdfviewer.js` with the component below (the example also shows where to register a Syncfusion license if you have one):
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+// src/components/pdfviewer.js
+import React, { useEffect, useState } from 'react';
+import {
+ PdfViewerComponent,
+ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ BookmarkView, ThumbnailView, Print, TextSelection, TextSearch
+ , FormFields, FormDesigner, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function PdfViewer() {
+ const [isClient, setIsClient] = useState(false);
+
+ useEffect(() => setIsClient(true), []);
+
+ if (!isClient) return null; // prevent SSR crash (window not defined)
+
+ return (
+
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+Add a page that uses the component at `src/pages/index.js`:
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+// src/pages/index.js
+import React from "react";
+import PdfViewer from "../components/pdfviewer";
+export default function PdfViewerPage() {
+ return (
+
+
+ Syncfusion PDF Viewer in Gatsby
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+6. Run the Gatsby dev server:
+
+```bash
+npm run develop
+```
+
+## See also
+
+- [Getting started overview](../getting-started-overview)
+- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started)
+- [Getting started with Syncfusion React PDF Viewer in Remix](./remix)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/nextjs-getting-started.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md
similarity index 57%
rename from Document-Processing/PDF/PDF-Viewer/react/nextjs-getting-started.md
rename to Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md
index 4dbafe7720..d253c877b5 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/nextjs-getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md
@@ -1,16 +1,16 @@
---
layout: post
title: React getting started with Next.js | Syncfusion
-description: Check out and learn here all about how to use the Syncfusion React UI components in the Next.js project.
+description: Check out and learn here all about how to use the Syncfusion React PDF Viewer in the Next.js project.
control: PDF Viewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Creating a Next.js Application Using Syncfusion® React Components
+# Creating a Next.js application using Syncfusion React PDF Viewer
-This section provides a step-by-step guide for setting up a Next.js application and integrating the Syncfusion® React PDF Viewer component.
+This guide shows how to set up a Next.js application and integrate the Syncfusion® React PDF Viewer component.
## What is Next.js?
@@ -22,7 +22,9 @@ Before getting started with the Next.js application, ensure the following prereq
* [Node.js 18.17](https://nodejs.org/en) or later.
-* The application is compatible with macOS, Windows, and Linux operating systems.
+ * The application is compatible with macOS, Windows, and Linux operating systems.
+
+* See the [System requirements](../../../../System-Requirements) for detailed platform requirements.
## Create a Next.js application
@@ -41,52 +43,49 @@ yarn create next-app
{% endhighlight %}
{% endtabs %}
-Using one of the above commands will lead you to set up additional configurations for the project as below:
-
-1.Define the project name: Users can specify the name of the project directly. Let's specify the name of the project as `ej2-nextjs-pdfviewer`.
+Using one of the above commands will prompt for project configuration options.
+1. Define the project name. For example: `ej2-next-js-pdfviewer`.
{% tabs %}
{% highlight bash tabtitle="CMD" %}
-√ What is your project named? » ej2-nextjs-pdfviewer
+√ What is your project named? » ej2-next-js-pdfviewer
{% endhighlight %}
{% endtabs %}
-2.Select the required packages.
-
+2. Select the required packages.
{% tabs %}
{% highlight bash tabtitle="CMD" %}
-√ What is your project named? ... ej2-nextjs-pdfviewer
+√ What is your project named? ... ej2-next-js-pdfviewer
√ Would you like to use TypeScript? ... No / `Yes`
√ Would you like to use ESLint? ... No / `Yes`
√ Would you like to use Tailwind CSS? ... `No` / Yes
√ Would you like to use `src/` directory? ... No / `Yes`
√ Would you like to use App Router? (recommended) ... No / `Yes`
√ Would you like to customize the default import alias? ... `No`/ Yes
-Creating a new Next.js app in D:\ej2-nextjs-pdfviewer.
+Creating a new Next.js app in D:\ej2-next-js-pdfviewer.
{% endhighlight %}
{% endtabs %}
-3.Once complete the above mentioned steps to create `ej2-nextjs-pdfviewer`, navigate to the directory using the below command:
-
+3. After the project is created, navigate to the project directory:
{% tabs %}
{% highlight bash tabtitle="CMD" %}
-cd ej2-nextjs-pdfviewer
+cd ej2-next-js-pdfviewer
{% endhighlight %}
{% endtabs %}
-The application is ready to run with default settings. Now, let's add Syncfusion® components to the project.
+The application is ready to run with default settings. Next, add Syncfusion® components to the project.
## Install Syncfusion® React packages
-Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package.
+Syncfusion® React packages are available on npm. Install the package for the component required by the project.
-Here, the [React PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) is used as an example. To install the React PDF Viewer component in the project, use the following command:
+This guide uses the [React PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) component as an example. Install it with:
{% tabs %}
{% highlight bash tabtitle="NPM" %}
@@ -103,13 +102,17 @@ yarn add @syncfusion/ej2-react-pdfviewer
## Import Syncfusion® CSS styles
-Syncfusion® React components come with [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/), which are available in the installed packages. It’s easy to adapt the Syncfusion® React components to match the style of your application by referring to one of the built-in themes.
+Syncfusion® React components include built-in themes. Import the PDF Viewer theme and base styles to match the look and feel of the application.
-Import the `Material` theme into the **src/app/globals.css** file and removed the existing styles in that file, as shown below:
+Where to add the imports:
+
+- App Router: put these in `src/app/globals.css`
+- Pages Router: put them in `pages/_app.js` or its imported global CSS
{% tabs %}
{% highlight css tabtitle="globals.css" %}
+/* PDF Viewer theme and base styles */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@@ -122,13 +125,13 @@ Import the `Material` theme into the **src/app/globals.css** file and removed th
{% endhighlight %}
{% endtabs %}
-> To know more about built-in themes and CSS reference for individual components, refer to the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/) section.
+N> To learn more about built-in themes and CSS references for individual components, see the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation.
-## Add Syncfusion® React component
+## Add the Syncfusion® React component
-Follow the below steps to add the React PDF Viewer componente to the Next.js project:
+Follow these steps to add the React PDF Viewer component to the Next.js project:
-1.Define the PDF Viewer component in the **src/app/page.tsx** file, as shown below:
+1. Define the PDF Viewer component in `src/app/page.tsx`, as shown below:
{% tabs %}
{% highlight ts tabtitle="page.tsx" %}
@@ -143,7 +146,7 @@ return (
{/* Inject the required services */}
[View the Next.js PDF Viewer sample in the GitHub repository](https://github.com/SyncfusionExamples/syncfusion-react-pdfviewer-component-in-nextjs)
+
+**See also**
-> [View the NEXT.js PDF Viewer sample in the GitHub repository](https://github.com/SyncfusionExamples/syncfusion-react-pdfviewer-component-in-nextjs).
+- [Adding Next.js Configuration for deployment](../getting-started#adding-nextjs-configuration)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md
new file mode 100644
index 0000000000..f396fc6ba9
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md
@@ -0,0 +1,80 @@
+---
+layout: post
+title: Getting started with Syncfusion React PDF Viewer in Preact Application
+description: Provides a short overview and essential task links for integrating and using the Syncfusion React PDF Viewer within Preact.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+
+# Getting started with Syncfusion React PDF Viewer in Preact
+
+This page is a short, task-focused overview for integrating the Syncfusion React PDF Viewer into a [Preact](https://preactjs.com/) app. Use the short sections below for quick tasks; a minimal full example is provided as an optional reference.
+
+[Preact](https://preactjs.com/) is a lightweight React alternative that preserves the React-compatible API. Use Preact when you want smaller bundle size while reusing the React viewer components.
+## Setup
+
+How‑to: Create a Preact project and install the Syncfusion package.
+
+```bash
+npm init preact # choose JavaScript or TypeScript as needed
+cd my-project
+npm install @syncfusion/ej2-react-pdfviewer --save
+# or
+yarn init preact
+yarn add @syncfusion/ej2-react-pdfviewer
+```
+
+## Import CSS
+
+How‑to: Add the required Syncfusion theme and component CSS to `src/style.css`.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-react-pdfviewer/styles/material3.css';
+```
+
+Note: keep import order consistent with component dependencies.
+
+## Add component
+
+How‑to: Render a minimal `PdfViewerComponent` in `src/index.js`.
+
+Prefer a single `Add component` example using the CDN `resourceUrl` (no server required). Replace the CDN version as needed.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import { render } from 'preact';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+import './style.css';
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+render(, document.getElementById('app'));
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+**See also**
+
+- [Getting started with the Syncfusion React PDF Viewer](../getting-started-overview)
+- [System requirements for Syncfusion React PDF Viewer](../../../../System-Requirements)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md
new file mode 100644
index 0000000000..b3c2146ba6
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md
@@ -0,0 +1,221 @@
+---
+layout: post
+title: Getting started with Syncfusion React PDF Viewer with React Router
+description: Short quickstart for integrating the Syncfusion React PDF Viewer into a React application using React Router v7 (standalone/client-only rendering).
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# React Router v7 (Remix) Quickstart
+
+## Overview
+
+N> Remix's framework features were merged into React Router v7 and later. This guide targets React Router v7's framework-mode and shows a client-only (standalone) integration of the Syncfusion React PDF Viewer. Keep the viewer client-only to avoid SSR/runtime errors.
+
+## Quickstart
+
+## Prerequisites
+
+- Node.js (recommended >= 18)
+- A React Router app (see steps below) or an existing React Router project
+- React 18+
+- See the [System requirements](../../../../System-Requirements) for platform details.
+
+## Project layout (which starter you used)
+
+Different starters create different folder layouts. Pick the mapping that matches your project and follow the file locations shown below.
+
+- create-react-router (framework-mode — `app/` tree)
+ - Global CSS: `app/app.css` (imported by `root.ts`)
+ - Component: `app/components/PdfViewerClient.ts`
+ - Route: `app/routes/home.ts` or `app/routes/index.ts`
+
+- Vite / plain React (traditional — `src/` tree)
+ - Global CSS: `src/index.css` (imported from `src/main.ts`)
+ - Component: `src/components/PdfViewerClient.ts`
+ - Route wrapper: `src/App.ts` + `BrowserRouter` in `src/main.ts`
+
+Use the file paths that match your project layout when following the steps below.
+
+## Step 1 — Create a Remix or React Router v7 app
+
+If you want the React Router framework-mode project (creates an `app/` tree), use the official scaffolding tool:
+
+```bash
+npx create-react-router@latest remix-pdf-viewer
+# follow prompts (pick your preferred package manager and options)
+cd remix-pdf-viewer
+npm install
+npm run dev
+```
+
+If you prefer a Vite-based React project (creates a `src/` tree), create it with Vite and add React Router v7:
+
+```bash
+npm create vite@latest my-app -- --template react
+cd my-app
+npm install
+npm install react-router@7 react-router-dom@7
+npm run dev
+```
+
+## Step 2 — Install the PDF Viewer package
+
+```bash
+npm install @syncfusion/ej2-react-pdfviewer --save
+```
+
+## Step 3 — Copy viewer runtime assets to `public`
+
+The PDF Viewer requires runtime assets (pdfium.js, pdfium.wasm, supporting files). Copy them from the `ej2-pdfviewer` package to your `public` folder so `resourceUrl` can point to `/ej2-pdfviewer-lib`.
+
+Unix/macOS (or Git Bash / WSL):
+
+```bash
+cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib public/ej2-pdfviewer-lib
+```
+
+Windows PowerShell:
+
+```powershell
+Copy-Item -Path .\node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib -Destination .\public\ej2-pdfviewer-lib -Recurse
+```
+
+Confirm `public/ej2-pdfviewer-lib` contains `pdfium.js` and `pdfium.wasm`.
+
+## Step 4 — Add global CSS for the viewer
+
+Place the Syncfusion CSS imports in your project's global stylesheet. Choose the path that matches your project layout.
+
+create-react-router (`app/` tree)
+
+ - File: `app/app.css` (or similar global CSS imported by `root.ts`)
+
+Vite / plain React (`src/` tree)
+
+ - File: `src/index.css` (imported from `src/main.ts`)
+
+Example CSS (same for both):
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
+```
+
+Then import the stylesheet according to your starter:
+
+create-react-router (`app/root.ts` or `app/root.ts`): ensure the global CSS is imported or linked from `root` following the starter conventions.
+
+Vite / plain React (`src/main.ts`):
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+
+
+
+);
+```
+
+## Step 5 — Client-only rendering
+
+The PDF Viewer depends on browser APIs and WebAssembly; avoid server-side rendering it. Render it only after the component mounts. Create a client-only component in the folder that matches your project layout.
+
+create-react-router (`app/` tree)
+
+ - `app/components/PdfViewerClient.ts`
+
+Vite / plain React (`src/` tree)
+
+ - `src/components/PdfViewerClient.ts`
+
+Example component (works in either location):
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+// components/PdfViewerClient.ts
+import React, { useEffect, useState } from 'react';
+import {
+ PdfViewerComponent,
+ Toolbar,
+ Magnification,
+ Navigation,
+ Annotation,
+ Inject,
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function PdfViewerClient() {
+ const [mounted, setMounted] = useState(false);
+ useEffect(() => setMounted(true), []);
+
+ if (!mounted) return null;
+
+ return (
+
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+Routing / usage examples:
+
+create-react-router (`app/routes/home.ts` or `app/routes/index.ts`):
+
+```ts
+import PdfViewerClient from '../components/PdfViewerClient';
+
+export default function Home() {
+ return ;
+}
+```
+
+Vite / plain React (`src/App.ts`):
+
+```ts
+import { Routes, Route } from 'react-router-dom';
+import PdfViewerClient from './components/PdfViewerClient';
+
+export default function App() {
+ return (
+
+ } />
+
+ );
+}
+```
+
+## Step 6 — Run the app
+
+```bash
+npm run dev
+# open the URL printed by the dev server (usually http://localhost:3000)
+```
+
+## See also
+
+- [Getting started overview](../getting-started-overview)
+- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md
new file mode 100644
index 0000000000..a13c97f15d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: Syncfusion React PDF Viewer in SharePoint
+description: Quickstart to integrate the Syncfusion React PDF Viewer into an SPFx React web part (standalone/client-side rendering).
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# React PDF Viewer in SharePoint Framework
+
+## Overview
+
+This quickstart shows how to integrate the Syncfusion React PDF Viewer into a SharePoint Framework (SPFx) React web part. It covers creating the web part, installing the `@syncfusion/ej2-react-pdfviewer` package, adding the required CSS, supplying runtime assets either from the Syncfusion CDN or from Site Assets, and a minimal TypeScript component that renders a PDF in the browser (client‑only).
+
+## Prerequisites
+
+- A SharePoint development environment and an Office 365 tenant (for testing/deployment).
+- Node.js compatible with your SPFx version (check SPFx docs).
+- Yeoman and the SPFx generator: `npm install -g yo @microsoft/generator-sharepoint`.
+- Gulp: `npm install -g gulp-cli`.
+
+## Step 1 — Create an SPFx React web part
+
+Run the SharePoint generator and choose the React framework (TypeScript recommended). Example answers shown in parentheses.
+
+```bash
+yo @microsoft/sharepoint
+# Solution name: pdfviewer-spfx
+# Target: SharePoint Online only (latest)
+# Component type: WebPart
+# Web part name: PdfViewer
+# Framework: React
+```
+
+This creates the usual SPFx project tree (no `src/`/`app/` ambiguity): React components live under `src/webparts/pdfViewer/components` and global web part assets are under `src/webparts/pdfViewer/assets`.
+
+## Step 2 — Install Syncfusion package
+
+In the project root run:
+
+```bash
+npm install @syncfusion/ej2-react-pdfviewer --save
+```
+
+Keep the package version aligned with the runtime assets you host (see Step 4).
+
+## Step 3 — Add Syncfusion CSS
+
+Import the Syncfusion theme CSS so the viewer styles are bundled with the web part. In your React component file (TypeScript example below) import the CSS from node_modules:
+
+```ts
+import '@syncfusion/ej2-base/styles/material.css';
+import '@syncfusion/ej2-buttons/styles/material.css';
+import '@syncfusion/ej2-dropdowns/styles/material.css';
+import '@syncfusion/ej2-inputs/styles/material.css';
+import '@syncfusion/ej2-navigations/styles/material.css';
+import '@syncfusion/ej2-popups/styles/material.css';
+import '@syncfusion/ej2-splitbuttons/styles/material.css';
+import '@syncfusion/ej2-pdfviewer/styles/material.css';
+```
+
+If your SPFx build configuration forbids direct CSS imports from node_modules, add these `@import` lines to your component CSS (for example `PdfViewer.module.css`) using the appropriate path or deploy the CSS from a CDN.
+
+## Step 4 — Provide runtime assets and choose rendering mode
+
+SPFx web parts run in the browser (client-side). That makes standalone (client-only) rendering the natural default: the PDF Viewer runs in the user's browser and uses `resourceUrl` to load runtime assets (pdfium.js, pdfium.wasm and supporting files).
+
+Two deployment options for those runtime assets:
+
+- Recommended — Use Syncfusion CDN (fast, simplest): set `resourceUrl` to the CDN folder that matches your package version, e.g.:
+
+```ts
+resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
+```
+
+- Self‑hosted — Upload `ej2-pdfviewer-lib` to a public CDN or to a SharePoint library (for example, Site Assets). If you upload to Site Assets, use the full site URL for `resourceUrl`, for example:
+
+```ts
+resourceUrl = "https://contoso.sharepoint.com/sites/YourSite/SiteAssets/ej2-pdfviewer-lib";
+```
+
+Notes on rendering modes and SPFx:
+
+- Standalone (client-only): fully supported in SPFx — set `resourceUrl` as above and the viewer will render entirely in the browser. This is the recommended, simplest approach for SPFx web parts.
+- Server‑backed (optional): to use server-side rendering, set `serviceUrl` (pointing to your PDF rendering web service) instead of `resourceUrl`.
+
+Important: ensure any host you use serves `.wasm` files with Content-Type `application/wasm` and that tenant/content security policies permit fetching assets from the chosen host.
+
+## Step 5 — Add the React component (TypeScript)
+
+Create `PdfViewerClient.tsx` under `src/webparts/pdfViewer/components` and paste the minimal example below. This component is client-only and safe for SPFx (which runs in the browser):
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+// src/webparts/pdfViewer/components/PdfViewerClient.tsx
+import * as React from 'react';
+import {
+ PdfViewerComponent,
+ Toolbar,
+ Magnification,
+ Navigation,
+ Annotation,
+ Inject,
+} from '@syncfusion/ej2-react-pdfviewer';
+import '@syncfusion/ej2-pdfviewer/styles/material.css';
+
+export const PdfViewerClient: React.FC = () => {
+ const [mounted, setMounted] = React.useState(false);
+ React.useEffect(() => setMounted(true), []);
+ if (!mounted) return null;
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default PdfViewerClient;
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Step 6 — Use the component in the web part
+
+Open the web part main React file (for example `src/webparts/pdfViewer/components/PdfViewer.tsx` created by the generator) and render `PdfViewerClient`:
+
+```ts
+import * as React from 'react';
+import PdfViewerClient from './PdfViewerClient';
+
+export default function PdfViewer(): JSX.Element {
+ return (
+
+
+
+ );
+}
+```
+
+## Step 7 — Test and package
+
+Run the local workbench for development:
+
+```bash
+gulp serve
+# open the local workbench or use SharePoint Online workbench for hosted assets
+```
+
+To package for deployment (when using self‑hosted assets make sure they are uploaded to your CDN or Site Assets before installing the package):
+
+```bash
+gulp bundle --ship
+gulp package-solution --ship
+```
+
+## See also
+
+- [Getting started overview](../getting-started-overview)
+- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started)
+- [Getting started with Syncfusion React PDF Viewer in Preact](./nextjs-getting-started)
+- [Getting started with Syncfusion React PDF Viewer in Remix](./nextjs-getting-started)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-large-pdf.md b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-large-pdf.md
new file mode 100644
index 0000000000..bbd9ee508b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-large-pdf.md
@@ -0,0 +1,194 @@
+---
+layout: post
+title: Document Handling in React Pdfviewer component | Syncfusion
+description: This page helps you to learn about how to Open PDF from URL, Base64, Blob, Stream, Cloud storage in Syncfusion React Pdfviewer component.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load Large PDF Files in React PDF Viewer
+
+This article explains how to efficiently load and view large PDF files using the Syncfusion React PDF Viewer. It includes recommended best practices and performance tips for documents ranging from **50 MB to 2 GB**.
+
+---
+
+## Why Large PDFs Need Special Handling
+
+Large PDF files often contain thousands of embedded objects such as images, compressed streams, digital signatures, form fields, annotations, vector graphics, and complex page structures. Rendering such heavy documents requires more processing time and memory.
+
+The **Syncfusion PDF Viewer is fully optimized for these heavy workloads**, and it delivers excellent performance even when working with very large files.
+
+### Viewer Capability Highlights
+- **Smooth performance for PDFs up to 1 GB**
+- **Supports viewing files up to ~2 GB**
+- **1 GB PDFs typically load within 5–6 seconds**
+- **Optimized incremental page loading** for faster interaction
+
+Performance may vary if the user’s system is heavily loaded or low on available RAM. In such cases, enabling the recommended optimizations below ensures maximum performance.
+
+---
+
+## Best Practices for Loading Large PDFs
+
+### 1. Load PDFs Using Blob (Recommended)
+
+Blob loading provides the fastest and most efficient performance for large PDFs.
+
+#### Why Blob Loading Is Better
+
+When a large PDF (for example, 1 GB) is loaded directly via `documentPath` (URL):
+
+- The browser must **download the full document first**
+- Only after the full download completes, the viewer starts parsing and rendering
+- This causes delay for large files
+
+But when the PDF is fetched as a **Blob**:
+
+- The file is downloaded first in an optimized stream
+- A Blob URL is created and passed to the viewer
+- The viewer can begin rendering faster
+- Improves load time, memory usage, and overall responsiveness
+
+#### Example: Load a PDF as Blob
+```js
+fetch('https://your-api/large-file.pdf')
+ .then(response => response.blob())
+ .then(blob => {
+ const blobUrl = URL.createObjectURL(blob);
+ viewer.load(blobUrl, null);
+ })
+ .catch(error => console.error('Error loading PDF:', error));
+```
+
+Blob loading is highly recommended for all PDFs above **200 MB**, especially when working with 500 MB – 1 GB files.
+
+---
+
+### 2. Viewer Performance Range
+
+The Syncfusion PDF Viewer is optimized to handle:
+
+- **Up to 1 GB** → very smooth
+- **Up to ~2 GB**
+
+This suits enterprise workflows involving large engineering drawings, client records, scanned books, and multi‑page financial reports.
+
+---
+
+### 3. Minimize Injected Modules
+
+The PDF Viewer internally uses background workers for text processing, thumbnail generation, image rendering, and metadata extraction. Disabling modules that are not needed helps reduce background activity and improves performance.
+
+#### 3.1 Text Search & Text Selection
+
+Modules:
+- [`Text Search`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/text-search)
+- [`Text Selection`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/text-selection)
+
+These features require **continuous background text extraction and indexing**.
+
+For large PDFs:
+
+- Text extraction runs longer
+- Consumes additional CPU and memory
+- Increases initial load time
+
+If these features are not required in your application:
+
+- Disable them to reduce background tasks
+- Improve page rendering speed
+- Provide a smoother experience for large documents
+---
+
+#### 3.2 Thumbnail View & Organize Pages
+
+Modules:
+- [`Organize Pages`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/organize-pages/overview)
+- [`Thumbnail View`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/interactive-pdf-navigation/page-thumbnail)
+
+These rely on **background thumbnail rendering**, where the viewer renders small preview images of every page.
+For PDFs with hundreds or thousands of pages, this becomes heavy.
+
+If thumbnails or page reordering are not essential:
+
+- Disable these modules
+- Prevent background thumbnail rendering
+- Reduce memory usage
+- Improve navigation responsiveness
+
+#### Example (remove unneccesary modules)
+```js
+
+```
+
+---
+
+### 4. Enable Local Storage for Large PDFs With Many Form Fields or Annotations
+
+PDFs with a high number of:
+
+- Form fields (textbox, dropdown, signatures, etc.)
+- Annotations (highlight, shapes, comments)
+
+require more storage for:
+
+- Field values
+- Annotation metadata
+- Interaction states
+- Undo/redo data
+
+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.
+
+**How the viewer stores this data by default**
+
+By default, the viewer uses **sessionStorage** to store interactive session data. For heavy PDFs with many form fields/annotations, sessionStorage can get filled more quickly and may cause slower interactions or instability when navigating across many pages.
+
+**Why enabling localStorage helps**
+
+- Provides more storage capacity than session storage
+- Avoids storage overflow for annotation‑heavy PDFs
+- Improves saving/loading of form values
+- Enhances stability when navigating large documents
+- Reduces repeated processing for form/annotation‑heavy pages
+
+#### Enable Local Storage
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+This is highly recommended when working with legal documents, tax forms, interactive applications, or PDFs containing thousands of annotations.
+
+---
+
+### 5. Reduce Unnecessary Background System Processes
+
+For the best large‑PDF experience:
+
+- Close unused applications
+- Avoid multiple heavy tasks running in parallel
+- Minimize other browser tabs
+- Avoid opening multiple large PDFs simultaneously
+
+This ensures the viewer receives enough system resources.
+
+---
+
+## See Also
+
+- [Load PDF (GitHub Sample)](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Save%20and%20Load)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-password-pdf.md b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-password-pdf.md
new file mode 100644
index 0000000000..12569b1151
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-password-pdf.md
@@ -0,0 +1,93 @@
+---
+layout: post
+title: Load Password Protected PDFs in React PDF Viewer | Syncfusion
+description: Learn how to open password-protected PDF files in the Syncfusion React PDF Viewer by providing the password in the documentPath object.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load a Password-Protected PDF
+
+This article explains how to open password-protected PDF files in the Syncfusion React PDF Viewer. The viewer supports both user‑interactive loading (Open File dialog) and programmatic loading using APIs.
+
+---
+
+## 1. Opening a Password-Protected PDF Using the **Open File** Dialog
+
+When the user selects a password-protected PDF using the built‑in **Open File** option:
+
+1. The viewer detects that the document is encrypted
+
+
+
+2. A **password input popup** is automatically displayed
+
+
+
+3. The user enters the password
+
+4. The document is decrypted and loaded
+
+No additional configuration or code is required.
+
+This approach works for all password-protected PDFs opened locally by the user.
+
+---
+
+## 2. Opening a Password-Protected PDF Programmatically
+
+If you load a password-protected PDF from a URL or through custom logic, the viewer provides two behaviors depending on how the file is loaded.
+
+---
+
+### 2.1 Load the Document Using `viewer.load(url, password)`
+
+You can directly pass the password in the [`load`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#load) method:
+
+```js
+viewer.load(
+ 'https://your-api/password-protected.pdf',
+ 'Password'
+);
+```
+
+- If the password is correct → the PDF loads immediately
+- If the password is incorrect → the viewer displays the incorrect password popup
+- If no password is provided → the password popup is shown automatically
+
+This is useful when the password is known beforehand.
+
+---
+
+### 2.2 Loading a Password-Protected Document's URL Using `documentPath`
+
+If the [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) points to a password-protected PDF:
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+The viewer will:
+
+- Detect encryption
+- Show the **password popup automatically**
+- Allow the user to enter the correct password
+- Then load the PDF
+
+
+
+N> No password should be passed inside `documentPath`.
+
+---
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md b/Document-Processing/PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md
new file mode 100644
index 0000000000..c30a421b64
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md
@@ -0,0 +1,130 @@
+---
+layout: post
+title: Preprocess PDF Document in React PDF Viewer | Syncfusion
+description: Learn how to preprocess PDF documents using Syncfusion PDF Library before displaying them in the React PDF Viewer.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Pre-process PDF Document Before Displaying in React PDF Viewer
+
+This section explains why preprocessing is useful, what operations you can perform using the Syncfusion PDF Library, and how to load the processed document in the React PDF Viewer.
+
+## Why Preprocessing Is Needed
+Preprocessing a PDF before sending it to the viewer helps you:
+- Reduce file size and improve load time
+- Merge multiple documents into one
+- Extract only required pages for faster loading
+- Flatten form fields and annotations for performance & security
+- Apply branding elements such as watermarks or stamps
+
+These enhancements ensure a better, faster, and more controlled viewing experience.
+
+## Merge PDF Documents
+### UI-Level Merging
+You can visually merge pages in the **Organize Pages** UI inside the PDF Viewer. Users can import another PDF, insert its pages into the current file, reorder pages, or delete unwanted pages.
+
+
+
+### Programmatically Merge PDFs
+Using the Syncfusion PDF Library, you can merge documents before loading them into the viewer.
+```js
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+const document1 = await PdfDocument.load('file1.pdf');
+const document2 = await PdfDocument.load('file2.pdf');
+
+document1.merge(document2);
+const mergedBytes = await document1.save();
+```
+You can then load the merged PDF into the viewer using Blob or Base64.
+
+## Extract Pages
+### UI-Level Extraction
+Using the Viewer’s [**Organize Pages**](../organize-pages/overview) window, users can select and extract required pages and download them separately.
+
+
+
+### Programmatically Extract Pages
+```js
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+const original = await PdfDocument.load('sample.pdf');
+const extracted = original.extractPages([2,3,4]);
+const resultBytes = await extracted.save();
+```
+This reduces file size and improves performance when loading large documents.
+
+## Flatten Form Fields & Annotations
+### Why Flattening Helps
+- Prevents users from editing form fields
+- Improves rendering speed
+- Ensures consistent appearance across all devices
+
+### Programmatic Flattening
+```js
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+const doc = await PdfDocument.load('form.pdf');
+doc.formFields.flattenAllFields();
+doc.annotations.flattenAllAnnotations();
+const bytes = await doc.save();
+```
+
+## Add Watermark or Stamp
+### UI-Level Stamps
+The PDF Viewer toolbar allows users to:
+- Add [standard stamps](../annotation/stamp-annotation#add-stamp-annotations-to-the-pdf-document) (Approved, Draft, etc.)
+- Insert [custom image stamps](../annotation/stamp-annotation#add-a-custom-stamp)
+
+
+
+### Programmatically Add a Watermark
+```js
+import { PdfDocument, PdfGraphics, PdfBrushes } from '@syncfusion/ej2-pdf';
+
+const doc = await PdfDocument.load('input.pdf');
+const page = doc.getPage(0);
+const g = page.graphics;
+
+g.drawString('CONFIDENTIAL', {
+ x: 150,
+ y: 300,
+ fontSize: 48,
+ brush: PdfBrushes.gray,
+ opacity: 0.3,
+ rotateAngle: 45
+});
+
+const outputBytes = await doc.save();
+```
+
+## How-To Guide: Load the Preprocessed PDF in the Viewer
+You can load the processed PDF using **Blob**, **Base64**, or a **URL**.
+
+### Load Using Blob (Recommended)
+```js
+fetch('/api/processed-pdf')
+ .then(res => res.blob())
+ .then(blob => {
+ const url = URL.createObjectURL(blob);
+ viewer.load(url);
+ });
+```
+Best for large or dynamically processed PDFs.
+
+### Load Using Base64
+```js
+viewer.load('data:application/pdf;base64,BASE64_STRING');
+```
+Use for small files.
+
+### Load Using URL
+```js
+viewer.load('https://yourdomain.com/files/doc.pdf');
+```
+Ideal for stored/static files.
+
+---
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
new file mode 100644
index 0000000000..4be7817f5f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/retrieve-loadedDoc.md
@@ -0,0 +1,275 @@
+---
+layout: post
+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
+domainurl: ##DomainURL##
+---
+
+# Retrieve the Loaded Document Instance in React PDF Viewer
+
+This page explains how to access the React PDF Viewer instance using a React ref, listen for the [`documentLoad`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentload) life-cycle event, and retrieve document information, page details, and metadata—so you can safely invoke viewer APIs after the PDF is loaded.
+
+---
+
+## 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 **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.
+
+---
+
+## Reference: What you can access/call after load
+
+After the PDF is loaded you can:
+
+- **Read document information**: title, author, subject, keywords (metadata), page count.
+- **Read page details**: total pages, current page, page size(s).
+- **Call Viewer APIs** (typical examples):
+ - **Zoom / Fit**: `zoomTo(125)`; fit to page/width
+ - **Navigation**: go to a specific page
+ - **Interactions**: enable/disable features (based on injected services)
+ - **Export**: `download()`, `print()`
+
+> Always invoke these after the `documentLoad` event fires, or from user actions that occur after load. Guard calls with optional chaining or readiness flags.
+
+---
+
+## How‑to: Get the instance with a ref and read details on load
+
+Below is a focused snippet showing:
+1) Creating a **ref** for the viewer,
+2) Wiring the **`documentLoad`** event, and
+3) Reading basic **document info** and **page count**, then calling **viewer APIs** safely.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+import {
+ PdfViewerComponent,
+ Toolbar,
+ Magnification,
+ Navigation,
+ Print,
+ Inject,
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ const viewerRef = React.useRef(null);
+
+ // Fires after the PDF is fully loaded and ready
+ const onDocumentLoad = (args) => {
+ // 1) Access the component instance
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+
+ // 2) Read loaded document details (shape depends on event payload/version)
+ console.log('documentLoad args:', args);
+
+ // 4) Call viewer APIs (after load)
+ const pageCount =
+ (viewer && viewer.pageCount) ||
+ (args && args.pageCount) ||
+ '(unknown)';
+ const documentName = (args && args.documentName) || '(unnamed)';
+ console.log(`Loaded: ${documentName}, pages: ${pageCount}`);
+
+ // Safe API calls after load
+ viewer.magnification.zoomTo(200);
+ viewer.navigation.goToPage(5);
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+**Notes**
+- The event name is `documentLoad` (the callback receives load args).
+- The exact event args and public methods available on the component may vary with the package version and injected services. Use `console.log(args)` once to see what’s present in your build.
+- Always guard calls with optional chaining (e.g., `viewer?.magnification?.zoomTo(125)`).
+
+---
+
+## Tutorial: End‑to‑End — Read metadata & call APIs after load
+
+This example demonstrates a complete flow:
+- Setting up a **viewer ref**
+- Subscribing to `documentLoad`
+- Extracting **metadata** and **pages**
+- Exposing **buttons** to call viewer APIs only after load
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import {
+ PdfViewerComponent,
+ Inject,
+ Toolbar,
+ Magnification,
+ Navigation,
+ Print,
+ TextSelection,
+ TextSearch,
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+ const viewerRef = React.useRef(null);
+ const [ready, setReady] = React.useState(false);
+ const [docInfo, setDocInfo] = React.useState({ name: '', pageCount: undefined, author: '', title: '' });
+
+ const handleDocumentLoad = (args) => {
+ const viewer = viewerRef.current;
+ if (!viewer) return;
+
+ console.log('documentLoad args:', args);
+
+ const info = {
+ name: args && args.documentName,
+ pageCount: (viewer && viewer.pageCount) || (args && args.pageCount),
+ author: args && args.documentInformation && args.documentInformation.author,
+ title: args && args.documentInformation && args.documentInformation.title,
+ };
+ setDocInfo(info);
+
+ // Defer just a tick to ensure layout/modules ready before calling APIs
+ requestAnimationFrame(() => {
+ try {
+ if (viewer && viewer.magnification && viewer.magnification.zoomTo) {
+ viewer.magnification.zoomTo(150); // default zoom after load
+ }
+ if (viewer && viewer.navigation && viewer.navigation.goToPage) {
+ const targetPage = 1; // keep within bounds if you want to guard
+ if (!info.pageCount || targetPage <= info.pageCount) {
+ viewer.navigation.goToPage(targetPage);
+ }
+ }
+ } catch (e) {
+ console.warn('Post-load actions failed:', e);
+ } finally {
+ setReady(true);
+ }
+ });
+ };
+
+ // ---- UI action handlers (module APIs) ----
+ const zoomTo = (percent) => {
+ const viewer = viewerRef.current;
+ try {
+ viewer && viewer.magnification && viewer.magnification.zoomTo && viewer.magnification.zoomTo(percent);
+ } catch (e) {
+ console.warn('zoomTo failed:', e);
+ }
+ };
+
+ const goTo = (page) => {
+ const viewer = viewerRef.current;
+ try {
+ viewer && viewer.navigation && viewer.navigation.goToPage && viewer.navigation.goToPage(page);
+ } catch (e) {
+ console.warn('goToPage failed:', e);
+ }
+ };
+
+ const printDoc = () => {
+ const viewer = viewerRef.current;
+ try {
+ viewer && viewer.print && viewer.print.print();
+ } catch (e) {
+ console.warn('print failed:', e);
+ }
+ };
+
+ const downloadDoc = () => {
+ const viewer = viewerRef.current;
+ try {
+ viewer && viewer.download && viewer.download();
+ } catch (e) {
+ console.warn('download failed:', e);
+ }
+ };
+
+ return (
+
+ );
+}
+
+// Render like your previous example (ensure an element with id="sample" exists in index.html)
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render();
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## See also
+- React PDF Viewer – [API Reference](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default) ([methods](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#methods), [events](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#events), [properties](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#properties))
+- Events: [`documentLoad`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentload) and related argument shape (check your package version)
+- [Modules and Services](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/feature-module) (e.g., Magnification, Navigation, Print) — ensure the features you call are injected
diff --git a/Document-Processing/PDF/PDF-Viewer/react/download.md b/Document-Processing/PDF/PDF-Viewer/react/download.md
index aee7e65e2c..637f34eb63 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/download.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/download.md
@@ -7,13 +7,15 @@ platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Download in React PDF Viewer control
+# Download in React PDF Viewer component
-The PDF Viewer supports downloading the loaded PDF file. You can enable/disable the download using the following code snippet.
+The PDF Viewer component supports downloading the loaded PDF file. Enable or disable the download using the example below.
-
+
-You can invoke download action using following code snippet.,
+Invoke the download action using the following example.
+
+N> The examples obtain the viewer instance and call `download()`. Prefer using the component `ref` to access the viewer instance when available rather than direct DOM lookup.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/events.md b/Document-Processing/PDF/PDF-Viewer/react/events.md
index acfbf08176..9c29ec9233 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/events.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/events.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Events in React PDF Viewer
-The PDF Viewer component triggers events for creation, page navigation, document life cycle, context menu interactions, comments, bookmarks, download and export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. Use these events to integrate custom logic into application workflows.
+The PDF Viewer component triggers events for component creation, page navigation, document lifecycle, context menu interactions, comments, bookmarks, download/export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. These events enable integration of custom logic into application workflows.
The following table lists commonly used events supported by the PDF Viewer component:
@@ -1163,7 +1163,7 @@ The [keyboardCustomCommands](https://ej2.syncfusion.com/react/documentation/api/
- keyboardCommand: The command metadata raised by Command Manager
When it triggers
-- After registering gestures in commandManager.keyboardCommand. For example, pressing Shift + Alt + G or Shift + Alt + H triggers the event. Use this to handle custom keyboard shortcuts.
+- After registering gestures in the `commandManager` (for example, via `commandManager.keyboardCommand`). For example, pressing Shift + Alt + G or Shift + Alt + H triggers the event. Use this event to handle custom keyboard shortcuts.
Refer to [Keyboard interaction](./accessibility#keyboard-interaction) for details about adding and handling custom shortcut keys.
Example:
diff --git a/Document-Processing/PDF/PDF-Viewer/react/feature-module.md b/Document-Processing/PDF/PDF-Viewer/react/feature-module.md
index e6f2a24069..db443f94ad 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/feature-module.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/feature-module.md
@@ -8,11 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Feature module in React PDF Viewer Control
+# Feature modules in React PDF Viewer component
-The PDF Viewer features are segregated into individual feature-wise modules to enable selectively referencing in the application. The required modules should be injected to extend its functionality. The following are the selective modules of PDF Viewer that can be included as required:
-
-The available PDF Viewer modules are:
+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.
@@ -27,7 +25,8 @@ The available PDF Viewer modules are:
* [**FormFields**](./form-designer/create-programmatically): Work with form fields in the document.
* [**FormDesigner**](./form-designer/create-programmatically): Add or edit form fields in the document.
->In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a PDF Viewer instance.
+N> In addition to injecting required modules in an application, enable the corresponding properties to extend functionality for a PDF Viewer instance.
+
Refer to the following table.
| Module | Property to enable the functionality for a PDF Viewer instance |
diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-filling.md b/Document-Processing/PDF/PDF-Viewer/react/form-filling.md
deleted file mode 100644
index 428c5e4b4b..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/react/form-filling.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-layout: post
-title: Form filling in React PDF Viewer | Syncfusion
-description: Learn how to view, fill, export, and import PDF form fields using the Syncfusion React PDF Viewer, including disabling interaction and working with signatures.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Form filling in React PDF Viewer
-
-The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data.
-
-Check the following video to learn how to work with form fields in React PDF Viewer.
-{% youtube "https://www.youtube.com/watch?v=MUWTCg1MoAE" %}
-
-The PDF Viewer supports the following form field types:
-
-* Text box
-* Password
-* Check box
-* Radio button
-* List box
-* Dropdown
-* Signature field
-* Initial field
-
-
-
-## Disabling form fields
-
-The PDF Viewer provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import './index.css';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
- ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
-
-let pdfviewer;
-
-function App() {
- return (
- );
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render();
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add a handwritten signature to a signature field
-
-Add a handwritten signature to a signature field by following these steps:
-
-* Click the signature field in the PDF document to open the signature panel.
-
-
-
-* Draw the signature in the signature panel.
-
-
-
-* Select **CREATE**. The drawn signature is added to the signature field.
-
-
-
-## Delete a signature from a signature field
-
-Delete a signature placed in a signature field by using the Delete option in the annotation toolbar.
-
-
-
-## Export and import form fields
-
-The PDF Viewer supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. The following formats are supported:
-
-* FDF
-* XFDF
-* JSON
-
-For more information, see the [Form fields documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/form-designer/create-programmatically#export-and-import-form-fields).
-
-## See also
-
-* [Handwritten signature in React PDF Viewer](./annotation/signature-annotation)
-* [Form Designer events](./form-designer/form-field-events)
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 12f4bd9f20..443fbbe5a0 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/custom-data.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/custom-data.md
@@ -11,9 +11,9 @@ documentation: ug
The **Syncfusion React 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.
+Custom data remains associated with the form field for the duration of the viewer session and can be accessed or updated whenever the field is queried or modified.
-This page explains how to:
+This article 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)
@@ -27,7 +27,7 @@ This page explains how to:
## 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()**.
+Attach custom data at field creation by passing a `customData` object in the settings parameter of `addFormField()`.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -76,7 +76,7 @@ root.render();
## 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:
+When form fields are added via the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar), define default `customData` so newly created fields inherit it. Default custom data is configured using per-field settings objects such as:
- [textFieldSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#textfieldsettings)
- [passwordFieldSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#passwordfieldsettings)
@@ -95,6 +95,14 @@ import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
+ const defaultTextFieldSettings = {
+ name: 'Textbox',
+ customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' }
+ };
+ const defaultCheckBoxFieldSettings = {
+ name: 'Checkbox',
+ customData: { consentType: 'marketing', defaultChecked: false }
+ };
return (
@@ -104,14 +112,8 @@ export function App() {
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
style={{ height: '680px' }}
// Example: default custom data for all new Textbox fields added from the toolbar
- textFieldSettings={{
- name: 'Textbox',
- customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' }
- }}
- checkBoxFieldSettings ={{
- name: 'Checkbox',
- customData: { consentType: 'marketing', defaultChecked: false }
- }}
+ textFieldSettings={defaultTextFieldSettings}
+ checkBoxFieldSettings={defaultCheckBoxFieldSettings}
>
@@ -128,7 +130,7 @@ root.render();
## 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/react/documentation/api/pdfviewer/index-default#updateformfields) method. The field can be identified using either its object reference or field ID.
+Modify an existing field's `customData` by using the [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) method. The field may be identified by its object reference or field ID.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -174,14 +176,14 @@ root.render();
{% endtabs %}
**Tip:**
-Merge new values with the existing customData object before calling [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data.
+Merge new values into the existing `customData` object before calling [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) to avoid unintentionally overwriting existing metadata.
## 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
+Access the `customData` property from any form field at any point in the application flow, for example:
+- after the document is loaded
+- during save or submit operations
+- while performing validation or conditional routing
{% tabs %}
{% highlight js tabtitle="index.js" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/react/forms/form-constrain.md
index 17b41c83c0..dcccab715d 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-constrain.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-constrain.md
@@ -34,7 +34,7 @@ The following flags are supported in the PDF Viewer:
## Key Actions
### Make Fields Read Only
-Use the **isReadOnly** property to prevent users from modifying a form field through the UI. This is useful for displaying pre filled or calculated values that should not be changed by the user.
+Use the **isReadOnly** property to prevent users from modifying a form field through the UI. This is useful for displaying pre-filled or calculated values that should not be changed by the user.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -334,26 +334,26 @@ root.render();
{% endtabs %}
-N> Printing can be triggered programmatically using **pdfviewer.print()**. Form fields with **isPrint: false** are excluded from the printed output.
+N> Printing can be triggered programmatically using `pdfviewer.print()`. Form fields with `isPrint: false` are excluded from 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.
+3. Right-click the field, open the context menu, and select Properties.
4. Configure the required constraint options.
-5. Click “Ok” and Close the properties popover to apply the changes.
+5. Click OK to apply changes and close the properties popover.
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
+### Apply flags when creating fields
Pass the flags properties in the settings object when creating form fields using **addFormField()**.
{% tabs %}
@@ -439,7 +439,7 @@ root.render();
{% endhighlight %}
{% endtabs %}
-### Update flags on Existing Fields programmatically
+### Update flags on existing fields programmatically
Use the [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) method to modify constraint values on existing form fields.
{% tabs %}
@@ -530,7 +530,7 @@ root.render();
{% endhighlight %}
{% endtabs %}
-### Set Default Flags for New PDF Form Fields
+### 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 %}
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 aac8d316ed..e7e1264e39 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md
@@ -99,9 +99,9 @@ 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.
-
+
-Use the following Code-snippet to enable Form Designer by injecting **Form Designer mode** Module.
+Use the following code snippet to enable Form Designer by injecting the `FormDesigner` module.
{% tabs %}
{% highlight js tabtitle="index.js" %}
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 dbc34c18b8..cb3c1f10a0 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
@@ -10,9 +10,9 @@ domainurl: ##DomainURL##
# PDF Viewer Form Field Events in React
-The Syncfusion **React 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**.
+The Syncfusion React PDF Viewer exposes form field events that let developers track user interactions, respond to changes, and implement business logic. These events support validation, UI updates, logging, and workflow automation. Form field events occur when fields are added, selected, edited, moved, resized, or removed.
-Form field events are triggered during actions such as adding, selecting, modifying, moving, resizing, and removing form fields.
+The example below shows wiring of form-field events and a validation handler that prevents print/download when required fields are missing.
## Supported PDF Form Field Events
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 a5c0c166b4..26fc2c47f2 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
@@ -10,7 +10,9 @@ domainurl: ##DomainURL##
# Form Fields API in React PDF Viewer
-The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available:
+The PDF Viewer exposes a set of programmatic APIs to create, edit, validate, navigate, and manage form fields. These APIs enable automation of common tasks such as updating values, exporting/importing form data, resetting fields, and toggling designer or validation features. The examples below demonstrate usage patterns; code samples remain unchanged and are runnable when the viewer is initialized.
+
+Each sample demonstrates a single API call or small workflow (for example, updating a field value or exporting form data). Use the provided APIs in application logic or UI handlers to automate form workflows.
| API | Description |
|---|---|
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 b8dbb6a363..557e70cf9e 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md
@@ -22,7 +22,7 @@ The Syncfusion PDF Viewer supports three types of form-filling:
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.
+The PDF Viewer allows importing form field data into an existing PDF document. This enables pre-filled forms using external data sources.
## Fill PDF forms programmatically
@@ -223,7 +223,7 @@ For more details, see [Import Form Data](./import-export-form-fields/import-form
## 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.
+You can export the filled form field data from the PDF Viewer and store it in a backend 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).
diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/form-validation.md b/Document-Processing/PDF/PDF-Viewer/react/forms/form-validation.md
index c353e7af71..bad17183fb 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-validation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-validation.md
@@ -2,15 +2,14 @@
layout: post
title: Form validation in the React PDF Viewer component | Syncfusion
description: Learn how to enable built-in form field validation and validate missing required fields in the Syncfusion React PDF Viewer.
-platform: document-processing
+platform: react
control: PDF Viewer
documentation: ug
---
# Validate PDF Form Fields in React PDF Viewer
-The Syncfusion **React 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.
+The Syncfusion React 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 required form fields are completed before allowing these actions. This improves data completeness and reliability.
## How PDF Form Validation Works
@@ -19,7 +18,7 @@ Form field validation follows this flow:
- Handle the [validateFormFields](https://ej2.syncfusion.com/react/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/react/documentation/api/pdfviewer/index-default#validateformfields) event is triggered.
- - Unfilled required fields are listed in args.nonFillableFields.
+ - Unfilled required fields are provided in the event arguments (typically as `args.formField`; older versions may use `args.nonFillableFields`).
- You can cancel the action, show an error message, or move focus to an invalid field.
## Enable PDF Form Field Validation
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 8c02230b9e..43982c1880 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
@@ -9,9 +9,7 @@ documentation: ug
# Group form fields in React PDF Viewer
-The **Syncfusion React 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:
+The **Syncfusion React PDF Viewer** allows grouping 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. Use the Form Designer UI for manual grouping or the Form Designer APIs for programmatic grouping to keep related fields synchronized across the document.
- [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)
@@ -20,17 +18,17 @@ This page covers:
## 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.
+In a PDF form, multiple widgets can represent the same logical form field. When widgets share the same `Name`, they are treated as a group and remain synchronized.
## Field behavior by type
-- **Textbox and Password** — Text entered in one widget appears in all widgets with the same Name.
-- **CheckBox** — Checking one widget sets the checked state for all checkboxes with the same Name.
-- **RadioButton** — Widgets with the same Name form a radio group; only one option can be selected.
-- **ListBox and DropDown** — The selected value is shared across widgets with the same Name.
+- **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.
+N> form field grouping is controlled by the `Name` property. The position of each widget is determined by its bounds; grouping is independent of location.
## Group using the Form Designer UI
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 eabb468834..5214335817 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
@@ -27,7 +27,7 @@ The PDF Viewer allows you to export form field data in multiple formats for easy
Use [exportFormFields()](https://ej2.syncfusion.com/react/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.
+The example below exports form field data as FDF.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -66,7 +66,7 @@ root.render();
{% endtabs %}
### Export as XFDF
-The following example exports form field data as XFDF.
+The example below exports form field data as XFDF.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -105,7 +105,7 @@ root.render();
{% endtabs %}
### Export as JSON
-The following example exports form field data as JSON.
+The example below exports form field data as JSON.
{% tabs %}
{% highlight js tabtitle="index.js" %}
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 ed5a42884c..d94c3fd9a8 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
@@ -9,8 +9,9 @@ documentation: ug
# PDF Form Import and Export Events in React
-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:
+Import and export events enable tracking and customization of the full life cycle of form data imported into or exported from the PDF Viewer.
+
+Use events to:
- Validate inputs before processing.
- Show progress indicators.
- Log audit trails.
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 83521c69c3..b86676fece 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
@@ -9,7 +9,7 @@ documentation: ug
# Import PDF Form Data into React 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:
+The PDF Viewer imports values into interactive form fields in the currently loaded PDF. Supported formats:
- [FDF](#import-as-fdf)
- [XFDF](#import-xfdf)
@@ -18,7 +18,9 @@ The **PDF Viewer** lets you import values into interactive form fields in the cu
## API to use
- [importFormFields](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format)
-N>If you’re using a **server-backed viewer**, set serviceUrl before importing.
+The `sourceOrObject` parameter accepts a file path/URL or a JavaScript object with field-value pairs when importing from an object.
+
+N> For a server-backed viewer set the `serviceUrl` before importing so the control can forward requests to the server.
### Import FDF
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 2b5b6401e8..a1e2e20b1e 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
@@ -9,7 +9,7 @@ documentation: ug
# Create PDF Form Fields in React
-You can create or add new form fields either visually using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/form-designer) or dynamically using APIs.
+Create or add new form fields visually using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/form-designer) or programmatically using the API.
## Create Form Fields Using the Form Designer UI
Use this approach when you want to design forms manually without writing code.
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 fffdb95d94..dacb315180 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
@@ -11,14 +11,14 @@ documentation: ug
**Styling** customizes appearance only (font, color, alignment, border, background, indicator text).
-## Customize Appearance of Form Fields Using the UI
+## Customize appearance of form fields using the UI
Use the **Properties** panel to adjust:
-- Font family/size, text color, alignment
-- Border color/thickness
+- Font family and size, text color, and alignment
+- Border color and thickness
- Background color
-
+
-## Customize appearance Form Fields Programmatically
+## Customize appearance of form fields programmatically
Use [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) to apply styles:
{% tabs %}
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 6e9d67cfed..f4cfb8974e 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
@@ -9,16 +9,16 @@ documentation: ug
# Modify PDF Form Field Properties in React
-You can modify form fields using the **UI** or **API**.
+Modify form fields using the UI or programmatically via the API.
-## Modify PDF Form Field Properties using the UI
+## Modify PDF form field properties using the UI
- Right click a field → **Properties** to update settings.
-
+
- Drag to move; use handles to resize.
- Use the toolbar to toggle field mode or add new fields.
-## Modify PDF Form Field Properties programmatically
-Use [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) to change behavior/data (including position and size):
+## Modify PDF form field properties programmatically
+Use [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) to change behavior or data (including position and size):
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -75,7 +75,7 @@ root.render();
### Textbox
- UI: Update value, font, size, colors, border thickness, alignment, max length, multiline.
-
+
- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for value, typography, alignment, colors, borders.
{% tabs %}
@@ -132,7 +132,7 @@ root.render();
### Password
- UI: Tooltip, required, max length, font, appearance.
-
+
- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, validation flags, typography, colors, alignment, borders.
{% tabs %}
@@ -191,7 +191,7 @@ root.render();
### CheckBox
- UI: Toggle checked state.
-
+
- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for isChecked, tooltip, colors, borders.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -241,9 +241,9 @@ root.render();
{% endtabs %}
### RadioButton
-• UI: Set selected item in a group (same Name).
-
-• API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) to set selected value and border appearance.
+- UI: Set selected item in a group (same Name).
+
+- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) to set selected value and border appearance.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -288,9 +288,9 @@ root.render();
{% endtabs %}
### ListBox
-• UI: Add/remove items, set selection, adjust fonts/colors.
-
-• API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for items, selection, borders.
+- UI: Add/remove items, set selection, adjust fonts/colors.
+
+- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for items, selection, borders.
{% tabs %}
{% highlight js tabtitle="index.js" %}
@@ -346,9 +346,9 @@ root.render();
{% endtabs %}
### DropDown
-• UI: Add/remove items, default value, appearance.
-
-• API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders.
+- UI: Add/remove items, default value, appearance.
+
+- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders.
{% tabs %}
{% highlight js tabtitle="index.js" %}
import * as ReactDOM from 'react-dom/client';
@@ -403,9 +403,9 @@ root.render();
{% endtabs %}
### Signature Field
-• UI: Tooltip, thickness, indicator text, required/visibility.
-
-• API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders.
+- UI: Tooltip, thickness, indicator text, required/visibility.
+
+- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders.
{% tabs %}
{% highlight js tabtitle="index.js" %}
import * as ReactDOM from 'react-dom/client';
@@ -455,9 +455,9 @@ root.render();
{% endtabs %}
### Initial Field
-• UI: Tooltip, indicator text, thickness, required/visibility.
-
-• API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders.
+- UI: Tooltip, indicator text, thickness, required/visibility.
+
+- API: [updateFormField()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders.
{% tabs %}
{% highlight js tabtitle="index.js" %}
import * as ReactDOM from 'react-dom/client';
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 1f0d601638..4cc6618915 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
@@ -8,15 +8,18 @@ documentation: ug
---
# Move and Resize PDF Form Fields in React
-- **Move**: Drag the form field to reposition it.
-- **Resize**: Use the resize handles to change width and height.
+The PDF Viewer supports moving and resizing form fields.
-
+- **Move**: drag the form field to reposition it.
+- **Resize**: use the resize handles to change width and height.
-## Move and Resize Fields Programmatically (API)
-You can set absolute bounds or move fields by a delta.
+
-**Set absolute bounds**
+## Move and resize fields programmatically
+
+The API supports setting absolute bounds or moving fields by a delta.
+
+### Set absolute bounds
{% tabs %}
{% highlight js tabtitle="index.js" %}
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 a32b9a0901..97b49cb3a9 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
@@ -10,15 +10,18 @@ documentation: ug
# Remove PDF Form Fields from a PDF in React
-## Remove Form Fields Using the UI
+The PDF Viewer supports removing form fields using the Form Designer UI or programmatically via the API.
+
+## 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.
-
+1. Enable **Form Designer** mode.
+2. Select the form field.
+3. Click **Delete** in the toolbar or press the **Delete** key.
+
+
-## Remove Form Fields Programmatically
-Use **deleteFormField()** with a field reference or ID.
+## 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.
{% tabs %}
{% highlight js tabtitle="index.js" %}
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 f370aaac85..4c8463c6cd 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
@@ -7,10 +7,9 @@ control: PDF Viewer
documentation: ug
---
-# Create, Edit, Style, and Remove Form Fields in React PDF Viewer
+# Create, edit, style, and remove form fields in React PDF Viewer
-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)
+The [React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/overview) enables creation of interactive PDF form fields, modification of their behavior and appearance, and removal when no longer required. 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 the React APIs.
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 773e67fff8..6c268df4b9 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/overview.md
@@ -9,9 +9,9 @@ documentation: ug
# Overview of Forms in React 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 Syncfusion React PDF Viewer delivers a complete, easy-to-use PDF forms experience. Users can read, fill, add, edit, and delete form fields directly within PDF documents through the viewer UI or programmatically via the React 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.
+The viewer includes import and export support for form data, simplifying integration with backend systems. Developers have fine-grained API control while end users interact with a streamlined form-filling interface.
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" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md
new file mode 100644
index 0000000000..b7977b80fd
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md
@@ -0,0 +1,33 @@
+---
+layout: post
+title: Getting started with Syncfusion React PDF Viewer component| Syncfusion
+description: Learn here all about Getting started with Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more details.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+
+# Getting started with Syncfusion React PDF Viewer
+
+
+If you're starting to integrate the Syncfusion® React PDF Viewer into your application, choose the path below that matches how you'll run the viewer in your app (client-only or via a web service) and follow that tutorial.
+
+- **Standalone** — Run the viewer entirely in the browser (no server rendering). This mode delivers excellent runtime performance and responsiveness because rendering and interaction happen on the client; it is ideal for quick prototyping and simple integrations.
+- **Server‑backed** — Use a web service to perform PDF Viewer operations (rendering, document processing, or streaming). Choose this path when you need server-side processing for PDF Viewer operations.
+
+This page is intentionally a short introduction — choose a path and follow its tutorial:
+
+- [Standalone tutorial](./getting-started)
+- [Server‑backed tutorial](./getting-started-with-server-backed)
+
+**Related**
+
+- [Annotations](./annotation/text-markup-annotation)
+- [Form designer](./forms/form-designer)
+- [Organize pages](./organize-pages/overview)
+
+**See also**
+
+- [PDF Viewer overview](../overview)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md
index ef300f6655..394e12cde3 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md
@@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Getting Started with server-backed PDF Viewer component
+# Getting started with server-backed React PDF Viewer component
-This section explains the steps required to create a simple React PDF Viewer and demonstrates the basic usage of the PDF Viewer control in a React application.
+This section explains the steps to create a server-backed React PDF Viewer and demonstrates basic usage of the PDF Viewer component in a React application.
## Prerequisites
@@ -20,9 +20,9 @@ To get started with Syncfusion® React UI co
## Setup for Local Development
-To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production.
+To set up a React application, use Vite (for example, `npm create vite@latest`), which provides a fast development environment, smaller bundle sizes, and optimized production builds compared to traditional tools such as `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/).
-> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
+N> To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
To create a new React application, run the following command.
@@ -53,7 +53,7 @@ To install PDF Viewer component, use the following command
npm install @syncfusion/ej2-react-pdfviewer --save
```
-N> The following changes applies to React version 18 and above.
+N> The following changes apply to React version 18 and above.
## Adding PDF Viewer component and the CSS reference
diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
index 9d77bbcd85..6a570dc4e0 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
@@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Getting started in Standalone PDF Viewer control in React
+# Getting started with standalone React PDF Viewer component
-This section explains the steps required to create a simple Standalone React PDF Viewer and demonstrates the basic usage of the PDF Viewer control in a React application.
+This section explains the steps to create a standalone React PDF Viewer and demonstrates basic usage of the PDF Viewer component in a React application.
## Prerequisites
@@ -20,9 +20,9 @@ To get started with Syncfusion® React UI co
## Setup for Local Development
-To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production.
+To set up a React application, use Vite (for example, `npm create vite@latest`), which provides a fast development environment, smaller bundle sizes, and optimized production builds compared to tools such as `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/).
-> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
+N> To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
To create a new React application, run the following command.
@@ -225,8 +225,7 @@ N> When running the sample, if you encounter the **ERR_OSSL_EVP_UNSUPPORTED erro
$env:NODE_OPTIONS = "--openssl-legacy-provider"
```
-
-Output will be appears as follows.
+Output appears as follows.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/globalization.md b/Document-Processing/PDF/PDF-Viewer/react/globalization.md
index 8b27da28fe..48f0535e54 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/globalization.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/globalization.md
@@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Globalization in React Pdfviewer component
+# Globalization in React PDF Viewer component
-The text contents provided in the PDF Viewer can be localized using the collection of localized strings for different cultures. By default, the PDF Viewer is localized in “__en-US__”.
+The text content in the PDF Viewer can be localized using collections of localized strings for different cultures. By default, the PDF Viewer uses the “__en-US__”. locale.
The following table shows the default text values used in PDF Viewer in 'en-US' culture:
@@ -39,7 +39,7 @@ The following table shows the default text values used in PDF Viewer in 'en-US'
|Zoom Out|Zoom out|
|Page Thumbnails|Page thumbnails|
|Bookmarks|Bookmarks|
-|Print|Print file
+|Print|Print file|
|Password Protected|Password required|
|Copy|Copy|
|Text Selection|Text selection tool|
@@ -65,7 +65,7 @@ The following table shows the default text values used in PDF Viewer in 'en-US'
|Highlight context|Highlight|
|Underline context|Underline|
|Strikethrough context|Strike through|
-|Server error|Web-service is not listening. PDF Viewer depends on web-service for all it|s features. Please start the web service to continue.|
+|Server error|Web-service is not listening. PDF Viewer depends on web-service for all its features. Please start the web service to continue.|
|Client error|Client-side error is found. Please check the custom headers provided in the AjaxRequestSettings property and web action methods in the ServerActionSettings property.|
|Open text|Open|
|First text|First Page|
@@ -78,7 +78,7 @@ The following table shows the default text values used in PDF Viewer in 'en-US'
|Pan text|Pan|
|Print text|Print|
|Search text|Search|
-|Annotation Edit text|Edit Annotation| Please start the web service to continue.|
+|Annotation Edit text|Edit Annotation|
|FormDesigner Edit text|Add and Edit Form Fields|
|Line Thickness|Line Thickness|
|Line Properties|Line Properties|
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md b/Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md
index 68ba162836..059d7ffb48 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to-overview.md
@@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---
-# How to Use the Frequently Asked Questions Section in the PDF Viewer
+# How-to overview for PDF Viewer
-The frequently asked questions in Essential® PDF Viewer are listed below.
+The following how-to articles and frequently asked questions for the Syncfusion PDF Viewer are listed below.
* [How to add annotation in text search in react?](./how-to/add-annotation-in-text-search-ts)
* [How to add custom header to the PDF Viewer ajax request?](./how-to/add-header-value)
@@ -63,3 +63,4 @@ The frequently asked questions in Essential® PDF Viewer are liste
* [How to get the signature selected and unselected event?](./how-to/signatureselect-signatureunselect-ts)
* [How to unload the PDF document from the viewer?](./how-to/unload-document)
* [Load Document after resources Loaded](./how-to/load-document-after-resources-loaded)
+* [Integrate PDF Viewer into existing react layouts](./how-to/existing-react-layout)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-annotation-in-text-search.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-annotation-in-text-search.md
index 27933637d9..a3113f93dd 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-annotation-in-text-search.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-annotation-in-text-search.md
@@ -9,13 +9,13 @@ documentation: ug
# Add Rectangle Annotations via Text Search in PDF Viewer
-A concise guide to adding rectangle annotations at highlighted text search results in the React PDF Viewer to visually emphasize matches and improve readability.
+A concise guide that demonstrates how to add rectangle annotations at highlighted text search results in the React PDF Viewer. The guide explains where to wire the callback, required services, and quick troubleshooting steps.
## Steps to add rectangle annotations on search result highlight
**Step 1:** Follow the steps provided in the [Syncfusion® Getting Started Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to set up a basic PDF Viewer sample.
-**Step 2:** Initialize the PDF Viewer with the required modules
+**Step 2:** Set up the PDF Viewer component to add rectangle annotations based on the bounds of highlighted search text in the PDF Viewer.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -127,6 +127,6 @@ root.render();
{% endhighlight %}
{% endtabs %}
-Following these steps enables the PDF Viewer to add rectangle annotations at search result locations, improving the visibility of matches.
+Following this guide enables the PDF Viewer to add rectangle annotations at text search result locations, improving visibility for users navigating search matches.
[View sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-header-value.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-header-value.md
index a271af197d..c78eab1dec 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-header-value.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-header-value.md
@@ -9,9 +9,9 @@ documentation: ug
# Add header values in the React PDF Viewer
-Use the ajaxHeaders property in the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) to include custom headers with each AJAX request.
+Use the `ajaxHeaders` property inside the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/React/documentation/api/pdfviewer/#ajaxrequestsettings) to send custom HTTP headers with each request made by the viewer.
-Example: Add a custom Authorization header using ajaxRequestSettings
+Example: Add a custom Authorization header using `ajaxRequestSettings` in an React component
```ts
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-save-button.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-save-button.md
index 922cccb23c..7b0013af61 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-save-button.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-save-button.md
@@ -12,11 +12,11 @@ domainurl: ##DomainURL##
PDF Viewer supports customizing toolbar items, including adding, showing, hiding, enabling, and disabling items.
-- Save button: The Save button can be defined using [CustomToolbarItemModel](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/customToolbarItemModel/) and included alongside existing items via [ToolbarSettings](https://ej2.syncfusion.com//react/documentation/api/file-manager/toolbarSettings/). Handle the click action using [`toolbarclick`](https://ej2.syncfusion.com/react/documentation/api/file-manager/toolbarClickEventArgs/).
+* Save button: The Save button can be defined using [CustomToolbarItemModel](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/customToolbarItemModel/) and included alongside existing items via [ToolbarSettings](https://ej2.syncfusion.com//react/documentation/api/file-manager/toolbarSettings/). Handle the click action using [`toolbarclick`](https://ej2.syncfusion.com/react/documentation/api/file-manager/toolbarClickEventArgs/).
-- Show or hide: The Save button can be shown or hidden using [ToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/file-manager/toolbarSettings/). Predefined items are listed under [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/chart/toolbarItems/).
+* Show or hide: The Save button can be shown or hidden using [ToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/file-manager/toolbarSettings/). Predefined items are listed under [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/chart/toolbarItems/).
-- Enable or disable: The Save button can be enabled or disabled using [`enabletoolbaritem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/).
+* Enable or disable: The Save button can be enabled or disabled using [`enabletoolbaritem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/).
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -32,7 +32,8 @@ import { TextBox } from "@syncfusion/ej2-inputs";
export function App() {
-// Add OnCreateSearch outside the App function
+// Helper: Add OnCreateSearch outside the App function
+// The sample below uses an OnCreateSearch helper to add an icon; place it in module scope.
function OnCreateSearch() {
this.addIcon('prepend', 'e-icons e-search');
}
@@ -126,18 +127,18 @@ root.render();
{% endhighlight %}
{% endtabs %}
-N> Default toolbar items: ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
+N> Default toolbar items include: ['OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
### Align property
-Specifies the alignment of the Save button within the toolbar.
+Specifies the alignment of the Save button within the toolbar:
-- Left: Aligns the item to the left side of the toolbar.
-- Right: Aligns the item to the right side of the toolbar.
+* Left: aligns the item to the left side of the toolbar.
+* Right: aligns the item to the right side of the toolbar.
### Tooltip property
-Sets the tooltip text for the Save button. The tooltip provides additional information on hover.
+Sets the tooltip text for the Save button; the tooltip appears on hover.
### CssClass property
@@ -145,7 +146,7 @@ Applies custom CSS classes to the Save button for styling.
### Prefix property
-Sets the CSS class or icon to add as a prefix to the Save button content.
+Sets the CSS class or icon to display before the Save button text.
### ID property
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-signature.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-signature.md
index 7eb63ddbdf..7743e3b6b9 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-signature.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-signature.md
@@ -8,13 +8,14 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Add signature in React Pdfviewer component
+## Add signature in React PDF Viewer component
-The PDF Viewer library allows you to add signature in the signature field of the loaded PDF document programmatically using the **formFieldClick** event.
+The PDF Viewer library allows adding a signature to a signature field in a loaded PDF document programmatically by handling the `formFieldClick` event.
-**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) to create simple PDF Viewer sample in React.
+Follow these steps
-**Step 2:** Add the following code snippet to add signature in signature field.
+1. Follow the Syncfusion [getting-started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) guide for React PDF Viewer.
+2. Add the following code snippet to handle signature field clicks and set or clear the signature value.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/annotation-selectors.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/annotation-selectors.md
index 0f0a3abe96..5438f24f70 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/annotation-selectors.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/annotation-selectors.md
@@ -9,9 +9,9 @@ documentation: ug
# Customize annotation selectors in TypeScript PDF Viewer
-Customize the annotation selector using the [annotationSelectorSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationselectorsettings) property of the PDF Viewer.
+Use the [annotationSelectorSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationselectorsettings) property to configure the appearance and behavior of annotation selectors. This includes selection handles and resizers (for example, handle shape and size), which determine how users interact with annotations during editing.
-Example: Customize the selector of a shape annotation
+The example below changes the selector's resizer handle shape to circular and opens an existing annotation for editing. Setting `resizerShape = 'Circle'` updates the selector appearance to circular resizer handles; ensure an annotation exists before calling `editAnnotation` to avoid runtime errors.
```
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/authorization-token.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/authorization-token.md
index 77a3ee3f03..19884dea9a 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/authorization-token.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/authorization-token.md
@@ -8,11 +8,11 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Authorization token in React Pdfviewer component
+## Authorization token in React PDF Viewer component
-The PDF Viewer library allows you to include the authorization token in the PDF viewer AJAX request using the properties of the ajaxRequest header available in `AjaxRequestSettings`, and it will be included in every AJAX request send from PDF Viewer.
+This article shows how to include an authorization token in AJAX requests issued by the React PDF Viewer by using the `ajaxRequestSettings` property. The token is included in every AJAX request sent by the viewer when configured via `ajaxHeaders`.
-Here is an example of how you can use the **AjaxRequestSettings** property to include the authorization token to the PDF viewer control:
+Here is an example that adds an Authorization header using `AjaxRequestSettings`:
{% raw %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md
index 0e763b53ab..e7711d4014 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Change author name using annotation settings in React PDF Viewer
-The PDF Viewer allows customizing individual annotation settings using the annotationSettings API, which exposes properties common to all annotations.
+The `annotationSettings` API provides a central way to configure properties that apply to all annotations in the viewer.
API name: annotationSettings
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md
index 90e78e08fa..151e617b0b 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md
@@ -37,10 +37,11 @@ Example: Delete a specific annotation by id
// Delete an annotation by id
function deleteAnnotationbyId() {
var viewer = document.getElementById("container").ej2_instances[0];
- viewer.annotationModule.deleteAnnotationById(viewer.annotationCollection[0].annotationId);
+ if (viewer.annotationCollection && viewer.annotationCollection.length > 0) {
+ viewer.annotationModule.deleteAnnotationById(viewer.annotationCollection[0].annotationId);
+ }
}
```
-Sample: [How to clear annotations using deleteAnnotations]
-(https://stackblitz.com/edit/react-xlvqkm?file=public%2Findex.html)
\ No newline at end of file
+[How to clear annotations using deleteAnnotations](https://stackblitz.com/edit/react-xlvqkm?file=public%2Findex.html)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/configure-annotation-selector-setting.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/configure-annotation-selector-setting.md
index 14714071c3..566d1adc16 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/configure-annotation-selector-setting.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/configure-annotation-selector-setting.md
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
# Configure annotation selector settings
-Use the [annotationSelectorSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationSelectorSettings/) property to customize the appearance and behavior of the annotation selector in the UI.
+Use the [annotationSelectorSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationSelectorSettings/) property to customize the appearance and interaction behavior of the annotation selector in the react PDF Viewer UI.
AnnotationSelectorSettingsModel
-The [AnnotationSelectorSettingsModel](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationAnnotationSettingsModel/) defines settings such as border colors, sizes, and shapes, enabling fine-grained control over how annotations are displayed and interacted with.
+The [AnnotationSelectorSettingsModel](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationSelectorSettingsModel/) defines selector appearance and behavior settings—such as border colors, resizer appearance, and selector line style—providing fine-grained control over how annotations are displayed and manipulated.
Steps to configure annotation selector settings
- Step 1: Create a PDF Viewer instance and initialize it.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/conformance.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/conformance.md
index 751f83daef..384a910bfd 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/conformance.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/conformance.md
@@ -9,7 +9,7 @@ documentation: ug
# Supported PDF conformance in React PDF Viewer
-The PDF Viewer supports the following conformance levels:
+The Angular PDF Viewer supports the following PDF/A and PDF/X conformance levels:
* PDF/A-1a
* PDF/A-1b
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/control-annotation-visibility.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/control-annotation-visibility.md
index d03a26d258..1f6c3c5a49 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/control-annotation-visibility.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/control-annotation-visibility.md
@@ -10,16 +10,15 @@ domainurl: ##DomainURL##
# Control annotation visibility in PDF Viewer
-Overview
+## Overview
-This guide explains how to control the visibility of PDF annotations in documents loaded and saved using the Syncfusion PDF Viewer in React, so annotations are visible only in the viewer when required.
+This guide shows how to display annotations in the React PDF Viewer while preventing them from appearing in the saved/downloaded PDF.
-Steps to control annotation visibility
+## Steps to control annotation visibility
-**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) to create a simple PDF Viewer sample.
+**Step 1:** Follow the steps in the getting-started guide (https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a basic PDF Viewer sample.
-
-**Step 2:** Set Up Your React Component
+**Step 2:** Add controls for annotation modification and downloading
Create an React component and update the template to include a button that triggers the download operation. Additionally, create a function to save the document with the PDF annotation flag set to `noView`.
@@ -114,6 +113,6 @@ root.render();
{% endhighlight %}
{% endtabs %}
-Following these steps ensures annotations are visible in the Syncfusion PDF Viewer while controlling their visibility in the downloaded PDF.
+After performing these steps, annotations remain visible in the viewer but are hidden in the downloaded PDF.
[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md
index 8f1f75b37d..e3bbaf1f88 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Convert PDF Library bounds to PDF Viewer bounds
-When exporting annotations from the PDF Library, convert the bounds values into the PDF Viewer format to ensure accurate placement.
+When exporting annotations from the PDF Library, convert the annotation bounds into the PDF Viewer coordinate system so exported annotations appear at the correct position and scale in the viewer.
Steps to convert bounds values
@@ -153,8 +153,8 @@ root.render();
{% endhighlight %}
{% endtabs %}
-Conclusion
+**Conclusion**
-These steps convert PDF Library bounds values into PDF Viewer bounds values when exporting annotations as JSON, maintaining accurate annotation placement.
+These steps convert PDF Library bounds values into PDF Viewer bounds values when exporting annotations as JSON, helping maintain accurate annotation placement.
[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-context-menu.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-context-menu.md
deleted file mode 100644
index 9b9277925a..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-context-menu.md
+++ /dev/null
@@ -1,329 +0,0 @@
----
-layout: post
-title: Customize the context menu in React PDF Viewer | Syncfusion
-description: Learn how to add and customize custom context menu options in the React PDF Viewer using addCustomMenu, customContextMenuSelect, and related events.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Customize the context menu in PDF Viewer in React
-
-PDF Viewer supports adding custom options to the context menu using the [addCustomMenu()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#addcustommenu) method. Define actions for custom items with the [customContextMenuSelect()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#customcontextMenuselect) method.
-
-### Add a custom option
-
-The following example adds custom options to the context menu.
-
-```js
- export function App() {
-
- let menuItems = [
- {
- text: 'Search In Google',
- id: 'search_in_google',
- iconCss: 'e-icons e-search'
- },
- {
- text: 'Lock Annotation',
- iconCss: 'e-icons e-lock',
- id: 'lock_annotation'
- },
- {
- text: 'Unlock Annotation',
- iconCss: 'e-icons e-unlock',
- id: 'unlock_annotation'
- },
- {
- text: 'Lock Form Field',
- iconCss: 'e-icons e-lock',
- id: 'read_only_true'
- },
- {
- text: 'Unlock Form Field',
- iconCss: 'e-icons e-unlock',
- id: 'read_only_false'
- },
- ];
- function documentLoad(args) {
- var viewer = document.getElementById('container').ej2_instances[0];
- viewer.addCustomMenu(menuItems, false);
- }
-
- return (
-
);
-
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render();
-```
-
-#### Customize added context menu items
-
-The following code shows how to hide/show added custom option in context menu using the `customContextMenuBeforeOpen()` method.
-
-```js
-export function App() {
-
- let menuItems = [
- {
- text: 'Search In Google',
- id: 'search_in_google',
- iconCss: 'e-icons e-search'
- },
- {
- text: 'Lock Annotation',
- iconCss: 'e-icons e-lock',
- id: 'lock_annotation'
- },
- {
- text: 'Unlock Annotation',
- iconCss: 'e-icons e-unlock',
- id: 'unlock_annotation'
- },
- {
- text: 'Lock Form Field',
- iconCss: 'e-icons e-lock',
- id: 'read_only_true'
- },
- {
- text: 'Unlock Form Field',
- iconCss: 'e-icons e-unlock',
- id: 'read_only_false'
- },
- ];
- function documentLoad(args) {
- var viewer = document.getElementById('container').ej2_instances[0];
- viewer.addCustomMenu(menuItems, false, false);
- }
-
- function customContextMenuSelect(args) {
- var viewer = document.getElementById('container').ej2_instances[0];
- switch (args.id) {
- case 'search_in_google':
- for (var i = 0; i < viewer.textSelectionModule.selectionRangeArray.length; i++) {
- var content = viewer.textSelectionModule.selectionRangeArray[i].textContent;
- if ((viewer.textSelectionModule.isTextSelection) && (\/\S\/.test(content))) {
- window.open('http://google.com/search?q=' + content);
- }
- }
- break;
- case 'lock_annotation':
- lockAnnotations(args);
- break;
- case 'unlock_annotation':
- unlockAnnotations(args);
- break;
- case 'read_only_true':
- setReadOnlyTrue(args);
- break;
- case 'read_only_false':
- setReadOnlyFalse(args);
- break;
- default:
- break;
- }
- }
-
- function customContextMenuBeforeOpen(args) {
- for (var i = 0; i < args.ids.length; i++) {
- var search = document.getElementById(args.ids[i]);
- var viewer = document.getElementById('container').ej2_instances[0];
- if (search) {
- search.style.display = 'none';
- if (args.ids[i] === 'search_in_google' && (viewer.textSelectionModule) && viewer.textSelectionModule.isTextSelection) {
- search.style.display = 'block';
- } else if (args.ids[i] === "lock_annotation" || args.ids[i] === "unlock_annotation") {
- var isLockOption = args.ids[i] === "lock_annotation";
- for (var j = 0; j < viewer.selectedItems.annotations.length; j++) {
- var selectedAnnotation = viewer.selectedItems.annotations[j];
- if (selectedAnnotation && selectedAnnotation.annotationSettings) {
- var shouldDisplay = (isLockOption && !selectedAnnotation.annotationSettings.isLock) ||
- (!isLockOption && selectedAnnotation.annotationSettings.isLock);
- search.style.display = shouldDisplay ? 'block' : 'none';
- }
- }
- } else if (args.ids[i] === "read_only_true" && viewer.selectedItems.formFields.length !== 0) {
- var selectedFormField = viewer.selectedItems.formFields[0].isReadonly;
- search.style.display = selectedFormField ? 'none' : 'block';
- } else if (args.ids[i] === "read_only_false" && viewer.selectedItems.formFields.length !== 0) {
- var selectedFormField = viewer.selectedItems.formFields[0].isReadonly;
- search.style.display = selectedFormField ? 'block' : 'none';
- } else if (args.ids[i] === 'formfield properties' && viewer.selectedItems.formFields.length !== 0) {
- search.style.display = 'block';
- }
- }
- }
- }
-
- function lockAnnotations(args) {
- for (var i = 0; i < viewer.annotationCollection.length; i++) {
- if (viewer.annotationCollection[i].uniqueKey === viewer.selectedItems.annotations[0].id) {
- viewer.annotationCollection[i].annotationSettings.isLock = true;
- viewer.annotationCollection[i].isCommentLock = true;
- viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
- }
- args.cancel = false;
- }
- }
-
- function unlockAnnotations(args) {
- for (var i = 0; i < viewer.annotationCollection.length; i++) {
- if (viewer.annotationCollection[i].uniqueKey === viewer.selectedItems.annotations[0].id) {
- viewer.annotationCollection[i].annotationSettings.isLock = false;
- viewer.annotationCollection[i].isCommentLock = false;
- viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
- }
- args.cancel = false;
- }
- }
-
- function setReadOnlyTrue(args) {
- var viewer = document.getElementById('container').ej2_instances[0];
- var selectedFormFields = viewer.selectedItems.formFields;
- for (var i = 0; i < selectedFormFields.length; i++) {
- var selectedFormField = selectedFormFields[i];
- if (selectedFormField) {
- viewer.formDesignerModule.updateFormField(selectedFormField, {
- isReadOnly: true,
- });
- }
- args.cancel = false;
- }
- }
-
- function setReadOnlyFalse(args) {
- var viewer = document.getElementById('container').ej2_instances[0];
- var selectedFormFields = viewer.selectedItems.formFields;
- for (var i = 0; i < selectedFormFields.length; i++) {
- var selectedFormField = selectedFormFields[i];
- if (selectedFormField) {
- viewer.formDesignerModule.updateFormField(selectedFormField, {
- isReadOnly: false,
- });
- }
- args.cancel = false;
- }
- }
-
- return (
-
-
- {/* Render the PDF Viewer */}
-
-
-
-
-
);
-
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render();
-```
-The following is the output of the custom context menu with customization.
-
-{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% raw %}
-{% include code-snippet/pdfviewer/react/custom-context-menu/app/index.jsx %}
-{% endraw %}
-{% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
-{% raw %}
-{% include code-snippet/pdfviewer/react/custom-context-menu/app/index.tsx %}
-{% endraw %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` within the
element in either the `index.TSX` or `index.JSX` file:
-**serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**.
-
-{% previewsample "/document-processing/code-snippet/pdfviewer/react/custom-context-menu" %}
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/Custom%20Context%20Menu)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-font-signature-field.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-font-signature-field.md
index 655842f4b7..ca74d80c10 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-font-signature-field.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-font-signature-field.md
@@ -10,13 +10,13 @@ domainurl: ##DomainURL##
# Change the font family for type signatures in React
-Change the font family for Type Signature and Initial fields by adding a stylesheet to load fonts and assigning them via the PDF Viewer settings. Include Google Font links in the HTML head to use those fonts.
+Change the font family in the type signature of the Syncfusion® PDF Viewer by adding a custom CSS stylesheet to the document and applying the desired font family to the type signature element. Include the Google Fonts link in the HTML head section to apply the font.
### Signature field property
The PDF Viewer supports changing fonts for Signature and Initial fields using the `typeSignatureFonts` and `typeInitialFonts` properties.
-**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample.
+**Step 1:** Follow the steps in the [Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide to create a simple PDF Viewer sample.
**Step 2:** Use the following code to apply custom fonts to the Signature field.
@@ -104,4 +104,4 @@ root.render();
{% endhighlight %}
{% endtabs %}
-By implementing this configuration, custom fonts can be used for both Signature and Initial form fields.
\ No newline at end of file
+Implementing this enables use of custom fonts in form-field signature and initial fields.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-fonts.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-fonts.md
index cc344cf3e5..9283b24439 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-fonts.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/custom-fonts.md
@@ -10,13 +10,13 @@ domainurl: ##DomainURL##
# Add Custom Fonts to PDF Forms in React PDF Viewer
-The **Syncfusion React 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.
+The Syncfusion **React 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.
## 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.
+- **Text annotations** — When text annotations use non-standard fonts, the viewer dynamically loads the required fonts to ensure correct character rendering.
+- **PDF forms** — When form fields rely on fonts not included by default, dynamic font loading ensures the entered text is rendered correctly.
## How Custom Fonts Work
The custom font workflow in the PDF Viewer is as follows:
@@ -116,7 +116,7 @@ root.render();
{% endhighlight %}
{% endtabs %}
-N>Ensure that the font file names match the specified font names.
+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:
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/delete-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/delete-annotation.md
index 9b829fe8f2..03626e3b1a 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/delete-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/delete-annotation.md
@@ -10,13 +10,13 @@ domainurl: ##DomainURL##
# Delete an annotation in PDF Viewer
-Use the `deleteAnnotationById()` method to remove a specific annotation from a PDF document by its id.
+This article shows how to remove a specific annotation from a PDF document using the `deleteAnnotationById()` method. The example below demonstrates a simple delete flow; for production code prefer accessing the viewer instance with React `@ViewChild` rather than `document.getElementById`.
-Steps to delete a specific annotation
+The following steps are used to delete a specific annotation from PDF Document:
-**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) to create a simple PDF Viewer sample.
+**Step 1:** Create a basic PDF Viewer sample by following the [getting-started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide.
-**Step 2:** Use the following code to delete a specific annotation using `deleteAnnotationById()`.
+**Step 2:** Use the following snippet to trigger deletion using `deleteAnnotationById()`.
```
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/download-start-event.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/download-start-event.md
index 193765a4c3..b8a3e8208a 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/download-start-event.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/download-start-event.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Control file downloads in PDF Viewer
-Use the downloadStart event to intercept the start of a download and optionally cancel it. In the event handler, set `args.cancel = true` to prevent the download.
+The PDF Viewer exposes a `downloadStart` event that enables interception of a document download before it begins. Use this event to apply custom logic and, if needed, cancel the download by setting the event's `cancel` flag.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -91,8 +91,8 @@ root.render();
{% endhighlight %}
{% endtabs %}
-By default, `args.cancel` is `false`, so the download proceeds unless explicitly canceled.
+By default, the `cancel` argument is `false`, so the download proceeds unless the handler explicitly sets `args.cancel = true`.
### Flexibility
-Leverage the [downloadStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#downloadstart) event to apply custom rules for allowing or preventing downloads based on application needs.
+Using the [downloadStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/downloadStartEventArgs/) event enables conditional control over downloads—for example, to enforce authentication, restrict downloads for certain documents, or prompt users for confirmation. When using server-backed viewers, confirm whether server-side behavior requires additional handling; canceling the client-side event prevents the local download but may not affect server workflows.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/enable-local-storage.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/enable-local-storage.md
index b21781a88f..65d446d9f5 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/enable-local-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/enable-local-storage.md
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
# Manage local storage in PDF Viewer
-Use the `enableLocalStorage` property to control whether session-specific data is stored in session storage (default) or an internal in-memory collection.
+The Syncfusion® PDF Viewer exposes the `enableLocalStorage` property to control how session-specific viewer data is stored. Configure this property to choose between the viewer's internal storage mechanism (in-memory collection) and the browser's session storage.
-### Use enableLocalStorage
+### Using the `enableLocalStorage` property
-Set `enableLocalStorage` to manage storage behavior. When `true`, data is kept in memory; otherwise, session storage is used.
+Set `enableLocalStorage` to control whether the viewer preserves session data in an internal (in-memory) collection or uses browser session storage. When `enableLocalStorage` is `true`, the viewer keeps session data in memory for the current application session; when `false` (the default), session storage is used. Review memory implications before enabling in-memory storage for large documents or heavy interactive content.
{% tabs %}
{% highlight js tabtitle="Server-Backed" %}
@@ -50,8 +50,8 @@ root.render();
### Considerations
-- Memory usage can increase when using in-memory storage with large documents or many interactive elements.
-- Dispose of the PDF Viewer instance when no longer needed to avoid memory leaks.
-- Default: `enableLocalStorage` is `false`, so session storage is used unless changed.
+- **Increased memory usage**: Enabling in-memory storage can increase memory consumption, especially for large documents or when many interactive elements (form fields, annotations) are present.
+- **Dispose when unused**: Dispose or destroy the PDF Viewer instance when it is no longer required to avoid memory leaks, particularly when `enableLocalStorage` is `true`.
+- **Default behavior**: The default value is `false`, which uses the browser session storage unless explicitly changed.
[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/enable-text-selection.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/enable-text-selection.md
index 88618f1847..946bcfe06c 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/enable-text-selection.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/enable-text-selection.md
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
# Enable or disable text selection in PDF Viewer
-Use the `enableTextSelection` property to control whether users can select text in the displayed PDF. This setting can be configured at initialization and toggled at runtime.
+The Syncfusion PDF Viewer exposes the `enableTextSelection` property to control whether users can select text within the displayed PDF document. This setting can be configured at initialization and toggled programmatically at runtime.
-## Configure on initialization
+## Configure text selection on initialization
-Set initial behavior when instantiating the PDF Viewer.
+Set the initial text-selection behavior by configuring the `enableTextSelection` property in the component template or on the `PdfViewerComponent` instance. The example below shows a complete component (TypeScript and template) that initializes the viewer with text selection disabled.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/existing-react-layout.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/existing-react-layout.md
new file mode 100644
index 0000000000..928f49db32
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/existing-react-layout.md
@@ -0,0 +1,464 @@
+---
+layout: post
+title: Integrating PDF Viewer into existing React layouts | Syncfusion
+description: Guidance and examples to embed the Syncfusion React PDF Viewer into tabs, dialogs, sidebars and responsive layouts.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Integrating PDF Viewer into Existing React Layouts
+
+## Overview
+
+The React PDF Viewer can be embedded into dashboards, admin panels, split‑screen views, tabs, dialogs, collapsible/accordion sections, sidebars, and multi‑column layouts. This guide provides concise patterns and minimal code examples so the viewer renders, sizes, and refreshes correctly inside common layout hosts.
+
+## How‑To
+
+- **Place the viewer inside layout components:**
+ - Insert the PDF Viewer inside standard divs, CSS Grid cells, Flex box containers, and multi‑column panels. The viewer will expand to fill its parent container when the container has a defined height.
+
+ Basic div:
+
+ {% tabs %}
+ {% highlight ts tabtitle="App.tsx" %}
+ {% raw %}
+ import React from 'react';
+ import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+ export function App() {
+ return (
+
+
+
+
+
+ );
+ }
+ {% endraw %}
+ {% endhighlight %}
+ {% endtabs %}
+
+ 
+
+ Flex container: keep `minHeight: 0` on flex children so the viewer can shrink/grow correctly:
+
+ {% tabs %}
+ {% highlight ts tabtitle="App.tsx" %}
+ {% raw %}
+ import React from 'react';
+ import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+ export function App() {
+ return (
+
+ );
+ };
+ {% endraw %}
+ {% endhighlight %}
+ {% highlight css tabtitle="App.css" %}
+ {% raw %}
+ .page {
+ height: 100vh;
+ display: grid;
+ grid-template-rows: 56px 1fr;
+ background: #fafafa;
+ }
+ .header {
+ display: flex;
+ align-items: center;
+ padding: 0 16px;
+ background: #fff;
+ border-bottom: 1px solid #e5e5e5;
+ }
+ {% endraw %}
+ {% endhighlight %}
+ {% endtabs %}
+
+ 
+
+## Why visibility and height matter
+
+- The PDF viewer measures its container to lay out pages. If the host element has no height (collapsed, display:none, or not yet mounted) measurements will be zero and rendering will fail or be clipped.
+
+- Initialize or refresh the viewer when the host becomes visible (tab active, modal opened, accordion expanded) so internal layout code can compute sizes.
+
+## Resize & visibility tips
+
+- Short patterns:
+ - Dispatch a global resize right after the container becomes visible:
+
+```js
+setTimeout(() => window.dispatchEvent(new Event('resize')), 0);
+```
+- Use a `ResizeObserver` when the host size may change frequently:
+
+```js
+const observer = new ResizeObserver(() => {
+ window.dispatchEvent(new Event('resize'));
+});
+observer.observe(document.querySelector('#pdfViewer')!);
+```
+
+- Lazy-render inside tabs/dialogs/accordions: only mount the PDF Viewer when the pane is visible.
+
+## When to use these patterns
+
+- Use Dialogs for temporary previews or when you want an isolated view.
+- Use Tabs/Accordion patterns when documents are part of multi-pane UIs — ensure refresh on show.
+- Avoid placing the viewer in invisible containers without a resize/refresh strategy.
+
+## See also
+
+- [Overview of Syncfusion React Tab component](https://ej2.syncfusion.com/react/documentation/tab/getting-started)
+- [Overview of Syncfusion React Dialog component](https://ej2.syncfusion.com/react/documentation/dialog/getting-started)
+- [Overview of Syncfusion React Accordion component](https://ej2.syncfusion.com/react/documentation/accordion/getting-started)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/export-as-image.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/export-as-image.md
index d379740774..45ac0ee90f 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/export-as-image.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/export-as-image.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Export pages as images in PDF Viewer
-Export a single page as a Base64-encoded image using `exportAsImage()` or export a range of pages using `exportAsImages()`.
+The PDF Viewer component can export pages as Base64-encoded image strings using the `exportAsImage()` method (single page) and `exportAsImages()` method (page range). The examples below demonstrate single-page export, range export, and how to specify a custom image size.
Steps to export pages as images
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-completed.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-completed.md
index 1d281650fb..cc6f1da82f 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-completed.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-completed.md
@@ -7,9 +7,9 @@ platform: document-processing
documentation: ug
---
-# Use extractTextCompleted to extract text in React PDF Viewer
+## Extract text using the extractTextCompleted event in the PDF Viewer
-Use the [isExtractText](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#isextracttext) property and the [extractTextCompleted](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#extracttextcompleted) event to extract page text along with bounds.
+The PDF Viewer can extract page text along with bounding information. Enable text extraction using the `isExtractText` property and handle the `extractTextCompleted` event to receive extracted text and bounds for the document.
The following example shows how to enable text extraction and handle the completion event:
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-option.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-option.md
index 3a86da98a4..e5f01393f0 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-option.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text-option.md
@@ -7,19 +7,14 @@ platform: document-processing
documentation: ug
---
-# Configure extractTextOption in React PDF Viewer
+## Extract text option in the React PDF Viewer
-The `extractTextOption` property controls how text is extracted and optimizes memory usage. It also affects the data returned in the `extractTextCompleted` event. Choose one of the following options to determine the text and layout data to retrieve.
+The `extractTextOption` property controls the amount of text and layout information returned by the viewer. Adjusting this value helps balance memory usage and the level of detail required for downstream processing. The viewer exposes four options:
-### Available Options:
-
-**None:** No text information is extracted or returned. This is useful when you want to optimize memory usage and don't need any text data.
-
-**TextOnly:** Extracts only the plain text from the document. This option excludes any layout or positional information.
-
-**BoundsOnly:** Extracts layout information, such as bounds or coordinates, without including the plain text data.
-
-**TextAndBounds:** Extracts both the plain text and the layout (bounds) information, which is the default behavior.
+- **None** — Do not extract or return any text or layout data. Use this option to minimize memory usage when textual information is not required.
+- **TextOnly** — Return plain text only; layout and bounds are omitted. Note: using `TextOnly` may disable some viewer text features such as synchronous `findText`; use `findTextAsync` when asynchronous search is required.
+- **BoundsOnly** — Return layout and positional data (bounds) without the plain text content.
+- **TextAndBounds** — Return both plain text and its positional information (bounds). This is the default and is useful when both content and layout are required.
The following example demonstrates how to configure the `extractTextOption` property to control the level of text extraction:
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text.md
index 3e69148093..6d176290a5 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/extract-text.md
@@ -7,33 +7,23 @@ platform: document-processing
documentation: ug
---
-# Extract text using extractText in React PDF Viewer
+## Extract text method in the PDF Viewer
-The `extractText` method extracts text from one or more pages and can return plain text or text with bounds for each element.
+The `extractText` method retrieves text content and, optionally, positional data for elements on one or more pages. It returns a Promise that resolves to an object containing extracted `textData` (detailed items with bounds) and `pageText` (concatenated plain text).
-### extractText method
-Retrieves text data from one page or a range of pages based on the specified options.
+**Parameters overview:**
-#### Parameters:
-**startIndex:** The starting page index for text extraction (0-based index).
+- `startIndex` — Starting page index (0-based).
+- `endIndex` or options — Either the ending page index for a range extraction, or an options object specifying extraction criteria for a single page.
+- `options` (optional) — Extraction options such as `TextOnly` or `TextAndBounds` to control whether bounds are included.
-**endIndex or isOptions:** Either the ending page index (for multiple pages) or an option specifying extraction criteria for a single page.
+**Returned object shape (example):**
-**options (optional):** Specifies additional options, such as extracting plain text `TextOnly` or more detailed text data `TextAndBounds`. You can specify various options for text extraction. These options determine whether you want to extract plain text, text with bounds, or detailed text data.
-
-- TextOnly: Extracts only plain text without bounds.
-- TextAndBounds: Extracts text with bounds (coordinates).
-
-#### Returns:
-Returns a Promise with:
-- textData: An array of TextDataSettingsModel with details including bounds and page text.
-- pageText: A concatenated string of plain text from the specified page(s).
-
-**textData:** An array of TextDataSettingsModel objects, each representing the details of the extracted text (including bounds, page text, etc.).
-
-**pageText:** A concatenated string of plain text extracted from the specified page(s).
+- `textData` — Array of objects describing extracted text items, including bounds and page-level text.
+- `pageText` — Concatenated plain text for the specified page(s).
### Usage of extractText in Syncfusion PDF Viewer Control
+
Here is an example that demonstrates how to use the extractText method along with event handling:
```html
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/find-text-async.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/find-text-async.md
index 55c7a85188..319cdf5cf0 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/find-text-async.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/find-text-async.md
@@ -9,7 +9,7 @@ documentation: ug
# Find text with findTextAsync in React PDF Viewer
-The `findTextAsync` method searches for a string or array of strings asynchronously and returns bounding rectangles for each match. Use it to locate text positions across the document or on a specific page.
+The `findTextAsync` method performs an asynchronous text search within a PDF document. It returns a Promise that resolves with an array of result objects describing each match. Each match object contains information such as the page index and the bounding rectangles for the matched text, which can be used to highlight or navigate to occurrences. By default, the search runs across all pages; supply the optional `pageIndex` parameter to limit the search to a specific page.
Here is an example of how to use `findTextAsync`:
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/get-base64.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/get-base64.md
index d3b39e1a29..135b9a507b 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/get-base64.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/get-base64.md
@@ -7,20 +7,21 @@ platform: document-processing
documentation: ug
---
-# Get Base64 value from a loaded PDF
+# Retrieve Base64 from a PDF in PDF Viewer
### Overview
-This guide shows how to get the base64-encoded value of a PDF loaded in the Syncfusion PDF Viewer using React. This is useful for sending the PDF as a base64 string or processing it on the client.
+This guide shows how to obtain the Base64-encoded value of a PDF document loaded in the Syncfusion® PDF Viewer using React. Producing a Base64 string is useful for sending the PDF to a server, embedding it in JSON payloads, or client-side processing.
-### How to Retrieve Base64 Value
+### How to retrieve the Base64 value
-**Step 1:** Follow the steps in the [Get started with React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide to create a sample.
+**Step 1: Create the PDF Viewer sample**
+Follow the [Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide for the React PDF Viewer.
-**Step 2:** Set Up Your React Component
+**Step 2: Set up the React component**
-Create a React component and set up the Syncfusion® PDF Viewer. Add a button to trigger the conversion to a base64 string.
+Create an React component and update the template to include a button that triggers conversion to a Base64 string. The samples below show both standalone and server-backed viewer configurations.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -177,6 +178,6 @@ root.render();
### Conclusion
-By following these steps, a loaded PDF can be converted to a Base64 string on button click for transfer or processing.
+By implementing these steps in the React component, a PDF document loaded in the Syncfusion® PDF Viewer can be converted into a Base64-encoded data URL when a button is clicked. This facilitates the manipulation or transfer of PDF data as needed.
[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/getPageInfo.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/getPageInfo.md
index 18734eaa7a..b832f8b73d 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/getPageInfo.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/getPageInfo.md
@@ -10,13 +10,13 @@ domainurl: ##DomainURL##
# Get page info in React PDF Viewer
-Use the **getPageInfo()** method to retrieve information for a specified page, including height, width, and rotation.
+The `getPageInfo()` method returns metadata for a specified page in the viewer, such as `height`, `width`, and `rotation`. `pageIndex` is zero-based. Call `getPageInfo()` after the viewer is ready to ensure page data is available (for example, in `ngAfterViewInit` or after the document has been loaded).
-The following steps show how to use `getPageInfo`.
+The following example retrieves and logs the page dimensions and rotation for a specified page.
-**Step 1:** Follow the steps in the [Get started with React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) guide to create a sample.
+**Step 1:** Follow the steps provided in the [getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample.
-**Step 2:** Use the following code to get the height, width, and rotation for a specified page.
+**Step 2:** The following code snippet implements retrieval of height, width, and rotation for a specified page in the viewer.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/import-export-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/import-export-annotation.md
index ecdb215d14..4bda41925e 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/import-export-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/import-export-annotation.md
@@ -9,11 +9,11 @@ documentation: ug
# Import and export annotations in React PDF Viewer
-Import annotations from objects or streams instead of files. To import such objects, first export annotations as objects using the [exportAnnotationsAsObject()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#exportannotationsasobject) method. Only objects exported from the PDF Viewer can be imported.
+The PDF Viewer control supports exporting and importing annotations in multiple formats: JSON, XFDF, or as native annotation objects. Use `exportAnnotation('Json')` or `exportAnnotation('Xfdf')` for serialized formats, and `exportAnnotationsAsObject()` to obtain the in-memory annotation objects that can be re-imported with `importAnnotation()`.
-Use the following steps to import and export annotations as objects, JSON, or XFDF.
+The following steps show how to export annotations in different formats and import annotation objects back into the viewer.
-**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) to create a simple PDF Viewer sample.
+**Step 1:** Follow the steps provided in the [getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample.
**Step 2:** Use the following code to perform import and export operations.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md
index 780cf90953..a4c6a8f627 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md
@@ -10,15 +10,15 @@ domainurl: ##DomainURL##
# Load a PDF only after PDFium resources are ready
-In Standalone mode, the React PDF Viewer downloads its PDFium runtime assets (scripts/wasm) from the location specified in resourceUrl. Attempting to load a document before those assets are available can cause errors. Use the resourcesLoaded event to defer document loading until all required assets are ready.
+When using the Standalone PDF Viewer, the component downloads the PDFium runtime assets (scripts/wasm) from the path specified in `resourceUrl`. Attempting to load a document before those assets are available can cause errors. Use the `resourcesLoaded` event to defer document loading until all required assets are ready.
## When does resourcesLoaded trigger?
The resourcesLoaded event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the load method to open a document (by URL or Base64).
-## How to Load Document after resourcesLoaded
+## How to load a document after resourcesLoaded
-- Set the resourceUrl to a valid PDF Viewer assets path (CDN or your hosted path).
+- Set the `resourceUrl` to a valid PDF Viewer assets path (CDN or a hosted path).
- Listen to resourcesLoaded and call load inside the handler.
```js
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document.md
index e02256a275..2fb413e95c 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/load-document.md
@@ -9,13 +9,13 @@ documentation: ug
# Load documents dynamically in React PDF Viewer
-Load or switch PDF documents dynamically after the initial load. Use the [load](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#load) method to load a PDF by Base64 string or file name.
+The PDF Viewer supports loading or switching PDF documents at runtime after the initial viewer initialization. Use the [load](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#load) method to open a document from a URL or a Base64 string.
-The following steps are used to load the PDF document dynamically.
+The following steps show common approaches for loading documents dynamically.
-**Step 1:** Follow the steps in the [Get started with React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) guide to create a sample.
+**Step 1:** Follow the getting started guide to create a basic React PDF Viewer sample: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started
-**Step 2:** Use the following code to load a PDF using a Base64 string.
+**Step 2:** Use the following code snippet to load the document from a Base64 string.
```
@@ -29,7 +29,7 @@ The following steps are used to load the PDF document dynamically.
```
-**Step 3:** Use the following code to load a PDF by document name.
+**Step 3:** Use the following code snippet to load a PDF document from a URL (document name).
```
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/load-n-number-page.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/load-n-number-page.md
index b4354a534d..4c7e839fa2 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/load-n-number-page.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/load-n-number-page.md
@@ -8,13 +8,11 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Load N number of pages on initial loading in react
+# Load N pages initially
-The initial rendering in a PDF viewer allows users to control the number of pages displayed when opening a PDF document. This improves the user experience by providing flexibility in loading a specific number of pages initially, while additional pages are dynamically rendered as the user scrolls through the document. This approach enhances the responsiveness of the PDF viewer and minimizes delays as users can access specific pages without waiting for the entire document to load.
+Control the number of pages the PDF Viewer renders on the initial load to improve perceived performance and reduce initial memory usage. Additional pages are rendered dynamically as the user scrolls through the document, allowing quick access to early pages without loading the entire file.
-To utilize this capability in Syncfusion® PDF Viewer, use the [initialRenderPages](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#initialrenderpages) property. You can achieve the desired outcome by setting this property to the desired number of pages you want to load initially. However, it's important to exercise caution when setting a high value for the initialRenderPages in large documents with numerous pages. Rendering a large number of pages simultaneously can increase memory usage and slow down loading times, impacting the performance of the PDF viewer.
-
-Using the `initialRenderPages` property judiciously is advisable, especially when dealing with larger documents. It is more suitable for scenarios where a smaller range of pages, such as 10-20, can be loaded to provide a quick initial view of the document.
+Set the [initialRenderPages](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#initialrenderpages) property to specify how many pages to render initially. For large documents, avoid high values for `initialRenderPages` because rendering many pages at once increases memory use and may slow loading. Typical ranges of 10–20 pages work well for most documents; adjust based on document size and client capabilities.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/lock-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/lock-annotation.md
index e2838e4af4..56d4df8895 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/lock-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/lock-annotation.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Lock annotation in React Pdfviewer component
-The PDF Viewer library allows you to lock the rectangle or square annotations using the **isLock** property in the **rectangleSettings**.
+The PDF Viewer supports locking annotations to prevent users from moving, resizing, or removing them. Locking can be applied via annotation settings or by handling viewer events and updating annotation metadata.
**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) to create simple PDF Viewer sample in React.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/min-max-zoom.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/min-max-zoom.md
index 26d19e20a3..708b52f3e7 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/min-max-zoom.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/min-max-zoom.md
@@ -9,15 +9,15 @@ documentation: ug
# Configure minZoom and maxZoom in the PDF Viewer
-Control zoom levels in the PDF Viewer using the [minZoom](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#minzoom) and [maxZoom](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#maxzoom) properties to ensure a consistent viewing experience.
+The PDF Viewer exposes [minZoom](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#minzoom) and [maxZoom](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#maxzoom) to control the allowable zoom range for document viewing. Setting these properties helps maintain readability, performance, and a consistent experience across devices.
### minZoom
-Specifies the minimum zoom percentage allowed. Prevents zooming out beyond a set limit to maintain readability and performance.
+`minZoom` sets the minimum zoom percentage the viewer supports. Use this to prevent users from zooming out to levels that make content unreadable or negatively affect layout.
### maxZoom
-Defines the maximum zoom percentage allowed. Prevents excessive zooming that could affect performance and usability.
+`maxZoom` sets the maximum zoom percentage the viewer supports. Restricting the maximum helps avoid excessive memory use and degraded rendering performance when users zoom in very far.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/open-bookmark.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/open-bookmark.md
index 8f5db13d74..0d4e26b854 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/open-bookmark.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/open-bookmark.md
@@ -7,15 +7,15 @@ platform: document-processing
documentation: ug
---
-# Open or close the Bookmark pane programmatically
+# Open and close the bookmark pane programmatically
-Open the Bookmark pane programmatically using the `openBookmarkPane()` method.
+The PDF Viewer exposes APIs to open and close the bookmark pane programmatically. Use `openBookmarkPane()` and `closeBookmarkPane()` to control the bookmark pane from application code.
-The following steps are used to open the Bookmark.
+Follow these steps to call the bookmark APIs from the application.
-**Step 1:** Follow the steps in the [Get started with React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/React/getting-started) guide to create a sample.
+**Step 1:** Create a basic PDF Viewer sample using the [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide.
-**Step 2:** Insert the following code snippet to implement the functionality for opening the Bookmark pane:
+**Step 2:** Insert the following code snippet to implement opening the bookmark pane:
```
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/open-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/open-thumbnail.md
index f0afe2d2be..a76a2b42f2 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/open-thumbnail.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/open-thumbnail.md
@@ -9,13 +9,13 @@ documentation: ug
# Open the thumbnail pane programmatically
-Open the thumbnail pane programmatically using the [openThumbnailPane()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/thumbnailView/#openthumbnailpane) method.
+The PDF Viewer exposes a `openThumbnailPane()` API to open the thumbnail pane from application code. Use this API when the UI needs to show the thumbnail pane in response to user actions or programmatic workflows.
-The following steps are used to open the thumbnail.
+Follow these steps to open the thumbnail pane from application code.
-**Step 1:** Follow the steps in the [Get started with React PDF Viewer](https://help.syncfusion.com/react/document-processing/pdf/pdf-viewer/react/getting-started/) guide to create a sample.
+**Step 1:** Create a basic PDF Viewer sample using the [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide.
-**Step 2:** Use the following code snippet to open thumbnail.
+**Step 2:** Use the code snippet below to open the thumbnail pane.
```
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/pagerenderstarted-pagerendercompleted-event.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/pagerenderstarted-pagerendercompleted-event.md
index 70f4b08171..ea4e226402 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/pagerenderstarted-pagerendercompleted-event.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/pagerenderstarted-pagerendercompleted-event.md
@@ -9,15 +9,10 @@ documentation: ug
# Handle pageRenderInitiate and pageRenderComplete events
-In the Syncfusion PDF Viewer, the [pageRenderInitiate](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#pagerendercomplete) events occur during page rendering.
+In the PDF Viewer, the `pageRenderInitiate` and `pageRenderComplete` events fire during the page rendering lifecycle:
-**pageRenderInitiate**
-
-Triggered when page rendering begins. Use this event to initialize or set up resources before rendering starts.
-
-**PageRenderComplete**
-
-Triggered when page rendering completes. Use this event to perform cleanup or finalize rendering-related tasks.
+- `pageRenderInitiate`: fired when the rendering of a page begins. Use this event to initialize resources, show loading indicators, or set up rendering parameters before the page content is drawn.
+- `pageRenderComplete`: fired when the rendering of a page finishes. Use this event to hide loading indicators, record render timing, or run post-render processing.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/perform-form-field-double-click-event.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/perform-form-field-double-click-event.md
index 713efcafbe..d261d8f4bb 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/perform-form-field-double-click-event.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/perform-form-field-double-click-event.md
@@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Perform form field double click event in React Pdfviewer component
+## Perform form field double-click event in React PDF Viewer
-The PDF Viewer library allows you to trigger an event when you double click on the form field using the `formFieldDoubleClick` event.
+This article demonstrates how to handle a double-click on a PDF form field by using the `formFieldDoubleClick` event. The event provides information about the clicked field and can be used to open custom editors, show dialogs, or trigger other application behaviors.
**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) to create simple PDF Viewer sample in React.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/resolve-unable-to-find-an-entry-point-error.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/resolve-unable-to-find-an-entry-point-error.md
index 50cbd0fa34..64e827a4b4 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/resolve-unable-to-find-an-entry-point-error.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/resolve-unable-to-find-an-entry-point-error.md
@@ -11,9 +11,9 @@ documentation: ug
Starting with **21.1.0.35 (2023 Volume 1)**, the Pdfium package was upgraded to improve text search, selection, rendering, and performance. After upgrading, the PDF Viewer may display a **“Web-Service is not listening”** error. In most cases, the Network tab reveals that an outdated Pdfium assembly is referenced in the local web service project. Ensure the correct native assembly is deployed for the target OS:
-- Windows: pdfium.dll
-- Linux: libpdfium.so
-- macOS: libpdfium.dylib
+- Windows: `pdfium.dll`
+- Linux: `libpdfium.so`
+- macOS: `libpdfium.dylib`
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/restricting-zoom-in-mobile-mode.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/restricting-zoom-in-mobile-mode.md
index 5b4dadc43e..e8d543cd5a 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/restricting-zoom-in-mobile-mode.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/restricting-zoom-in-mobile-mode.md
@@ -9,7 +9,7 @@ documentation: ug
# Restrict zoom percentage on mobile devices
-Restrict zoom on mobile devices using the `maxZoom` and `minZoom` properties. This improves scrolling performance and document loading on mobile.
+Use `minZoom` and `maxZoom` to restrict zoom levels on mobile devices and improve scrolling performance and perceived load time. Restricting zoom prevents extreme zoom levels that can degrade rendering performance on constrained devices.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/retrieve-id-of-the-document.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/retrieve-id-of-the-document.md
index bf8af73de1..56ee4354b5 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/retrieve-id-of-the-document.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/retrieve-id-of-the-document.md
@@ -8,17 +8,17 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Retrieve id of the document in React Pdfviewer component
+## Retrieve document ID in React PDF Viewer
-View the PDF document's id by passing the `hashId` value to the `getItem()` method of session storage API.
+This article shows how to retrieve the PDF document ID that the viewer stores in `sessionStorage` under the key `hashId`.
-Refer to the following code to get the id of a PDF document in a button click.
+Refer to the following minimal example that logs the stored document ID when a button is clicked:
```
-```
+### Open PDF from a Blob
-[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Save%20and%20Load/Load%20PDF%20file%20from%20base64%20string)
+- Fetch a Blob and create an object URL, then load it into the viewer:
-## Opening a PDF from database
+```js
+const viewerRef = useRef(null);
+fetch(url)
+ .then(r => r.blob())
+ .then(blob => {
+ const objectUrl = URL.createObjectURL(blob);
+ viewerRef.current?.load(objectUrl, null);
+ });
+```
-To load a PDF file from SQL Server database in a PDF Viewer, you can follow the steps below
-**Step 1:** Create a Simple PDF Viewer Sample in React
+### Open PDF from database
-Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF viewer sample in React. This will give you a basic setup of the PDF viewer component.
+ To load a PDF file from SQL Server database in a PDF Viewer, you can follow the steps below
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
+ **Step 1:** Create a Simple PDF Viewer Sample in React
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
+ Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF viewer sample in React. This will give you a basic setup of the PDF viewer component.
-2. Open the `PdfViewerController.cs` file in your web service project.
+ **Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
-3. Import the required namespaces at the top of the file:
+ 1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-```csharp
-using System.IO;
-using System.Data.SqlClient;
-```
+ 2. Open the `PdfViewerController.cs` file in your web service project.
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
+ 3. Import the required namespaces at the top of the file:
-```csharp
-private IConfiguration _configuration;
-public readonly string _connectionString;
+ ```csharp
+ using System.IO;
+ using System.Data.SqlClient;
+ ```
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _connectionString = _configuration.GetValue("ConnectionString");
-}
-```
+ 4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-5. Modify the `Load()` method to open it in the viewer using URL
+ ```csharp
+ private IConfiguration _configuration;
+ public readonly string _connectionString;
-```csharp
+ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
+ {
+ _hostingEnvironment = hostingEnvironment;
+ _cache = cache;
+ _configuration = configuration;
+ _connectionString = _configuration.GetValue("ConnectionString");
+ }
+ ```
-public IActionResult Load([FromBody] Dictionary jsonData)
-{
- // Initialize the PDF viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
+ 5. Modify the `Load()` method to open it in the viewer using URL
- if (jsonObject != null && jsonObject.ContainsKey("document"))
+ ```csharp
+
+ public IActionResult Load([FromBody] Dictionary jsonData)
{
- if (bool.Parse(jsonObject["isFileName"]))
+ // Initialize the PDF viewer object with memory cache object
+ PdfRenderer pdfviewer = new PdfRenderer(_cache);
+ MemoryStream stream = new MemoryStream();
+ object jsonResult = new object();
+
+ if (jsonObject != null && jsonObject.ContainsKey("document"))
{
- string documentPath = GetDocumentPath(jsonData["document"]);
- if (!string.IsNullOrEmpty(documentPath))
+ if (bool.Parse(jsonObject["isFileName"]))
{
- byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
- stream = new MemoryStream(bytes);
- }
- string documentName = jsonObject["document"];
+ string documentPath = GetDocumentPath(jsonData["document"]);
+ if (!string.IsNullOrEmpty(documentPath))
+ {
+ byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
+ stream = new MemoryStream(bytes);
+ }
+ string documentName = jsonObject["document"];
- string connectionString = _connectionString;
- System.Data.SqlClient.SqlConnection connection = new System.Data.SqlClient.SqlConnection(connectionString);
+ string connectionString = _connectionString;
+ System.Data.SqlClient.SqlConnection connection = new System.Data.SqlClient.SqlConnection(connectionString);
- //Searches for the PDF document from the database
- string query = "SELECT FileData FROM Table WHERE FileName = '" + documentName + "'";
- System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(query, connection);
- connection.Open();
+ //Searches for the PDF document from the database
+ string query = "SELECT FileData FROM Table WHERE FileName = '" + documentName + "'";
+ System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(query, connection);
+ connection.Open();
- using (SqlDataReader reader = command.ExecuteReader())
- {
- if (reader.Read())
+ using (SqlDataReader reader = command.ExecuteReader())
{
- byte[] byteArray = (byte[])reader["FileData"];
- stream = new MemoryStream(byteArray);
+ if (reader.Read())
+ {
+ byte[] byteArray = (byte[])reader["FileData"];
+ stream = new MemoryStream(byteArray);
+ }
}
}
+ else
+ {
+ byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
+ stream = new MemoryStream(bytes);
+ }
}
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
+ jsonResult = pdfviewer.Load(stream, jsonObject);
+ return Content(JsonConvert.SerializeObject(jsonResult));
}
- jsonResult = pdfviewer.Load(stream, jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
-}
-```
+ ```
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
+ 6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "ConnectionString": "Your connection string for SQL server"
-}
-```
+ ```json
+ {
+ "Logging": {
+ "LogLevel": {
+ "Default": "Information",
+ "Microsoft.AspNetCore": "Warning"
+ }
+ },
+ "AllowedHosts": "*",
+ "ConnectionString": "Your connection string for SQL server"
+ }
+ ```
+
+ N> Replace **Your Connection string from SQL server** with the actual connection string for your SQL Server database
+
+ N> The **System.Data.SqlClient** package must be installed in your application to use the previous code example. You need to modify the connectionString variable in the previous code example as per the connection string of your database.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
+
+### Open from Cloud Storage Services
+
+Each link goes to a provider page with simple step-by-step instructions, sample code, and any authentication notes.
+
+- [AWS S3](./open-pdf-file/from-amazon-s3)
+- [Azure Blob Storage](./open-pdf-file/from-azure-blob-storage)
+- [Google Cloud Storage](./open-pdf-file/from-google-cloud-storage)
+- [Google Drive](./open-pdf-file/from-google-drive)
+- [OneDrive](./open-pdf-file/from-one-drive)
+- [Dropbox](./open-pdf-file/from-dropbox-cloud-file-storage)
+- [Box](./open-pdf-file/from-box-cloud-file-storage)
+
+---
-N> Replace **Your Connection string from SQL server** with the actual connection string for your SQL Server database
+**See also**
-N> The **System.Data.SqlClient** package must be installed in your application to use the previous code example. You need to modify the connectionString variable in the previous code example as per the connection string of your database.
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
\ No newline at end of file
+- [Load documents dynamically in React PDF Viewer](./how-to/load-document)
+- [Load a PDF only after PDFium resources are ready](./how-to/load-document-after-resources-loaded)
+- [Saving PDF files](./save-pdf-files)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/copy-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/copy-pages.md
new file mode 100644
index 0000000000..4ef7a40711
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/copy-pages.md
@@ -0,0 +1,69 @@
+---
+layout: post
+title: Copy pages in Organize Pages in React PDF Viewer | Syncfusion
+description: Learn how to duplicate pages using the Organize Pages UI in the React PDF Viewer of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Copy Pages in React PDF Viewer
+
+## Overview
+
+This guide explains how to duplicate pages within the current PDF using the Organize Pages UI.
+
+**Outcome**: Copied pages are inserted adjacent to the selection and included in exported PDFs.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- PDF Viewer injected with `PageOrganizer` module
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer toolbar to open the Organize Pages dialog.
+
+2. Select pages to duplicate
+
+ - Click a single thumbnail or use Shift+click/Ctrl+click to select multiple pages.
+
+3. Duplicate selected pages
+
+ - Click the **Copy Pages** button in the Organize Pages toolbar; duplicated pages are inserted to the right of the selected thumbnails.
+
+4. Duplicate multiple pages at once
+
+ - When multiple thumbnails are selected, the Copy action duplicates every selected page in order.
+
+ 
+
+5. Undo or redo changes
+
+ - Use **Undo** (Ctrl+Z) or **Redo** to revert or reapply recent changes.
+
+ 
+
+6. Persist duplicated pages
+
+ - Click **Save** or **Save As** to include duplicated pages in the saved/downloaded PDF.
+
+## Expected result
+
+- Selected pages are duplicated and included in the saved PDF.
+
+## Enable or disable Copy Pages button
+
+To enable or disable the **Copy Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-copy-option) for the guidelines.
+
+## Troubleshooting
+
+- If duplicates are not created: verify that the changes are persisted using **Save**.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/events.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/events.md
index 66f1b55b60..7156544b53 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/events.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/events.md
@@ -10,19 +10,19 @@ domainurl: ##DomainURL##
# Organize Pages Events in PDF Viewer
-The PDF Viewer provides events to track and respond to actions within the page organizer, allowing for the customization of page manipulation features.
+The PDF Viewer exposes events for the page organizer to track and respond to page manipulation actions (for example: rotate, rearrange, insert, delete, and copy).
## pageOrganizerSaveAs
The `pageOrganizerSaveAs` event is triggered when a save action is performed in the page organizer.
-- Occurs when the **Save as** button in the page organizer toolbar is clicked after modifying the document structure.
+ - Fires when the **Save as** button in the page organizer toolbar is clicked after modifying the document structure.
The event arguments provide the necessary information about the save event:
-- `fileName`: The name of the currently loaded PDF document.
-- `downloadDocument`: A base64 string of the modified PDF document data.
-- `cancel`: A boolean that, when set to `true`, prevents the default save action from proceeding.
+ - `fileName`: The name of the currently loaded PDF document.
+ - `downloadDocument`: A base64-encoded string containing the modified PDF document.
+ - `cancel`: Boolean; set to `true` to prevent the default save action.
```typescript
import * as React from 'react';
@@ -82,15 +82,14 @@ root.render();
## pageOrganizerZoomChanged
-The `pageOrganizerZoomChanged` event is triggered when the zoom level of the page organizer is changed.
-
-- This event is fired when the user interacts with the zoom slider in the page organizer. The `showImageZoomingSlider` property in `pageOrganizerSettings` must be set to `true` for the slider to be visible.
+The `pageOrganizerZoomChanged` event fires when the page organizer zoom level changes.
+- This event occurs when the user interacts with the zoom slider in the page organizer. The `showImageZoomingSlider` property in `pageOrganizerSettings` must be set to `true` for the slider to appear.
Event arguments:
-- `previousZoomValue`: The previous zoom value.
-- `currentZoomValue`: The current zoom value.
+- `previousZoom`: The previous zoom value.
+- `currentZoom`: The current zoom value.
```typescript
import * as React from 'react';
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md
index 2405d01048..897bed455b 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md
@@ -10,8 +10,7 @@ domainurl: ##DomainURL##
# Extract pages in React PDF Viewer
-The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI.
-The Extract Pages tool is available by default in Organize Pages.
+The PDF Viewer component provides an Extract Pages tool in the Organize Pages UI to export selected pages as a new PDF file. The Extract Pages tool is enabled by default.
## Extract Pages in Organize Pages
@@ -26,31 +25,27 @@ When selected, a secondary toolbar dedicated to extraction is displayed.
## Extract pages using the UI
-You can extract by typing page numbers/ranges or by selecting thumbnails.
+Extract pages by typing page numbers/ranges or by selecting thumbnails.
1. Click Extract Pages in the Organize Pages panel.
-2. In the input box, enter the pages to extract. Supported formats include:
- - Single pages: 1,3,5
- - Ranges: 2-6
- - Combinations: 1,4,7-9
-3. Alternatively, select the page thumbnails you want instead of typing values.
-4. Click Extract to download the extracted pages as a new PDF. Click Cancel to close the tool.
+2. In the input box, enter pages to extract. Supported formats:
+ - Single pages: 1,3,5
+ - Ranges: 2-6
+ - Combinations: 1,4,7-9
+3. Alternatively, select the page thumbnails to extract instead of typing values.
+4. Click Extract to download the selected pages as a new PDF; click Cancel to close the tool.
- N> Page numbers are 1-based (first page is 1). You can start anywhere—enter single pages or ranges like 2-3, 5, or 7-9. Invalid or out-of-range entries are ignored.
+Note: Page numbers are 1-based (the first page is 1). Invalid or out-of-range entries are ignored; only valid pages are processed. Consider validating input before extraction to ensure expected results.
## Extraction options (checkboxes)
-Two options appear in the secondary toolbar:
+The secondary toolbar provides two options:
-- **Delete Pages After Extracting:**
- - When enabled, the selected/entered pages are removed from the document opened in the viewer after the extraction completes. The extracted pages are still downloaded as a new file.
- - Example: If you enter 1,2 and extract, a PDF containing pages 1 and 2 is downloaded, and pages 1 and 2 are removed from the currently loaded document in the viewer.
+- **Delete Pages After Extracting** — When enabled, the selected pages are removed from the currently loaded document after extraction; the extracted pages are still downloaded as a separate PDF.
-- **Extract Pages As Separate Files:**
- - When enabled, every selected page is exported as an individual PDF file.
- - Example: If you select pages 3, 5, and 6, three separate PDFs are downloaded (3.pdf, 5.pdf, and 6.pdf). If you enter a range (e.g., 2-4), pages 2, 3, and 4 are each downloaded as separate PDFs.
+- **Extract Pages As Separate Files** — When enabled, each selected page is exported as an individual PDF (for example, selecting pages 3, 5, and 6 downloads 3.pdf, 5.pdf, and 6.pdf).
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/import-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/import-pages.md
new file mode 100644
index 0000000000..2834aaff43
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/import-pages.md
@@ -0,0 +1,62 @@
+---
+layout: post
+title: Import pages in Organize Pages in React PDF Viewer | Syncfusion
+description: How to import pages from another PDF into the current document using the Organize Pages UI in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Import pages using the Organize Pages tool
+
+## Overview
+
+This guide explains how to import pages from another PDF into the current document using the **Organize Pages** UI in the EJ2 React PDF Viewer.
+
+**Outcome**: Imported pages appear as thumbnails and are merged into the original document when saved or exported.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- PDF Viewer is injected with `PageOrganizer` service
+- [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) (standalone) or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) (server-backed) configured when required
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer navigation toolbar to open the Organize Pages dialog.
+
+2. Start import
+
+ - Click **Import Document** and choose a valid PDF file from your local file system.
+
+3. Place imported pages
+
+ - Imported pages appear as thumbnails. If a thumbnail is selected, the imported pages are inserted to the right of the selection; otherwise they are appended at the start of the document.
+
+ 
+
+4. Persist changes
+
+ - Click **Save** or **Save As** (or download) to persist the merged document.
+
+## Expected result
+
+- Imported pages display as a single thumbnail in Organize Pages and are merged into the original PDF when saved or exported.
+
+## Enable or disable Import Pages button
+
+To enable or disable the **Import Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-import-option) for the guidelines.
+
+## Troubleshooting
+
+- **Import fails**: Ensure the selected file is a valid PDF and the browser file picker is permitted.
+- **Imported pages not visible**: Confirm that the import is persisted using **Save** or **Save As**.
+- **Import option disabled**: Ensure [`pageOrganizerSettings.canImport`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#canimport) is set to `true` to enable import option.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/insert-blank-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/insert-blank-pages.md
new file mode 100644
index 0000000000..3b5ab21e79
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/insert-blank-pages.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: Insert blank pages in Organize Pages in React PDF Viewer | Syncfusion
+description: How to insert blank pages into a PDF using the Organize Pages UI in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Insert blank pages using the Organize Pages tool
+
+## Overview
+
+This guide describes inserting new blank pages into a PDF using the **Organize Pages** UI in the EJ2 React PDF Viewer.
+
+**Outcome**: A blank page is added at the chosen position and will appear in thumbnails and exports.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- `PageOrganizer` services injected into `PdfViewerComponent`
+- [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) for standalone mode or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) for server-backed mode configured as required
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer navigation toolbar to open the panel.
+
+2. Select insertion point
+
+ - Hover over the thumbnail before or after which you want the blank page added.
+
+3. Insert a blank page
+
+ - Click the **Insert Left** / **Insert Right** option and choose the position (Before / After). A new blank thumbnail appears in the sequence.
+
+ 
+
+4. Adjust and confirm
+
+ - Reposition or remove the inserted blank page if needed using drag-and-drop or delete options.
+
+5. Persist the change
+
+ - Click **Save** or **Save As** to include the blank page in the exported PDF.
+
+## Expected result
+
+- A blank page thumbnail appears at the chosen position and is present in any saved or downloaded PDF.
+
+## Enable or disable Insert Pages button
+
+To enable or disable the **Insert Pages** button in the page thumbnails, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-insert-option) for the guidelines
+
+## Troubleshooting
+
+- **Organize Pages button missing**: Verify `PageOrganizer` is included in `Inject` and `Toolbar` is enabled.
+- **Inserted page not saved**: Confirm [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) is configured for your selected processing mode.
+- **Insert options disabled**: Ensure [`pageOrganizerSettings.canInsert`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#caninsert) is set to `true` to enable insert option.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
+- [Remove pages in Organize Pages](./remove-pages)
+- [Reorder pages in Organize Pages](./remove-pages)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/mobile-view.md
index 5e7c4cfb68..675e92688d 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/mobile-view.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/mobile-view.md
@@ -10,15 +10,15 @@ domainurl: ##DomainURL##
# Organize Pages in Mobile PDF Viewer React
-The PDF Viewer offers a mobile-responsive layout for the `Organize Pages` feature, ensuring a seamless experience on smaller devices. When viewed on a mobile device, the toolbar and navigation elements adapt to the screen size, providing easy access to all page management tools.
+The PDF Viewer provides a mobile-responsive layout for the `Organize Pages` feature, optimized for touch interactions on small screens. The toolbar and navigation adapt to the device viewport so page-management controls remain accessible on phones and tablets.
-## Mobile-Friendly Toolbar
+## Mobile-friendly toolbar
-In the mobile view, the `Organize Pages` toolbar is displayed at the bottom of the screen for easy one-handed access. The toolbar includes the same set of tools as the desktop version, such as insert, delete, and rotate, but with a mobile-optimized layout.
+In mobile view the `Organize Pages` toolbar appears at the bottom of the screen for easier one-handed access. The toolbar exposes the same tools as the desktop layout (insert, delete, rotate, etc.) in a touch-optimized arrangement.
## Context Menu for Page Operations
-To perform actions on a page thumbnail, tap and hold on the thumbnail to open a context menu. This menu contains all the available page operations:
+To perform actions on a page thumbnail, tap and hold (long-press) the thumbnail to open a context menu. This menu contains the available page operations:
* **Rotate Clockwise**: Rotate the selected page 90 degrees clockwise.
* **Rotate Counter-Clockwise**: Rotate the selected page 90 degrees counter-clockwise.
@@ -28,10 +28,10 @@ To perform actions on a page thumbnail, tap and hold on the thumbnail to open a
* **Select All**: Select all pages in the document.
-
+
## Rearranging Pages on Mobile
-To rearrange pages, tap and hold a page thumbnail to select it, then drag it to the desired position. A blue line will indicate the drop location.
+To rearrange pages, tap and hold a thumbnail to select it, then drag it to the desired position; a blue line indicates the drop location. Supported gestures include `tap`, `long-press` (open context menu), and `drag` (reorder). The layout adapts to portrait and landscape orientations to preserve usability on different devices.
-By providing a mobile-friendly interface, the PDF Viewer ensures that users can efficiently manage their PDF documents from any device, anywhere.
\ No newline at end of file
+The mobile interface enables efficient page management on phones and tablets without sacrificing the functionality available in the desktop viewer.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/overview.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/overview.md
index d6cbef4831..9df143b705 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/overview.md
@@ -10,9 +10,9 @@ domainurl: ##DomainURL##
# Organize pages in React PDF Viewer
-The React PDF Viewer component provides an Organize Pages panel that helps you prepare documents before sharing them. Use it to tidy scanned files, move pages into the right order, and duplicate important content without leaving the viewer.
+The React PDF Viewer includes an Organize Pages panel for preparing documents before sharing. Use this panel to reorder pages, correct orientation, insert or remove pages, and duplicate content without leaving the viewer.
-To open the Organize Pages panel, load a document, ensure that the Organize Pages toolbar item is enabled, and choose **Organize Pages** from the left vertical toolbar. The document must allow page-level edits; otherwise, the toolbar item is hidden.
+To open the Organize Pages panel, load a document and choose **Organize Pages** from the left vertical toolbar (when enabled).
The Organize Pages panel supports the following actions:
@@ -27,13 +27,10 @@ The Organize Pages panel supports the following actions:
After completing the changes, apply them by selecting **Save** to overwrite the current document or **Save As** to download a new copy that retains the updated page order.
-For a full guide to Organize Pages in React, see the feature landing page: [Organize pages in React PDF Viewer](./organize-pdf).
-
See also:
-- [UI interactions for Organize Pages](./organize-pdf/ui-interactions-organize-page)
-- [Toolbar items for Organize Pages](./organize-pdf/toolbar-organize-page)
-- [Programmatic support for Organize Pages](./organize-pdf/programmatic-support-for-organize-page)
-- [Organize Pages events](./organize-pdf/organize-pdf-events)
-- [Organize Pages in mobile view](./organize-pdf/organize-page-mobile-view)
+- [Toolbar customization for Organize Pages](./toolbar)
+- [Programmatic support for Organize Pages](./programmatic-support)
+- [Organize Pages events](./events)
+- [Organize Pages in mobile view](./mobile-view)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/programmatic-support.md
index 919eba16c0..5e981f2dda 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/programmatic-support.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/programmatic-support.md
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
# Programmatic Support for Organize Pages in React PDF Viewer control
-The PDF Viewer provides comprehensive programmatic support for organizing pages, allowing you to integrate and manage PDF functionalities directly within your application. This section details the available APIs to enable, control, and interact with the page organization features.
+The PDF Viewer exposes programmatic APIs for organizing pages so applications can integrate page-management workflows (for example: enable/disable organizer, open/close the organizer, and customize behavior). This section documents the available properties, methods, and settings used to control the Organize Pages experience.
## Enable or disable the page organizer
-The page organizer feature can be enabled or disabled using the `enablePageOrganizer` property. By default, this feature is enabled.
+The page organizer feature can be enabled or disabled using the `enablePageOrganizer` property. By default, the page organizer is enabled.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -59,7 +59,7 @@ export default function App() {
## Open the page organizer on document load
-You can control whether the page organizer dialog opens automatically when a document is loaded using the `isPageOrganizerOpen` property. The default value is `false`.
+Use the `isPageOrganizerOpen` property to control whether the page organizer opens automatically when a document loads. The default value is `false`.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -104,7 +104,7 @@ export default function App() {
## Customize page organizer settings
-The `pageOrganizerSettings` API allows you to customize the page management functionalities. You can enable or disable actions such as deleting, inserting, rotating, copying, importing, and rearranging pages, as well as configure thumbnail zoom settings. By default, all actions are enabled, and standard zoom settings are applied.
+The `pageOrganizerSettings` API customizes page-management capabilities. Use it to enable or disable actions (delete, insert, rotate, copy, import, rearrange) and to configure thumbnail zoom settings. By default, actions are enabled and standard zoom settings apply.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/remove-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/remove-pages.md
new file mode 100644
index 0000000000..3567584d8a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/remove-pages.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Remove pages using Organize Pages in React PDF Viewer | Syncfusion
+description: How to remove one or more pages from a PDF using the Organize Pages view in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Remove pages using the Organize Pages tool
+
+## Overview
+
+This guide shows how to delete single or multiple pages from a PDF using the **Organize Pages** UI in the EJ2 React PDF Viewer.
+
+**Outcome**: You will remove unwanted pages and save or download the updated PDF.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed in your project
+- Basic PDF Viewer setup ([`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) for standalone mode or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) for server-backed mode)
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer navigation toolbar to open the Organize Pages dialog.
+
+2. Select pages to remove
+
+ - Click a thumbnail to select a page. Use Shift+click or Ctrl+click to select multiple pages. Use the **Select all** button to select every page.
+
+3. Delete selected pages
+
+ - Click the **Delete Pages** icon in the Organize Pages toolbar to remove the selected pages. The thumbnails update immediately to reflect the deletion.
+
+ - Delete a single page directly from its thumbnail: hover over the page thumbnail to reveal the per-page delete icon, then click that icon to remove only that page.
+
+ 
+
+4. Multi-page deletion
+
+ - When multiple thumbnails are selected, the Delete action removes all selected pages at once.
+
+5. Undo or redo deletion
+
+ - Use **Undo** (Ctrl+Z) to revert the last deletion.
+ - Use **Redo** (Ctrl+Y) to revert the last undone deletion.
+
+ 
+
+6. Save the PDF after deletion
+
+ - Click **Save** to apply changes to the currently loaded document, or **Save As** / **Download** to download a copy with the removed pages permanently applied.
+
+## Expected result
+
+- Selected pages are removed from the document immediately in the Organize Pages dialog.
+- After clicking **Save** or **Save As**, the resulting PDF reflects the deletions.
+
+## Enable or disable Remove Pages button
+
+To enable or disable the **Remove Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-delete-option) for the guidelines.
+
+## Troubleshooting
+
+- **Delete button disabled**: Ensure `PageOrganizer` is injected and [`pageOrganizerSettings.canDelete`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#candelete) is not set to `false`.
+- **Selection not working**: Verify that the Organize Pages dialog has focus; use Shift+click for range selection.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/reorder-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/reorder-pages.md
new file mode 100644
index 0000000000..b8826fc7c5
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/reorder-pages.md
@@ -0,0 +1,66 @@
+---
+layout: post
+title: Reorder pages in Organize Pages in React PDF Viewer | Syncfusion
+description: How to rearrange pages using drag-and-drop and grouping in the Organize Pages UI of the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Reorder pages using the Organize Pages view
+
+## Overview
+
+This guide describes how to rearrange pages in a PDF using the **Organize Pages** UI.
+
+**Outcome**: Single or multiple pages can be reordered and the new sequence is preserved when the document is saved or exported.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- `Toolbar` and `PageOrganizer` services injected into the viewer
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the navigation toolbar to open the page thumbnails panel.
+
+2. Reorder a single page
+
+ - Drag a thumbnail to the desired position. The thumbnails update instantly to show the new order.
+
+3. Reorder multiple pages
+
+ - Select multiple thumbnails using Ctrl or Shift, then drag the selected group to the new location.
+
+ 
+
+4. Verify and undo
+
+ - Use **Undo** / **Redo** options to revert accidental changes.
+
+ 
+
+5. Persist the updated order
+
+ - Click **Save** or download the document using **Save As** to persist the new page sequence.
+
+## Expected result
+
+- Thumbnails reflect the new page order immediately and saved / downloaded PDFs preserve the reordered sequence.
+
+## Enable or disable reorder option
+
+To enable or disable the **Reorder pages** option in the Organize Pages, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-rearrange-option) for the guidelines
+
+## Troubleshooting
+
+- **Thumbnails won't move**: Confirm [`pageOrganizerSettings.canRearrange`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#canrearrange) is is not set to `false`.
+- **Changes not saved**: Verify [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) (server) or [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) (standalone) is configured correctly.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/rotate-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/rotate-pages.md
new file mode 100644
index 0000000000..0c9b2eeaa4
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/rotate-pages.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Rotate pages in Organize Pages (React PDF Viewer) | Syncfusion
+description: Learn how to rotate one or more pages using the Organize Pages UI in the Syncfusion React PDF Viewer and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Rotate pages using the Organize Pages view
+
+## Overview
+
+This guide explains how to rotate individual or multiple pages using the **Organize Pages** UI in the EJ2 React PDF Viewer. Supported rotations: 90°, 180°, 270° clockwise and counter-clockwise.
+
+**Outcome**: Pages are rotated in the viewer and persisted when saved or exported.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- PDF Viewer configured with [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) (standalone) or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) (server-backed)
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer toolbar to open the Organize Pages dialog.
+
+2. Select pages to rotate
+
+ - Click a single thumbnail or use Shift+click/Ctrl+click to select multiple pages.
+
+3. Rotate pages using toolbar buttons
+
+ - Use **Rotate Right** to rotate 90° clockwise.
+ - Use **Rotate Left** to rotate 90° counter-clockwise.
+ - Repeat the action to achieve 180° or 270° rotations.
+
+ 
+
+4. Rotate multiple pages at once
+
+ - When multiple thumbnails are selected, the Rotate action applies to every selected page.
+
+5. Undo or reset rotation
+
+ - Use **Undo** (Ctrl+Z) to revert the last rotation.
+ - Use the reverse rotation button (Rotate Left/Rotate Right) until the page returns to 0°.
+
+ 
+
+6. Persist rotations
+
+ - Click **Save** or **Save As** to persist rotations in the saved/downloaded PDF. Exporting pages also preserves the new orientation.
+
+## Expected result
+
+- Pages rotate in-place in the Organize Pages dialog when using the rotate controls.
+- Saving or exporting the document preserves the new orientation.
+
+## Enable or disable Rotate Pages button
+
+To enable or disable the **Rotate Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-rotate-option) for the guidelines
+
+## Troubleshooting
+
+- **Rotate controls disabled**: Ensure [`pageOrganizerSettings.canRotate`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#canrotate) is not set to `false`.
+- **Rotation not persisted**: Click **Save** after rotating. For server-backed setups ensure [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) is set so server-side save can persist changes.
+
+## Related topics
+
+- [Organize page toolbar customization](./toolbar.md)
+- [Organize pages event reference](./events)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md
index 092ccc2362..0d172c9269 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md
@@ -8,13 +8,13 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Organize Page Toolbar Customization in React PDF Viewer control
+# Organize page toolbar customization in React PDF Viewer control
-The PDF Viewer allows you to customize the toolbar for the organize pages feature, enabling you to show or hide specific tools based on your application's requirements. The `pageOrganizerSettings` API provides properties to control the visibility of each tool in the organize pages dialog.
+The PDF Viewer lets applications customize the Organize Pages toolbar to enable or disable tools according to project requirements. Use the `pageOrganizerSettings` API to control each tool's interactivity and behavior.
-## Show or hide the insert option
+## Enable or disable the insert option
-The `canInsert` property controls the visibility of the insert tool. When set to `false`, the insert tool will be hidden from the toolbar.
+The `canInsert` property controls the insert tool visibility. Set it to `false` to disable the insert tool.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -75,9 +75,9 @@ root.render();
{% endhighlight %}
{% endtabs %}
-## Show or hide the delete option
+## Enable or disable the delete option
-The `canDelete` property controls the visibility of the delete tool. When set to `false`, the delete tool will be hidden.
+The `canDelete` property controls the delete tool visibility. Set it to `false` to disable the delete tool.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -138,9 +138,9 @@ root.render();
{% endhighlight %}
{% endtabs %}
-## Show or hide the rotate option
+## Enable or disable the rotate option
-The `canRotate` property controls the visibility of the rotate tool. When set to `false`, the rotate tool will be hidden.
+The `canRotate` property controls the rotate tool visibility. Set it to `false` to disable the rotate tool.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -201,14 +201,18 @@ root.render();
{% endhighlight %}
{% endtabs %}
-## Show or hide the copy option
+## Enable or disable the copy option
-The `canCopy` property controls the visibility of the copy tool. When set to `false`, the copy tool will be hidden.
+The `canCopy` property controls the copy tool interaction. Set it to `false` to disable the copy tool.
-## Show or hide the import option
+## Enable or disable the import option
-The `canImport` property controls the visibility of the import tool. When set to `false`, the import tool will be hidden.
+The `canImport` property controls the import tool interaction. Set it to `false` to disable the import tool.
-## Show or hide the rearrange option
+## Enable or disable the rearrange option
-The `canRearrange` property controls the ability to rearrange pages. When set to `false`, pages cannot be rearranged.
\ No newline at end of file
+The `canRearrange` property controls whether pages can be rearranged. Set it to `false` to disable page reordering.
+
+## Show or hide the zoom pages option
+
+The `showImageZoomingSlider` property controls the zooming tool visibility. Set it to `false` to hide the zoom page tool.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/ui-interactions.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/ui-interactions.md
deleted file mode 100644
index 011863771b..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/ui-interactions.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-layout: post
-title: UI Interactions for Organizing Pages in React PDF Viewer | Syncfusion
-description: Learn about the UI interactions for organizing pages in the Syncfusion React PDF Viewer control, including rotating, rearranging, inserting, deleting, and copying pages.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# UI Interactions for Organizing Pages in React PDF Viewer
-
-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.
-
-
-
-## 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:
-
-* **Rotate clockwise**: Rotate the selected pages 90 degrees clockwise.
-* **Rotate counter-clockwise**: Rotate the selected pages 90 degrees counter-clockwise.
-
-
-
-## Rearranging PDF pages
-
-Easily change the sequence of pages using the drag-and-drop method:
-
-* **Drag and drop**: Click and drag a page thumbnail to the desired position within the document, then release it to reorder the pages.
-
-
-
-## Inserting new pages
-
-Effortlessly add blank pages to your document with the following options:
-
-* **Insert blank page left**: Insert a blank page to the left of the selected page.
-* **Insert blank page right**: Insert a blank page to the right of the selected page.
-
-
-
-## Deleting PDF pages
-
-Remove unwanted pages from your document with these steps:
-
-1. **Select pages to delete**: Click on the thumbnails of the pages you wish to remove. You can select multiple pages at once.
-2. **Delete selected pages**: Use the delete option in the Organize Pages pane to remove the selected pages from the document.
-
-
-
-## Copying PDF pages
-
-Duplicate pages within your PDF document effortlessly:
-
-* **Select pages to copy**: Click on the page thumbnails you wish to duplicate.
-* **Copy selected pages**: Use the copy option to create duplicates. The copied pages will be added to the right of the selected pages.
-
-
-
-## Importing a PDF document
-
-Seamlessly import another PDF document into your current document:
-
-* **Import PDF document**: Click the **Import Document** button to select and import a PDF. The imported document will be inserted as a thumbnail. If a page is selected, the thumbnail will be added to its right. If no pages are selected, it will be added as the first page. The imported PDF will be merged with the current document upon saving.
-
-
-
-## Selecting all pages
-
-Select all pages simultaneously to perform bulk operations, such as rotating or deleting all pages at once.
-
-
-
-## Zooming page thumbnails
-
-Adjust the size of page thumbnails for better visibility and precision:
-
-* Use the zoom slider to increase or decrease the thumbnail size.
-* Zoom in to see more detail on each page.
-* Zoom out to view more pages at once.
-
-
-
-## Real-time updates and saving
-
-All changes are reflected instantly in the Organize Pages dialog. Click the **Save** button to apply the modifications to the document. Use the **Save As** feature to download a new version of the PDF with your changes.
-
-## Keyboard shortcuts
-
-The following keyboard shortcuts are available in the Organize Pages dialog:
-
-* **Ctrl+Z**: Undo the last action.
-* **Ctrl+Y**: Redo the last undone action.
-* **Ctrl+Scroll**: Zoom in and out on page thumbnails for better visibility.
-
-
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/zoom-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/zoom-pages.md
new file mode 100644
index 0000000000..829dae0a25
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/zoom-pages.md
@@ -0,0 +1,60 @@
+---
+layout: post
+title: Zoom pages in Organize Pages in React PDF Viewer | Syncfusion
+description: How to adjust thumbnail zoom levels inside the Organize Pages UI of the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Zoom pages using the Organize Pages tool
+
+## Overview
+
+This guide explains how to change the thumbnail zoom level in the **Organize Pages** UI so you can view more detail or an overview of more pages.
+
+**Outcome**: Page thumbnails resize interactively to suit your task.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- `Toolbar` and `PageOrganizer` services injected in PDF Viewer
+- [`pageOrganizerSettings.showImageZoomingSlider`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#showimagezoomingslider) is set to `true`
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer toolbar to open the thumbnails panel.
+
+2. Locate the zoom control
+
+ - Find the thumbnail zoom slider in the Organize Pages toolbar.
+
+3. Adjust zoom
+
+ - Drag the slider to increase or decrease thumbnail size.
+
+ 
+
+4. Choose an optimal zoom level
+
+ - Select a zoom level that balances page detail and the number of visible thumbnails for your task.
+
+## Expected result
+
+- Thumbnails resize interactively; larger thumbnails show more detail while smaller thumbnails allow viewing more pages at once.
+
+## Show or hide Zoom Pages button
+
+To enable or disable the **Zoom Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#show-or-hide-the-zoom-pages-option) for the guidelines
+
+## Troubleshooting
+
+- **Zoom control not visible**: Confirm [`pageOrganizerSettings.showImageZoomingSlider`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#showimagezoomingslider) is set to `true`.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pdf.md
deleted file mode 100644
index f7f43882dc..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pdf.md
+++ /dev/null
@@ -1,346 +0,0 @@
----
-layout: post
-title: Organize Pages in React PDF Viewer component | Syncfusion
-description: Learn here all about Organize Pages in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Organize Pages in React PDF Viewer component
-
-The PDF Viewer allows you to manage your PDF documents efficiently by organizing pages seamlessly. Whether you need to add new pages, remove unnecessary ones, rotate pages, move pages within the document, and copy or duplicate pages, the PDF Viewer facilitates these tasks effortlessly.
-
-## Getting started
-
-To access the organize pages feature, simply open the PDF document in the PDF Viewer and navigate to the left vertical toolbar. Look for the `Organize Pages` option to begin utilizing these capabilities.
-
-
-
-The page organization support enables you to perform various actions such as rotating, rearranging, inserting, copying, and deleting pages within a PDF document using organize pages dialog.
-
-### Rotating PDF pages
-
-You can adjust the orientation of PDF pages to ensure proper alignment. The rotate icon offers the following options:
-
-* `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise.
-* `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise.
-
-### Rearranging PDF pages
-
-You can easily change the sequence of pages within your document using the drag and drop method:
-
-* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order.
-
-
-
-### Inserting new pages
-
-Effortlessly add new pages to your document with the following options:
-
-* `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon.
-* `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon.
-
-### Deleting PDF pages
-
-Removing unwanted pages from your document is straight forward:
-
-* `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once.
-* `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document.
-
-### Copying PDF pages
-
-Duplicate the pages within your PDF document effortlessly:
-
-* `Select pages to copy`: Click on the page thumbnails you wish to duplicate. Use the copy option to create duplicates. When a page is copied, the duplicate is automatically added to the right of the selected page. Multiple copies can be made using the toolbar action.
-
-
-
-### Importing a PDF Document
-
-Seamlessly import a PDF document into your existing document:
-
-* `Import PDF document`: Click the **Import Document** button to import a PDF. If a page is selected, the imported document’s thumbnail will be inserted to the right of the selected page. If multiple or no pages are selected, the thumbnail will be added as the first page. When **Save** or **Save As** is clicked, the imported PDF will be merged with the current document. You can insert a blank page to the left or right of the imported thumbnail, delete it, or drag and drop it to reposition as needed.
-
-
-
-### Selecting all pages
-
-Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document.
-
-
-
-### Zooming Page Thumbnails
-
-Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to:
-
-* Increase or decrease the size of page thumbnails using the zoom slider
-* See more details on pages when zoomed in
-* View more pages simultaneously when zoomed out
-
-This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization.
-
-
-
-### Real-time updates
-
-Witness instant changes in page organization reflected within the PDF Viewer. Simply click the **Save** button to preserve your modifications.
-
-### SaveAs functionality
-
-Safeguard your edits by utilizing the **Save As** feature. This enables you to download the modified version of the PDF document for future reference, ensuring that your changes are securely stored.
-
-## API's supported
-
-**enablePageOrganizer:** This API enables or disables the page organizer feature in the PDF Viewer. By default, it is set to `true`, indicating that the page organizer is enabled.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-{% raw %}
-
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
- BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation,
- FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
-let pdfviewer;
-
-function App() {
- return (
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render();
-
-{% endraw %}
-{% endhighlight %}
-{% endtabs %}
-
-**isPageOrganizerOpen:** This API determines whether the page organizer dialog will be displayed automatically when a document is loaded into the PDF Viewer. By default, it is set to `false`, meaning the dialog is not displayed initially.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-{% raw %}
-
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
- BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation,
- FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
-let pdfviewer;
-
-function App() {
- return (
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render();
-
-{% endraw %}
-{% endhighlight %}
-{% endtabs %}
-
-**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages, as well as configuring thumbnail zoom settings. By default, all these actions are enabled and standard zoom settings are applied.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-{% raw %}
-
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
- BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation,
- FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
-let pdfviewer;
-
-function App() {
- return (
);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render();
-
-{% endraw %}
-{% endhighlight %}
-{% endtabs %}
-
-**openPageOrganizer:** This API opens the page organizer dialog within the PDF Viewer, providing access to manage PDF pages.
-
-```
-
-```
-
-```ts
-
-```
-
-**closePageOrganizer:** This API closes the currently open page organizer dialog within the PDF Viewer, if it is present. It allows users to dismiss the dialog when done with page organization tasks.
-
-```
-
-```
-
-```ts
-
-```
-
-## Keyboard shortcuts
-
-The following keyboard shortcuts are available at the organize pages dialog.
-
-* **Ctrl+Z** : Undo the last action performed.
-* **Ctrl+Y** : Redo the action that was undone
-* **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility.
-
-
-
-#### Conclusion
-
-With the Organize Pages feature in the PDF Viewer, managing your PDF documents has never been easier. Whether you are adding new content, adjusting page orientation, moving the pages, duplicating the pages, or removing unnecessary pages, this feature provides the tools you need to streamline your document management workflow. Explore these capabilities today and take control of your PDF documents with ease!
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/Organize%20pdf)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/overview.md b/Document-Processing/PDF/PDF-Viewer/react/overview.md
index c016c0401f..f872a57a3b 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/overview.md
@@ -6,9 +6,9 @@ control: PDF Viewer
documentation: UG
---
-# Overview of React PDF Viewer Component
+# Overview of React PDF Viewer component
-The [`React PDF Viewer`](https://www.syncfusion.com/pdf-viewer-sdk) component is a lightweight and modular component for viewing and printing PDF files. It provides the best viewing experience available with core interactions such as zooming, scrolling, text searching, text selection, and text copying. The thumbnail, bookmark, hyperlink and table of contents support provides easy navigation within and outside the PDF files.
+The [`React PDF Viewer`](https://www.syncfusion.com/pdf-viewer-sdk) component is a lightweight, modular control for viewing and printing PDF files. It supports core interactions such as zooming, scrolling, text searching, text selection, and text copying. Thumbnails, bookmarks, hyperlinks, and table-of-contents support enable easy navigation inside and outside PDF files.
## Setup
@@ -90,12 +90,12 @@ root.render();
*[`Print`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/print) - Print the entire document or a specific page directly from the browser.
*[`Globalization`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/globalization) - Provides inherent support to localize the UI.
-## Supported Web platforms
+## Supported web platforms
-* [Javascript(ES5)](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started)
-* [Javascript](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started)
-* [Angular](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started)
-* [Vue](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started)
-* [ASP.NET Core](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started)
-* [ASP.NET MVC](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started)
-* [Blazor](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/overview)
\ No newline at end of file
+- [JavaScript (ES5)](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started)
+- [JavaScript (ES6)](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started)
+- [Angular](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started)
+- [Vue](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started)
+- [ASP.NET Core](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started)
+- [ASP.NET MVC](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started)
+- [Blazor](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/overview)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/preact.md b/Document-Processing/PDF/PDF-Viewer/react/preact.md
deleted file mode 100644
index 133a20f79e..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/react/preact.md
+++ /dev/null
@@ -1,195 +0,0 @@
----
-layout: post
-title: Getting Started with Preact Framework | Syncfusion
-description: Check out and learn about getting started with the Preact Framework and React PDF Viewer Component of Syncfusion Essential JS 2 and more details.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Getting Started with the React PDF Viewer Component in the Preact Framework
-
-This article provides a step-by-step guide for setting up a [Preact](https://preactjs.com/) project and integrating the Syncfusion® React PDF Viewer component.
-
-`Preact` is a fast and lightweight JavaScript library for building user interfaces. It's often used as an alternative to larger frameworks like React. The key difference is that Preact is designed to be smaller in size and faster in performance, making it a good choice for projects where file size and load times are critical factors.
-
-## Prerequisites
-
-[System requirements for Syncfusion® React UI components](../system-requirement)
-
-## Set up the Preact project
-
-To create a new `Preact` project, use one of the commands that are specific to either NPM or Yarn.
-
-```bash
-npm init preact
-```
-
-or
-
-```bash
-yarn init preact
-```
-
-Using one of the above commands will lead you to set up additional configurations for the project, as below:
-
-1\. Define the project name: We can specify the name of the project directly. Let's specify the name of the project as `my-project` for this article.
-
-```bash
-T Preact - Fast 3kB alternative to React with the same modern API
-|
-* Project directory:
-| my-project
-—
-```
-
-2\. Choose `JavaScript` as the framework variant to build this Preact project using JavaScript and React.
-
-```bash
-T Preact - Fast 3kB alternative to React with the same modern API
-|
-* Project language:
-| > JavaScript
-| TypeScript
-—
-```
-
-3\. Then configure the project as below for this article.
-
-```bash
-T Preact - Fast 3kB alternative to React with the same modern API
-|
-* Use router?
-| Yes / > No
-—
-|
-* Prerender app (SSG)?
-| Yes / > No
-—
-|
-* Use ESLint?
-| Yes / > No
-—
-```
-
-5\. Upon completing the aforementioned steps to create `my-project`, run the following command to jump into the project directory:
-
-```bash
-cd my-project
-```
-
-Now that `my-project` is ready to run with default settings, let's add Syncfusion® components to the project.
-
-## Add the Syncfusion® React packages
-
-Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package.
-
-This article uses the [React PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) as an example. To use the React PDF Viewer component in the project, the `@syncfusion/ej2-react-pdfviewer` package needs to be installed using the following command:
-
-```bash
-npm install @syncfusion/ej2-react-pdfviewer --save
-```
-
-or
-
-```bash
-yarn add @syncfusion/ej2-react-pdfviewer
-```
-
-## Import Syncfusion® CSS styles
-
-You can import themes for the Syncfusion® React component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). Refer to [themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme) to know more about built-in themes and different ways to refer to theme's in a React project.
-
-In this article, the `Material 3` theme is applied using CSS styles, which are available in installed packages. The necessary `Material 3` CSS styles for the PDF Viewer component and its dependents were imported into the **src/style.css** file.
-
-{% tabs %}
-{% highlight css tabtitle="~/src/style.css" %}
-
-@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
-@import "../node_modules/@syncfusion/ej2-react-pdfviewer/styles/material3.css";
-
-{% endhighlight %}
-{% endtabs %}
-
-> The order of importing CSS styles should be in line with its dependency graph.
-
-## Add the Syncfusion® React component
-
-Follow the below steps to add the React PDF Viewer component to the Vite project:
-
-1\. Before adding the PDF Viewer component to your markup, import the PDF Viewer component in the **src/index.jsx** file.
-
-{% tabs %}
-{% highlight js tabtitle="~/src/index.jsx" %}
-
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
- ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';
-
-{% endhighlight %}
-{% endtabs %}
-
-2\. Then, define the PDF Viewer component in the **src/index.jsx** file, as shown below:
-
-{% tabs %}
-{% highlight js tabtitle="~/src/index.jsx" %}
-{% raw %}
-
-import { render } from 'preact';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
- ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';
-import './style.css';
-
-export function App() {
-
- return (
-
-
- {/* Render the PDF Viewer */}
-
-
-
-
-
-
- );
-}
-
-render(, document.getElementById('app'));
-
-{% endraw %}
-{% endhighlight %}
-{% endtabs %}
-
-## Run the project
-
-To run the project, use the following command:
-
-```bash
-npm run dev
-```
-
-or
-
-```bash
-yarn run dev
-```
-
-The output will appear as follows:
-
-
-
-## See also
-
-[Getting Started with the Syncfusion® React UI Component](../getting-started/quick-start)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/print.md b/Document-Processing/PDF/PDF-Viewer/react/print.md
index e01e7c4487..365a46d03f 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/print.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/print.md
@@ -7,9 +7,9 @@ platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Print in React Pdfviewer component
+# Print in React PDF Viewer component
-The PDF Viewer supports printing the loaded PDF file. You can enable/disable the print using the following code snippet.
+The PDF Viewer supports printing the loaded PDF document. Enable or disable printing with the `enablePrint` API as shown in the examples below.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -76,9 +76,9 @@ root.render();
{% endhighlight %}
{% endtabs %}
-
+
-You can invoke print action using the following code snippet.,
+Invoke the print action programmatically using the example below.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -153,16 +153,11 @@ root.render();
{% endhighlight %}
{% endtabs %}
-## Customizing Print Quality using printScaleFactor API
+## Customize print quality with printScaleFactor
-The PDF Viewer allows you to adjust the print quality using the [PrintScaleFactor](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#printScaleFactor) API. The quality of the print improves as the printScaleFactor value increases from 0.5 to 5.
+Adjust print quality using the `printScaleFactor` API. Valid values are between 0.5 and 5. Increasing the value improves print quality but may increase print time. Values below 0.5 or above 5 produce standard quality; the default value is `1`.
-When the value is less than 0.5, the PDF is printed at a standard quality. When the value exceeds 5, the PDF is still printed at the standard quality. In standard quality, printScaleFactor value is set to 1 as default value.
-The effective range for printScaleFactor is between 0.5 and 5. Higher values within this range will result in better print quality, but also increase the print time.
-
-By default, the printScaleFactor is set to 1.
-
-* **The following code snippet demonstrates how to customize print quality using the printScaleFactor API in the PDF Viewer.**
+The example below demonstrates how to set `printScaleFactor`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
{% raw %}
@@ -234,7 +229,7 @@ root.render();
## EnablePrintRotation in the PDF Viewer
-The `EnablePrintRotation` property controls whether landscape pages are auto-rotated to best fit when printing. The default value is `true`. Set to `false` to preserve the original page orientation and suppress automatic rotation during print.
+The `enablePrintRotation` option controls whether landscape pages are automatically rotated to best fit when printing. The default value is `true`. Set it to `false` to preserve the original page orientation during printing.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -293,13 +288,13 @@ root.render();
{% endhighlight %}
{% endtabs %}
-## Print modes in the PDF Viewer
+## Print modes
-The `printMode` property allows you to specify how the document is printed.
+Use the `printMode` property to control how the document is printed.
-The supported values are:
-* `Default`: Prints the document from the same window.
-* `NewWindow`: Prints the document from a new window/tab, which can be useful depending on browser popup policies.
+Supported values:
+- `Default`: Print from the same window.
+- `NewWindow`: Print from a new window or tab (useful to avoid popup restrictions in some browsers).
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -360,22 +355,20 @@ root.render();
[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to/Customization%20of%20print%20Quality)
-## Print Events
+## Print events
-The following events are available in the PDF Viewer component.
+The PDF Viewer exposes print-related events:
-| Name | Description |
-|--------------|----------------------------------------|
-| `printStart` | Triggers when a print action starts. |
-| `printEnd` | Triggers when a print action is completed. |
+| Name | Description |
+|------|-------------|
+| `printStart` | Fired when a print action starts. |
+| `printEnd` | Fired when a print action completes. |
### printStart Event
-The [`printStart`](https://ej2.syncfusion.com/documentation/api/pdfviewer/#printstart) event triggers when the print action is started.
-#### Event Arguments
-See [`PrintStartEventArgs`](https://ej2.syncfusion.com/documentation/api/pdfviewer/printStartEventArgs/) for details such as `fileName` and the `cancel` option.
+The `printStart` event fires when printing begins. See `PrintStartEventArgs` for event details such as `fileName` and the `cancel` option.
-The following example illustrates how to handle the `printStart` event.
+The example below shows handling `printStart`.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-amazon-s3.md
index f25c71fdfb..266365b51d 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-amazon-s3.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-amazon-s3.md
@@ -8,17 +8,17 @@ documentation: ug
# Save PDF files to AWS S3 in React
-The React PDF Viewer component supports saving PDF files to AWS S3 using either the standalone or server-backed configuration. The following steps demonstrate both approaches.
+The React PDF Viewer component supports saving PDF files to AWS S3 using either a standalone (browser) configuration or a server-backed configuration. The following steps demonstrate both approaches and include notes on prerequisites and security considerations for production use.
## Using Standalone PDF Viewer
-To save a PDF file to AWS S3, you can follow the steps below
+Follow the steps below to save a PDF file to AWS S3 from a browser-based React PDF Viewer.
**Step 1:** Create a PDF Viewer sample in React
Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample in React. This will set up the basic structure of your PDF Viewer application.
-**Step 2:** Modify the `src/app/app.ts` file in the Angular project
+**Step 2:** Modify the `src/app/app.ts` file in the React project
1. Import the required namespaces at the top of the file:
@@ -84,7 +84,7 @@ return (
4. Retrieve the PDF Viewer instance, save the current PDF as a Blob, read it using FileReader to get an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the `putObject` method.
-N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account.
+N> Replace **Your Bucket Name** and **Your Key** with the target S3 bucket and object key. Ensure the S3 bucket is configured with appropriate permissions and CORS rules to allow browser uploads.
```typescript
private s3 = new AWS.S3();
@@ -113,7 +113,7 @@ function saveDocument() {
};
```
-N> Install the aws-sdk package in the application to use the previous code example: npm install aws-sdk
+N> Install the AWS SDK package to use the browser example. Run `npm install aws-sdk` for the v2 bundle, or prefer the AWS SDK v3 modular packages for smaller client bundles and better tree-shaking.
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone).
@@ -213,7 +213,7 @@ public IActionResult Download([FromBody] Dictionary jsonObject)
}
```
-N> Replace the placeholders with the actual AWS access key, secret key, and bucket name.
+N> Replace the placeholders with the appropriate AWS credentials and bucket name. For enhanced security, avoid storing long-lived credentials in configuration files; use environment variables or a secrets manager instead.
**Step 3:** Set the PDF Viewer properties in the React PDF Viewer component
@@ -252,6 +252,6 @@ root.render();
{% endhighlight %}
{% endtabs %}
-N> Install the AWSSDK.S3 NuGet package in the web service application to use the previous code example.
+N> The `AWSSDK.S3` NuGet package must be installed in the web service project to use the server example.
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-active-directory.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-active-directory.md
index d6b3d6ee9f..1c6f468ce5 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-active-directory.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-active-directory.md
@@ -11,7 +11,7 @@ documentation: ug
### Overview
-The React PDF Viewer component supports loading and saving PDF files with Azure Active Directory (AAD). The following steps describe how to securely load and store PDF documents using a server-backed web service.
+The React PDF Viewer component supports loading and saving PDF files using Azure Active Directory (AAD). This article describes a server-backed pattern to securely load and store PDF documents. It is intended for developers implementing a server-client integration that avoids exposing secrets or long-lived credentials in the browser.
### Steps to open the PDF file from Azure Active Directory
@@ -26,7 +26,7 @@ The React PDF Viewer component supports loading and saving PDF files with Azure
- In the Azure portal, go to **Azure Active Directory** > **App registrations** > **New registration**.
- Register your application and note down the **Application (client) ID** and **Directory (tenant) ID**.
- 
+ 
3. Create a client secret:
- In the registered application, go to **Certificates & secrets**.
@@ -35,7 +35,7 @@ The React PDF Viewer component supports loading and saving PDF files with Azure
- Click **Add**.
- Copy the client secret value immediately, as it will be hidden later. Store it securely.
- 
+ 
---
@@ -45,7 +45,7 @@ The React PDF Viewer component supports loading and saving PDF files with Azure
- In the Azure portal, use the search bar to search for **Storage accounts**.
- Create a new storage account by filling in the required details (e.g., name, location, resource group, etc.).
- 
+ 
---
@@ -61,7 +61,7 @@ The React PDF Viewer component supports loading and saving PDF files with Azure
- Select your application and click **Select**.
- Click **Review + assign** to finalize the role assignment.
- 
+ 
---
### Step 4: Upload the PDF document to Azure Storage
@@ -72,7 +72,7 @@ The React PDF Viewer component supports loading and saving PDF files with Azure
2. Upload the PDF file:
- Create a new container and upload the PDF document you want to access in the PDF Viewer.
- 
+ 
---
### Step 5: Server-side configuration
diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-blob-storage.md
index 168663e384..2cf896d8b7 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-blob-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-azure-blob-storage.md
@@ -9,17 +9,17 @@ documentation: ug
# Save PDF files to Azure Blob Storage in React
-The React PDF Viewer component supports saving PDF files to Azure Blob Storage using either the standalone or server-backed configuration. The following steps demonstrate both approaches.
+The React PDF Viewer component supports saving PDF files to Azure Blob Storage using either a standalone (browser) configuration or a server-backed configuration. The following steps demonstrate both approaches and include prerequisites and security guidance for production deployments.
## Using Standalone PDF Viewer
-To save a PDF file to Azure Blob Storage, follow these steps:
+Follow the steps below to save a PDF file to Azure Blob Storage from an React PDF Viewer.
**Step 1:** Create a PDF Viewer sample in React
Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample in React. This will set up the basic structure of your PDF Viewer application.
-**Step 2:** Modify the `src/app/app.ts` file in the Angular project
+**Step 2:** Modify the `src/app/app.ts` file in the React project
1. Import the required namespaces at the top of the file:
@@ -29,7 +29,7 @@ import { BlockBlobClient } from "@azure/storage-blob";
2. Add the following private property to `app.ts`, and assign the value from the configuration to the corresponding property.
-N> Replace **Your SAS Url in Azure** with the actual SAS URL for the Azure Blob Storage account.
+N> Replace **Your SAS Url in Azure** with the SAS URL generated for the target blob. For production, generate short-lived SAS tokens on the server rather than embedding SAS URLs in client code.
```typescript
var SASUrl = "*Your SAS Url in Azure*";
@@ -99,7 +99,7 @@ function saveDocument() {
}
```
-N> Install the @azure/storage-blob package in the application to use the previous code example: npm install @azure/storage-blob
+N> Install the Azure Storage Blob client package for browser use: `npm install @azure/storage-blob`. For server-side operations use `dotnet add package Azure.Storage.Blobs`.
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage/tree/master/Open%20and%20Save%20PDF%20in%20Azure%20Blob%20Storage%20using%20Standalone).
diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md
index 0c98c78f0b..a53f80cc2a 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-box-cloud-file-storage.md
@@ -9,7 +9,7 @@ documentation: ug
# Save PDF files to Box cloud file storage
-To save a PDF file to Box cloud file storage, you can follow the steps below
+The React PDF Viewer component supports saving PDF files to Box cloud file storage using a server-backed web service. This article describes a recommended server-client pattern that keeps credentials secure and shows how to upload viewer documents to a Box folder.
**Step 1:** Set up a Box developer account and create a Box application
@@ -94,7 +94,7 @@ public async Task Download([FromBody] Dictionary
}
```
-6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration.
+6. Open the `appsettings.json` file in your web service project, add the required settings below the existing `AllowedHosts` configuration
```json
{
@@ -112,7 +112,7 @@ public async Task Download([FromBody] Dictionary
}
```
-N> Replace the placeholders with the actual Box access token, folder ID, client ID, and client secret.
+N> Replace the placeholders with the appropriate Box access token, folder ID, client ID, and client secret.
**Step 4:** Set the PDF Viewer properties in the React PDF Viewer component
@@ -150,8 +150,8 @@ root.render();
```
{% endraw %}
-N> Install the Box.V2.Core NuGet package in the web service application to use the previous code example.
+N> Install the Box .NET SDK in the web service project: `dotnet add package Box.V2`.
-N> Replace `PDF_Succinctly.pdf` with the actual document name to load from Box cloud storage. Pass the document name from the Box folder to the `documentPath` property of the PDF Viewer component.
+N> Replace `PDF_Succinctly.pdf` with the actual document name to load from Box cloud storage. Pass the document name from the Box folder to the `documentPath` property of the `React PDF Viewer` component.
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-box-cloud-file-storage)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-dropbox-cloud-file-storage.md
index 0a08f26111..e673e1ac9a 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-dropbox-cloud-file-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-dropbox-cloud-file-storage.md
@@ -23,7 +23,7 @@ To create a Dropbox API App, you should follow the official documentation provid
Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample in React. This sets up the basic structure of the PDF Viewer application.
-**Step 3:** Modify the `src/app/app.ts` file in the Angular project
+**Step 3:** Modify the `src/app/app.ts` file in the React project
1. Import the required namespaces at the top of the file:
@@ -75,9 +75,9 @@ return (
{% endhighlight %}
{% endtabs %}
-3. Retrieve the PDF Viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to Dropbox using the `filesUpload` method.
+3. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to Dropbox using the `filesUpload` method of the Dropbox instance.
-N> Replace **Your Access Token** with the actual Access Token of your Drop Box account.
+N> Replace **Your Access Token** with the actual access token for the Dropbox app.
```typescript
function saveDocument() {
@@ -101,7 +101,7 @@ N> Replace **Your Access Token** with the actual Access Token of your Drop Box a
};
```
-N> Install the dropbox package in the application to use the previous code example: npm install dropbox
+N> Install the `dropbox` package in the React project before running the sample: `npm install dropbox`.
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Standalone)
@@ -111,15 +111,15 @@ To save a PDF file to Dropbox cloud file storage, you can follow the steps below
**Step 1:** Create a Dropbox API app
-To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.
+To create a Dropbox API app, follow the Dropbox .NET tutorial: [Dropbox .NET tutorial](https://www.dropbox.com/developers/documentation/dotnet#tutorial). Use the Dropbox App Console to register an app and obtain the necessary access token and permissions.
**Step 2:** Create a PDF Viewer sample in React
-Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample in React. This sets up the basic structure of the PDF Viewer application.
+Follow the Syncfusion getting-started instructions for the React PDF Viewer: [React PDF Viewer getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started). This sets up the basic PDF Viewer application structure.
**Step 3:** Modify the `PdfViewerController.cs` file in the web service project
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
+1. Create a web service project in .NET Core 3.0 or above. Refer to the Syncfusion knowledge base article on creating a PDF Viewer web service: [Create a PDF Viewer web service in .NET Core 3.0 and above](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above).
2. Open the `PdfViewerController.cs` file in your web service project.
@@ -149,7 +149,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache
}
```
-5. Modify the [Download()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Dropbox folder.
+5. Modify the `Download()` method to save the downloaded PDF files to Dropbox cloud storage
```csharp
@@ -187,7 +187,7 @@ public async Task Download([FromBody] Dictionary
```
-6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration.
+6. Open the `appsettings.json` file in the web service project and add the following entries below the existing `"AllowedHosts"` configuration
```json
{
@@ -203,7 +203,7 @@ public async Task Download([FromBody] Dictionary
}
```
-N> Replace the placeholders with the actual Dropbox access token and target folder name.
+N> Replace the placeholders with the actual Dropbox access token and folder name.
**Step 4:** Set the PDF Viewer properties in the React PDF Viewer component
@@ -225,7 +225,7 @@ function App() {
@@ -242,6 +242,8 @@ root.render();
{% endhighlight %}
{% endtabs %}
-N> Install the Dropbox.Api NuGet package in the web service application to use the previous code example.
+N> Install the `Dropbox.Api` NuGet package in the web service application to use the previous code example.
+
+N> Replace `PDF_Succinctly.pdf` with the actual document name stored in Dropbox and pass that name to the `documentPath` property of the PDF Viewer component.
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Server-Backed)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-google-cloud-storage.md
index 9be9583e40..c044b0b88c 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-google-cloud-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-google-cloud-storage.md
@@ -9,15 +9,15 @@ documentation: ug
# Save PDF files to Google Cloud Storage
-To save a PDF file to Google Cloud Storage, you can follow the steps below
+To save a PDF file to Google Cloud Storage, follow the steps below.
**Step 1:** Create a PDF Viewer sample in React
-Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample in React. This sets up the basic structure of the PDF Viewer application.
+Follow the Syncfusion getting-started instructions for the React PDF Viewer: [React PDF Viewer getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started). This sets up the basic PDF Viewer application structure.
**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
+1. Create a web service project in .NET Core 3.0 or above. Refer to the Syncfusion knowledge base article on creating a PDF Viewer web service: [Create a PDF Viewer web service in .NET Core 3.0 and above](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above).
2. Open the `PdfViewerController.cs` file in your web service project.
@@ -29,7 +29,7 @@ using Google.Cloud.Storage.V1;
using Google.Apis.Auth.OAuth2;
```
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class. In the constructor, assign configuration values to the corresponding fields.
+4. Add the following private fields and constructor parameters to the `PdfViewerController` class. In the constructor, assign the configuration values to the corresponding fields.
```csharp
// Private readonly object _storageClient
@@ -50,7 +50,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache
// Load the service account credentials from the key file.
var credentials = GoogleCredential.FromFile(keyFilePath);
- // Create a storage client with Application Default Credentials
+ // Create a storage client using the service account credentials.
_storageClient = StorageClient.Create(credentials);
_configuration = configuration;
@@ -59,7 +59,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache
}
```
-5. Modify the [Download()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Google Cloud Storage bucket.
+5. Modify the `Download()` method to save the downloaded PDF file to the Google Cloud Storage bucket.
```csharp
[HttpPost("Download")]
@@ -87,7 +87,7 @@ public IActionResult Download([FromBody] Dictionary jsonObject)
}
```
-6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration.
+6. Open the `appsettings.json` file in the web service project and add the following entries below the existing `"AllowedHosts"` configuration.
```json
{
@@ -102,9 +102,9 @@ public IActionResult Download([FromBody] Dictionary jsonObject)
}
```
-N> Replace the placeholder with the actual Google Cloud Storage bucket name.
+N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of the Google Cloud Storage bucket.
-N> Replace `path/to/service-account-key.json` with the actual file path to the service account key JSON file.
+N> Replace **path/to/service-account-key.json** with the actual file path to the service account key JSON file. Provide the correct path and filename.
**Step 3:** Set the PDF Viewer properties in the React PDF Viewer component
@@ -126,7 +126,7 @@ function App() {
@@ -142,6 +142,6 @@ root.render();
```
{% endraw %}
-N> Install the Google.Cloud.Storage.V1 NuGet package in the web service application to use the previous code example.
+N> Install the `Google.Cloud.Storage.V1` NuGet package in the web service application to use the previous code example.
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-google-cloud-storage)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-google-drive.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-google-drive.md
index 4e35c24420..956c0d8452 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-google-drive.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-google-drive.md
@@ -9,21 +9,21 @@ documentation: ug
# Save PDF files to Google Drive
-To save a PDF file to Google Drive, you can follow the steps below
+This article describes how to save a PDF file to Google Drive from the Syncfusion React PDF Viewer using a server-side web service. Follow the steps below.
**Step 1:** Set up the Google Drive API
-You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/drive/api/guides/enable-sdk).
+Create a Google Cloud project, enable the Google Drive API, and obtain OAuth 2.0 credentials. For details, see the [Google Drive](https://developers.google.com/drive/api/guides/enable-sdk) API enable guide.
**Step 2:** Create a PDF Viewer sample in React
-Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample in React. This sets up the basic structure of the PDF Viewer application.
+Create a simple PDF Viewer sample in React by following the Syncfusion PDF Viewer for React [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide. This establishes the basic application structure required for the integration.
**Step 3:** Modify the `PdfViewerController.cs` file in the web service project
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
+1. Create a [web service](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) project targeting .NET Core 3.0 or later. For guidance, see the Syncfusion knowledge base article on creating a PDF Viewer web service in .NET Core.
-2. Open the `PdfViewerController.cs` file in your web service project.
+2. Open the `PdfViewerController.cs` file in the web service project.
3. Import the required namespaces at the top of the file:
@@ -53,7 +53,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache
}
```
-5. Modify the [Download()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Google Drive folder.
+5. Modify the `Download()` method to save the downloaded PDF file to the configured Google Drive folder.
```csharp
[HttpPost("Download")]
@@ -111,7 +111,7 @@ public async Task Download([FromBody] Dictionary
}
```
-6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration.
+6. Open the `appsettings.json` file in the web service project and add the following settings below the existing `AllowedHosts` configuration.
```json
{
@@ -136,7 +136,7 @@ N> Use a valid `client_id` from the JSON file to authenticate with the Google Dr
**Step 4:** Set the PDF Viewer properties in the React PDF Viewer component
-Modify the `serviceUrl` property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from Google Drive, and ensure that the document exists in the target folder.
+Update the `serviceUrl` property of the PDF Viewer component to the web service URL, replacing `https://localhost:44396/pdfviewer` with the actual server endpoint. Set the `documentPath` property to the PDF file name that exists in the configured Google Drive folder.
{% raw %}
@@ -170,6 +170,6 @@ root.render();
```
{% endraw %}
-N> Install the Google.Apis.Drive.v3 NuGet package in the web service application to use the previous code example.
+N> Install the `Google.Apis.Drive.v3` NuGet package in the web service application to use the previous code example.
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-google-drive).
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-one-drive.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-one-drive.md
index 0366e11f49..2dcba89065 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-one-drive.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-file/to-one-drive.md
@@ -9,21 +9,21 @@ documentation: ug
# Save PDF files to OneDrive
-To save a PDF file to One Drive, you can follow the steps below
+This article describes how to save a PDF file to OneDrive from the Syncfusion React PDF Viewer using a server-side web service. Follow the steps below.
**Step 1:** Create a Microsoft Graph API application
-Need to create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs.
+Create a Microsoft Graph API application, and obtain the application (client) ID and tenant ID. For details, see the [Microsoft Graph guide](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) for accessing files in OneDrive.
**Step 2:** Create a PDF Viewer sample in React
-Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample in React. This sets up the basic structure of the PDF Viewer application.
+Create a simple PDF Viewer sample in React by following the Syncfusion PDF Viewer for React [getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide. This establishes the application structure required for the integration
**Step 3:** Modify the `PdfViewerController.cs` file in the web service project
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
+1. Create a web service project targeting .NET Core 3.0 or later. For guidance, see the Syncfusion knowledge base article on creating a PDF Viewer web service in .NET Core.
-2. Open the `PdfViewerController.cs` file in your web service project.
+2. Open the `PdfViewerController.cs` file in the web service project.
3. Import the required namespaces at the top of the file:
@@ -53,7 +53,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache
}
```
-5. Modify the [Download()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the OneDrive folder.
+5. Modify the `Download()` method to save the downloaded PDF file to the configured OneDrive folder.
```csharp
[HttpPost("Download")]
@@ -100,7 +100,7 @@ public async Task Download([FromBody] Dictionary
}
```
-6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration.
+6. Open `appsettings.json` in the web service project and add the following keys below the existing `AllowedHosts` configuration
```json
{
@@ -118,11 +118,11 @@ public async Task Download([FromBody] Dictionary
```
-N> Replace the placeholders with the actual tenant ID, application ID, and OneDrive folder name.
+N> Replace the placeholders with actual values for the Tenant ID, Application ID, and OneDrive folder name.
**Step 4:** Set the PDF Viewer properties in the React PDF Viewer component
-Modify the `serviceUrl` property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from OneDrive, and ensure that the document exists in the target folder.
+Update the `serviceUrl` property with the web service endpoint and set `documentPath` to the PDF file name stored in OneDrive. Ensure the document exists in the target OneDrive folder.
{% raw %}
@@ -156,11 +156,11 @@ root.render();
```
{% endraw %}
-N> Install the following NuGet packages in the web service application:
-- Microsoft.Identity.Client
-- Microsoft.Graph
-- Microsoft.Extensions.Configuration
-- Microsoft.Extensions.Configuration.FileExtensions
-- Microsoft.Extensions.Configuration.Json
+N> Install the following NuGet packages in the web service application when required:
+- `Microsoft.Identity.Client`
+- `Microsoft.Graph`
+- `Microsoft.Extensions.Configuration`
+- `Microsoft.Extensions.Configuration.FileExtensions`
+- `Microsoft.Extensions.Configuration.Json`
[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-one-drive)
\ No newline at end of file
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 04152db832..1790a21fe6 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md
@@ -8,26 +8,36 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Saving PDF file
+# Saving PDF Files in the React PDF Viewer
-After editing the PDF file with various annotation tools, you will need to save the updated PDF to the server, database, or local file system.
+After editing a PDF with annotation tools, you can save the updated file to a server, a database, or download it locally. The following sections show common approaches.
-## Save PDF file to Server
+### Save and Download the Edited PDF
-Need to save the modified PDF back to a server. To achieve this, proceed with the following steps
+After editing the PDF document, follow this short, linear flow to persist and retrieve the updated file:
-**Step 1:** Create a Simple PDF Viewer Sample in React
+1. Persist the edited document to your back end (server or database). See "Save modified PDF to server" and "Save modified PDF to a database" below for server-side examples.
+2. Provide the updated file to the user. For a simple download use the built-in toolbar or call the viewer API [`download()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#download).
+3. If you need the edited PDF for custom uploads or processing, use the viewer [`saveAsBlob()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#saveasblob) API to obtain a Blob (or convert it to Base64).
-Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF viewer sample in React. This will give you a basic setup of the PDF viewer component.
+This is a summary; use the detailed subsections below for full code samples and server-side instructions.
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
+## Save modified PDF to server
-2. Open the `PdfViewerController.cs` file in your web service project.
+To save the modified PDF back to a server, follow these steps.
+
+**Step 1:** Create a simple PDF Viewer sample in React
+
+Follow the [getting-started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide to create a basic PDF Viewer implementation.
+
+**Step 2:** Modify the `PdfViewerController.cs` in the web service project
+
+1. Create a web service project targeting .NET Core 3.0 or later. See this [KB Link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for details.
-3. Modify the `Download()` method to open it in the viewer using URL
+2. Open the `PdfViewerController.cs` file in your web service project.
+3. Modify the `Download()` method so it returns the modified document for the viewer to download or store.
```csharp
public IActionResult Download([FromBody] Dictionary jsonObject)
@@ -57,12 +67,13 @@ public IActionResult Download([FromBody] Dictionary jsonObject)
```
-**Step 3:** Set the PDF Viewer Properties in React PDF viewer component
+**Step 3:** Set the PDF Viewer properties in your React app
-Modify the `serviceUrl` property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server.Modify the documentPath with the correct PDF Document URL want to load.
+Set the `serviceUrl` to point to your web service (for example, replace `https://localhost:44396/pdfviewer` with your server URL). Also set `documentPath` to the document URL you want to load.
+{% tabs %}
+{% highlight js tabtitle="JSX" %}
{% raw %}
-
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
@@ -88,17 +99,19 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render();
-
{% endraw %}
+{% endhighlight %}
+{% endtabs %}
[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Save%20and%20Load/Save%20PDF%20file%20to%20server)
## Download PDF file as a copy
-In the built-in toolbar, you have an option to download the updated PDF to the local file system, you can use it to download the PDF file.
+The built-in toolbar includes a download option that saves the updated PDF to the user's local file system. You can also trigger the same behavior programmatically by calling the viewer's [`download()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#download) API.
+{% tabs %}
+{% highlight js tabtitle="JSX" %}
{% raw %}
-
import * as ReactDOM from 'react-dom/client';
import * as React from 'react';
import './index.css';
@@ -132,31 +145,30 @@ return (
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render();
-
{% endraw %}
+{% endhighlight %}
+{% endtabs %}
-## Save PDF file to Database
+## Save modified PDF to a database
-If you have plenty of PDF files stored in database and you want to save the updated PDF file back to the database, use the following code example.
+If your application stores PDF files in a database, you can save the updated PDF bytes back to the database from your web service. The following steps outline a typical server-side flow.
-**Step 1:** Create a Simple PDF Viewer Sample in React
+**Step 1:** Create the React sample viewer
-Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF viewer sample in React. This will give you a basic setup of the PDF viewer component.
+Follow the [getting-started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide to set up a basic Viewer instance.
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
+**Step 2:** Update `PdfViewerController.cs` in the web service
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
+1. Create a web service project targeting .NET Core 3.0 or later (see the KB link above). Open the `PdfViewerController.cs` file in your web service project.
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
+2. Import required namespaces:
```csharp
using System.IO;
using System.Data.SqlClient;
```
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
+3. Add configuration fields to your controller and read the connection string from configuration:
```csharp
private IConfiguration _configuration;
@@ -171,15 +183,12 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache
}
```
-5. Modify the `Download()` method to open it in the viewer using URL
+4. In the `Download()` method, convert the returned base64 document to bytes and insert it into your database (the example below uses parameterized commands to avoid SQL injection):
```csharp
-
[HttpPost("Download")]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
[Route("[controller]/Download")]
-//Post action for downloading the PDF documents
-
public async Task Download([FromBody] Dictionary jsonObject)
{
//Initialize the PDF Viewer object with memory cache object
@@ -211,7 +220,7 @@ public async Task Download([FromBody] Dictionary
}
```
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
+5. Add the connection string to `appsettings.json`:
```json
{
@@ -222,12 +231,31 @@ public async Task Download([FromBody] Dictionary
}
},
"AllowedHosts": "*",
- "ConnectionString": "Your connection string for SQL server"
+ "ConnectionString": "Your connection string for SQL Server"
}
```
-N> Replace **Your Connection string from SQL server** with the actual connection string for your SQL Server database
+N> Replace `Your connection string for SQL Server` with your actual connection string.
+
+N>: Ensure the `System.Data.SqlClient` package (or `Microsoft.Data.SqlClient`) is installed in your project. Use parameterized queries (as shown) and validate inputs to avoid SQL injection risks.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
+
+### Save to Cloud Storage Services
+
+Each link below goes to a provider page with simple, step-by-step instructions and example code for saving the edited PDF to that cloud storage service.
+
+- [AWS S3](./save-pdf-file/to-amazon-s3)
+- [Azure Blob Storage](./save-pdf-file/to-azure-blob-storage)
+- [Google Cloud Storage](./save-pdf-file/to-google-cloud-storage)
+- [Google Drive](./save-pdf-file/to-google-drive)
+- [OneDrive](./save-pdf-file/to-one-drive)
+- [Dropbox](./save-pdf-file/to-dropbox-cloud-file-storage)
+- [Box](./save-pdf-file/to-box-cloud-file-storage)
+- [Azure AD (auth notes)](./save-pdf-file/to-azure-active-directory)
+---
-N> The **System.Data.SqlClient** package must be installed in your application to use the previous code example. You need to modify the connectionString variable in the previous code example as per the connection string of your database.
+**See also**
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
\ No newline at end of file
+- [Get Base64 value from a loaded PDF using saveAsBlob API](./how-to/get-base64)
+- [Open PDF files overview](./open-pdf-files)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/text-search.md b/Document-Processing/PDF/PDF-Viewer/react/text-search.md
index 11b5f543b1..35e20c7a9b 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/text-search.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/text-search.md
@@ -7,9 +7,9 @@ platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Text search in React Pdfviewer component
+# Text search in React PDF Viewer component
-The Text Search option in PDF Viewer is used to find and highlight the text content from the document. You can enable/disable the text search using the following code snippet.
+The Text Search feature finds and highlights text in the PDF document. You can enable or disable text search using the examples below.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -77,30 +77,30 @@ root.render();
## Text search Features
-### Real time search suggestion while typing
-Entering text into the search input dynamically displays search suggestions based on the provided input. The suggestions are updated in real-time as text is typed, offering relevant matches from the available content. This feature enhances the search experience by allowing quick access to potential results while typing.
+### Real-time search suggestions while typing
+Entering text into the search input dynamically displays search suggestions based on the provided input. Suggestions update in real time as the user types, offering quick access to relevant matches.
-
+
-### Selecting Search Suggestions from the Popup
-Entering text into the search input triggers a popup displaying relevant suggestions based on the input. Selecting a suggestion from the popup enables direct navigation to its occurrences in the document.
+### Selecting search suggestions from the popup
+Selecting a suggestion from the popup navigates directly to its occurrences in the document.
-
+
-### Search Text with enabling 'Match Case' checkbox
-By enabling the 'Match Case' option and entering text into the search input, only the exact case-sensitive matches in the document are highlighted. This feature allows navigation through each occurrence of the exact text match within the document.
+### Case-sensitive search ('Match Case')
+When 'Match Case' is enabled, only exact case-sensitive matches are highlighted and navigable.
-
+
-### Search Text without enabling 'Match Case' checkbox
-When text is entered into the search input without enabling the 'Match Case' option, all instances of the text, regardless of case, are highlighted in the document. This allows easy navigation through every occurrence of the search term.
+### Case-insensitive search (no 'Match Case')
+When 'Match Case' is disabled, searches match text regardless of case and highlight all occurrences.
-
+
-### Search list of text by enabling 'Match Any Word' checkbox
-When the 'Match Any Word' option is enabled, the entered text in the search input is split into individual words based on spaces. As the text is typed, the popup dynamically displays search suggestions for each word in real time, highlighting potential matches within the document.
+### Match Any Word
+When 'Match Any Word' is enabled, the input is split into words and the viewer searches for any of the words, updating suggestions and matches in real time.
-
+
### Programmatic Search with Settings
@@ -195,17 +195,17 @@ export default function WholeWordExample() {
{% endraw %}
{% endhighlight %}
-**Note on 'Match Any Word':** The 'Match Any Word' checkbox in the UI is a feature that splits the input string into multiple words and performs a search for each of them. This is different from the `isMatchWholeWord` parameter of the `searchText` method, which enforces a whole-word match for the entire search string provided.
+**Note on 'Match Any Word':** The UI 'Match Any Word' option splits the input into multiple words and searches for any of them. This differs from the `isMatchWholeWord` parameter of `searchText`, which enforces a whole-word match for the entire search string.
-The following text search methods are available in the PDF Viewer,
+The following text search methods are available in the PDF Viewer:
-* [**Search text**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch#searchtext):- Searches the target text in the PDF document and highlights the occurrences in the pages.
-* [**Search next**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch#searchnext):- Searches the next occurrence of the searched text from the current occurrence of the PDF Viewer.
-* [**Search previous**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch#searchprevious):- Searches the previous occurrence of the searched text from the current occurrence of the PDF Viewer.
-* [**Cancel text search**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch#canceltextsearch):- The text search can be canceled and the highlighted occurrences from the PDF Viewer can be removed .
+- [**Search text**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch#searchtext): Searches the target text and highlights occurrences.
+- [**Search next**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch#searchnext): Navigates to the next occurrence.
+- [**Search previous**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch#searchprevious): Navigates to the previous occurrence.
+- [**Cancel text search**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch#canceltextsearch): Cancels the search and clears highlights.
-
+
## Find text method
Searches for the specified text or an array of strings within the document and returns the bounding rectangles for each occurrence. The search can be case-sensitive based on the provided parameters. If a specific page index is provided, it returns the bounding rectangles for these search strings on that page; otherwise, it returns the bounding rectangles for all pages in the document where the strings were found.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/text-selection.md b/Document-Processing/PDF/PDF-Viewer/react/text-selection.md
index 0dc0f18349..de89365e9b 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/text-selection.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/text-selection.md
@@ -7,13 +7,13 @@ control: Text selection
documentation: ug
domainurl: ##DomainURL##
---
-# Text selection in React PDF Viewer control
+# Text selection in React PDF Viewer component
-The TextSelection module lets users highlight and copy text from the loaded PDF. Selection is enabled by default and can be configured or monitored programmatically to match application workflows.
+The Text Selection module lets users highlight and copy text from the loaded PDF. Text selection is enabled by default and can be configured or monitored programmatically to match application workflows.
## Enable or disable text selection
-Use the `enableTextSelection` property to enable or disable choosing text in the PDF Viewer.
+Use the `enableTextSelection` property to enable or disable text selection in the PDF Viewer.
```html
@@ -154,7 +154,7 @@ root.render();
## Text selection events
-Monitor user interaction with selection events to coordinate downstream actions such as showing tooltips, enabling context menus, or storing analytics.
+Monitor selection events to coordinate downstream actions such as showing tooltips, enabling context menus, or capturing analytics.
### textSelectionStart
diff --git a/Document-Processing/PDF/PDF-Viewer/react/theming-and-styling.md b/Document-Processing/PDF/PDF-Viewer/react/theming-and-styling.md
new file mode 100644
index 0000000000..796a3d86e8
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/theming-and-styling.md
@@ -0,0 +1,221 @@
+---
+layout: post
+title: Theming and styling in React PDF Viewer component | Syncfusion
+description: Learn how to apply built-in themes, configure dark mode, and customize the UI styles of the Syncfusion React PDF Viewer component.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Theming and Styling in React PDF Viewer
+
+The React PDF Viewer supports a wide range of built-in themes and flexible UI customization to match your application's design.
+
+## Supported Themes
+
+The PDF Viewer applies styles to the toolbar, buttons, panels, annotations, and dialogs based on the selected theme. The available built-in Syncfusion themes are:
+
+* Material 3
+* Fluent 2
+* Bootstrap 5
+* Tailwind
+
+### How-to: Quick start
+
+**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`.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
+@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/tailwind3.css";
+```
+
+### Tutorial
+
+This short, guided walkthrough shows a minimal end-to-end customization flow:
+
+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
+
+5. Add additional CSS rules under `.e-custom-style` and load it after the theme CSS, and verify appearance and accessibility.
+
+## Theming for Dark Mode
+
+To provide a better viewing experience in low-light environments, you can apply dark themes or allow users to switch between light and dark modes.
+
+### Apply Dark Theme
+
+You can initialize the PDF Viewer with a dark theme by referencing the corresponding CSS:
+
+* Material 3 Dark
+* Bootstrap 5 Dark
+* Fluent 2 Dark
+* Tailwind Dark
+* Fluent 2 High Contrast
+
+### Switch between Light and Dark Mode
+
+You can dynamically change the theme in your application to toggle between light and dark modes.
+
+N> Ensure the background color of the PDF container is also updated to a dark shade when switching to a dark theme to maintain visual consistency.
+
+#### How-to: Toggle Dark Mode
+
+Below is an approach that can be copied into the app that switches themes by dynamically changing the link referenced in the style sheet in the head section of the document.
+
+**Link-swap approach:**
+
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+type ThemeName = 'material3' | 'material3-dark';
+const THEME_LINK_ID = 'e-current-theme';
+function applyTheme(theme: ThemeName) {
+ const path = `https://cdn.syncfusion.com/ej2/32.2.5/${theme}.css`;
+ let primaryThemeLink = document.querySelector(`#${THEME_LINK_ID}`) as HTMLLinkElement;
+ if (!primaryThemeLink) {
+ primaryThemeLink = document.createElement('link');
+ primaryThemeLink.id = THEME_LINK_ID;
+ primaryThemeLink.rel = 'stylesheet';
+ document.head.prepend(primaryThemeLink);
+ }
+ primaryThemeLink.href = path;
+}
+export function App() {
+ const [theme, setTheme] = useState('material3');
+ useEffect(() => {
+ applyTheme(theme);
+ }, [theme]);
+ // Simple memoized list for selector
+ const options = useMemo(
+ () => [
+ { value: 'material3', label: 'Material 3 (Light)' },
+ { value: 'material3-dark', label: 'Material 3 Dark' },
+ ],
+ []
+ );
+ return (
+
+
+
+
+
+
+
+
);
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Custom Styles
+
+While built-in themes provide a comprehensive look and feel, you might need to apply specific style overrides for your application.
+
+### Implementation Guidelines
+
+* **Load Order:** Always load the Syncfusion default theme CSS before applying any custom overrides.
+* **Custom Classes:** Prefer using `.e-custom-style` classes for overrides to ensure your styles are applied correctly without conflicting with internal logic.
+* **Avoid Deep Overrides:** Do not override internal classes deeply, as this may break the component's layout or responsiveness in future updates.
+
+#### How-to: Apply Custom Styles
+
+Apply overrides using a wrapper class so the rules are scoped and safe to maintain. The following example adds custom styles to signature form fields:
+
+{% tabs %}
+{% highlight css tabtitle="App.css" %}
+{% raw %}
+/* This rule sets a scoped, custom black background for the PDF viewer page container */
+.e-custom-style .e-pv-page-container {
+ background: #0b1220;
+}
+
+/* The following rules style the signature form fields with blue background. See screenshot below for more clarity */
+.e-custom-style .e-pdfviewer-signatureformfields,
+.e-custom-style .e-pdfviewer-signatureformfields-signature {
+ border: 1px solid #b3d1ff !important;
+ border-radius: 5px;
+}
+.e-custom-style span[id^='signIcon'] {
+ background-color: #e6f2ff !important;
+ border: 1px solid #b3d1ff !important;
+ border-radius: 4px !important;
+ font-weight: bold !important;
+ color: #003366 !important;
+ display: inline-block !important;
+ height: 100% !important;
+ text-align: center !important;
+}
+.e-custom-style span[id^='initialIcon'] {
+ background-color: #e6f2ff !important;
+ border: 1px solid #b3d1ff !important;
+ border-radius: 4px !important;
+ font-weight: bold !important;
+ color: #003366 !important;
+ display: inline-block !important;
+ height: 100% !important;
+ text-align: center !important;
+}
+{% endraw %}
+{% endhighlight %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
+import './App.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+export function App() {
+ return (
+
+
+
+
+
+ );
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Explanation
+
+This section explains the rationale behind the recommendations and common pitfalls:
+
+- Use a scoped wrapper class (for example `.e-custom-style`) to avoid fragile, global overrides that can break when internal selectors change.
+- Load order is important: theme CSS provides base variables and components' base rules; custom overrides must load after theme CSS to take effect reliably.
+- Prefer toggling theme files or a small root class rather than deep selector overrides when implementing dark mode — this makes switching simpler and reduces maintenance.
+- Avoid overusing `!important`; reserve it for third-party widgets or unavoidable form-field styling where the library applies strong specificity.
+- Always verify color-contrast and keyboard focus styles after applying themes or overrides to preserve accessibility.
+
+### Reference
+
+* [Theme Studio for Syncfusion® React components](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md
index 06795e2ca4..ec553f1cdd 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md
@@ -18,7 +18,7 @@ Show or hide the annotation toolbar programmatically during initialization or at
Use the [EnableAnnotationToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel#enableannotationtoolbar) property or the [showAnnotationToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showannotationtoolbar) method to toggle visibility.
-The following code snippet explains how to show or hide the annotation toolbar using the `showAnnotationToolbar` method.
+The following example shows how to show or hide the annotation toolbar using the `showAnnotationToolbar` method.
{% tabs %}
{% highlight ts tabtitle="app.tsx" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/custom-toolbar.md
index ed8f163783..c4d147db62 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/custom-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/custom-toolbar.md
@@ -10,13 +10,13 @@ domainurl: ##DomainURL##
# Custom Toolbar in React PDF Viewer
-The PDF Viewer provides APIs for user interaction options available in its built-in toolbar. Using these, you can create your own custom user interface for toolbar actions at the application level by hiding the default toolbar.
+The PDF Viewer provides APIs for the user interaction options available in its built-in toolbar. Using these APIs, a custom application-level toolbar can be created by hiding the default toolbar and adding Syncfusion EJ2 toolbar components.
Follow these steps to create a custom toolbar for the PDF Viewer:
**Step 1: Create a simple PDF Viewer sample.**
-Follow the steps provided in the [getting started](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) guide to create a basic PDF Viewer sample.
+Create a simple PDF Viewer sample by following the [getting started](https://ej2.syncfusion.com/react/documentation/pdfviewer/getting-started) guide.
**Step 2: Add HTML elements for the custom toolbar.**
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/form-designer-toolbar.md
index eea7401bc4..b54fcd82ff 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/form-designer-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/form-designer-toolbar.md
@@ -10,15 +10,15 @@ domainurl: ##DomainURL##
# Form Designer Toolbar Customization in React
-The form designer toolbar can be customized by showing or hiding default items and by controlling the order in which the items appear.
+Customize the form designer toolbar by showing or hiding default items and controlling the order in which items appear.
## Show or hide the form designer toolbar
-Show or hide the form designer toolbar programmatically during initialization or at runtime.
+The form designer toolbar can be shown or hidden programmatically during initialization or at runtime.
-Use the [EnableFormDesigner](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel#enableformdesigner) property or the [showFormDesignerToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showformdesignertoolbar) method to toggle visibility.
+Use the [enableFormDesigner](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel/#enableformdesigner) property to set initial visibility or call the [showFormDesignerToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/#showformdesignertoolbar) method at runtime to toggle visibility. The links below reference the corresponding API documentation.
-The following code snippet explains how to show or hide the toolbar using the `EnableFormDesigner` property.
+The following code snippet shows how to set the `enableFormDesigner` property during initialization.
{% tabs %}
{% highlight ts tabtitle="app.tsx" %}
@@ -87,9 +87,9 @@ export default App;
## How to customize the form designer toolbar
-Choose which tools appear and control their order in the form designer toolbar.
+Select which tools appear and control their order in the form designer toolbar.
-Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings) with the [`FormDesignerToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings#formdesignertoolbaritems) property to choose which form design tools are available. The property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formDesignerToolbarItem) values. The items you include are both displayed and rendered in the order listed; any items you omit are hidden. This provides a streamlined, user-friendly form design experience across devices.
+Configure [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings/) and set the [`FormDesignerToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings/#formdesignertoolbaritems) property to specify available form-design tools. This property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formDesignerToolbarItem/) values; included items are displayed in the listed order and omitted items are hidden. This produces a consistent, streamlined form-design experience across devices.
The following example demonstrates how to customize the form designer toolbar by configuring specific tools using `FormDesignerToolbarItem`.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/mobile-toolbar.md
index 3c127a6aa9..aacc6d33f8 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/mobile-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/mobile-toolbar.md
@@ -9,10 +9,11 @@ domainurl: ##DomainURL##
---
# Mobile Toolbar Interface in React Pdfviewer control
-The Mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes essential tools like search, download, bookmarking, annotation, and page organization. Users also have the option to enable desktop toolbar features in mobile mode, providing a more extensive set of actions.
+The Mobile PDF Viewer provides features for viewing, searching, annotating, and managing PDF documents on mobile devices. It exposes core tools such as search, download, bookmarking, annotation, and page organization. The desktop toolbar can also be enabled in mobile mode to expose additional actions when required.
## Mobile Mode Toolbar Configuration
-In mobile mode, the toolbar is optimized for ease of use on small screens, presenting users with the most common actions for interacting with a PDF document. Below are the key features available in mobile mode:
+
+In mobile mode, the toolbar is optimized for small screens and presents the most common actions for interacting with a PDF document. The following key features are available in mobile mode:
@@ -34,8 +35,7 @@ In mobile mode, the toolbar is optimized for ease of use on small screens, prese
-
-N> In mobile mode, the annotation toolbar is conveniently displayed at the bottom of the viewer.
+N> In mobile mode, the annotation toolbar is displayed at the bottom of the viewer.
### More Options Menu:
When you open the "more options" menu, you will see additional actions such as:
@@ -48,13 +48,13 @@ When you open the "more options" menu, you will see additional actions such as:
## Enabling Desktop Mode in Mobile
-The desktop version of the toolbar can be enabled on mobile devices by using the `enableDesktopMode` API. This API allows you to bring desktop-like features to the mobile PDF viewer, providing access to additional toolbar actions that are typically available on desktop platforms.
+The desktop toolbar can be enabled on mobile devices by setting the `enableDesktopMode` option. Enabling this option exposes desktop-style toolbar actions in the mobile PDF Viewer.
### Steps to Enable Desktop Mode:
-**Step 1:** Set `enableDesktopMode` to true in the API configuration.
+**Step 1:** Set `enableDesktopMode` to true in the component configuration.
-**Step 2:** This will replace the mobile toolbar with the desktop toolbar layout, allowing access to more actions and controls.
+**Step 2:** The viewer will use the desktop toolbar layout, granting access to additional actions and controls.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -113,7 +113,7 @@ export default App;
## Enable Scrolling in Desktop Mode with Touch Gestures
-To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, it is important to enable touch gesture scrolling. You can achieve this by setting the `enableTextSelection` option to **false**.
+To ensure smooth touch scrolling of documents on mobile devices when the desktop toolbar is enabled, set the `enableTextSelection` option to **false**. This disables text-selection interactions that can interfere with touch-based scrolling.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -174,12 +174,11 @@ export default App;
## Print Option Not Available
-The Print option is not available in mobile mode by default. However, if you need to use the print functionality on mobile devices, we recommend enabling the desktop toolbar on mobile using the `enableDesktopMode` API.
+The Print option is not available in mobile mode by default. Enabling the desktop toolbar on mobile via `enableDesktopMode` makes the Print option available.
### How to Use Print on Mobile:
-**Enable Desktop Mode:** Set `enableDesktopMode` to true to load the desktop version of the toolbar on your mobile device.
-
-**Print Option:** Once desktop mode is enabled, the print option will be available, allowing you to print the document directly from your mobile device.
+- Set `enableDesktopMode` to true to load the desktop toolbar on mobile.
+- After enabling desktop mode, the Print option appears in the toolbar and can be used to print the document from the mobile device.
-N> In mobile mode, the print functionality will not be available unless desktop mode is enabled.
\ No newline at end of file
+N> Print functionality remains unavailable in the default mobile toolbar unless desktop mode is enabled.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/primary-toolbar.md
index d30a11a6fb..9e873d0919 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/primary-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/primary-toolbar.md
@@ -10,13 +10,13 @@ domainurl: ##DomainURL##
# Primary Toolbar Customization in React PDF Viewer
-The primary toolbar of the PDF Viewer can be customized by rearranging existing items, disabling default items, and adding custom items. New items can be placed at specific index positions among the existing items.
+The primary toolbar of the PDF Viewer can be customized by rearranging existing items, disabling default items, and adding custom items. New items can be inserted at a specific index among existing toolbar items to control placement.
## Show or hide the primary toolbar
-Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI. In scenarios where a custom toolbar is required, the built-in toolbar can be hidden. Use the [enableToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel#enabletoolbar) property or the [showToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showtoolbar) method to show or hide the primary toolbar.
+Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI. When a custom toolbar is required, hide the built-in toolbar. Use the [enableToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel/#enabletoolbar) property or the [showToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/#showtoolbar) method to show or hide the primary toolbar.
-Show or hide the toolbar using the `enableToolbar` property:
+### Show or hide the toolbar using the enableToolbar property:
{% tabs %}
{% highlight ts tabtitle="app.tsx" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar.md
index 1a32f09770..3075767bda 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar.md
@@ -8,31 +8,31 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Built-In Toolbar in React Pdfviewer component
+# Built-in toolbar in React PDF Viewer component
-The PDF Viewer comes with a powerful built-in toolbar to execute important actions such as page navigation, text search,view mode,download,print,bookmark, and thumbnails.
+The PDF Viewer includes a built-in toolbar to perform common actions such as page navigation, text search, view mode, download, print, bookmarks, and thumbnails.
-The following table shows built-in toolbar items and its actions:-
+The following table lists built-in toolbar items and their actions:
| Option | Description |
|---|---|
-| OpenOption | This option provides an action to load the PDF documents to the PDF Viewer.|
-| PageNavigationTool | This option provides an action to navigate the pages in the PDF Viewer. It contains GoToFirstPage,GoToLastPage,GotoPage,GoToNext, and GoToLast tools.|
-| MagnificationTool |This option provides an action to magnify the pages either with predefined or user defined zoom factors in the PDF Viewer. Contains ZoomIn, ZoomOut, Zoom, FitPage and FitWidth tools|
-| PanTool | This option provides an action for panning the pages in the PDF Viewer.|
-| SelectionTool | This option provides an action to enable/disable the text selection in the PDF Viewer.|
-| SearchOption | This option provides an action to search a word in the PDF documents.|
-| PrintOption | This option provides an action to print the PDF document being loaded in the PDF Viewer.|
-| DownloadOption |This Download option provides an action to download the PDF document that has been loaded in the PDF Viewer.|
-| UndoRedoTool | This tool provides options to undo and redo the annotation actions performed in the PDF Viewer.|
-| AnnotationEditTool | This tool provides options to enable or disable the edit mode of annotation in the PDF Viewer.|
-| FormDesignerEditTool | This tool provides options to enable or disable the edit mode of form fields in the PDF Viewer.|
+| OpenOption | Loads PDF documents into the PDF Viewer. |
+| PageNavigationTool | Navigates pages (GoToFirstPage, GoToLastPage, GoToPage, GoToNext, GoToPrevious). |
+| MagnificationTool | Controls zoom (ZoomIn, ZoomOut, Zoom, FitPage, FitWidth). |
+| PanTool | Enables panning of pages. |
+| SelectionTool | Enables or disables text selection. |
+| SearchOption | Opens the search panel to find text in the document. |
+| PrintOption | Prints the currently loaded PDF. |
+| DownloadOption |Downloads the currently loaded PDF. |
+| UndoRedoTool | Undoes or redoes annotation actions. |
+| AnnotationEditTool | Toggles annotation edit mode. |
+| FormDesignerEditTool | Toggles form designer edit mode. |
## Show/Hide the built-in toolbar
-The PDF Viewer has an option to show or hide the complete built-in toolbar. You can achieve this by using following two ways.,
+The PDF Viewer can show or hide the built-in toolbar. You can do this in two ways:
-* **Show/Hide toolbar using enableToolbar API as in the following code snippet**
+- **Show/Hide toolbar using enableToolbar**
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -95,14 +95,14 @@ root.render();
{% endhighlight %}
{% endtabs %}
-N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` within the
element in either the `index.tsx` or `index.jsx` file:
-**serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**.
+N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` within your component:
+`serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"`.
{% previewsample "/document-processing/code-snippet/pdfviewer/react/base-cs2" %}
[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/blob/master/Toolbar/How%20to%20hide%20toolbar/src/index.js)
-* **Show/Hide toolbar using showToolbar as in the following code snippet**
+- **Show/Hide toolbar using showToolbar**
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -180,11 +180,11 @@ N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` wi
{% previewsample "/document-processing/code-snippet/pdfviewer/react/base-cs3" %}
-## Show/Hide the built-in toolbaritem
+## Show/Hide built-in toolbar items
-The PDF Viewer has an option to show or hide these grouped items in the built-in toolbar.
+You can show or hide grouped toolbar items by configuring `toolbarSettings.toolbarItems` and related settings.
-* **Show/Hide toolbaritem using toolbarSettings as in the following code snippet.**
+- **Show/Hide toolbar items using toolbarSettings**
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -252,7 +252,7 @@ N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` wi
{% previewsample "/document-processing/code-snippet/pdfviewer/react/base-cs4" %}
-* **Show/Hide toolbaritem using showToolbaritem as in the following code snippet**
+- **Show/Hide specific toolbar items using showToolbarItem**
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -670,7 +670,7 @@ The PDF Viewer provides API for user interactions options provided in it's built
{% endhighlight %}
{% endtabs %}
-**Step 3:** Import and inject the modules used for the custom toolbar,
+**Step 3:** Import and inject the modules used for the custom toolbar.
```ts
@@ -686,7 +686,7 @@ The PDF Viewer provides API for user interactions options provided in it's built
```
-**Step 4:** Hide the built-in toolbar of PDF Viewer using below code snippet,
+**Step 4:** Hide the built-in toolbar of the PDF Viewer using the snippet below.
{% tabs %}
{% highlight js tabtitle="Standalone" %}
@@ -729,7 +729,7 @@ style={{ 'display': 'block', 'height': '640px' }}>
{% endhighlight %}
{% endtabs %}
-**Step 5:** Add the following style to achieve the custom toolbar styling,
+**Step 5:** Add the following styles to achieve the custom toolbar appearance.
```
#magnificationToolbarItems {
@@ -838,7 +838,7 @@ style={{ 'display': 'block', 'height': '640px' }}>
The icons are embedded in the font file used in above code snippet.
-**Step 6:** Add the following scripts for performing user interaction in PDF Viewer in code behind
+**Step 6:** Add the following scripts for performing user interactions in the PDF Viewer.
```ts
diff --git a/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/cp-command-not-recognized.md b/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/cp-command-not-recognized.md
index 913c51e260..0040fef23f 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/cp-command-not-recognized.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/cp-command-not-recognized.md
@@ -9,15 +9,15 @@ documentation: ug
# Troubleshoot error 'cp' is not recognized as a command
-The Unix `cp` command is not available in the Windows Command Prompt. Use one of the following Windows-native alternatives to copy the required assets.
+The Unix `cp` command is not available in the Windows Command Prompt. Use one of the following Windows-native alternatives to copy the required `ej2-pdfviewer-lib` assets into a public or source folder used by the application.
-- CMD (xcopy) — recursive directory copy:
+CMD (xcopy) — recursive directory copy
```batch
xcopy /s /e /i .\node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib public\ej2-pdfviewer-lib
```
-- PowerShell (Copy-Item) — recursive directory copy:
+PowerShell (Copy-Item) — recursive directory copy
```powershell
Copy-Item .\node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib -Destination .\src\ej2-pdfviewer-lib -Recurse -Force
@@ -28,4 +28,4 @@ Notes:
- Windows paths use backslashes (\). Adjust paths if your project structure differs.
- Ensure sufficient permissions to write to the destination folder.
-For cross-platform scripts in package.json, consider tools such as "shx" or "copyfiles" to avoid OS-specific commands.
+For cross-platform scripts in `package.json`, consider tools such as `shx` or `copyfiles` to avoid OS-specific commands.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/document-loading-issues.md
index b249afc6e8..d08b6e642a 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/document-loading-issues.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/document-loading-issues.md
@@ -7,11 +7,11 @@ control: PDF Viewer
documentation: ug
---
-# Document Loading Issues in Version 23.1 or Newer
+## Document loading issues in version 23.1 or newer
-If the document does not render in the viewer when using version 23.1 or newer, follow these steps:
+If a PDF does not render in the viewer after upgrading to v23.1 or newer, use the checklist below to identify and resolve common causes. The most frequent fix is calling `dataBind()` before `load()` so data binding is initialized correctly in the newer lifecycle.
-1. Call `pdfviewer.dataBind()` before `load()`. Starting with v23.1, an explicit dataBind call is required to initialize data binding and render correctly.
+Example:
{% raw %}
```ts
@@ -50,12 +50,20 @@ root.render();
```
{% endraw %}
-2. Verify the document source. Ensure the URL or path is valid and accessible.
-3. Check network connectivity. The viewer cannot fetch the document without a stable connection.
-4. Inspect console errors. Use browser developer tools to identify issues.
-5. Validate the initialization order. Initialize the viewer, call `dataBind()`, then call `load()`.
-6. Update to the latest viewer version. Issues may be resolved in newer releases.
-7. Configure CORS correctly for cross-domain documents.
-8. Review Content Security Policy (CSP) settings. Ensure external resources are permitted. See the Content Security Policy troubleshooting guide in the Syncfusion documentation for details.
+Troubleshooting checklist (in order)
-Following this checklist typically resolves document loading issues in v23.1 or newer.
\ No newline at end of file
+1. Initialization order: call `dataBind()` before `load()` (required in v23.1+). If using React refs, ensure the ref is available before calling these methods.
+2. Verify the document source: confirm the `documentPath`, `serviceUrl`, or `resourceUrl` is correct and returns the expected content.
+3. Network connectivity: confirm the browser can reach the document URL (check network tab for failed requests).
+4. Console errors: inspect the browser console for CORS errors, 4xx/5xx responses, or runtime exceptions.
+5. CORS configuration: for cross-origin `serviceUrl` or document URLs, ensure the server sets `Access-Control-Allow-Origin` and allows the `Authorization` header if used.
+6. Content Security Policy: confirm CSP allows loading resources from the target origins (scripts, fonts, and media).
+7. Version and cache: update to the latest PDF Viewer release and clear caches (browser/Service Worker) to rule out stale assets.
+8. Server behavior: if the viewer uses a backend service, verify the service is running and returns correct responses for PDF requests.
+
+React-specific notes
+
+- Prefer using a React ref to access the `PdfViewerComponent` instance instead of `document.getElementById(...)` where possible: `const viewerRef = useRef(null);` then `` and call `viewerRef.current.dataBind()` / `viewerRef.current.load(...)` after the ref is initialized.
+- If calling `dataBind()` and `load()` from lifecycle methods or hooks, ensure they run after the component mounts (for example in `useEffect` with the correct dependencies).
+
+Following this checklist typically resolves document loading issues encountered after upgrading to v23.1 or newer.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/troubleshooting.md b/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/troubleshooting.md
index 7a7c7c1db7..2403b30a7c 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/troubleshooting.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/troubleshooting/troubleshooting.md
@@ -7,7 +7,7 @@ platform: document-processing
documentation: ug
---
-# Why Do I Have to Manually Copy Files from node_modules into My App?
+## Why do I have to manually copy files from node_modules into my app?
The PDF Viewer supports multiple build systems and can work without a bundler by referencing assets directly using HTML tags. To keep load times efficient, the library is split into smaller modules and uses lazy loading for certain assets.
@@ -16,4 +16,4 @@ The PDF Viewer supports multiple build systems and can work without a bundler by
When not using a bundler (or when the bundler does not emit these assets), copy the required files from node_modules to a web-accessible path in your app (for example, "src/ej2-pdfviewer-lib") and reference them accordingly. This ensures the viewer can fetch the lazy-loaded assets when needed and prevents runtime 404 errors.
-If a bundler is configured to emit static assets from node_modules, verify that the output contains the necessary files from "@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib" and that your app serves them from a public path. Otherwise, perform a manual copy step during your build process.
\ No newline at end of file
+If the bundler is configured to emit static assets from `node_modules`, verify that the build output contains the necessary files from `@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib` and that your app serves them from a public path. Otherwise, perform a manual or scripted copy step during your build process.
\ No newline at end of file