diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index 7dbcaf49b3..81dad01cd2 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -1082,7 +1082,12 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/react/interactive-pdf-navigation/hyperlink">Hyperlink Navigation</a></li>
 								</ul>
 							</li>
-							<li><a href="/document-processing/pdf/pdf-viewer/react/magnification">Magnification</a></li>
+							<li><a href="/document-processing/pdf/pdf-viewer/react/magnification/magnification">Magnification</a>
+								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/magnification/zoom">Zoom</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/magnification/fitmode">Fitmodes</a></li>
+								</ul>
+							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/accessibility">Accessibility</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/text-search/overview">Text Search and Extraction</a>
 								<ul>
diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/zoomPdf.png b/Document-Processing/PDF/PDF-Viewer/react/images/zoomPdf.png
new file mode 100644
index 0000000000..4f166de69d
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/zoomPdf.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/interaction-mode.md b/Document-Processing/PDF/PDF-Viewer/react/interaction-mode.md
index eb7cfe100c..eba7f3b02f 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/interaction-mode.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/interaction-mode.md
@@ -1,20 +1,27 @@
 ---
 layout: post
-title: Interaction mode in React Pdfviewer component | Syncfusion
-description: Learn here all about Interaction mode in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Interaction Mode in React PDF Viewer | Syncfusion
+description: Learn how to work with interaction modes (Pan and Text Selection) in the Syncfusion React PDF Viewer component.
 control: PDF Viewer
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Interaction mode in React PDF Viewer component
+# Interaction Mode in React PDF Viewer
 
-The PDF Viewer provides interaction modes for interacting with the loaded PDF document. Selection mode and panning mode are the two interaction modes.
+The PDF Viewer provides two interaction modes to control how users interact with the document: **Pan** mode for document navigation and **Text Selection** mode for text selection and copying.
 
-## Selection mode
+The [InteractionMode](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/interactionmode) enum defines the available interaction modes for the PDF Viewer.
 
-In this mode, users can select and copy text from the loaded PDF document. Panning and touch scrolling are disabled while text selection is enabled. Use the following snippet to enable or disable text selection.
+| Value | Description |
+|-------|-------------|
+| `TextSelection` | Enables text selection and copying. Panning is disabled. |
+| `Pan` | Enables panning and document navigation. Text selection is disabled. |
+
+## Enable pan as default interaction
+
+Set [InteractionMode](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/interactionmode) to `Pan` to enable pan mode by default. In pan mode, users can drag to navigate the document, but text selection is disabled.
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
@@ -27,23 +34,20 @@ import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
          ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
 function App() {
-
   return (<div>
     <div className='control-section'>
-    {/* Render the PDF Viewer */}
       <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"
-        enableTextSelection={true}
+        interactionMode="Pan"
         style={{ 'height': '640px' }}>
 
-              <Inject services={[ Toolbar, Annotation, Magnification, Navigation, LinkAnnotation,
-                                  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch ]} />
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch ]} />
       </PdfViewerComponent>
     </div>
   </div>);
-
 }
 const root = ReactDOM.createRoot(document.getElementById('sample'));
 root.render(<App />);
@@ -60,23 +64,20 @@ import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
          ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
 function App() {
-
   return (<div>
     <div className='control-section'>
-    {/* Render the PDF Viewer */}
       <PdfViewerComponent
         id="container"
         documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-        enableTextSelection={true}
+        interactionMode="Pan"
         serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
         style={{ 'height': '640px' }}>
 
-              <Inject services={[ Toolbar, Annotation, Magnification, Navigation, LinkAnnotation,
-                                  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch ]} />
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch ]} />
       </PdfViewerComponent>
     </div>
   </div>);
-
 }
 const root = ReactDOM.createRoot(document.getElementById('sample'));
 root.render(<App />);
@@ -85,15 +86,24 @@ root.render(<App />);
 {% endhighlight %}
 {% endtabs %}
 
-![Selection mode screenshot](./images/selection.png)
+## Switch between Pan and Text Selection
+
+Switch between Pan and Text Selection modes using the toolbar buttons in the UI or programmatically. When in Pan mode, text selection is disabled, and when in Text Selection mode, panning is disabled.
+
+### Using Toolbar
+
+The toolbar provides built-in buttons to switch between Pan and Text Selection modes without any code. Users can click the mode toggle button to switch.
 
-## Panning Mode
+**Pan Mode:** When Pan mode is active, the cursor changes to a hand icon, allowing users to drag and scroll through the document. Text selection is disabled in this mode.
 
-In this mode, panning and touch scrolling are enabled for the loaded PDF document; text selection is not available.
+![Pan](./images/pan.png)
 
-![Panning mode screenshot](./images/pan.png)
+**Selection Mode:** When Text Selection mode is active, the cursor changes to a text selection cursor, allowing users to highlight and copy text from the PDF. Panning is disabled in this mode.
 
