1016259: Architecture in React PDF Viewer

Document-Processing-toc.html

@@ -991,6 +991,17 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
 								</ul>
 							</li>
+							<li>Architecture
+								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/architecture/architecture-pdfviewer">Architecture</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/architecture/how-pdf-rendering-works-in-browser">How PDF Rendering Works in the Browser</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/architecture/standalone-vs-server-backed-pdf-viewer">Standalone vs Server-Backed Viewer</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/architecture/when-backend-pdf-services-are-required">When Backend PDF Services Are Required</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/architecture/performance-model-for-large-pdfs">Performance Model for Large PDFs</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/architecture/self-hosted-on-prem-deployment">Self-Hosted and On-Prem Deployment</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/architecture/pdf-standards-conformance">Supported PDF Standards and Conformance</a></li>
+								</ul>	
+							</li>	
 							<li>
 								Environment Integration
 								<ul>

Document-Processing/PDF/PDF-Viewer/react/architecture/architecture-pdfviewer.md

@@ -0,0 +1,90 @@
+---
+layout: post
+title: Architecture of Syncfusion React PDF Viewer | Syncfusion
+description: High-level design, rendering pipeline, data flow, and performance considerations of the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Architecture of Syncfusion React PDF Viewer
+
+This guide provides a deep dive into the technical design and internal workings of the Syncfusion React PDF Viewer, including its high-level component architecture, rendering pipeline, data flow across the client and server boundaries, and performance optimization strategies. Understanding these concepts will help you make informed decisions about customization, feature integration, and troubleshooting.
+
+## Overview
+
+The Syncfusion React PDF Viewer operates on a **hybrid client-server architecture** designed for scalability, performance, and rich interactivity:
+
+- **Client-side layer**: A responsive React component that handles user interaction, rendering, annotations, form filling, digital signature creation, and import/export operations directly in the browser. The client provides a smooth, zero-latency user experience for common operations like navigation, zooming, markup, and lightweight document export/import.
+
+- **Server-side layer**: Optional back-end services (via `serviceUrl`) that enable advanced or heavy-weight features such as OCR, document conversions (DOCX/Excel/PowerPoint to PDF), digital signature validation, encryption/decryption and extensive document preprocessing using the Syncfusion PDF Library.
+
+**Key Technology Stack:**
+- **PDFium**: Google's open-source PDF rendering and manipulation engine used for rasterization on the client. We use PDFium for PDF to image conversion alone.
+- **Syncfusion PDF Library**: Server-side library for advanced document processing, preprocessing, Embedded Text extraction, Metadata, Annotation, Form fields data, export operations Parsing and Rasterization. 
+
+## High-level components
+
+The React PDF Viewer is built as a set of modular components, each responsible for a specific responsibility in the viewing pipeline. The following diagram illustrates how these components interact:
+
+- **UI Shell** – Provides the container layout, dialogs, panels, and responsive structure. Manages the overall layout and ensures the viewer adapts responsively across different screen sizes and devices.
+
+- **Viewer Core** – Coordinates viewer state, document life-cycle, and event routing. Acts as the central orchestrator that manages document loading, page navigation, state synchronization, and event propagation across all modules.
+
+- **Rendering Engine Worker** – Uses `PDFium` to rasterize individual PDF pages into visual page images for display. Page rasterization is performed off the main thread to ensure smooth scrolling and a responsive user interface. All higher‑level document processing, including text extraction, annotations, form handling, and UI behavior, is managed separately by the `Syncfusion PDF Library` and viewer logic.
+
+- **Toolbar** – Exposes user actions such as navigation, zooming, annotation tools, printing, and download. 
+
+See [Toolbar Integration](../toolbar-customization/overview) for customization options and available tools.
+
+- **Thumbnail and Bookmark panels** – Enable page navigation and structural browsing. Allow users to quickly jump between pages and view document structure hierarchically. 
+
+See [Thumbnail Page](../navigation#thumbnail-navigation) and [Bookmark Page](../navigation#bookmark-navigation) for page navigation.
+
+- **Annotation and Forms modules** – Manage interactive PDF elements and forms. Interactive elements are indexed and maintained separately for efficient manipulation and serialization.
+
+See [Annotations](../annotation/overview) and [Working with Form Fields](../forms/overview) for detailed usage and API reference.
+
+- **Injected Services** – Enable optional features such as text search, magnification, printing, and form filling. These services are plugged into the viewer architecture based on your licensing and configuration.
+
+See [Text Search](../text-search), [Magnification](../magnification), [Printing](../print/overview) to explore more features.
+
+## Document parsing & internal data model
+
+When a PDF document is loaded, it is processed to build an internal data model that supports rendering and user interaction in the viewer. PDFium is used only to rasterize pages into images, while all document parsing and data modeling is handled by the Syncfusion PDF Library.
+
+This internal data model acts as the foundation for features such as text selection, search, annotations, forms, and accessibility.
+
+**Key aspects of the data model:**
+
+ - **Page representation**: Each page is represented as an image for rendering; extracted text, vector commands and other resources are provided as separate layers for search, accessibility, annotations, and form overlays.
+- **Font and resource management**: Fonts are extracted and processed; embedded and external fonts are handled gracefully.
+- **Annotation and form field tracking**: Interactive elements are indexed and maintained separately for efficient manipulation and serialization.
+- **Resource caching**: Parsed page resources are cached to minimize repeated processing during page navigation and zoom operations, improving responsiveness.
+
+## Network & serviceUrl interactions
+
+The React PDF Viewer supports both **standalone client-side** and **client-server hybrid** architectures:
+
+### Client-only mode (no server)
+- Use the [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) property to load PDF files directly from your web server or CDN.
+- All viewing, annotations, and form interactions occur on the client, with page rendering handled locally and document logic managed by the viewer and PDF Library.
+- No network latency for viewing operations; ideal for lightweight, offline-friendly applications.
+
+### Client-server mode (with serviceUrl)
+- The [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#serviceurl) property enables server‑backed features such as advanced document processing, OCR, streaming, and import/export operations using the Syncfusion PDF Library.
+- Documents may be streamed incrementally (useful for large files) or fetched fully before rendering, depending on your configuration.
+- Server-side preprocessing can optimize documents before delivering them to clients.
+
+## Related architecture and integration topics
+
+- [Getting Started with React PDF Viewer](../getting-started) – Quick setup and your first PDF viewer.
+- [Loading PDF Documents](../open-pdf-files) – Detailed guide on document sources, streaming, and error handling.
+- [Toolbar Integration and Customization](../toolbar-customization/overview) – Customize toolbar buttons and actions.
+- [Annotations in React PDF Viewer](../annotation/overview) – Complete reference for annotation types, styling, and API.
+- [Working with Form Fields](../forms/overview) – Form field rendering, validation, and submission workflows.
+- [Digital Signatures](../digital-signature/add-digital-signature-react) – Signing PDFs and validating signatures.
+- [Accessibility Guidelines](../accessibility) – Keyboard shortcuts, screen reader support, and best practices.
+- [Server Integration](../getting-started-with-server-backed) – Using `serviceUrl` for advanced preprocessing and export operations.
+- [Troubleshooting Common Issues](../troubleshooting/troubleshooting) – CORS, authentication, rendering, and worker problems.
+- [Syncfusion PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview) – Server-side PDF processing and manipulation reference.

Document-Processing/PDF/PDF-Viewer/react/architecture/how-pdf-rendering-works-in-browser.md

@@ -0,0 +1,109 @@
+---
+layout: post
+title: How PDF Rendering Works in the Browser in React | Syncfusion
+description: Understand how PDF documents are parsed, rasterized, and displayed in the browser using the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# How PDF Rendering Works in the Browser
+
+Rendering a PDF in the browser involves converting a structured PDF document into visual and interactive content that users can view and work with. The Syncfusion React PDF Viewer uses a combination of **PDFium**, [Syncfusion PDF Library](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview), and viewer-side logic to achieve accurate rendering, smooth interactions, and scalable performance.
+
+This page explains the **conceptual rendering flow** used by the viewer, focusing on responsibilities and data flow rather than low-level engine internals.
+
+## Overview of the Rendering Pipeline
+
+PDF rendering in the browser follows a staged pipeline:
+
+**PDF Loading → Parsing & Processing → Page Rasterization → Layer Composition → User Interaction**
+
+Each stage is designed to isolate responsibilities and ensure responsiveness, even for large or complex documents.
+
+## 1. PDF Loading and Parsing
+
+When a PDF document is opened in the viewer:
+
+- The PDF file is loaded from a URL, local file, or streamed source.
+- The document structure (pages, objects, and resources) is parsed.
+- Parsing and document-level processing are handled using the [Syncfusion PDF Library](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/overview).
+
+Large documents are processed incrementally so that initial pages can be displayed without waiting for the entire document to be parsed.
+
+## 2. Document and Resource Processing
+
+After parsing, the **Syncfusion PDF Library** manages document-level features and metadata, including:
+
+- Text extraction and layout information
+- Annotation data (highlights, shapes, comments, stamps)
+- Form fields and form data
+- Document structure and page hierarchy
+
+This processing stage prepares the data required for rendering and interaction but does not generate visual output.
+
+## 3. Page Rasterization (PDFium)
+
+Visual rendering of PDF pages is performed using **PDFium**, which is used **exclusively to rasterize pages into images**.
+
+The rasterization process works as follows:
+
+- Individual pages are passed to PDFium for rendering.
+- PDFium converts each page into a raster image at the required resolution.
+- The generated image is returned to the viewer for display.
+
+Rendering is **DPI-aware**, ensuring sharp output across standard and high‑resolution displays. Page images may be cached and reused during scrolling or zooming to improve performance.
+
+N> PDFium is used only for **page-to-image rendering**. It is not responsible for text extraction, annotations, form logic, or UI behavior.
+
+
+## 4. Rendering and Interaction Layers
+
+Once a page image is generated, the viewer composes the final output using multiple viewer-managed layers:
+
+- **Page Image Layer**  
+  The page image produced by PDFium after rasterization. This serves as the visual base of the page.
+
+- **Text Layer**  
+  Generated using data from the **Syncfusion PDF Library** and viewer logic. This invisible layer enables text selection, search, and copy‑paste while aligning precisely with the page image.
+
+- **Annotation and Form Layer**  
+  Managed entirely by the **PDF Library and viewer**. This layer supports annotations, highlights, comments, and interactive form fields.
+
+- **UI Layer**  
+  Viewer interface elements such as toolbars, thumbnails, navigation controls, and dialogs.
+
+This layered approach allows interactive elements to update independently without requiring page images to be re-rendered.
+
+## 5. Processing Model and Thread Usage
+
+PDF rendering and processing involve CPU-intensive operations. To maintain UI responsiveness:
+
+- **PDFium rasterization** is typically executed in **Web Workers**.
+- **PDF Library processing** (text, annotations, form data) is coordinated by viewer logic.
+- The main thread is responsible for DOM updates and handling user interactions.
+
+
+## 6. Lazy Rendering and Performance Optimization
+
+To efficiently handle large PDF documents:
+
+- Only pages that are visible in the viewport undergo rasterization and are displayed initially.
+- Additional pages are rendered on demand as the user scrolls or navigates.
+- Previously rendered page images may be reused when possible.
+
+This lazy rendering approach reduces memory usage and improves performance across devices.
+
+## Summary
+
+The Syncfusion React PDF Viewer renders PDF documents in the browser using a clear separation of responsibilities. The **Syncfusion PDF Library** handles document parsing, text extraction, annotations, and form logic, while **PDFium** is used solely to rasterize pages into images. Viewer-managed layers and lazy rendering ensure smooth interaction, accurate visuals, and scalable performance for documents of all sizes.
+
+---
+
+## See Also
+
+- [Architecture of Syncfusion React PDF Viewer](../architecture/architecture-pdfviewer)
+- [Loading PDF Documents](../open-pdf-files)
+- [Working with Annotations](../annotation/overview)
+- [PDF Forms in React PDF Viewer](../forms/overview)
+- [Syncfusion PDF Library Overview](../../../PDF-Library/overview)