From 0068100dbca97df2e71f59931712762cb0f21b37 Mon Sep 17 00:00:00 2001
From: VenkadaSubramanian-Durai <venkadasubramanian.d@syncfusion.com>
Date: Mon, 23 Feb 2026 18:10:20 +0530
Subject: [PATCH 1/2] 1010807: Diataxis changes for React PDF Viewer getting
 started

---
 Document-Processing-toc.html                  |  13 +-
 .../nextjs-getting-started.md                 |  60 ++--
 .../react/depoyment-integration/preact.md     |  76 ++++
 .../react/depoyment-integration/remix.md      | 213 +++++++++++
 .../depoyment-integration/share-point.md      | 168 +++++++++
 .../PDF/PDF-Viewer/react/forms/custom-data.md |  18 +-
 .../react/getting-started-overview.md         |  33 ++
 .../PDF/PDF-Viewer/react/open-pdf-files.md    | 333 ++++++++----------
 .../PDF/PDF-Viewer/react/preact.md            | 195 ----------
 .../PDF/PDF-Viewer/react/save-pdf-files.md    | 100 +++---
 10 files changed, 752 insertions(+), 457 deletions(-)
 rename Document-Processing/PDF/PDF-Viewer/react/{ => depoyment-integration}/nextjs-getting-started.md (57%)
 create mode 100644 Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md
 delete mode 100644 Document-Processing/PDF/PDF-Viewer/react/preact.md

diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index 51d2283bfb..81076a7b9c 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -887,11 +887,20 @@
 					<li>
 						<a href="/document-processing/pdf/pdf-viewer/react/overview">React</a>
 						<ul>
-							<li>Getting Started
+							<li>
+								<a href="/document-processing/pdf/pdf-viewer/react/getting-started-overview">Getting Started</a>
 								<ul>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started">with Standalone PDF Viewer</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
-									<li><a href="/document-processing/pdf/pdf-viewer/react/preact">Preact</a></li>
+								</ul>
+							</li>
+							<li>
+								Environment Integration
+								<ul>
+                                    <li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/nextjs-getting-started">NextJS</a></li>
+                                    <li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/share-point">SharePoint Framework (SPFx)</a></li>
+                                    <li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/preact">Preact</a></li>
+                                    <li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/remix">Remix</a></li>
 								</ul>
 							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/feature-module">Feature Modules</a></li>
diff --git a/Document-Processing/PDF/PDF-Viewer/react/nextjs-getting-started.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md
similarity index 57%
rename from Document-Processing/PDF/PDF-Viewer/react/nextjs-getting-started.md
rename to Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md
index 4dbafe7720..60bf34744c 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/nextjs-getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md
@@ -1,16 +1,16 @@
 ---
 layout: post
 title: React getting started with Next.js | Syncfusion
-description: Check out and learn here all about how to use the Syncfusion React UI components in the Next.js project.
+description: Check out and learn here all about how to use the Syncfusion React PDF Viewer in the Next.js project.
 control: PDF Viewer
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Creating a Next.js Application Using Syncfusion<sup style="font-size:70%">&reg;</sup> React Components
+# Creating a Next.js application using Syncfusion React PDF Viewer
 
-This section provides a step-by-step guide for setting up a Next.js application and integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> React PDF Viewer component.
+This guide shows how to set up a Next.js application and integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> React PDF Viewer component.
 
 ## What is Next.js?
 
@@ -22,7 +22,9 @@ Before getting started with the Next.js application, ensure the following prereq
 
 * [Node.js 18.17](https://nodejs.org/en) or later.
 
-* The application is compatible with macOS, Windows, and Linux operating systems.
+ * The application is compatible with macOS, Windows, and Linux operating systems.
+
+* See the [System requirements](../../../../System-Requirements) for detailed platform requirements.
 
 ## Create a Next.js application
 
@@ -41,52 +43,49 @@ yarn create next-app
 {% endhighlight %}
 {% endtabs %}
 
-Using one of the above commands will lead you to set up additional configurations for the project as below:
-
-1.Define the project name: Users can specify the name of the project directly. Let's specify the name of the project as `ej2-nextjs-pdfviewer`.
+Using one of the above commands will prompt for project configuration options.
 
+1. Define the project name. For example: `ej2-next-js-pdfviewer`.
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
-√ What is your project named? » ej2-nextjs-pdfviewer
+√ What is your project named? » ej2-next-js-pdfviewer
 
 {% endhighlight %}
 {% endtabs %}
 
-2.Select the required packages.
-
+2. Select the required packages.
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
-√ What is your project named? ... ej2-nextjs-pdfviewer
+√ What is your project named? ... ej2-next-js-pdfviewer
 √ Would you like to use TypeScript? ... No / `Yes`
 √ Would you like to use ESLint? ... No / `Yes`
 √ Would you like to use Tailwind CSS? ... `No` / Yes
 √ Would you like to use `src/` directory? ... No / `Yes`
 √ Would you like to use App Router? (recommended) ... No / `Yes`
 √ Would you like to customize the default import alias? ... `No`/ Yes
-Creating a new Next.js app in D:\ej2-nextjs-pdfviewer.
+Creating a new Next.js app in D:\ej2-next-js-pdfviewer.
 
 {% endhighlight %}
 {% endtabs %}
 
-3.Once complete the above mentioned steps to create `ej2-nextjs-pdfviewer`, navigate to the directory using the below command:
-
+3. After the project is created, navigate to the project directory:
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
-cd ej2-nextjs-pdfviewer
+cd ej2-next-js-pdfviewer
 
 {% endhighlight %}
 {% endtabs %}
 
-The application is ready to run with default settings. Now, let's add Syncfusion<sup style="font-size:70%">&reg;</sup> components to the project.
+The application is ready to run with default settings. Next, add Syncfusion<sup style="font-size:70%">&reg;</sup> components to the project.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> React packages
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion<sup style="font-size:70%">&reg;</sup> React components in the project, install the corresponding npm package.
+Syncfusion<sup style="font-size:70%">&reg;</sup> React packages are available on npm. Install the package for the component required by the project.
 
-Here, the [React PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) is used as an example. To install the React PDF Viewer component in the project, use the following command:
+This guide uses the [React PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) component as an example. Install it with:
 
 {% tabs %}
 {% highlight bash tabtitle="NPM" %}
@@ -103,13 +102,16 @@ yarn add @syncfusion/ej2-react-pdfviewer
 
 ## Import Syncfusion<sup style="font-size:70%">&reg;</sup> CSS styles
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> React components come with [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/), which are available in the installed packages. It’s easy to adapt the Syncfusion<sup style="font-size:70%">&reg;</sup> React components to match the style of your application by referring to one of the built-in themes.
+Syncfusion<sup style="font-size:70%">&reg;</sup> React components include built-in themes. Import the PDF Viewer theme and base styles to match the look and feel of the application.
 
-Import the `Material` theme into the **src/app/globals.css** file and removed the existing styles in that file, as shown below:
+/* Where to add the imports: */
+/* - App Router: put these in `src/app/globals.css` */
+/* - Pages Router: put them in `pages/_app.js` or its imported global CSS */
 
 {% tabs %}
 {% highlight css tabtitle="globals.css" %}
 
+/* PDF Viewer theme and base styles */
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@@ -122,13 +124,13 @@ Import the `Material` theme into the **src/app/globals.css** file and removed th
 {% endhighlight %}
 {% endtabs %}
 
-> To know more about built-in themes and CSS reference for individual components, refer to the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/) section.
+N> To learn more about built-in themes and CSS references for individual components, see the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation.
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> React component
+## Add the Syncfusion<sup style="font-size:70%">&reg;</sup> React component
 
