diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index 2deb2e40a1..345ddbbbfe 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -923,6 +923,12 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/react/save-pdf-file/to-azure-active-directory">To Azure Active Directory</a></li>
 								</ul>
 							</li>
+							<li>Document Handling
+								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/document-handling/load-large-pdf">Load Large PDF Files</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/document-handling/load-password-pdf">Load Password Protected PDFs</a></li>
+								</ul>
+							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/mobile-toolbar">Mobile Toolbar Interface</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/toolbar">Toolbar Customization</a> 
 							    <ul>
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..c6f382fd92
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-large-pdf.md
@@ -0,0 +1,190 @@
+---
+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)
+```tsx
+<Inject services={[Toolbar, Magnification, Navigation, Print]} />
+```
+
+---
+
+### 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
+```tsx
+			<PdfViewerComponent
+				id="container"
+				documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+				resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+				style={{ height: '640px' }}
+				enableLocalStorage={true}
+			>
+				<Inject services={[Toolbar, Magnification, Navigation, Print, Annotation, FormFields]} />
+			</PdfViewerComponent>
+```
+
+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..05697bac9c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/load-password-pdf.md
@@ -0,0 +1,89 @@
+---
+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
+
+![Open PDF Document](../images/open-pdf.png)
+
+2. A **password input popup** is automatically displayed
+
+![Password Protected Pop-up](../images/password-popup.png)
+
+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:
+
+```tsx
+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:
+
+```tsx
+    <PdfViewerComponent
+        id="container"
+        //Load URL for Password Protected Document 
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+        style={{ height: '640px' }}
+    >
+```
+
+The viewer will:
+
+- Detect encryption
+- Show the **password popup automatically**
+- Allow the user to enter the correct password
+- Then load the PDF
+
+![Password Protected Pop-up](../images/password-popup.png)
+
+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..f099a0dc08
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/preprocess-pdf.md
@@ -0,0 +1,130 @@
+---
+layout: post
+title: Preprocess PDF Document Before Displaying in React PDF Viewer | Syncfusion
+description: Learn how to preprocess PDF documents using Syncfusion PDF Library before displaying them in the React PDF Viewer. This includes merging, extracting, flattening, watermarking, and loading processed files.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Preprocess 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.
+
+![Import Pages](../images/import.gif)
+
+### 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.
+
+![Extract Pages](../images/extract-page.png)
+
+### 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)
+
+![Custom Stamp](../images/customStamp.png)
+
+### 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..b15638726f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/document-handling/retrieve-loadedDoc.md
@@ -0,0 +1,268 @@
+---
+layout: post
+title: Retrieve the Loaded Document Instance 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. Retrieve metadata, page details, and safely call viewer APIs after the document is ready.
+control: PDF Viewer
+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) lifecycle 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.
+
+```jsx
+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 (
+    <div className="control-section">
+      <PdfViewerComponent
+        id="container"
+        ref={viewerRef}
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+        style={{ height: '640px' }}
+        enableLocalStorage={true}
+        documentLoad={onDocumentLoad}
+      >
+        <Inject services={[Toolbar, Magnification, Navigation, Print]} />
+      </PdfViewerComponent>
+    </div>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+```
+
+**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
+
+```jsx
+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 (
+    <div>
+      <div style={{ marginBottom: 12 }}>
+        <strong>Status:</strong> {ready ? 'Document loaded' : 'Loading…'}
+        <br />
+        {ready && (
+          <>
+            <div>File: {docInfo.name || '(unknown)'}</div>
+            <div>Pages: {docInfo.pageCount != null ? docInfo.pageCount : '(unknown)'}</div>
+            <div>Author: {docInfo.author || '(n/a)'}</div>
+            <div>Title: {docInfo.title || '(n/a)'}</div>
+          </>
+        )}
+      </div>
+
+      <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
+        <button onClick={() => zoomTo(100)} disabled={!ready}>Zoom 100%</button>
+        <button onClick={() => zoomTo(150)} disabled={!ready}>Zoom 150%</button>
+        <button onClick={() => goTo(1)} disabled={!ready}>Go to Page 1</button>
+        <button onClick={() => goTo(5)} disabled={!ready}>Go to Page 5</button>
+        <button onClick={printDoc} disabled={!ready}>Print</button>
+        <button onClick={downloadDoc} disabled={!ready}>Download</button>
+      </div>
+
+      <div style={{ height: '80vh' }}>
+        <PdfViewerComponent
+          id="pdfViewer"
+          ref={viewerRef}
+          // If you use a server for rendering, set it here:
+          // serviceUrl="https://your-server/api/pdfviewer"
+
+          // For quick local run, use a public sample:
+          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+
+          // If you're running purely client-side, make sure resourceUrl matches your package version:
+          // resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+          resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+          documentLoad={handleDocumentLoad}
+          style={{ height: '100%', width: '100%' }}
+        >
+          <Inject services={[Toolbar, Magnification, Navigation, Print, TextSelection, TextSearch]} />
+        </PdfViewerComponent>
+      </div>
+    </div>
+  );
+}
+
+// Render like your previous example (ensure an element with id="sample" exists in index.html)
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+```
+
+---
+
+## 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/images/open-pdf.png b/Document-Processing/PDF/PDF-Viewer/react/images/open-pdf.png
new file mode 100644
index 0000000000..f82d0440f3
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/open-pdf.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/password-popup.png b/Document-Processing/PDF/PDF-Viewer/react/images/password-popup.png
new file mode 100644
index 0000000000..2a3a3263c9
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/password-popup.png differ