From a3feaee53847670a7330686f96d8dc6201d74b95 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Fri, 10 Jul 2026 12:50:15 +0530 Subject: [PATCH 1/8] EJ2-1040264-Updated ui-builder-skill.md file --- .../PDF/PDF-Viewer/react/ui-builder-skill.md | 107 +++++++++++------- 1 file changed, 65 insertions(+), 42 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/ui-builder-skill.md b/Document-Processing/PDF/PDF-Viewer/react/ui-builder-skill.md index 5689f58f84..50e1168159 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/ui-builder-skill.md +++ b/Document-Processing/PDF/PDF-Viewer/react/ui-builder-skill.md @@ -12,17 +12,24 @@ keywords: React UI Builder, Skills, AI Assistants, PDF Viewer SDK, Agent Skills **Syncfusion® React UI Builder Skill** is an AI-powered agent skill that accelerates React PDF Viewer development by transforming natural-language UI requirements into production-ready code using Syncfusion® React components. -Integrated with your AI-powered IDE, it leverages deep knowledge of **Syncfusion® PDF Viewer** and other React components to deliver accurate and ready-to-use code. -By combining intelligent code generation with best practices, accessibility standards, and design-system consistency, React UI Builder helps you rapidly build scalable PDF viewing applications and user interfaces without leaving your development workflow. +Integrated with your AI-powered IDE, it leverages deep knowledge of the **Syncfusion® PDF Viewer** SDK and other React components to deliver accurate and ready-to-use code. + +By combining intelligent code generation with best practices, accessibility standards, and design-system consistency, the Syncfusion® React UI Builder Skill helps you rapidly build scalable PDF viewing applications and user interfaces without leaving your development workflow. ## Prerequisites -Before installing React UI Builder Skill with PDF Viewer, ensure the following: +Before installing the Syncfusion® React UI Builder Skill with PDF Viewer, ensure the following: + +- Install [APM (Agent Package Manager)](https://microsoft.github.io/apm/getting-started/installation/#quick-install-recommended). +- [Node.js](https://nodejs.org/en) version 18 or higher. Verify your installed version using the following command: -- Install [APM (Agent Package Manager)](https://microsoft.github.io/apm/getting-started/installation/#quick-install-recommended) -- Required [Node.js](https://nodejs.org/en) version ≥ 18 -- React application (existing or new); see [Quick Start](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) -- A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.) + ```bash + node -v + ``` + +- A React application (existing or new); see the [Syncfusion® React Quick Start](https://help.syncfusion.com/react/documentation/getting-started/quick-start). +- A supported AI agent or IDE that integrates with Skills, such as [Visual Studio Code](https://code.visualstudio.com/), [Cursor](https://www.cursor.com/), or [Syncfusion® Code Studio](https://help.syncfusion.com/code-studio/overview). +- An active subscription for the selected agent (for example, a paid GitHub Copilot, Claude, or Cursor plan) where required by the agent. - Active Syncfusion® license (any of the following): - [Commercial](https://www.syncfusion.com/sales/unlimitedlicense) - [Community License](https://www.syncfusion.com/products/communitylicense) @@ -32,27 +39,27 @@ Before installing React UI Builder Skill with PDF Viewer, ensure the following: ### **AI-Driven UI Generation** - Transforms prompts into fully developed React components rather than just partial code snippets. -- Automatically selects appropriate Syncfusion® components and features -- Produces structured, maintainable code +- Automatically selects appropriate Syncfusion® components and features. +- Produces structured, maintainable code. ### **Component Usage & API Accuracy** -- Uses correct Syncfusion® component APIs -- Injects required feature modules (paging, sorting, filtering, etc.) -- Avoids unsupported or deprecated patterns +- Uses correct Syncfusion® component APIs. +- Injects required feature modules (paging, sorting, filtering, etc.). +- Avoids unsupported or deprecated patterns. ### **Patterns & Best Practices** -- Recommended component composition and state management -- Event handling aligned with React standards -- Secure and scalable coding patterns +- Provides recommended component composition and state management. +- Aligns event handling with React standards. +- Applies secure and scalable coding patterns. ### **Accessibility & Responsiveness** -- WCAG 2.1 AA–aligned output -- Semantic HTML with ARIA support -- Mobile-first responsive layouts +- Produces output aligned with WCAG 2.1 AA. +- Generates semantic HTML with ARIA support. +- Builds mobile-first responsive layouts. ### **Design-System Integration** -- Supports Tailwind, Bootstrap, Material, or custom themes -- Ensures consistent Syncfusion® styling and theme usage +- Supports Tailwind, Bootstrap, Material, or custom themes. +- Ensures consistent Syncfusion® styling and theme usage. ## Installation @@ -109,21 +116,21 @@ Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targe 3. **Component Mapping:** Map intent to Syncfusion® PDF Viewer and React components, including required modules. 4. **Theming & Design System** Load required theming guidelines and confirm key design choices: - - CSS framework (Tailwind, Bootstrap, Material, or Greenfield(custom theme)). If no themes detected in the existing project, Greenfield and Syncfusion Tailwind3 theme are shown as the default option, which can be used as is or changed based on preference. - - Syncfusion theme (Tailwind3, Bootstrap5, Material3, fluent2) + - CSS framework (Tailwind, Bootstrap, Material, or Greenfield). When no themes are detected in the existing project, the **Greenfield** project type and the **Syncfusion Tailwind3** theme are shown as the default options, which can be used as is or changed based on preference. + - Syncfusion theme (Tailwind3, Bootstrap5, Material3, Fluent2) - Light and Dark Mode - Core design basics (colors, spacing, typography, responsiveness, accessibility) -5. **Code Generation:** Produce TypeScript React components with PDF Viewer integration, props interfaces, and CSS/styling scaffolding. -6. **Dependency Management:** Recommend or install required Syncfusion® packages and peer dependencies. -7. **Validation:** Run accessibility and basic security checks, request confirmation for changes. -8. **Code Insertion:** Create files or patch existing files following project structure and conventions. +5. **Code Generation:** Produces TypeScript React components with PDF Viewer integration, props interfaces, and CSS/styling scaffolding. +6. **Dependency Management:** Recommends or installs required Syncfusion® packages and peer dependencies, such as `@syncfusion/ej2-react-pdfviewer`. +7. **Validation:** Runs accessibility and basic security checks, requests confirmation for changes. +8. **Code Insertion:** Creates files or patches existing files following project structure and conventions. -**Key enforcement points:** +### Key enforcement points -- Adds correct theme and CSS imports for chosen Syncfusion® themes -- Injects only the feature modules required by generated components -- Generates semantic HTML with ARIA attributes and keyboard support -- Avoids unsupported or deprecated API usages for Syncfusion® components +- Adds correct theme and CSS imports for chosen Syncfusion® themes. +- Injects only the feature modules required by generated components. +- Generates semantic HTML with ARIA attributes and keyboard support. +- Avoids unsupported or deprecated API usages for Syncfusion® components. > The assistant handles most stages automatically and may request confirmation where required. @@ -138,10 +145,10 @@ To start using the skill: 1. Open your supported IDE. 2. In the chat panel, select the `syncfusion-react-ui-builder` agent from the **Agent dropdown**. - ![Set Agent](./images/UI-Builder-Agent.png) -3. Start prompting the agent with a clear description of your UI requirements. + ![Select the syncfusion-react-ui-builder agent from the Agent dropdown](./images/UI-Builder-Agent.png) +3. Prompt the agent with a clear description of your UI requirements. -> For Syncfusion® Code Studio, if the UI Builder agent is not shown, ensure that the agent location is configured to use it in the chat, and refer to the [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings#agent-file-locations) to configure the agent location properly. +> For Syncfusion® Code Studio, if the UI Builder agent is not shown, ensure that the agent location is configured to use it in the chat, and refer to the [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings) to configure the agent location properly. **Example Prompts:** @@ -159,7 +166,7 @@ Generated code follows best practices with accessible, semantic HTML, responsive ## Best Practices -Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready results: +Follow these guidelines to get the most out of the Syncfusion® React UI Builder Skill and ensure high-quality production-ready results: - **Stay consistent:** Maintain consistent file organization, naming conventions, and coding standards throughout your project. - **Use advanced AI models:** For best results, use **Claude Sonnet 4.6 or higher** capability models to produce better code quality and more accurate implementations. @@ -167,30 +174,46 @@ Follow these guidelines to get the most out of UI Builder and ensure high-qualit ## Troubleshooting -- **APM installation failure**: Refer to this [documentation](https://microsoft.github.io/apm/getting-started/installation/#troubleshooting) +### APM installation failure + +Refer to the [APM installation troubleshooting guide](https://microsoft.github.io/apm/getting-started/installation/#troubleshooting). + +### Skills not loading + +Ensure the **.agent/** and **.github/agents/** folders exist in your project and that the skill was installed successfully using APM. Verify that the correct agent is selected from the Agent dropdown in your IDE. + +### Agent does not appear in the dropdown -- **Skills not loading**: Ensure the **.agent/** and **.github/agents/** folders exist in your project and that the skill was installed successfully using APM. Verify that the correct agent is selected from the Agent dropdown in your IDE. +In Syncfusion® Code Studio, confirm that the agent location is configured to use the local agent. See the [Code Studio user settings documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings). -- **Component not rendering**: Retry generation using the specific component skill to resolve the issue, and ensure required Syncfusion® packages and themes are properly configured. +### Component not rendering -- **Syncfusion license banner appears**: Use the licensing skill to correctly register and validate your Syncfusion® license key in the application. +Retry generation using the specific component skill to resolve the issue, and ensure required Syncfusion® packages and themes are properly configured. + +### Syncfusion® license banner appears + +Use the Licensing Skill to correctly register and validate your Syncfusion® license key in the application. ## FAQ **Which agents/IDEs are supported?** -Any Skills-compatible agent that reads local skill files (Code Studio, VS Code, Cursor, etc.). -**Are skills loaded automatically?** +The Syncfusion® React UI Builder Skill works with any Skills-compatible agent that reads local skill files, including Syncfusion® Code Studio, VS Code, and Cursor. + +**Are skills loaded automatically?** + Yes. Supported agents automatically load relevant skills based on your query. **Can I customize the generated styles?** + Yes. The skill supports choosing Tailwind, Bootstrap, Material, or a custom theme; generated components include clear integration points for style adjustments. **Does it modify files automatically?** + The skill proposes changes and requires confirmation for insertion; automatic dependency installation may be offered depending on agent permissions. ## See also - [Agent Skills Standards](https://agentskills.io/home) -- [Agent Package Manager](https://microsoft.github.io/apm/getting-started/quick-start/) +- [Agent Package Manager](https://microsoft.github.io/apm/getting-started/quick-start) From a1b7d1b29c38089f9ea3e62ab82207dbd1e37cdf Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Fri, 10 Jul 2026 13:42:18 +0530 Subject: [PATCH 2/8] EJ2-1040264-update depoyment-integration/agentic-builder.md file --- .../depoyment-integration/agentic-builder.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/agentic-builder.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/agentic-builder.md index 84830d1c19..329e0afced 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/agentic-builder.md +++ b/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). \ No newline at end of file +- 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). \ No newline at end of file From 832c77aa8b67a2c2a7fbc2b7ed7091de173db76b Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Fri, 10 Jul 2026 14:16:29 +0530 Subject: [PATCH 3/8] EJ2-1040264-updated depoyment-integration/gatsby.md --- .../PDF-Viewer/react/depoyment-integration/gatsby.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md index c621eec793..bdb0264304 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md +++ b/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: How to integrate the Syncfusion React PDF Viewer into a Gatsby site — a quickstart covering project setup, package install, CSS imports, SSR-safe component, and local runtime 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() { From e50fb9950567d7fd40132bea0497230c541b1fb3 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Fri, 10 Jul 2026 15:09:23 +0530 Subject: [PATCH 4/8] EJ2-1040264-updated document nextjs-getting-started.md files --- .../nextjs-getting-started.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md index a9120d59d6..042aabec07 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md +++ b/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® components to the project. +The application is ready to run with the default settings. After that, add Syncfusion® components to the project. ## Install Syncfusion® React packages Syncfusion® 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 (
+ resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" + style={{ height: '640px' }}> {/* Inject the required services */} @@ -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) From 4f96f7a8aaf5d5ec1f11d110dcdf2a5281fb70c9 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Fri, 10 Jul 2026 15:31:27 +0530 Subject: [PATCH 5/8] EJ2-1040264-updated the preact.md file --- .../PDF/PDF-Viewer/react/depoyment-integration/preact.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md index 82f0049f9f..2637ae016f 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md +++ b/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 From 7ddb283f2e7187b623cae5bea15e17bdc4bdbf0d Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Fri, 10 Jul 2026 17:12:53 +0530 Subject: [PATCH 6/8] EJ2-1040264-Updated depoyment-integration/remix.md --- .../react/depoyment-integration/remix.md | 48 +++++++++++-------- 1 file changed, 28 insertions(+), 20 deletions(-) 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 ea4e6c015b..fdf107c0e0 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md +++ b/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() { + {/* 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. */}
@@ -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'; From 0041543e2999e77af16fda6d3993e09980cd4ad7 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Fri, 10 Jul 2026 17:33:55 +0530 Subject: [PATCH 7/8] EJ2-1040264-updated depoyment-integration/share-point.md --- .../depoyment-integration/share-point.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) 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 a00e4c6781..fafee11837 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 @@ -1,22 +1,22 @@ --- 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). +description: Quickstart to integrate the Syncfusion React PDF Viewer into an SPFx React web part (default: standalone/client-side rendering). control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# React PDF Viewer in SharePoint Framework +# Syncfusion React PDF Viewer in SharePoint ## Overview -This quickstart shows how to integrate the [React PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/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). +This quickstart shows how to integrate the [React PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/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 (standalone / client-only). ## Prerequisites -- A SharePoint development environment and an Office 365 tenant (for testing/deployment). +- A SharePoint development environment and a Microsoft 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`. @@ -48,7 +48,7 @@ Keep the package version aligned with the runtime assets you host. ## 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: +Import the Syncfusion theme styles so the viewer is 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'; @@ -65,11 +65,11 @@ If your SPFx build configuration forbids direct CSS imports from node_modules, a ## 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). +SPFx web parts run in the browser, so standalone (client-only) rendering is 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). The optional server-backed mode uses `serviceUrl` instead, pointing to a PDF rendering web service. -Two deployment options for those runtime assets: +Two deployment options for the runtime assets: -- Recommended — Use Syncfusion CDN (fast, simplest): set `resourceUrl` to the CDN folder that matches your package version, e.g.: +- Recommended — Use the Syncfusion CDN (fast, simplest): set `resourceUrl` to the CDN folder that matches your installed package version, e.g.: ```ts resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"; @@ -90,7 +90,7 @@ Important: ensure any host you use serves `.wasm` files with Content-Type `appli ## 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): +Create `PdfViewerClient.tsx` under `src/webparts/pdfViewer/components` and paste the minimal example below. This component is safe for SPFx, which runs in the browser. The CSS imports are listed in the previous section; the following snippet focuses on the component itself: {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -133,11 +133,11 @@ export default PdfViewerClient; ## 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`: +Open the generated web part React file (for example `src/webparts/pdfViewer/components/PdfViewer.tsx`) and render `PdfViewerClient`. Replace the default render output with the following: ```ts import * as React from 'react'; -import PdfViewerClient from './PdfViewerClient'; +import { PdfViewerClient } from './PdfViewerClient'; export default function PdfViewer(): JSX.Element { return ( @@ -170,5 +170,5 @@ N> Looking for the full React PDF Viewer component overview, features, pricing, - [Getting started overview](../getting-started-overview) - [Creating a Next.js application using React PDF Viewer](./nextjs-getting-started) -- [Getting started with React PDF Viewer in Preact](./nextjs-getting-started) -- [Getting started with React PDF Viewer in Remix](./nextjs-getting-started) \ No newline at end of file +- [Getting started with React PDF Viewer in Preact](./preact) +- [Getting started with React PDF Viewer in Remix](./remix) \ No newline at end of file From 732f94f1b6099b632e8263beb5a4654ad2525360 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 12:11:41 +0530 Subject: [PATCH 8/8] Resolve CI errors --- .../PDF/PDF-Viewer/react/depoyment-integration/gatsby.md | 2 +- .../PDF/PDF-Viewer/react/depoyment-integration/share-point.md | 2 +- Document-Processing/PDF/PDF-Viewer/react/ui-builder-skill.md | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md b/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md index bdb0264304..28e78a15b3 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md +++ b/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 — a quickstart covering project setup, package install, CSS imports, SSR-safe component, and local runtime hosting. +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 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 fafee11837..956ebc8885 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 SharePoint +# React PDF Viewer in SharePoint Framework ## Overview diff --git a/Document-Processing/PDF/PDF-Viewer/react/ui-builder-skill.md b/Document-Processing/PDF/PDF-Viewer/react/ui-builder-skill.md index 50e1168159..03dc7122a7 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/ui-builder-skill.md +++ b/Document-Processing/PDF/PDF-Viewer/react/ui-builder-skill.md @@ -27,8 +27,8 @@ Before installing the Syncfusion® React UI Builder Skill with PDF Viewer, ensur node -v ``` -- A React application (existing or new); see the [Syncfusion® React Quick Start](https://help.syncfusion.com/react/documentation/getting-started/quick-start). -- A supported AI agent or IDE that integrates with Skills, such as [Visual Studio Code](https://code.visualstudio.com/), [Cursor](https://www.cursor.com/), or [Syncfusion® Code Studio](https://help.syncfusion.com/code-studio/overview). +- A React application (existing or new); see the [Syncfusion® React Quick Start](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) +- A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.) - An active subscription for the selected agent (for example, a paid GitHub Copilot, Claude, or Cursor plan) where required by the agent. - Active Syncfusion® license (any of the following): - [Commercial](https://www.syncfusion.com/sales/unlimitedlicense)