1010807: Diataxis changes for getting started and Load and Save PDF

Document-Processing-toc.html

@@ -888,11 +888,18 @@
 					<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/preact">Preact</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/nextjs-getting-started">NextJS</a></li>
 								</ul>
 							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/feature-module">Feature Modules</a></li>

Document-Processing/PDF/PDF-Viewer/react/nextjs-getting-started.md → Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md

@@ -1,14 +1,14 @@
 ---
 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 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.
 
@@ -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.md) for detailed platform requirements.
 
 ## Create a Next.js application
 
@@ -43,11 +45,11 @@ yarn create next-app
 
 Using one of the above commands will prompt for project configuration options.
 
-1. Define the project name. For example: `ej2-nextjs-pdfviewer`.
+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 %}
@@ -56,14 +58,14 @@ Using one of the above commands will prompt for project configuration options.
 {% 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 %}
@@ -72,7 +74,7 @@ Creating a new Next.js app in D:\ej2-nextjs-pdfviewer.
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
-cd ej2-nextjs-pdfviewer
+cd ej2-next-js-pdfviewer
 
 {% endhighlight %}
 {% endtabs %}
@@ -100,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 include built-in themes. Import a theme to match the look and feel of the application.
+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.
 
-For projects using the App Router, add the imports to `src/app/globals.css`. For projects using the Pages Router, add them to a global stylesheet such as `pages/_app.js` or its CSS import. Remove or consolidate any conflicting styles as needed.
+/* 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';
@@ -119,7 +124,7 @@ For projects using the App Router, add the imports to `src/app/globals.css`. For
 {% endhighlight %}
 {% endtabs %}
 
-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.
+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 the Syncfusion<sup style="font-size:70%">&reg;</sup> React component
 
@@ -174,4 +179,4 @@ yarn run dev
 
 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
+N> [View the Next.js PDF Viewer sample in the GitHub repository](https://github.com/SyncfusionExamples/syncfusion-react-pdfviewer-component-in-nextjs)

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](https://help.syncfusion.com/document-processing/system-requirements)

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)