-Follow the below steps to add the React PDF Viewer componente to the Next.js project:
+Follow these steps to add the React PDF Viewer component to the Next.js project:
 
-1.Define the PDF Viewer component in the **src/app/page.tsx** file, as shown below:
+1. Define the PDF Viewer component in `src/app/page.tsx`, as shown below:
 
 {% tabs %}
 {% highlight ts tabtitle="page.tsx" %}
@@ -143,7 +145,7 @@ return (<div>
         <PdfViewerComponent
             id="container"
             documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-            serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+            resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
             style={{ 'height': '640px' }}>
                {/* Inject the required services */}
                <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
@@ -175,6 +177,10 @@ yarn run dev
 {% endhighlight %}
 {% endtabs %}
 
-To learn more about the functionality of the PDF Viewer component, refer to the [documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started#module-injection).
+To learn more about the PDF Viewer component, see the [documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started#module-injection).
+
+N> [View the Next.js PDF Viewer sample in the GitHub repository](https://github.com/SyncfusionExamples/syncfusion-react-pdfviewer-component-in-nextjs)
+
+**See also**
 
-> [View the NEXT.js PDF Viewer sample in the GitHub repository](https://github.com/SyncfusionExamples/syncfusion-react-pdfviewer-component-in-nextjs).
+- [Adding Next.js Configuration for deployment](../getting-started#adding-nextjs-configuration)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md
new file mode 100644
index 0000000000..1747e463b7
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md
@@ -0,0 +1,76 @@
+---
+layout: post
+title: Getting started with Syncfusion React PDF Viewer in Preact Application
+description: Provides a short overview and essential task links for integrating and using the Syncfusion React PDF Viewer within Preact.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+
+# Getting started with Syncfusion React PDF Viewer in Preact
+
+This page is a short, task-focused overview for integrating the Syncfusion React PDF Viewer into a [Preact](https://preactjs.com/) app. Use the short sections below for quick tasks; a minimal full example is provided as an optional reference.
+
+[Preact](https://preactjs.com/) is a lightweight React alternative that preserves the React-compatible API. Use Preact when you want smaller bundle size while reusing the React viewer components.
+## Setup
+
+How‑to: Create a Preact project and install the Syncfusion package.
+
+```bash
+npm init preact   # choose JavaScript or TypeScript as needed
+cd my-project
+npm install @syncfusion/ej2-react-pdfviewer --save
+# or
+yarn init preact
+yarn add @syncfusion/ej2-react-pdfviewer
+```
+
+## Import CSS
+
+How‑to: Add the required Syncfusion theme and component CSS to `src/style.css`.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-react-pdfviewer/styles/material3.css';
+```
+
+Note: keep import order consistent with component dependencies.
+
+## Add component
+
+How‑to: Render a minimal `PdfViewerComponent` in `src/index.js`.
+
+Prefer a single `Add component` example using the CDN `resourceUrl` (no server required). Replace the CDN version as needed.
+
+```js
+import { render } from 'preact';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+import './style.css';
+
+function App() {
+  return (
+    <PdfViewerComponent
+      id="container"
+      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+      resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
+      style={{ height: '640px' }}>
+      <Inject services={[Toolbar, Magnification, Navigation, Annotation]} />
+    </PdfViewerComponent>
+  );
+}
+
+render(<App />, document.getElementById('app'));
+```
+
+**See also**
+
+- [Getting started with the Syncfusion React PDF Viewer](../getting-started-overview)
+- [System requirements for Syncfusion React PDF Viewer](../../../../System-Requirements)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md
new file mode 100644
index 0000000000..067c084a23
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md
@@ -0,0 +1,213 @@
+---
+layout: post
+title: Getting started with Syncfusion React PDF Viewer with React Router
+description: Short quickstart for integrating the Syncfusion React PDF Viewer into a React application using React Router v7 (standalone/client-only rendering).
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# React Router v7 Quickstart
+
+N> Remix's framework features were merged into React Router v7 and later. This guide targets React Router v7's framework-mode and shows a client-only (standalone) integration of the Syncfusion React PDF Viewer.
+
+## Prerequisites
+
+- Node.js (recommended >= 18)
+- A React Router app (see steps below) or an existing React Router project
+- React 18+
+- See the [System requirements](../../../../System-Requirements) for platform details.
+
+## Project layout (which starter you used)
+
+Different starters create different folder layouts. Pick the mapping that matches your project and follow the file locations shown below.
+
+- create-react-router (framework-mode — `app/` tree)
+  - Global CSS: `app/app.css` (imported by `root.ts`)
+  - Component: `app/components/PdfViewerClient.ts`
+  - Route: `app/routes/home.ts` or `app/routes/index.ts`
+
+- Vite / plain React (traditional — `src/` tree)
+  - Global CSS: `src/index.css` (imported from `src/main.ts`)
+  - Component: `src/components/PdfViewerClient.ts`
+  - Route wrapper: `src/App.ts` + `BrowserRouter` in `src/main.ts`
+
+Use the file paths that match your project layout when following the steps below.
+
+## Step 1 — Create a React + React Router (v7) app
+
+If you want the React Router framework-mode project (creates an `app/` tree), use the official scaffolding tool:
+
+```bash
+npx create-react-router@latest remix-pdf-viewer
+# follow prompts (pick your preferred package manager and options)
+cd remix-pdf-viewer
+npm install
+npm run dev
+```
+
+If you prefer a Vite-based React project (creates a `src/` tree), create it with Vite and add React Router v7:
+
+```bash
+npm create vite@latest my-app -- --template react
+cd my-app
+npm install
+npm install react-router@7 react-router-dom@7
+npm run dev
+```
+
+## Step 2 — Install the PDF Viewer package
+
+```bash
+npm install @syncfusion/ej2-react-pdfviewer --save
+```
+
+## Step 3 — Copy viewer runtime assets to `public`
+
+The PDF Viewer requires runtime assets (pdfium.js, pdfium.wasm, supporting files). Copy them from the `ej2-pdfviewer` package to your `public` folder so `resourceUrl` can point to `/ej2-pdfviewer-lib`.
+
+Unix/macOS (or Git Bash / WSL):
+
+```bash
+cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib public/ej2-pdfviewer-lib
+```
+
+Windows PowerShell:
+
+```powershell
+Copy-Item -Path .\node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib -Destination .\public\ej2-pdfviewer-lib -Recurse
+```
+
+Confirm `public/ej2-pdfviewer-lib` contains `pdfium.js` and `pdfium.wasm`.
+
+## Step 4 — Add global CSS for the viewer
+
+Place the Syncfusion CSS imports in your project's global stylesheet. Choose the path that matches your project layout.
+
+create-react-router (`app/` tree)
+
+ - File: `app/app.css` (or similar global CSS imported by `root.ts`)
+
+Vite / plain React (`src/` tree)
+
+ - File: `src/index.css` (imported from `src/main.ts`)
+
+Example CSS (same for both):
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
+```
+
+Then import the stylesheet according to your starter:
+
+create-react-router (`app/root.ts` or `app/root.ts`): ensure the global CSS is imported or linked from `root` following the starter conventions.
+
+Vite / plain React (`src/main.ts`):
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);
+```
+
+## Step 5 — Client-only rendering
+
+The PDF Viewer depends on browser APIs and WebAssembly; avoid server-side rendering it. Render it only after the component mounts. Create a client-only component in the folder that matches your project layout.
+
+create-react-router (`app/` tree)
+
+ - `app/components/PdfViewerClient.ts`
+
+Vite / plain React (`src/` tree)
+
+ - `src/components/PdfViewerClient.ts`
+
+Example component (works in either location):
+
+```ts
+// components/PdfViewerClient.ts
+import React, { useEffect, useState } from 'react';
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  Inject,
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function PdfViewerClient() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="control-section">
+      <PdfViewerComponent
+        id="container"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        resourceUrl={`${window.location.origin}/ej2-pdfviewer-lib`}
+        style={{ height: '640px' }}
+      >
+        <Inject services={[Toolbar, Magnification, Navigation, Annotation]} />
+      </PdfViewerComponent>
+    </div>
+  );
+}
+```
+
+Routing / usage examples:
+
+create-react-router (`app/routes/home.ts` or `app/routes/index.ts`):
+
+```ts
+import PdfViewerClient from '../components/PdfViewerClient';
+
+export default function Home() {
+  return <PdfViewerClient />;
+}
+```
+
+Vite / plain React (`src/App.ts`):
+
+```ts
+import { Routes, Route } from 'react-router-dom';
+import PdfViewerClient from './components/PdfViewerClient';
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<PdfViewerClient />} />
+    </Routes>
+  );
+}
+```
+
+## Step 6 — Run the app
+
+```bash
+npm run dev
+# open the URL printed by the dev server (usually http://localhost:3000)
+```
+
+## See also
+
+- [Getting started overview](../getting-started-overview)
+- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md
new file mode 100644
index 0000000000..3bf7f0c5d1
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md
@@ -0,0 +1,168 @@
+---
+layout: post
+title: Syncfusion React PDF Viewer in SharePoint
+description: Quickstart to integrate the Syncfusion React PDF Viewer into an SPFx React web part (standalone/client-side rendering).
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Syncfusion React PDF Viewer in SPFx
+
+## Overview
+
+This quickstart shows how to integrate the Syncfusion React PDF Viewer into a SharePoint Framework (SPFx) React web part. It covers creating the web part, installing the `@syncfusion/ej2-react-pdfviewer` package, adding the required CSS, supplying runtime assets either from the Syncfusion CDN or from Site Assets, and a minimal TypeScript component that renders a PDF in the browser (client‑only).
+
+## Prerequisites
+
+- A SharePoint development environment and an Office 365 tenant (for testing/deployment).
+- Node.js compatible with your SPFx version (check SPFx docs).
+- Yeoman and the SPFx generator: `npm install -g yo @microsoft/generator-sharepoint`.
+- Gulp: `npm install -g gulp-cli`.
+
+## Step 1 — Create an SPFx React web part
+
+Run the SharePoint generator and choose the React framework (TypeScript recommended). Example answers shown in parentheses.
+
+```bash
+yo @microsoft/sharepoint
+# Solution name: pdfviewer-spfx
+# Target: SharePoint Online only (latest)
+# Component type: WebPart
+# Web part name: PdfViewer
+# Framework: React
+```
+
+This creates the usual SPFx project tree (no `src/`/`app/` ambiguity): React components live under `src/webparts/pdfViewer/components` and global web part assets are under `src/webparts/pdfViewer/assets`.
+
+## Step 2 — Install Syncfusion package
+
+In the project root run:
+
+```bash
+npm install @syncfusion/ej2-react-pdfviewer --save
+```
+
+Keep the package version aligned with the runtime assets you host (see Step 4).
+
+## Step 3 — Add Syncfusion CSS
+
+Import the Syncfusion theme CSS so the viewer styles are bundled with the web part. In your React component file (TypeScript example below) import the CSS from node_modules:
+
+```ts
+import '@syncfusion/ej2-base/styles/material.css';
+import '@syncfusion/ej2-buttons/styles/material.css';
+import '@syncfusion/ej2-dropdowns/styles/material.css';
+import '@syncfusion/ej2-inputs/styles/material.css';
+import '@syncfusion/ej2-navigations/styles/material.css';
+import '@syncfusion/ej2-popups/styles/material.css';
+import '@syncfusion/ej2-splitbuttons/styles/material.css';
+import '@syncfusion/ej2-pdfviewer/styles/material.css';
+```
+
+If your SPFx build configuration forbids direct CSS imports from node_modules, add these `@import` lines to your component CSS (for example `PdfViewer.module.css`) using the appropriate path or deploy the CSS from a CDN.
+
+## Step 4 — Provide runtime assets and choose rendering mode
+
+SPFx web parts run in the browser (client-side). That makes standalone (client-only) rendering the natural default: the PDF Viewer runs in the user's browser and uses `resourceUrl` to load runtime assets (pdfium.js, pdfium.wasm and supporting files).
+
+Two deployment options for those runtime assets:
+
+- Recommended — Use Syncfusion CDN (fast, simplest): set `resourceUrl` to the CDN folder that matches your package version, e.g.:
+
+```ts
+resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
+```
+
+- Self‑hosted — Upload `ej2-pdfviewer-lib` to a public CDN or to a SharePoint library (for example, Site Assets). If you upload to Site Assets, use the full site URL for `resourceUrl`, for example:
+
+```ts
+resourceUrl = "https://contoso.sharepoint.com/sites/YourSite/SiteAssets/ej2-pdfviewer-lib";
+```
+
+Notes on rendering modes and SPFx:
+
+- Standalone (client-only): fully supported in SPFx — set `resourceUrl` as above and the viewer will render entirely in the browser. This is the recommended, simplest approach for SPFx web parts.
+- Server‑backed (optional): to use server-side rendering, set `serviceUrl` (pointing to your PDF rendering web service) instead of `resourceUrl`.
+
+Important: ensure any host you use serves `.wasm` files with Content-Type `application/wasm` and that tenant/content security policies permit fetching assets from the chosen host.
+
+## Step 5 — Add the React component (TypeScript)
+
+Create `PdfViewerClient.tsx` under `src/webparts/pdfViewer/components` and paste the minimal example below. This component is client-only and safe for SPFx (which runs in the browser):
+
+```jsx
+// src/webparts/pdfViewer/components/PdfViewerClient.tsx
+import * as React from 'react';
+import {
+  PdfViewerComponent,
+  Toolbar,
+  Magnification,
+  Navigation,
+  Annotation,
+  Inject,
+} from '@syncfusion/ej2-react-pdfviewer';
+import '@syncfusion/ej2-pdfviewer/styles/material.css';
+
+export const PdfViewerClient: React.FC = () => {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
+
+  return (
+    <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"
+        style={{ height: '640px' }}
+      >
+        <Inject services={[Toolbar, Magnification, Navigation, Annotation]} />
+      </PdfViewerComponent>
+    </div>
+  );
+};
+
+export default PdfViewerClient;
+```
+
+## Step 6 — Use the component in the web part
+
+Open the web part main React file (for example `src/webparts/pdfViewer/components/PdfViewer.tsx` created by the generator) and render `PdfViewerClient`:
+
+```jsx
+import * as React from 'react';
+import PdfViewerClient from './PdfViewerClient';
+
+export default function PdfViewer(): JSX.Element {
+  return (
+    <div className="pdfViewer">
+      <PdfViewerClient />
+    </div>
+  );
+}
+```
+
+## Step 7 — Test and package
+
+Run the local workbench for development:
+
+```bash
+gulp serve
+# open the local workbench or use SharePoint Online workbench for hosted assets
+```
+
+To package for deployment (when using self‑hosted assets make sure they are uploaded to your CDN or Site Assets before installing the package):
+
+```bash
+gulp bundle --ship
+gulp package-solution --ship
+```
+
+## See also
+
+- [Getting started overview](../getting-started-overview)
+- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started)
+- [Getting started with Syncfusion React PDF Viewer in Preact](./nextjs-getting-started)
+- [Getting started with Syncfusion React PDF Viewer in Remix](./nextjs-getting-started)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/custom-data.md b/Document-Processing/PDF/PDF-Viewer/react/forms/custom-data.md
index 12f4bd9f20..2f6d6fd5de 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/forms/custom-data.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/forms/custom-data.md
@@ -95,6 +95,14 @@ import './index.css';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
 export function App() {
+  const defaultTextFieldSettings = {
+    name: 'Textbox',
+    customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' }
+  };
+  const defaultCheckBoxFieldSettings = {
+    name: 'Checkbox',
+    customData: { consentType: 'marketing', defaultChecked: false }
+  };
   return (
     <div>
       <div className='control-section'>
@@ -104,14 +112,8 @@ export function App() {
           resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
           style={{ height: '680px' }}
           // Example: default custom data for all new Textbox fields added from the toolbar
-          textFieldSettings={{
-            name: 'Textbox',
-            customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' }
-          }}
-          checkBoxFieldSettings ={{
-            name: 'Checkbox',
-            customData: { consentType: 'marketing', defaultChecked: false }
-          }}
+          textFieldSettings={defaultTextFieldSettings}
+          checkBoxFieldSettings={defaultCheckBoxFieldSettings}
         >
           <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
             Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md
new file mode 100644
index 0000000000..b7977b80fd
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started-overview.md
@@ -0,0 +1,33 @@
+---
+layout: post
+title: Getting started with Syncfusion React PDF Viewer component| Syncfusion
+description: Learn here all about Getting started with Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more details.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+
+# Getting started with Syncfusion React PDF Viewer
+
+
+If you're starting to integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> React PDF Viewer into your application, choose the path below that matches how you'll run the viewer in your app (client-only or via a web service) and follow that tutorial.
+
+- **Standalone** — Run the viewer entirely in the browser (no server rendering). This mode delivers excellent runtime performance and responsiveness because rendering and interaction happen on the client; it is ideal for quick prototyping and simple integrations.
+- **Server‑backed** — Use a web service to perform PDF Viewer operations (rendering, document processing, or streaming). Choose this path when you need server-side processing for PDF Viewer operations.
+
+This page is intentionally a short introduction — choose a path and follow its tutorial:
+
+- [Standalone tutorial](./getting-started)
+- [Server‑backed tutorial](./getting-started-with-server-backed)
+
+**Related**
+
+- [Annotations](./annotation/text-markup-annotation)
+- [Form designer](./forms/form-designer)
+- [Organize pages](./organize-pages/overview)
+
+**See also**
+
+- [PDF Viewer overview](../overview)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/open-pdf-files.md b/Document-Processing/PDF/PDF-Viewer/react/open-pdf-files.md
index 8e1f673ef8..9484a25e47 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/open-pdf-files.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/open-pdf-files.md
@@ -1,249 +1,212 @@
 ---
 layout: post
-title: Open PDF files in React Pdfviewer component | Syncfusion
-description: This page helps you to learn about how to load PDF files from various locations in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Load and Open PDF Files in the React PDF Viewer | Syncfusion
+description: How to load and display PDF documents in the Syncfusion React PDF Viewer from different sources (URL, Base64, Blob, file input, and cloud storage).
 control: PDF Viewer
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Open PDF files
+# Load and Open PDF Files in the React PDF Viewer
 
-You might need to open and view the PDF files from various location. In this section, you can find the information about how to open PDF files from URL, database and as base64 string.
+This page shows how to load and display PDF documents in the Syncfusion React PDF Viewer. The first section gives a minimal "load and display" example you can try immediately; the second section shows how to open PDFs from different source types (URL, Base64, Blob and cloud storage).
 
-## Opening a PDF from URL
+## Load and Display a PDF Document
 
-If you have your PDF files in the web, you can open it in the viewer using URL.
+This simple example demonstrates the minimal steps to show a PDF document in the viewer. It uses the [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) API to point to a publicly accessible PDF URL. For more advanced scenarios (server processing, streaming), see the Server‑backed tutorial.
 
-**Step 1:** Create a Simple PDF Viewer Sample in React
+1. Create a small React app with the PDF Viewer (see [getting-started](./getting-started-overview)).
+2. Set `documentPath` to a publicly accessible URL.
 
-Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF viewer sample in React. This will give you a basic setup of the PDF viewer component.
-
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Modify the `Load()` method to open it in the viewer using URL
-
-```csharp
-
-public IActionResult Load([FromBody] Dictionary<string, string> jsonData)
-{
-  // Initialize the PDF viewer object with memory cache object
-  PdfRenderer pdfviewer = new PdfRenderer(_cache);
-  MemoryStream stream = new MemoryStream();
-  object jsonResult = new object();
-
-  if (jsonObject != null && jsonObject.ContainsKey("document"))
-  {
-    if (bool.Parse(jsonObject["isFileName"]))
-    {
-      string documentPath = GetDocumentPath(jsonData["document"]);
-      if (!string.IsNullOrEmpty(documentPath))
-      {
-        byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
-        stream = new MemoryStream(bytes);
-      }
-      else
-      {
-        string fileName = jsonData["document"].Split(new string[] { "://" }, StringSplitOptions.None)[0];
-        if (fileName == "http" || fileName == "https")
-        {
-          WebClient WebClient = new WebClient();
-          byte[] pdfDoc = WebClient.DownloadData(jsonData["document"]);
-          stream = new MemoryStream(pdfDoc);
-        }
-        else
-        {
-          return this.Content(jsonData["document"] + " is not found");
-        }
-      }
-    }
-    else
-    {
-      byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
-      stream = new MemoryStream(bytes);
-    }
-  }
-  jsonResult = pdfviewer.Load(stream, jsonObject);
-  return Content(JsonConvert.SerializeObject(jsonResult));
-}
-
-```
-
-**Step 3:**  Set the PDF Viewer Properties in React PDF viewer component
-
-Modify the `serviceUrl` property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server.Modify the documentPath with the correct PDF Document URL want to load.
-
-{% raw %}
-
-```ts
-
-import * as ReactDOM from 'react-dom';
+Example (TypeScript / React):
+```jsx
 import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
-         Print, TextSelection, Annotation, TextSearch, Inject, FormDesigner, FormFields} from '@syncfusion/ej2-react-pdfviewer';
+         Print, TextSelection, Annotation, TextSearch, Inject, FormDesigner, FormFields } from '@syncfusion/ej2-react-pdfviewer';
 
 function App() {
-  return (<div>
-    <div className='control-section'>
-      {/* Render the PDF Viewer */}
-        <PdfViewerComponent
-          id="container"
-          // Replace  correct PDF Document URL want to load
-          documentPath="https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf"
-          // Replace the "localhost:44396" with the actual URL of your server
-          serviceUrl="https://localhost:44396/pdfviewer"
-          style={{ 'height': '640px' }}>
-
-              <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
-                                  Print, TextSelection, TextSearch, FormDesigner, FormFields ]} />
-
-        </PdfViewerComponent>
-    </div>
-  </div>);
+  return (
+    <PdfViewerComponent
+      id="container"
+      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+      resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
+      style={{ height: '640px' }}>
+      <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
+                                Print, TextSelection, TextSearch, FormDesigner, FormFields ]} />
+    </PdfViewerComponent>
+  );
 }
-const root = ReactDOM.createRoot(document.getElementById('sample'));
-root.render(<App />);
 
+const root = ReactDOM.createRoot(document.getElementById('sample') as HTMLElement);
+root.render(<App />);
 ```
-{% endraw %}
 
-[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Save%20and%20Load/Load%20PDF%20file%20from%20URL)
 
-## Opening a PDF from base64 data
+## Open PDF Files Using Different Source Types
 
-The following code steps how the PDF file can be loaded in PDF Viewer as base64 string.
+Below are concise instructions and short snippets for loading PDFs from several source types. Each subsection links to or describes the minimal approach — keep these pages as focused how-to guides if you expand them.
+### Open PDF from URL
 
-**Step 1:** Create a Simple PDF Viewer Sample in Angular
+- Set  [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) to the external URL (see example above).
+- Note: the remote server must permit cross-origin requests (CORS); the external file must allow CORS if hosted on a different domain.
 
-Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a simple PDF viewer sample in Angular. This will give you a basic setup of the PDF viewer component.
+### Open PDF from a Base64 string
 
-**Step 2:** Use the following code snippet to load the PDF document using a base64 string.
+- Use the viewer  [`load()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#load) API or set  [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) to a data URI:
 
+```js
+// Using load API
+const viewerRef = useRef(null);
+const loadBase64 = (base64String: string) => {
+  viewerRef.current?.load('data:application/pdf;base64,' + base64String, null);
+};
 ```
-  <button onClick={load}>LoadDocumentFromBase64</button>
 
-  <script>
-    // Load PDF document from Base64 string
-    function load(){
-      var viewer = document.getElementById('container').ej2_instances[0];
+- Recommendation: avoid Base64 for very large files (memory and payload size concerns).
 
-      viewer.load('data:application/pdf;base64,'+ AddBase64String, null);
-    }
-  </script>
-```
+### Open PDF from a Blob
 
-[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Save%20and%20Load/Load%20PDF%20file%20from%20base64%20string)
+- Fetch a Blob and create an object URL, then load it into the viewer:
 
-## Opening a PDF from database
+```js
+const viewerRef = useRef(null);
+fetch(url)
+  .then(r => r.blob())
+  .then(blob => {
+    const objectUrl = URL.createObjectURL(blob);
+    viewerRef.current?.load(objectUrl, null);
+  });
+```
 
-To load a PDF file from SQL Server database in a PDF Viewer, you can follow the steps below
 
-**Step 1:** Create a Simple PDF Viewer Sample in React
+  ### Open PDF from database
 
-Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF viewer sample in React. This will give you a basic setup of the PDF viewer component.
+  To load a PDF file from SQL Server database in a PDF Viewer, you can follow the steps below
 
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
+  **Step 1:** Create a Simple PDF Viewer Sample in React
 
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
+  Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF viewer sample in React. This will give you a basic setup of the PDF viewer component.
 
-2. Open the `PdfViewerController.cs` file in your web service project.
+  **Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
 
-3. Import the required namespaces at the top of the file:
+  1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
 
-```csharp
-using System.IO;
-using System.Data.SqlClient;
-```
+  2. Open the `PdfViewerController.cs` file in your web service project.
 
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
+  3. Import the required namespaces at the top of the file:
 
-```csharp
-private IConfiguration _configuration;
-public readonly string _connectionString;
+  ```csharp
+  using System.IO;
+  using System.Data.SqlClient;
+  ```
 
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
-  _hostingEnvironment = hostingEnvironment;
-  _cache = cache;
-  _configuration = configuration;
-  _connectionString = _configuration.GetValue<string>("ConnectionString");
-}
-```
+  4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
 
-5. Modify the `Load()` method to open it in the viewer using URL
+  ```csharp
+  private IConfiguration _configuration;
+  public readonly string _connectionString;
 
-```csharp
+  public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
+  {
+    _hostingEnvironment = hostingEnvironment;
+    _cache = cache;
+    _configuration = configuration;
+    _connectionString = _configuration.GetValue<string>("ConnectionString");
+  }
+  ```
+
+  5. Modify the `Load()` method to open it in the viewer using URL
 
-public IActionResult Load([FromBody] Dictionary<string, string> jsonData)
-{
-  // Initialize the PDF viewer object with memory cache object
-  PdfRenderer pdfviewer = new PdfRenderer(_cache);
-  MemoryStream stream = new MemoryStream();
-  object jsonResult = new object();
+  ```csharp
 
-  if (jsonObject != null && jsonObject.ContainsKey("document"))
+  public IActionResult Load([FromBody] Dictionary<string, string> jsonData)
   {
-    if (bool.Parse(jsonObject["isFileName"]))
+    // Initialize the PDF viewer object with memory cache object
+    PdfRenderer pdfviewer = new PdfRenderer(_cache);
+    MemoryStream stream = new MemoryStream();
+    object jsonResult = new object();
+
+    if (jsonObject != null && jsonObject.ContainsKey("document"))
     {
-      string documentPath = GetDocumentPath(jsonData["document"]);
-      if (!string.IsNullOrEmpty(documentPath))
+      if (bool.Parse(jsonObject["isFileName"]))
       {
-        byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
-        stream = new MemoryStream(bytes);
-      }
-      string documentName = jsonObject["document"];
+        string documentPath = GetDocumentPath(jsonData["document"]);
+        if (!string.IsNullOrEmpty(documentPath))
+        {
+          byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
+          stream = new MemoryStream(bytes);
+        }
+        string documentName = jsonObject["document"];
 
-      string connectionString = _connectionString;
-      System.Data.SqlClient.SqlConnection connection = new System.Data.SqlClient.SqlConnection(connectionString);
+        string connectionString = _connectionString;
+        System.Data.SqlClient.SqlConnection connection = new System.Data.SqlClient.SqlConnection(connectionString);
 
-      //Searches for the PDF document from the database
-      string query = "SELECT FileData FROM Table WHERE FileName = '" + documentName + "'";
-      System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(query, connection);
-      connection.Open();
+        //Searches for the PDF document from the database
+        string query = "SELECT FileData FROM Table WHERE FileName = '" + documentName + "'";
+        System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(query, connection);
+        connection.Open();
 
-      using (SqlDataReader reader = command.ExecuteReader())
-      {
-        if (reader.Read())
+        using (SqlDataReader reader = command.ExecuteReader())
         {
-          byte[] byteArray = (byte[])reader["FileData"];
-          stream = new MemoryStream(byteArray);
+          if (reader.Read())
+          {
+            byte[] byteArray = (byte[])reader["FileData"];
+            stream = new MemoryStream(byteArray);
+          }
         }
       }
+      else
+      {
+        byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
+        stream = new MemoryStream(bytes);
+      }
     }
-    else
-    {
-      byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
-      stream = new MemoryStream(bytes);
-    }
+    jsonResult = pdfviewer.Load(stream, jsonObject);
+    return Content(JsonConvert.SerializeObject(jsonResult));
   }
-  jsonResult = pdfviewer.Load(stream, jsonObject);
-  return Content(JsonConvert.SerializeObject(jsonResult));
-}
 
-```
+  ```
 
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
+  6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
 
-```json
-{
-  "Logging": {
-    "LogLevel": {
-      "Default": "Information",
-      "Microsoft.AspNetCore": "Warning"
-    }
-  },
-  "AllowedHosts": "*",
-  "ConnectionString": "Your connection string for SQL server"
-}
-```
+  ```json
+  {
+    "Logging": {
+      "LogLevel": {
+        "Default": "Information",
+        "Microsoft.AspNetCore": "Warning"
+      }
+    },
+    "AllowedHosts": "*",
+    "ConnectionString": "Your connection string for SQL server"
+  }
+  ```
+
+  N> Replace **Your Connection string from SQL server** with the actual connection string for your SQL Server database
+
+  N> The **System.Data.SqlClient** package must be installed in your application to use the previous code example. You need to modify the connectionString variable in the previous code example as per the connection string of your database.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
+
+  ### Open from Cloud Storage Services
+
+Each link goes to a provider page with simple step-by-step instructions, sample code, and any authentication notes.
+
+- [AWS S3](./open-pdf-file/from-amazon-s3)
+- [Azure Blob Storage](./open-pdf-file/from-azure-blob-storage)
+- [Google Cloud Storage](./open-pdf-file/from-google-cloud-storage)
+- [Google Drive](./open-pdf-file/from-google-drive)
+- [OneDrive](./open-pdf-file/from-one-drive)
+- [Dropbox](./open-pdf-file/from-dropbox-cloud-file-storage)
+- [Box](./open-pdf-file/from-box-cloud-file-storage)
+
+---
 
-N> Replace **Your Connection string from SQL server** with the actual connection string for your SQL Server database
+See also:
 
-N> The **System.Data.SqlClient** package must be installed in your application to use the previous code example. You need to modify the connectionString variable in the previous code example as per the connection string of your database.
 
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
\ No newline at end of file
+- [Load documents dynamically in React PDF Viewer](./how-to/load-document)
+- [Load a PDF only after PDFium resources are ready](./how-to/load-document-after-resources-loaded)
+- [Saving PDF files](./save-pdf-files)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/preact.md b/Document-Processing/PDF/PDF-Viewer/react/preact.md
deleted file mode 100644
index 133a20f79e..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/react/preact.md
+++ /dev/null
@@ -1,195 +0,0 @@
----
-layout: post
-title: Getting Started with Preact Framework | Syncfusion
-description: Check out and learn about getting started with the Preact Framework and React PDF Viewer Component of Syncfusion Essential JS 2 and more details.
-control: PDF Viewer
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Getting Started with the React PDF Viewer Component in the Preact Framework
-
-This article provides a step-by-step guide for setting up a [Preact](https://preactjs.com/) project and integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> React PDF Viewer component.
-
-`Preact` is a fast and lightweight JavaScript library for building user interfaces. It's often used as an alternative to larger frameworks like React. The key difference is that Preact is designed to be smaller in size and faster in performance, making it a good choice for projects where file size and load times are critical factors.
-
-## Prerequisites
-
-[System requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> React UI components](../system-requirement)
-
-## Set up the Preact project
-
-To create a new `Preact` project, use one of the commands that are specific to either NPM or Yarn.
-
-```bash
-npm init preact
-```
-
-or
-
-```bash
-yarn init preact
-```
-
-Using one of the above commands will lead you to set up additional configurations for the project, as below:
-
-1\. Define the project name: We can specify the name of the project directly. Let's specify the name of the project as `my-project` for this article.
-
-```bash
-T  Preact - Fast 3kB alternative to React with the same modern API
-|
-*  Project directory:
-|  my-project
-—
-```
-
-2\. Choose `JavaScript` as the framework variant to build this Preact project using JavaScript and React.
-
-```bash
-T  Preact - Fast 3kB alternative to React with the same modern API
-|
-*  Project language:
-|  > JavaScript
-|    TypeScript
-—
-```
-
-3\. Then configure the project as below for this article.
-
-```bash
-T  Preact - Fast 3kB alternative to React with the same modern API
-|
-*  Use router?
-|    Yes / > No
-—
-|
-*  Prerender app (SSG)?
-|    Yes / > No
-—
-|
-*  Use ESLint?
-|    Yes / > No
-—
-```
-
-5\. Upon completing the aforementioned steps to create `my-project`, run the following command to jump into the project directory:
-
-```bash
-cd my-project
-```
-
-Now that `my-project` is ready to run with default settings, let's add Syncfusion<sup style="font-size:70%">&reg;</sup> components to the project.
-
-## Add the Syncfusion<sup style="font-size:70%">&reg;</sup> React packages
-
-Syncfusion<sup style="font-size:70%">&reg;</sup> React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion<sup style="font-size:70%">&reg;</sup> React components in the project, install the corresponding npm package.
-
-This article uses the [React PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) as an example. To use the React PDF Viewer component in the project, the `@syncfusion/ej2-react-pdfviewer` package needs to be installed using the following command:
-
-```bash
-npm install @syncfusion/ej2-react-pdfviewer --save
-```
-
-or
-
-```bash
-yarn add @syncfusion/ej2-react-pdfviewer
-```
-
-## Import Syncfusion<sup style="font-size:70%">&reg;</sup> CSS styles
-
-You can import themes for the Syncfusion<sup style="font-size:70%">&reg;</sup> React component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). Refer to [themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme) to know more about built-in themes and different ways to refer to theme's in a React project.
-
-In this article, the `Material 3` theme is applied using CSS styles, which are available in installed packages. The necessary `Material 3` CSS styles for the PDF Viewer component and its dependents were imported into the **src/style.css** file.
-
-{% tabs %}
-{% highlight css tabtitle="~/src/style.css" %}
-
-@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
-@import "../node_modules/@syncfusion/ej2-react-pdfviewer/styles/material3.css";
-
-{% endhighlight %}
-{% endtabs %}
-
-> The order of importing CSS styles should be in line with its dependency graph.
-
-## Add the Syncfusion<sup style="font-size:70%">&reg;</sup> React component
-
-Follow the below steps to add the React PDF Viewer component to the Vite project:
-
-1\. Before adding the PDF Viewer component to your markup, import the PDF Viewer component in the **src/index.jsx** file.
-
-{% tabs %}
-{% highlight js tabtitle="~/src/index.jsx" %}
-
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
-         ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';
-
-{% endhighlight %}
-{% endtabs %}
-
-2\. Then, define the PDF Viewer component in the **src/index.jsx** file, as shown below:
-
-{% tabs %}
-{% highlight js tabtitle="~/src/index.jsx" %}
-{% raw %}
-
-import { render } from 'preact';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
-         ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';
-import './style.css';
-
-export function App() {
-
-  return (
-    <div>
-        <div className='control-section'>
-            {/* Render the PDF Viewer */}
-            <PdfViewerComponent
-                id="container"
-                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-                serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
-                style={{ 'height': '640px' }}>
-
-                <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
-                                    ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]}/>
-            </PdfViewerComponent>
-        </div>
-  </div>
-  );
-}
-
-render(<App />, document.getElementById('app'));
-
-{% endraw %}
-{% endhighlight %}
-{% endtabs %}
-
-## Run the project
-
-To run the project, use the following command:
-
-```bash
-npm run dev
-```
-
-or
-
-```bash
-yarn run dev
-```
-
-The output will appear as follows:
-
-![preact](./images/preact.png)
-
-## See also
-
-[Getting Started with the Syncfusion<sup style="font-size:70%">&reg;</sup> React UI Component](../getting-started/quick-start)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md
index 04152db832..2ba29699ae 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md
@@ -8,26 +8,36 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Saving PDF file
+# Saving PDF Files in the React PDF Viewer
 
