1040264-Documentation for react samples

Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/agentic-builder.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Create a React PDF Viewer with Agentic UI Builder | Syncfusion
-description:  Learn how to use the React PDF Viewer component of Syncfusion Essential JS 2 with Agentic UI Builder.
+description: Learn how to use the React PDF Viewer component of Syncfusion Essential JS 2 with Agentic UI Builder.
 control: PDF Viewer
 platform: document-processing
 documentation: ug
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Create a React PDF Viewer with Agentic UI Builder
 
-This article explains how to build a Syncfusion® React PDF Viewer by entering natural-language instructions into the [**Syncfusion® React Agentic UI Builder**](https://www.syncfusion.com/explore/mcp-servers/) (which runs on Syncfusion's MCP Server). Describe your requirements, and the tool will generate a complete PDF Viewer implementation.
+This guide shows you how to create a Syncfusion React PDF Viewer simply by typing what you want using natural language commands — with the [**Syncfusion® React Agentic UI Builder**](https://www.syncfusion.com/explore/mcp-servers/) (powered by Syncfusion's MCP Server). Just describe it, and the tool builds the complete implementation of the PDF Viewer for you.
 
 ## Prerequisites
 
@@ -27,7 +27,7 @@ After installation, open your React project in your IDE, launch the AI assistant
 #sf_react_ui_builder Create standalone React PDF Viewer using the Bootstrap 5 theme with the default modules. Install the required packages, import the theme CSS in the correct order, and initialize the PDF Viewer.
 ```
 
-The UI Builder generates complete implementations including layout, components, and styling. A preview of the generated output appears below:
+The UI Builder delivers full implementations, covering layout, components, and styling. The following illustration shows the generated output:
 
 ![PDF Viewer generated by UI builder tool](../images/agentic-builder-output.png)
 
@@ -44,14 +44,14 @@ This tool provides a collection of pre-built, responsive UI layout templates and
 **Example:**
 
 ```
-#sf_react_layout Add a navigation bar and footer for PFD Viewer
+#sf_react_layout Add a navigation bar and footer for PDF Viewer
 ```
 
 ![PDF Viewer with navigation bar generated by layout tool](../images/agentic-builder-layout.png)
 
 ### Component Tool (`#sf_react_component`)
 
-This tool offers quick reference details for Syncfusion React components, including their properties, events, methods, and basic usage examples.
+This tool offers quick reference details for Syncfusion React components, including their properties, events, and methods, along with basic usage examples.
 
 **When to use:** When you need essential API information or structure details to correctly implement a specific component.
 
@@ -65,7 +65,7 @@ This tool offers quick reference details for Syncfusion React components, includ
 
 ### Style Tool (`#sf_react_style`)
 
-This tool provides options for configuring themes, setting up styling, and integrating icons for Syncfusion React components. It supports multiple themes such as Tailwind 3 CSS, Bootstrap 5.3, Material 3, and Fluent 2, along with light and dark mode setups and consistent icon usage.
+This tool provides options for configuring themes, setting up styling, and integrating icons for Syncfusion React components. It supports multiple themes such as Tailwind 3 CSS, Bootstrap 5.3, Material 3, and Fluent 2, along with light and dark color modes and consistent icon usage.
 
 **When to use:** When applying themes, customizing colors, modifying component appearance, or adding icons to the UI.
 
@@ -79,11 +79,11 @@ This tool provides options for configuring themes, setting up styling, and integ
 
 ### Tips & Best Practices
 
-- Turn on **Agent mode** in your IDE to enable smooth, multi-step operations with confirmation prompts.
-- Use higher-capability models (**Claude Sonnet 4.5 or newer, GPT-5**) as they typically produce more accurate, higher-quality code.
-- If a step times out or becomes unresponsive, cancel it and retry.
-- Review the generated code and commands before applying them in a production environment.
+- Enable **Agent mode** in your IDE for smooth, multi-step execution with confirmation prompts.
+- Use higher-capability models (**Claude Sonnet 4.5 or newer, GPT-5**) as they typically produce more accurate and higher-quality code.
+- If a step times out or becomes unresponsive, cancel it and retry the current step.
+- Always review the generated code and commands before accepting or applying them in production.
 
-### See Also
+### See also
 
-- For examples of prompt patterns and customization options for layouts, components, and styles, refer to the [prompt Library](https://ej2.syncfusion.com/react/documentation/mcp-server/agentic-ui-builder/prompt-library).
+- To explore customization options for layouts, components, styles, and more examples of effective prompts, refer to the [prompt Library](https://ej2.syncfusion.com/react/documentation/mcp-server/agentic-ui-builder/prompt-library).

Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md

@@ -1,7 +1,7 @@
 ---
 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).
+description: Integrate the Syncfusion React PDF Viewer into a Gatsby site with setup, package installation, CSS imports, SSR-safe loading, and local hosting.
 control: PDF Viewer
 platform: document-processing
 documentation: ug
@@ -63,7 +63,7 @@ Then import the stylesheet in `gatsby-browser.js` at your project root so it is
 import './src/components/layout.css';
 ```
 
-- 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):
+- Use a client-only approach (Gatsby is server-side rendered). A simple and reliable pattern is to render the viewer after mount with a mounted flag. Create `src/components/pdfviewer.js` with the component below. The example also shows where to register a Syncfusion license if you have one:
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
@@ -73,8 +73,8 @@ import React, { useEffect, useState } from 'react';
 import {
     PdfViewerComponent,
     Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
-    BookmarkView, ThumbnailView, Print, TextSelection, TextSearch
-    , FormFields, FormDesigner, Inject
+    BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
+    FormFields, FormDesigner, Inject
 } from '@syncfusion/ej2-react-pdfviewer';
 
 export default function PdfViewer() {
@@ -95,7 +95,7 @@ export default function PdfViewer() {
                 <Inject services={[
                     Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
                     BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
-                    Magnification, FormFields, FormDesigner
+                    FormFields, FormDesigner
                 ]} />
             </PdfViewerComponent>
         </div>

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

@@ -43,7 +43,7 @@ yarn create next-app
 {% endhighlight %}
 {% endtabs %}
 
-Using one of the above commands will prompt for project configuration options.
+One of the above commands will prompt you to configure the new project. Provide the values shown below.
 
 - Define the project name. For example: `ej2-next-js-pdfviewer`.
 {% tabs %}
@@ -54,7 +54,7 @@ Using one of the above commands will prompt for project configuration options.
 {% endhighlight %}
 {% endtabs %}
 
-- Select the required packages.
+- Select the required project options.
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
@@ -79,13 +79,13 @@ cd ej2-next-js-pdfviewer
 {% endhighlight %}
 {% endtabs %}
 
-The application is ready to run with default settings. Next, add Syncfusion<sup style="font-size:70%">&reg;</sup> components to the project.
+The application is ready to run with the default settings. After that, 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 packages are available on npm. Install the package for the component required by the project.
 
-This guide uses the [React PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) component as an example. Install it with:
+This guide uses the [React PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) as an example. Install it with:
 
 {% tabs %}
 {% highlight bash tabtitle="NPM" %}
@@ -146,8 +146,8 @@ return (<div>
         <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' }}>
+            resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+            style={{ height: '640px' }}>
                {/* Inject the required services */}
                <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
                                    Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
@@ -194,7 +194,7 @@ const nextConfig = {
 module.exports = nextConfig;
 ```
 
-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).
+To learn more about the PDF Viewer component, see the [getting started documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started).
 
 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

@@ -11,7 +11,9 @@ domainurl: ##DomainURL##
 
 # Getting started with React PDF Viewer in Preact
 
-This page is a short, task-focused overview for integrating the [React PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/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.
+This page is a short, task-focused overview for integrating the [React PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/react-pdf-viewer) into a [Preact](https://preactjs.com/) app. Use the short sections below for quick tasks; a full example is provided below as an optional reference.
+
+## What is Preact?
 
 [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

Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md

@@ -12,9 +12,7 @@ domainurl: ##DomainURL##
 
 ## 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 React PDF Viewer. Keep the viewer client-only to avoid SSR/runtime errors.
-
-## Quickstart
+N> Remix's framework features were merged into React Router v7. This guide targets React Router v7's framework mode and shows a client-only (standalone) integration of the React PDF Viewer. Keep the viewer client-only to avoid SSR/runtime errors.
 
 ## Prerequisites
 
@@ -27,15 +25,15 @@ N> Remix's framework features were merged into React Router v7 and later. This g
 
 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`
+- create-react-router (framework mode — `app/` tree)
+  - Global CSS: `app/app.css` (imported by `root.tsx`)
+  - Component: `app/components/PdfViewerClient.tsx`
+  - Route: `app/routes/home.tsx` or `app/routes/index.tsx`
 
 - 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`
+  - Global CSS: `src/index.css` (imported from `src/main.tsx`)
+  - Component: `src/components/PdfViewerClient.tsx`
+  - Route wrapper: `src/App.tsx` + `BrowserRouter` in `src/main.tsx`
 
 Use the file paths that match your project layout when following the steps below.
 
@@ -91,11 +89,11 @@ Place the Syncfusion CSS imports in your project's global stylesheet. Choose the
 
 create-react-router (`app/` tree)
 
- - File: `app/app.css` (or similar global CSS imported by `root.ts`)
+ - File: `app/app.css` (or similar global CSS imported by `app/root.tsx`)
 
 Vite / plain React (`src/` tree)
 
- - File: `src/index.css` (imported from `src/main.ts`)
+ - File: `src/index.css` (imported from `src/main.tsx`)
 
 Example CSS (same for both):
 
@@ -112,9 +110,14 @@ Example CSS (same for both):
 
 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.
+create-react-router (`app/root.tsx`):
+
+```tsx
+// app/root.tsx
+import './app.css';
+```
 
-Vite / plain React (`src/main.ts`):
+Vite / plain React (`src/main.tsx`):
 
 ```js
 import React from 'react';
@@ -132,22 +135,22 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 
 ## 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.
+The PDF Viewer depends on browser APIs and WebAssembly; avoid server-side rendering it by creating a client-only component and mounting it after first render.
 
 create-react-router (`app/` tree)
 
- - `app/components/PdfViewerClient.ts`
+ - `app/components/PdfViewerClient.tsx`
 
 Vite / plain React (`src/` tree)
 
- - `src/components/PdfViewerClient.ts`
+ - `src/components/PdfViewerClient.tsx`
 
 Example component (works in either location):
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
 {% raw %}
-// components/PdfViewerClient.ts
+// components/PdfViewerClient.tsx
 import React, { useEffect, useState } from 'react';
 import {
   PdfViewerComponent,
@@ -169,9 +172,14 @@ export default function PdfViewerClient() {
       <PdfViewerComponent
         id="container"
         documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+        // Path to the runtime assets copied to public/ej2-pdfviewer-lib.
         resourceUrl={`${window.location.origin}/ej2-pdfviewer-lib`}
         style={{ height: '640px' }}
       >
+        {/* Toolbar: top toolbar (open, save, print, etc.).
+            Magnification: zoom in/out and page-fit controls.
+            Navigation: page navigation, scroll, and jump-to-page.
+            Annotation: add, edit, and delete PDF annotations. */}
         <Inject services={[Toolbar, Magnification, Navigation, Annotation]} />
       </PdfViewerComponent>
     </div>
@@ -183,7 +191,7 @@ export default function PdfViewerClient() {
 
 Routing / usage examples:
 
-create-react-router (`app/routes/home.ts` or `app/routes/index.ts`):
+create-react-router (`app/routes/home.tsx` or `app/routes/index.tsx`):
 
 ```ts
 import PdfViewerClient from '../components/PdfViewerClient';
@@ -193,7 +201,7 @@ export default function Home() {
 }
 ```
 
-Vite / plain React (`src/App.ts`):
+Vite / plain React (`src/App.tsx`):
 
 ```ts
 import { Routes, Route } from 'react-router-dom';