-You can switch the PDF Viewer interaction mode using the following snippet.
+![Selection Mode](./images/selection.png)
+
+### Programmatically
+Use the [InteractionMode](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/interactionmode) property to switch modes programmatically:
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
@@ -106,24 +116,35 @@ import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
          ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
 function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const switchToPan = () => {
+    pdfViewerRef.current.interactionMode = 'Pan';
+  };
+
+  const switchToTextSelection = () => {
+    pdfViewerRef.current.interactionMode = 'TextSelection';
+  };
 
   return (<div>
+    <div style={{ marginBottom: '10px' }}>
+      <button onClick={switchToPan}>Pan Mode</button>
+      <button onClick={switchToTextSelection}>Text Selection Mode</button>
+    </div>
     <div className='control-section'>
-    {/* Render the PDF Viewer */}
       <PdfViewerComponent
+        ref={pdfViewerRef}
         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"
-        enableTextSelection={false}
-        interactionMode="interactionMode"
+        interactionMode="Pan"
         style={{ 'height': '640px' }}>
 
-              <Inject services={[ Toolbar, Annotation, Magnification, Navigation, LinkAnnotation,
-                                  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch ]} />
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch ]} />
       </PdfViewerComponent>
     </div>
   </div>);
-
 }
 const root = ReactDOM.createRoot(document.getElementById('sample'));
 root.render(<App />);
@@ -140,24 +161,217 @@ import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
          ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
 function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const switchToPan = () => {
+    pdfViewerRef.current.interactionMode = 'Pan';
+  };
+
+  const switchToTextSelection = () => {
+    pdfViewerRef.current.interactionMode = 'TextSelection';
+  };
+
+  return (<div>
+    <div style={{ marginBottom: '10px' }}>
+      <button onClick={switchToPan}>Pan Mode</button>
+      <button onClick={switchToTextSelection}>Text Selection Mode</button>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        interactionMode="Pan"
+        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch ]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable text selection (enable pan mode)
+
+Disable text selection by setting `enableTextSelection={false}` to enable pan mode for document navigation. When text selection is disabled, users can only pan through the document and cannot select or copy text.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  return (<div>
+    <div className='control-section'>
+      <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"
+        enableTextSelection={false}
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch, Annotation ]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
+function App() {
   return (<div>
     <div className='control-section'>
-    {/* Render the PDF Viewer */}
       <PdfViewerComponent
         id="container"
         documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
         enableTextSelection={false}
-        interactionMode="interactionMode"
         serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
         style={{ 'height': '640px' }}>
 
-              <Inject services={[ Toolbar, Annotation, Magnification, Navigation, LinkAnnotation,
-                                  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch ]} />
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch, Annotation ]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Programmatically toggle interaction mode during runtime
+
+Toggle interaction modes at runtime in response to events or user actions, such as when opening annotation tools.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+  const [isAnnotating, setIsAnnotating] = React.useState(false);
+
+  const handleOpenAnnotationTool = () => {
+    // Switch to TextSelection mode when opening annotation tool
+    pdfViewerRef.current.interactionMode = 'TextSelection';
+    setIsAnnotating(true);
+  };
+
+  const handleCloseAnnotationTool = () => {
+    // Switch back to Pan mode
+    pdfViewerRef.current.interactionMode = 'Pan';
+    setIsAnnotating(false);
+  };
+
+  return (<div>
+    <div style={{ marginBottom: '10px' }}>
+      <button onClick={handleOpenAnnotationTool} disabled={isAnnotating}>
+        Open Annotation Tool
+      </button>
+      <button onClick={handleCloseAnnotationTool} disabled={!isAnnotating}>
+        Close Annotation Tool
+      </button>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        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"
+        interactionMode="Pan"
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch, Annotation ]} />
       </PdfViewerComponent>
     </div>
   </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+  const [isAnnotating, setIsAnnotating] = React.useState(false);
+
+  const handleOpenAnnotationTool = () => {
+    // Switch to TextSelection mode when opening annotation tool
+    pdfViewerRef.current.interactionMode = 'TextSelection';
+    setIsAnnotating(true);
+  };
+
+  const handleCloseAnnotationTool = () => {
+    // Switch back to Pan mode
+    pdfViewerRef.current.interactionMode = 'Pan';
+    setIsAnnotating(false);
+  };
+
+  return (<div>
+    <div style={{ marginBottom: '10px' }}>
+      <button onClick={handleOpenAnnotationTool} disabled={isAnnotating}>
+        Open Annotation Tool
+      </button>
+      <button onClick={handleCloseAnnotationTool} disabled={!isAnnotating}>
+        Close Annotation Tool
+      </button>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        interactionMode="Pan"
+        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+        style={{ 'height': '640px' }}>
 
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch, Annotation ]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
 }
 const root = ReactDOM.createRoot(document.getElementById('sample'));
 root.render(<App />);
@@ -168,5 +382,6 @@ root.render(<App />);
 
 ## See also
 