-After editing the PDF file with various annotation tools, you will need to save the updated PDF to the server, database, or local file system.
+After editing a PDF with annotation tools, you can save the updated file to a server, a database, or download it locally. The following sections show common approaches.
 
-## Save PDF file to Server
+### Save and Download the Edited PDF
 
-Need to save the modified PDF back to a server. To achieve this, proceed with the following steps
+After editing the PDF document, follow this short, linear flow to persist and retrieve the updated file:
 
-**Step 1:** Create a Simple PDF Viewer Sample in React
+1. Persist the edited document to your back end (server or database). See "Save modified PDF to server" and "Save modified PDF to a database" below for server-side examples.
+2. Provide the updated file to the user. For a simple download use the built-in toolbar or call the viewer API [`download()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#download).
+3. If you need the edited PDF for custom uploads or processing, use the viewer [`saveAsBlob()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#saveasblob) API to obtain a Blob (or convert it to Base64).
 
-Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF viewer sample in React. This will give you a basic setup of the PDF viewer component.
+This is a summary; use the detailed subsections below for full code samples and server-side instructions.
 
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
 
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
+## Save modified PDF to server
 
-2. Open the `PdfViewerController.cs` file in your web service project.
+To save the modified PDF back to a server, follow these steps.
+
+**Step 1:** Create a simple PDF Viewer sample in React
+
+Follow the [getting-started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide to create a basic PDF Viewer implementation.
 
-3. Modify the `Download()` method to open it in the viewer using URL
+**Step 2:** Modify the `PdfViewerController.cs` in the web service project
+
+1. Create a web service project targeting .NET Core 3.0 or later. See this [KB Link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for details.
+
+2. Open the `PdfViewerController.cs` file in your web service project.
 
+3. Modify the `Download()` method so it returns the modified document for the viewer to download or store.
 ```csharp
 
 public IActionResult Download([FromBody] Dictionary<string, string> jsonObject)
@@ -57,12 +67,11 @@ public IActionResult Download([FromBody] Dictionary<string, string> jsonObject)
 
 ```
 
-**Step 3:**  Set the PDF Viewer Properties in React PDF viewer component
+**Step 3:** Set the PDF Viewer properties in your React app
 
-Modify the `serviceUrl` property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server.Modify the documentPath with the correct PDF Document URL want to load.
-
-{% raw %}
+Set the `serviceUrl` to point to your web service (for example, replace `https://localhost:44396/pdfviewer` with your server URL). Also set `documentPath` to the document URL you want to load.
 
+```jsx
 import * as ReactDOM from 'react-dom';
 import * as React from 'react';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
@@ -88,17 +97,15 @@ function App() {
 }
 const root = ReactDOM.createRoot(document.getElementById('sample'));
 root.render(<App />);
-
-{% endraw %}
+```
 
 [View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Save%20and%20Load/Save%20PDF%20file%20to%20server)
 
 ## Download PDF file as a copy
 
-In the built-in toolbar, you have an option to download the updated PDF to the local file system, you can use it to download the PDF file.
-
-{% raw %}
+The built-in toolbar includes a download option that saves the updated PDF to the user's local file system. You can also trigger the same behavior programmatically by calling the viewer's [`download()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#download) API.
 
+```jsx
 import * as ReactDOM from 'react-dom/client';
 import * as React from 'react';
 import './index.css';
@@ -132,31 +139,28 @@ return (<div>
 }
 const root = ReactDOM.createRoot(document.getElementById('sample'));
 root.render(<App />);
+```
 
-{% endraw %}
-
-## Save PDF file to Database
-
-If you have plenty of PDF files stored in database and you want to save the updated PDF file back to the database, use the following code example.
+## Save modified PDF to a database
 
-**Step 1:** Create a Simple PDF Viewer Sample in React
+If your application stores PDF files in a database, you can save the updated PDF bytes back to the database from your web service. The following steps outline a typical server-side flow.
 
-Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF viewer sample in React. This will give you a basic setup of the PDF viewer component.
+**Step 1:** Create the React sample viewer
 
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
+Follow the [getting-started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide to set up a basic Viewer instance.
 
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
+**Step 2:** Update `PdfViewerController.cs` in the web service
 
-2. Open the `PdfViewerController.cs` file in your web service project.
+1. Create a web service project targeting .NET Core 3.0 or later (see the KB link above). Open the `PdfViewerController.cs` file in your web service project.
 
-3. Import the required namespaces at the top of the file:
+2. Import required namespaces:
 
 ```csharp
 using System.IO;
 using System.Data.SqlClient;
 ```
 
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
+3. Add configuration fields to your controller and read the connection string from configuration:
 
 ```csharp
 private IConfiguration _configuration;
@@ -171,15 +175,12 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache
 }
 ```
 
-5. Modify the `Download()` method to open it in the viewer using URL
+4. In the `Download()` method, convert the returned base64 document to bytes and insert it into your database (the example below uses parameterized commands to avoid SQL injection):
 
 ```csharp
-
 [HttpPost("Download")]
 [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
 [Route("[controller]/Download")]
-//Post action for downloading the PDF documents
-
 public async Task<IActionResult> Download([FromBody] Dictionary<string, string> jsonObject)
 {
   //Initialize the PDF Viewer object with memory cache object
@@ -211,7 +212,7 @@ public async Task<IActionResult> Download([FromBody] Dictionary<string, string>
 }
 ```
 
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
+5. Add the connection string to `appsettings.json`:
 
 ```json
 {
@@ -222,12 +223,31 @@ public async Task<IActionResult> Download([FromBody] Dictionary<string, string>
     }
   },
   "AllowedHosts": "*",
-  "ConnectionString": "Your connection string for SQL server"
+  "ConnectionString": "Your connection string for SQL Server"
 }
 ```
 
-N> Replace **Your Connection string from SQL server** with the actual connection string for your SQL Server database
+N> Replace `Your connection string for SQL Server` with your actual connection string.
+
+N>: Ensure the `System.Data.SqlClient` package (or `Microsoft.Data.SqlClient`) is installed in your project. Use parameterized queries (as shown) and validate inputs to avoid SQL injection risks.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
+
+### Save to Cloud Storage Services
+
+Each link below goes to a provider page with simple, step-by-step instructions and example code for saving the edited PDF to that cloud storage service.
+
+- [AWS S3](./save-pdf-file/to-amazon-s3)
+- [Azure Blob Storage](./save-pdf-file/to-azure-blob-storage)
+- [Google Cloud Storage](./save-pdf-file/to-google-cloud-storage)
+- [Google Drive](./save-pdf-file/to-google-drive)
+- [OneDrive](./save-pdf-file/to-one-drive)
+- [Dropbox](./save-pdf-file/to-dropbox-cloud-file-storage)
+- [Box](./save-pdf-file/to-box-cloud-file-storage)
+- [Azure AD (auth notes)](./save-pdf-file/to-azure-active-directory)
+---
 
-N> The **System.Data.SqlClient** package must be installed in your application to use the previous code example. You need to modify the connectionString variable in the previous code example as per the connection string of your database.
+See also:
 
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
\ No newline at end of file
+- [Get Base64 value from a loaded PDF using saveAsBlob API](./how-to/get-base64)
+- [Open PDF files overview](./open-pdf-files)
\ No newline at end of file

From 2712f95b4e5544581281a4a76d4a08fc8897df69 Mon Sep 17 00:00:00 2001
From: VenkadaSubramanian-Durai <venkadasubramanian.d@syncfusion.com>
Date: Tue, 24 Feb 2026 12:23:57 +0530
Subject: [PATCH 2/2] 1010807: Diataxis changes for React PDF Viewer in Gatsby

---
 Document-Processing-toc.html                  |   3 +-
 .../react/depoyment-integration/gatsby.md     | 132 ++++++++++++++++++
 .../react/depoyment-integration/remix.md      |  10 +-
 .../depoyment-integration/share-point.md      |   6 +-
 4 files changed, 144 insertions(+), 7 deletions(-)
 create mode 100644 Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md

diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index 81076a7b9c..ffafe2ef8f 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -898,9 +898,10 @@
 								Environment Integration
 								<ul>
                                     <li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/nextjs-getting-started">NextJS</a></li>
-                                    <li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/share-point">SharePoint Framework (SPFx)</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/gatsby">Gatsby</a></li>
                                     <li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/preact">Preact</a></li>
                                     <li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/remix">Remix</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/share-point">SharePoint Framework (SPFx)</a></li>
 								</ul>
 							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/feature-module">Feature Modules</a></li>
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md
new file mode 100644
index 0000000000..6e2d9a4e45
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md
@@ -0,0 +1,132 @@
+---
+layout: post
+title: Getting started with React PDF Viewer in Gatsby | Syncfusion
+description: How to integrate the Syncfusion React PDF Viewer into a Gatsby site (quickstart, how-to, reference, explanation).
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Getting started with the React PDF Viewer in Gatsby
+
+How to integrate the Syncfusion React PDF Viewer into a Gatsby site. Use the Quickstart below to get a working viewer, then consult the How-to and Reference sections for configuration details (WASM, static assets, and SSR notes).
+
+## Tutorial — Quickstart for Gatsby
+
+1. Create or open your Gatsby site.
+
+```bash
+# create a new Gatsby site (or use an existing one)
+gatsby new my-gatsby-site
+cd my-gatsby-site
+npm install
+```
+
+2. Install the PDF Viewer package:
+
+```bash
+npm install @syncfusion/ej2-react-pdfviewer --save
+```
+
+3. Optional — host runtime locally or use the CDN
+
+If you want to host the viewer runtime and WASM locally, copy the runtime files into Gatsby's `static` directory so they are served at the root URL (`/`). The example component below uses the CDN `resourceUrl` for a quick demo; hosting locally is recommended for production.
+
+Optional local copy (Unix/macOS / Git Bash / WSL):
+
+```bash
+cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib static/ej2-pdfviewer-lib
+# copy a sample PDF to static/assets (create folder if needed)
+mkdir -p static/assets && cp ./path/to/sample.pdf static/assets/sample.pdf
+```
+
+4. Add viewer CSS imports to `src/components/layout.css` (recommended for Gatsby component-scoped styling):
+
+Create `src/components/layout.css` and add the imports below (relative path to `node_modules` used from `src/components`):
+
+```css
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+```
+
+Then import the stylesheet in `gatsby-browser.js` at your project root so it is included in the client bundle:
+
+```js
+// gatsby-browser.js
+import './src/components/layout.css';
+```
+
+5. Use a client-only approach (Gatsby is server-side rendered). A simple and reliable pattern is to render the viewer after mount with a mounted flag. Create `src/components/pdfviewer.js` with the component below (the example also shows where to register a Syncfusion license if you have one):
+
+```js
+// src/components/pdfviewer.js
+import React, { useEffect, useState } from 'react';
+import {
+    PdfViewerComponent,
+    Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+    BookmarkView, ThumbnailView, Print, TextSelection, TextSearch
+    , FormFields, FormDesigner, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function PdfViewer() {
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => setIsClient(true), []);
+
+    if (!isClient) return null; // prevent SSR crash (window not defined)
+
+    return (
+        <div style={{ height: "100vh" }}>
+            <PdfViewerComponent
+                id="pdfViewer"
+                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: "100%", width: "100%" }}
+            >
+                <Inject services={[
+                    Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+                    BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
+                    Magnification, FormFields, FormDesigner
+                ]} />
+            </PdfViewerComponent>
+        </div>
+    );
+}
+```
+
+Add a page that uses the component at `src/pages/index.js`:
+
+```js
+// src/pages/index.js
+import React from "react";
+import PdfViewer from "../components/pdfviewer";
+export default function PdfViewerPage() {
+  return (
+    <main>
+      <h1 style={{ padding: "10px 20px", background: "#f5f5f5" }}>
+        Syncfusion PDF Viewer in Gatsby
+      </h1>
+      <PdfViewer />
+    </main>
+  );
+}
+```
+
+6. Run the Gatsby dev server:
+
+```bash
+npm run develop
+```
+
+## See also
+
+- [Getting started overview](../getting-started-overview)
+- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started)
+- [Getting started with Syncfusion React PDF Viewer in Remix](./remix)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md
index 067c084a23..2bc4e72d1b 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md
@@ -8,9 +8,13 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# React Router v7 Quickstart
+# React Router v7 (Remix) Quickstart
 
-N> Remix's framework features were merged into React Router v7 and later. This guide targets React Router v7's framework-mode and shows a client-only (standalone) integration of the Syncfusion React PDF Viewer.
+## Overview
+
+N> Remix's framework features were merged into React Router v7 and later. This guide targets React Router v7's framework-mode and shows a client-only (standalone) integration of the Syncfusion React PDF Viewer. Keep the viewer client-only to avoid SSR/runtime errors.
+
+## Tutorial — Quickstart
 
 ## Prerequisites
 
@@ -35,7 +39,7 @@ Different starters create different folder layouts. Pick the mapping that matche
 
 Use the file paths that match your project layout when following the steps below.
 
-## Step 1 — Create a React + React Router (v7) app
+## Step 1 — Create a Remix or React Router v7 app
 
 If you want the React Router framework-mode project (creates an `app/` tree), use the official scaffolding tool:
 
diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md
index 3bf7f0c5d1..88d1ee13ec 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md
@@ -8,7 +8,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Syncfusion React PDF Viewer in SPFx
+# React PDF Viewer in SharePoint Framework
 
 ## Overview
 
@@ -92,7 +92,7 @@ Important: ensure any host you use serves `.wasm` files with Content-Type `appli
 
 Create `PdfViewerClient.tsx` under `src/webparts/pdfViewer/components` and paste the minimal example below. This component is client-only and safe for SPFx (which runs in the browser):
 
-```jsx
+```ts
 // src/webparts/pdfViewer/components/PdfViewerClient.tsx
 import * as React from 'react';
 import {
@@ -131,7 +131,7 @@ export default PdfViewerClient;
 
 Open the web part main React file (for example `src/webparts/pdfViewer/components/PdfViewer.tsx` created by the generator) and render `PdfViewerClient`:
 
-```jsx
+```ts
 import * as React from 'react';
 import PdfViewerClient from './PdfViewerClient';