-* [Toolbar items](./toolbar)
-* [Feature Modules](./feature-module)
\ No newline at end of file
+- [Magnification](./magnification/magnification) — Control zoom and fit modes
+- [Toolbar items](./toolbar-customization/overview) — Customize toolbar controls
+- [Feature Modules](./feature-module) — Enable/disable features
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/magnification.md b/Document-Processing/PDF/PDF-Viewer/react/magnification.md
deleted file mode 100644
index 952914e0d4..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/react/magnification.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-layout: post
-title: Magnification in React Pdfviewer component | Syncfusion
-description: Learn here all about Magnification in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Magnification in React Pdfviewer component
-
-The PDF Viewer includes built-in magnification tools: ZoomIn, ZoomOut, Zoom, FitPage, and FitWidth. These tools appear in the default toolbar and can be shown or hidden as needed.
-
-The following code snippet shows how to enable magnification in the PDF Viewer.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-{% raw %}
-
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import './index.css';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
-         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
-
-function App() {
-  return (<div>
-    <div className='control-section'>
-      {/* Render the PDF Viewer */}
-        <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"
-          enableMagnification={true}
-          style={{ 'height': '640px' }}>
-
-              <Inject services={[ Toolbar, Annotation, Magnification, Navigation, LinkAnnotation, BookmarkView,
-                                  ThumbnailView, Print, TextSelection, TextSearch]} />
-        </PdfViewerComponent>
-    </div>
-  </div>);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(<App />);
-
-{% endraw %}
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-{% raw %}
-
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import './index.css';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
-         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
-
-function App() {
-  return (<div>
-    <div className='control-section'>
-      {/* Render the PDF Viewer */}
-        <PdfViewerComponent
-          id="container"
-          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-          enableMagnification={true}
-          serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer" style={{ 'height': '640px' }}>
-
-              <Inject services={[ Toolbar, Annotation, Magnification, Navigation, LinkAnnotation, BookmarkView,
-                                  ThumbnailView, Print, TextSelection, TextSearch]} />
-        </PdfViewerComponent>
-    </div>
-  </div>);
-}
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(<App />);
-
-{% endraw %}
-{% endhighlight %}
-{% endtabs %}
-
-The following magnification options are available in the default toolbar of PDF Viewer,
-The following magnification options are available in the default toolbar of the PDF Viewer:
-
-- [**ZoomIn**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification/#zoomin): Zoom in from the current zoom value of the PDF pages.
-- [**ZoomOut**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification/#zoomout): Zoom out from the current zoom value of the PDF pages.
-- [**Zoom**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification/#zoomto): Zoom to a specific zoom value for the PDF pages.
-- [**FitPage**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification/#fittopage): Fit the page to the available viewport size.
-- [**FitWidth**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification/#fittowidth): Fit the page width to the viewport based on page content size.
-
-![PDF Viewer magnification toolbar](./images/zoom.png)
-
-N> The PDF Viewer supports zoom values from 10–400%.
-
-## See also
-
-* [Toolbar items](./toolbar)
-* [Feature Modules](./feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/magnification/fitmode.md b/Document-Processing/PDF/PDF-Viewer/react/magnification/fitmode.md
new file mode 100644
index 0000000000..63a73c930d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/magnification/fitmode.md
@@ -0,0 +1,547 @@
+---
+layout: post
+title: Fit Modes in React PDF Viewer | How-to Guide | Syncfusion
+description: Learn how to implement fit modes (Fit Page and Fit Width) in the Syncfusion React PDF Viewer component. Control initial view and toggle fit modes.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Fit Modes in React PDF Viewer
+
+This how-to guide demonstrates how to work with fit modes in the React PDF Viewer component. Learn how to fit pages to the viewport, set initial fit modes, toggle between modes, and handle responsive resizing.
+
+## Fit the entire page to the viewport
+
+Use the [fitToPage()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#fittopage) method to scale the PDF so the entire page fits within the available viewport size.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const handleFitPage = () => {
+    // Fit entire page to viewport
+    pdfViewerRef.current.magnification.fitToPage();
+  };
+
+  return (<div>
+    <div className='button-container' style={{ marginBottom: '10px' }}>
+      <button onClick={handleFitPage}>Fit to Page</button>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        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"
+        enableMagnification={true}
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const handleFitPage = () => {
+    // Fit entire page to viewport
+    pdfViewerRef.current.magnification.fitToPage();
+  };
+
+  return (<div>
+    <div className='button-container' style={{ marginBottom: '10px' }}>
+      <button onClick={handleFitPage}>Fit to Page</button>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        enableMagnification={true}
+        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Fit page width to the viewport
+
+Use the [fitToWidth()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#fittowidth) method to scale the PDF so the page width matches the viewport width. The height may extend beyond the visible area.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const handleFitWidth = () => {
+    // Fit page width to viewport
+    pdfViewerRef.current.magnification.fitToWidth();
+  };
+
+  return (<div>
+    <div className='button-container' style={{ marginBottom: '10px' }}>
+      <button onClick={handleFitWidth}>Fit to Width</button>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        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"
+        enableMagnification={true}
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const handleFitWidth = () => {
+    // Fit page width to viewport
+    pdfViewerRef.current.magnification.fitToWidth();
+  };
+
+  return (<div>
+    <div className='button-container' style={{ marginBottom: '10px' }}>
+      <button onClick={handleFitWidth}>Fit to Width</button>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        enableMagnification={true}
+        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Set a default fit mode on load (initial view)
+
+Set an initial fit mode when the PDF Viewer is rendered by using the [zoomMode](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/zoommode) property. The available zoom modes are:
+- [Default](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/zoommode): Default zoom mode.
+- [FitToWidth](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/zoommode): Fit page width to viewport.
+- [FitToPage](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/zoommode): Fit entire page to viewport.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  return (<div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        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"
+        enableMagnification={true}
+        zoomMode="FitToWidth"
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  return (<div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        enableMagnification={true}
+        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+        zoomMode="FitToWidth"
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Toggle Fit Page / Fit Width from a custom toolbar
+
+Create custom toolbar buttons to toggle between fit modes. This gives users control over how the PDF is displayed.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+  const [currentFitMode, setCurrentFitMode] = React.useState('width');
+
+  const handleFitPage = () => {
+    pdfViewerRef.current.magnification.fitToPage();
+    setCurrentFitMode('page');
+  };
+
+  const handleFitWidth = () => {
+    pdfViewerRef.current.magnification.fitToWidth();
+    setCurrentFitMode('width');
+  };
+
+  return (<div>
+    <div className='custom-toolbar' style={{ marginBottom: '10px', padding: '10px', backgroundColor: '#f0f0f0' }}>
+      <button 
+        onClick={handleFitPage}
+        style={{ fontWeight: currentFitMode === 'page' ? 'bold' : 'normal' }}
+      >
+        Fit Page
+      </button>
+      <button 
+        onClick={handleFitWidth}
+        style={{ fontWeight: currentFitMode === 'width' ? 'bold' : 'normal' }}
+      >
+        Fit Width
+      </button>
+      <p style={{ margin: '5px 0', fontSize: '12px', color: '#666' }}>
+        Current mode: {currentFitMode === 'page' ? 'Fit Page' : 'Fit Width'}
+      </p>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        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"
+        enableMagnification={true}
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+  const [currentFitMode, setCurrentFitMode] = React.useState('width');
+
+  const handleFitPage = () => {
+    pdfViewerRef.current.magnification.fitToPage();
+    setCurrentFitMode('page');
+  };
+
+  const handleFitWidth = () => {
+    pdfViewerRef.current.magnification.fitToWidth();
+    setCurrentFitMode('width');
+  };
+
+  return (<div>
+    <div className='custom-toolbar' style={{ marginBottom: '10px', padding: '10px', backgroundColor: '#f0f0f0' }}>
+      <button 
+        onClick={handleFitPage}
+        style={{ fontWeight: currentFitMode === 'page' ? 'bold' : 'normal' }}
+      >
+        Fit Page
+      </button>
+      <button 
+        onClick={handleFitWidth}
+        style={{ fontWeight: currentFitMode === 'width' ? 'bold' : 'normal' }}
+      >
+        Fit Width
+      </button>
+      <p style={{ margin: '5px 0', fontSize: '12px', color: '#666' }}>
+        Current mode: {currentFitMode === 'page' ? 'Fit Page' : 'Fit Width'}
+      </p>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        enableMagnification={true}
+        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Combine fit mode with user zoom (when to override vs respect last zoom)
+
+When combining fit modes with manual zoom, decide whether fit actions should override the last zoom level or be combined. A common pattern is to reset to fit mode when explicitly called, while respecting manual zoom for programmatic zoom changes.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+  const [lastZoom, setLastZoom] = React.useState(100);
+
+  const handleFitPage = () => {
+    // Fit mode overrides last zoom
+    pdfViewerRef.current.magnification.fitToPage();
+  };
+
+  const handleFitWidth = () => {
+    // Fit mode overrides last zoom
+    pdfViewerRef.current.magnification.fitToWidth();
+  };
+
+  const handleRestoreZoom = () => {
+    // Restore previously saved zoom level
+    pdfViewerRef.current.magnification.zoomTo(lastZoom);
+  };
+
+  const onZoomChange = (args) => {
+    // Capture user's manual zoom level
+    setLastZoom(Math.round(args.previousZoomValue));
+  };
+
+  return (<div>
+    <div className='toolbar' style={{ marginBottom: '10px', padding: '10px', backgroundColor: '#f0f0f0' }}>
+      <button onClick={handleFitPage}>Fit Page</button>
+      <button onClick={handleFitWidth}>Fit Width</button>
+      <button onClick={handleRestoreZoom}>Restore Zoom ({lastZoom}%)</button>
+      <p style={{ margin: '5px 0', fontSize: '12px', color: '#666' }}>
+        Fit modes override zoom. Use Restore to return to last manual zoom.
+      </p>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        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"
+        enableMagnification={true}
+        onZoomChange={onZoomChange}
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+  const [lastZoom, setLastZoom] = React.useState(100);
+
+  const handleFitPage = () => {
+    // Fit mode overrides last zoom
+    pdfViewerRef.current.magnification.fitToPage();
+  };
+
+  const handleFitWidth = () => {
+    // Fit mode overrides last zoom
+    pdfViewerRef.current.magnification.fitToWidth();
+  };
+
+  const handleRestoreZoom = () => {
+    // Restore previously saved zoom level
+    pdfViewerRef.current.magnification.zoomTo(lastZoom);
+  };
+
+  const onZoomChange = (args) => {
+    // Capture user's manual zoom level
+    setLastZoom(Math.round(args.previousZoomValue));
+  };
+
+  return (<div>
+    <div className='toolbar' style={{ marginBottom: '10px', padding: '10px', backgroundColor: '#f0f0f0' }}>
+      <button onClick={handleFitPage}>Fit Page</button>
+      <button onClick={handleFitWidth}>Fit Width</button>
+      <button onClick={handleRestoreZoom}>Restore Zoom ({lastZoom}%)</button>
+      <p style={{ margin: '5px 0', fontSize: '12px', color: '#666' }}>
+        Fit modes override zoom. Use Restore to return to last manual zoom.
+      </p>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        enableMagnification={true}
+        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+        onZoomChange={onZoomChange}
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Fit mode behavior and calculation
+
+- **Fit to Page:** Scales the PDF page to fit within the available viewport (both width and height constrained).
+- **Fit to Width:** Scales the PDF to match the viewport width (height may extend beyond visible area).
+- **Fit calculations:** Consider the page box, page rotation, DPI/render scale, and container dimensions.
+- **Multi-page layouts:** Fit modes apply to the currently visible page; they work the same in continuous and single-page views.
+
+N> Fit modes automatically recalculate based on the current page dimensions and container size. If you change container size, fit mode dimensions are recomputed accordingly.
+
+## See also
+
+- [Magnification overview](./magnification)
+- [Zoom how-to](./zoom)
+- [Toolbar items](./toolbar)
+- [Feature Modules](./feature-module)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/magnification/magnification.md b/Document-Processing/PDF/PDF-Viewer/react/magnification/magnification.md
new file mode 100644
index 0000000000..0fccd986e6
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/magnification/magnification.md
@@ -0,0 +1,156 @@
+---
+layout: post
+title: Magnification in React PDF Viewer | Syncfusion
+description: Learn about magnification controls in the Syncfusion React PDF Viewer component. Explore zoom and fit modes to enhance document viewing experience.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Magnification in React PDF Viewer
+
+Magnification enables users to control how PDF content is displayed in the viewport. The PDF Viewer provides two primary approaches to magnification: **zoom** for precise scaling control and **fit modes** for viewport-optimized display.
+
+![PDF Viewer magnification controls](../images/zoom.png)
+
+## Overview
+
+The magnification feature allows you to enhance the reading experience by scaling PDF pages to fit different viewing preferences. Whether you need precise zoom levels for detailed inspection or automatic fit modes for optimal viewport usage, the PDF Viewer provides comprehensive magnification capabilities.
+
+### Key Features
+
+- **Flexible Zoom Control** — Zoom in and out with manual or programmatic control
+- **Fit Modes** — Automatically scale pages to fit the entire viewport or width
+- **Default Zoom Modes** — Set initial zoom behavior on document load
+- **Responsive Scaling** — Adapt to container and window resize events
+- **Zoom Range** — Supported zoom range from 10% to 400%
+- **Toolbar Integration** — Built-in toolbar controls for common magnification actions
+
+## Magnification Controls
+
+The following magnification controls are available in the default toolbar:
+
+- [**Zoom In**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#zoomin): Increase the zoom level of the PDF pages incrementally.
+- [**Zoom Out**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#zoomout): Decrease the zoom level of the PDF pages incrementally.
+- [**Zoom To**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#zoomto): Set a specific zoom percentage for the PDF pages.
+- [**Fit to Page**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#fittopage): Scale the entire page to fit within the available viewport.
+- [**Fit to Width**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#fittowidth): Scale the page width to match the viewport width.
+
+## Enable Magnification
+
+To enable magnification features in the PDF Viewer, set the [enableMagnification](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enablemagnification) property to `true` and inject the [Magnification](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#magnification) service.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  return (<div>
+    <div className='control-section'>
+      {/* Render the PDF Viewer with magnification enabled */}
+        <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"
+          enableMagnification={true}
+          style={{ 'height': '640px' }}>
+
+              <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                  ThumbnailView, Print, TextSelection, TextSearch]} />
+        </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  return (<div>
+    <div className='control-section'>
+      {/* Render the PDF Viewer with magnification enabled */}
+        <PdfViewerComponent
+          id="container"
+          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+          enableMagnification={true}
+          serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+          style={{ 'height': '640px' }}>
+
+              <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                  ThumbnailView, Print, TextSelection, TextSearch]} />
+        </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Magnification Types
+
+### Zoom
+The zoom feature provides precise control over the display scale. Users can:
+- Zoom in to view details more clearly
+- Zoom out to see more of the page at once
+- Set specific zoom percentages programmatically
+- Initialize with a default zoom level
+
+Learn more: [Zoom How-to Guide](./zoom)
+
+### Fit Modes
+Fit modes automatically scale pages to optimize the viewing experience. Users can:
+- Fit entire pages to the viewport
+- Fit page width to the viewport for horizontal scrolling
+- Set initial fit mode on document load
+- Toggle between different fit modes dynamically
+
+Learn more: [Fit Modes How-to Guide](./fitmode)
+
+## Zoom Range and Limits
+
+The PDF Viewer supports zoom values from **10% to 400%** by default. All zoom operations are automatically clamped to this range:
+- Values below 10% are adjusted to 10%
+- Values above 400% are adjusted to 400%
+- Both UI and programmatic zoom changes respect these limits
+
+You can override the defaults using the [minZoom](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#minzoom) and [maxZoom](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#maxzoom) properties on the `PdfViewerComponent` (defaults: `minZoom = 10`, `maxZoom = 400`).
+
+Learn more: [Zoom Range and Limits Guide](./zoom#zoom-range-and-limits)
+
+## Common Use Cases
+
+| Use Case | Solution |
+|----------|----------|
+| Set initial document zoom on load | Use [zoomMode](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/zoommode) property with "FitToWidth" or "FitToPage" |
+| Allow users to zoom with buttons | Implement custom buttons with [zoomIn()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#zoomin), [zoomOut()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#zoomout) , [zoomTo()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#zoomto)  methods |
+| Maintain zoom during page navigation | Zoom state is automatically preserved when navigating between pages |
+| Respond to zoom level changes | Listen to the [zoomChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#zoomchange) event and update custom UI |
+| Fit page to container resize | Implement debounced resize handler to reapply fit mode |
+
+## Related Topics
+
+- [Zoom How-to](./zoom) — Detailed guide on zoom functionality and programmatic control
+- [Fit Modes How-to](./fitmode) — Detailed guide on fit modes and responsive scaling
+- [Toolbar Items](../toolbar-customization/overview) — Customize toolbar magnification controls
+- [Feature Modules](../feature-module) — Enable/disable specific PDF Viewer features
+- [Navigation](../interactive-pdf-navigation/overview) — Navigate between pages while managing magnification
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/magnification/zoom.md b/Document-Processing/PDF/PDF-Viewer/react/magnification/zoom.md
new file mode 100644
index 0000000000..0b09840d9c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/magnification/zoom.md
@@ -0,0 +1,740 @@
+---
+layout: post
+title: Zoom in React PDF Viewer | How-to Guide | Syncfusion
+description:  Learn how to implement zoom functionality in the Syncfusion React PDF Viewer component. Enable zooming and programmatically control zoom levels.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Zoom in React PDF Viewer
+
+This how-to guide demonstrates how to work with zoom functionality in the React PDF Viewer component. Learn how to enable magnification, control zoom programmatically, set default zoom levels, and respond to zoom changes.
+
+![PDF Viewer zoom controls](../images/zoomPdf.png)
+
+## Enable zooming
+
+To enable zoom functionality in the PDF Viewer, set the [enableMagnification](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enablemagnification) property to `true` and inject the [Magnification](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#magnification) service.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  return (<div>
+    <div className='control-section'>
+      {/* Render the PDF Viewer with magnification enabled */}
+        <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"
+          enableMagnification={true}
+          style={{ 'height': '640px' }}>
+
+              <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                  ThumbnailView, Print, TextSelection, TextSearch]} />
+        </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  return (<div>
+    <div className='control-section'>
+      {/* Render the PDF Viewer with magnification enabled */}
+        <PdfViewerComponent
+          id="container"
+          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+          enableMagnification={true}
+          serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+          style={{ 'height': '640px' }}>
+
+              <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                  ThumbnailView, Print, TextSelection, TextSearch]} />
+        </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Zoom in and out using toolbar and programmatically
+
+The zoom controls are automatically available in the toolbar when magnification is enabled. Users can click the **Zoom In** and **Zoom Out** buttons to adjust the zoom level.
+
+To zoom in or out programmatically, use the [zoomIn()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#zoomin) and [zoomOut()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#zoomout) methods on the magnification instance.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const handleZoomIn = () => {
+    pdfViewerRef.current.magnification.zoomIn();
+  };
+
+  const handleZoomOut = () => {
+    pdfViewerRef.current.magnification.zoomOut();
+  };
+
+  return (<div>
+    <div className='button-container' style={{ marginBottom: '10px' }}>
+      <button onClick={handleZoomIn}>Zoom In</button>
+      <button onClick={handleZoomOut}>Zoom Out</button>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        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"
+        enableMagnification={true}
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const handleZoomIn = () => {
+    pdfViewerRef.current.magnification.zoomIn();
+  };
+
+  const handleZoomOut = () => {
+    pdfViewerRef.current.magnification.zoomOut();
+  };
+
+  return (<div>
+    <div className='button-container' style={{ marginBottom: '10px' }}>
+      <button onClick={handleZoomIn}>Zoom In</button>
+      <button onClick={handleZoomOut}>Zoom Out</button>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        enableMagnification={true}
+        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Set a specific zoom value
+
+Use the [zoomTo()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#zoomto) method on the magnification instance to set the PDF to a specific zoom level. You can specify the zoom level as a percentage value.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const handleZoom150 = () => {
+    pdfViewerRef.current.magnification.zoomTo(150);
+  };
+
+  const handleZoom200 = () => {
+    pdfViewerRef.current.magnification.zoomTo(200);
+  };
+
+  const handleZoom75 = () => {
+    pdfViewerRef.current.magnification.zoomTo(75);
+  };
+
+  return (<div>
+    <div className='button-container' style={{ marginBottom: '10px' }}>
+      <button onClick={handleZoom75}>75%</button>
+      <button onClick={handleZoom150}>150%</button>
+      <button onClick={handleZoom200}>200%</button>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        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"
+        enableMagnification={true}
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const handleZoom150 = () => {
+    pdfViewerRef.current.magnification.zoomTo(150);
+  };
+
+  const handleZoom200 = () => {
+    pdfViewerRef.current.magnification.zoomTo(200);
+  };
+
+  const handleZoom75 = () => {
+    pdfViewerRef.current.magnification.zoomTo(75);
+  };
+
+  return (<div>
+    <div className='button-container' style={{ marginBottom: '10px' }}>
+      <button onClick={handleZoom75}>75%</button>
+      <button onClick={handleZoom150}>150%</button>
+      <button onClick={handleZoom200}>200%</button>
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        enableMagnification={true}
+        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Initialize the viewer with a default zoom (on load)
+
+Set an initial zoom level when the document is first loaded by using the document-loaded event. Call [zoomTo()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#zoomto) in the [documentLoad](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentload) event handler.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const onDocumentLoaded = () => {
+    // Set default zoom to 150% when document is loaded
+    pdfViewerRef.current.magnification.zoomTo(150);
+  };
+
+  return (<div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        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"
+        enableMagnification={true}
+        documentLoad={onDocumentLoaded}
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const onDocumentLoaded = () => {
+    // Set default zoom to 150% when document is loaded
+    pdfViewerRef.current.magnification.zoomTo(150);
+  };
+
+  return (<div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        enableMagnification={true}
+        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+        documentLoad={onDocumentLoaded}
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable user zoom while allowing programmatic zoom
+
+To restrict users from zooming via the UI while still allowing your application to control zoom programmatically, use [toolbarSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbarsettings) with custom toolbar items that exclude zoom controls. Combine this with custom application buttons to provide controlled zoom access.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  LinkAnnotation,
+  BookmarkView,
+  ThumbnailView,
+  Print,
+  TextSelection,
+  TextSearch,
+  Inject,
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const handleZoom150 = () => {
+    pdfViewerRef.current.magnification.zoomTo(150);
+  };
+
+  const handleZoom200 = () => {
+    pdfViewerRef.current.magnification.zoomTo(200);
+  };
+
+  return (
+    <div>
+      {/* Custom Application Toolbar */}
+      <div
+        style={{
+          marginBottom: '10px',
+          padding: '10px',
+          backgroundColor: '#f0f0f0',
+        }}
+      >
+        <button onClick={handleZoom150}>Zoom 150%</button>
+        <button onClick={handleZoom200}>Zoom 200%</button>
+        <p style={{ fontSize: '12px', color: '#666' }}>
+          Zoom level is controlled by the application.
+        </p>
+      </div>
+
+      {/* PDF Viewer */}
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        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"
+        enableMagnification={true}
+        toolbarSettings={{
+          toolbarItems: [
+            'OpenOption',
+            'PageNavigationTool',
+            'AnnotationEditTool',
+            'FormDesignerEditTool',
+            'PrintOption',
+          ],
+        }}
+        style={{ height: '640px' }}
+      >
+        <Inject
+          services={[
+            Toolbar,
+            Magnification,
+            Navigation,
+            LinkAnnotation,
+            BookmarkView,
+            ThumbnailView,
+            Print,
+            TextSelection,
+            TextSearch,
+          ]}
+        />
+      </PdfViewerComponent>
+    </div>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  LinkAnnotation,
+  BookmarkView,
+  ThumbnailView,
+  Print,
+  TextSelection,
+  TextSearch,
+  Inject,
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+
+  const handleZoom150 = () => {
+    pdfViewerRef.current.magnification.zoomTo(150);
+  };
+
+  const handleZoom200 = () => {
+    pdfViewerRef.current.magnification.zoomTo(200);
+  };
+
+  return (
+    <div>
+      {/* Custom Application Toolbar */}
+      <div
+        style={{
+          marginBottom: '10px',
+          padding: '10px',
+          backgroundColor: '#f0f0f0',
+        }}
+      >
+        <button onClick={handleZoom150}>Zoom 150%</button>
+        <button onClick={handleZoom200}>Zoom 200%</button>
+        <p style={{ fontSize: '12px', color: '#666' }}>
+          Zoom level is controlled by the application.
+        </p>
+      </div>
+
+      {/* PDF Viewer */}
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        enableMagnification={true}
+        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+        toolbarSettings={{
+          toolbarItems: [
+            'OpenOption',
+            'PageNavigationTool',
+            'AnnotationEditTool',
+            'FormDesignerEditTool',
+            'PrintOption',
+          ],
+        }}
+        style={{ height: '640px' }}
+      >
+        <Inject
+          services={[
+            Toolbar,
+            Magnification,
+            Navigation,
+            LinkAnnotation,
+            BookmarkView,
+            ThumbnailView,
+            Print,
+            TextSelection,
+            TextSearch,
+          ]}
+        />
+      </PdfViewerComponent>
+    </div>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Handle zoom changes
+
+Listen for zoom change events on the magnification instance and update custom UI elements (such as a zoom indicator or zoom dropdown) accordingly. Use the [zoomChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#zoomchange) event to respond to zoom level changes.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+  const [zoomLevel, setZoomLevel] = React.useState(100);
+
+  const onZoomChange = (args) => {
+    // Update custom UI with new zoom level from magnification event
+    setZoomLevel(Math.round(args.zoomValue));
+  };
+
+  return (<div>
+    <div className='zoom-indicator' style={{ marginBottom: '10px' }}>
+      Current Zoom: {zoomLevel}%
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        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"
+        enableMagnification={true}
+        zoomChange={onZoomChange}
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  const pdfViewerRef = React.useRef(null);
+  const [zoomLevel, setZoomLevel] = React.useState(100);
+
+  const onZoomChange = (args) => {
+    // Update custom UI with new zoom level from magnification event
+    setZoomLevel(Math.round(args.zoomValue));
+  };
+
+  return (<div>
+    <div className='zoom-indicator' style={{ marginBottom: '10px' }}>
+      Current Zoom: {zoomLevel}%
+    </div>
+    <div className='control-section'>
+      <PdfViewerComponent
+        ref={pdfViewerRef}
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        enableMagnification={true}
+        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+        onZoomChange={onZoomChange}
+        style={{ 'height': '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+      </PdfViewerComponent>
+    </div>
+  </div>);
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+## Zoom range and limits
+
+The PDF Viewer supports zoom values from 10% to 400% by default. You can override these limits using the [minZoom](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#minzoom) and [maxZoom](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#minzoom) properties on the `PdfViewerComponent`.
+
+- [minZoom](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#minzoom) (number): Specifies the minimum acceptable zoom level for the control. Default: `10`.
+- [maxZoom](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#minzoom) (number): Specifies the maximum allowable zoom level for the control. Default: `400`.
+
+Below are full example snippets that show how to set custom `minZoom` and `maxZoom` values (Standalone and Server-Backed):
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  return (
+    <div>
+      <div className='control-section'>
+        <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"
+          enableMagnification={true}
+          minZoom={50}
+          maxZoom={300}
+          style={{ height: '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+        </PdfViewerComponent>
+      </div>
+    </div>
+  );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+{% endraw %}
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+{% raw %}
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import './index.css';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+         ThumbnailView, Print, TextSelection, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
+
+function App() {
+  return (
+    <div>
+      <div className='control-section'>
+        <PdfViewerComponent
+          id="container"
+          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+          enableMagnification={true}
+          serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+          minZoom={50}
+          maxZoom={300}
+          style={{ height: '640px' }}>
+
+            <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+                                ThumbnailView, Print, TextSelection, TextSearch]} />
+        </PdfViewerComponent>
+      </div>
+    </div>
+  );
+}
+const root = ReactDOM.createRoot(document.getElementById('sample'));
+root.render(<App />);
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+The [zoomTo()](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/magnification#zoomto) method will clamp values outside the configured `minZoom`/`maxZoom` range to the nearest valid limit.
+
+N> Zoom values are clamped between the configured `minZoom` and `maxZoom`. Attempting to zoom beyond these limits will set the zoom to the nearest boundary value.
+
+## See also
+
+- [Magnification overview](./magnification)
+- [Fit modes](./fitmode)
+- [Toolbar items](../toolbar-customization/overview)
+- [Feature Modules](../feature-module)