UG Documentation for react Security, Digital signature and interaction navigation samples

Document-Processing/PDF/PDF-Viewer/react/digital-signature/add-digital-signature-react.md

@@ -9,11 +9,12 @@ documentation: ug
 
 # Add Digital Signature to PDF
 
-This section explains how to **add signature fields** using the Syncfusion **React PDF Viewer** and how to apply **digital (PKI) signatures** using the **JavaScript PDF Library**.
+Learn how to **add signature fields** with the Syncfusion **React PDF Viewer** and how to apply **digital (PKI) signatures** with the **JavaScript PDF Library**.
+
 
 N> As instructed by team leads — use the **React PDF Viewer only to add & place signature fields**. Use the **JavaScript PDF Library** to apply the *actual cryptographic digital signature*.
 
-## Overview (Explanation)
+## Overview
 
 A **digital signature** provides:
 - **Authenticity** – confirms the signer’s identity.
@@ -30,7 +31,7 @@ Syncfusion supports a hybrid workflow:
 1. Open **Form Designer**.
 2. Select **Signature Field**.
 3. Click on the document to place the field.
-4. Configure Name, Tooltip, Required, etc.
+4. Configure **Name**, **Tooltip**, and **Required** as needed.
 
 ![Signature annotation toolbar](../../javascript-es6/images/add_sign.png)
 
@@ -50,9 +51,7 @@ viewerRef.current?.formDesignerModule.addFormField('SignatureField', {
 {% endtabs %}
 
 ## Capture Electronic Signature (Draw / Type / Upload)
-Users click the field → dialog appears → they can **Draw**, **Type**, or **Upload** a handwritten signature.
-
-This creates a *visual* signature only (not cryptographically secure).
+When the user clicks the field, a dialog appears where they can **Draw**, **Type**, or **Upload** a handwritten signature. The result is a *visual* signature only — it is not cryptographically secure. For a cryptographically secure signature.
 
 ## Apply PKI Digital Signature (JavaScript PDF Library)
 
@@ -89,16 +88,16 @@ document.destroy();
 N> See the PDF Library [Digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) to know more about Digital Signature in PDF Documents.
 
 ## Important Notes
-- **Do all form edits first. Sign last.** Any PDF modification *after signing* invalidates the signature.
-- Self‑signed PFX will show **Unknown / Untrusted** until added to Trusted Certificates.
+- **Complete all form edits before signing.** Any PDF modification after signing invalidates the signature.
+- A self‑signed PFX certificate displays as **Unknown / Untrusted** until it is added to the consumer's **Trusted Certificates**.
 
 ## Best Practices
-- Place signature fields via Viewer for accurate layout.
-- Apply PKI signature using PDF Library only.
-- Use CMS + SHA‑256 for compatibility.
-- Avoid flattening after signing.
+- Place signature fields with the Viewer for accurate layout.
+- Apply the PKI signature with the PDF Library only.
+- Use **CMS** with **SHA‑256** for broad compatibility.
+- Avoid flattening the form after signing.
 
 ## See Also
-- [Validate Digital Signatures](./validate-digital-signatures)
-- [Custom fonts for Signature fields](../../how-to/custom-font-signature-field)
-- [Signature workflows](./signature-workflow)
+- [Validate Digital Signatures](./validate-digital-signatures) — verify an existing digital signature and inspect signer details.
+- [Custom fonts for Signature fields](../../how-to/custom-font-signature-field) — configure custom fonts for the signature field appearance.
+- [Signature workflows](./signature-workflow) — end-to-end signing and approval workflows.

Document-Processing/PDF/PDF-Viewer/react/digital-signature/customize-signature-appearance.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Customize Signature Appearance in React PDF Viewer | Syncfusion
-description: Learn here all about how to customize visible PKI digital signature appearances using the Syncfusion PDF Library.
+description: Learn how to customize the appearance of visible PKI digital signatures in PDFs using the Syncfusion PDF Library for React applications.
 platform: document-processing
 control: PdfViewer
 documentation: ug
@@ -13,20 +13,23 @@ This page explains how to customize the visual appearance of PKI [digital signat
 
 ## Overview
 
-When applying a PKI [digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) you can create a visible appearance that includes text, images (logo/seal), fonts, and layout. Appearance rendering is done by composing signature appearance graphics with the PDF Library and embedding that appearance into the signature field.
+When applying a PKI [digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature), you can create a visible appearance that includes text, images (logo/seal), fonts, and layout. The appearance is rendered by drawing text and images into signature graphics via the PDF Library, then embedding them in the signature field.
 
 For implementation details and exact API usage, check the Syncfusion PDF Library references:
 
-- .NET PDF Library — [Drawing text/image in the signature appearance]( https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#drawing-textimage-in-the-signature-appearance)
+- .NET PDF Library — [Drawing text/image in the signature appearance](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#drawing-textimage-in-the-signature-appearance)
 - JavaScript PDF Library — [Drawing text/image in the signature appearance](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#drawing-textimage-in-the-signature-appearance)
 
 ## What you can customize
 
 - Text (signer name, signing reason, date, descriptive labels)
 - Fonts, sizes, and styles
 - Images (company logo, seal, signature image)
-- Layout and bounding box for the visible appearance
-- Visible vs invisible signatures
+- Layout and bounding box for the visible appearance (page index, x, y, width, and height)
+
+## Visible vs invisible signatures
+
+A PKI signature can be applied as either a **visible** signature (with a rendered appearance placed on a page) or an **invisible** signature (with no visual representation). The Syncfusion PDF Library supports both modes; the customization options on this page apply only to visible signatures.
 
 ## Guidance
 
@@ -39,12 +42,12 @@ For implementation details and exact API usage, check the Syncfusion PDF Library
 
 - Use consistent branding for signature visuals.
 - Keep appearance elements minimal and readable.
-- Avoid including data that might change after signing (dates shown should reflect signing time provided by the TSA when used).
+- Avoid including data that might change after signing; when a Time Stamping Authority (TSA) is used, the displayed date should reflect the time provided by the TSA.
 - When producing legally binding signatures, ensure the PKI signing process and appearance comply with your legal/operational requirements.
 
 ## See Also
 
-- [Add Digital Signature](./add-digital-signature-react)
-- [Validate Digital Signatures](./validate-digital-signatures)
+- [Add Digital Signature in React PDF Viewer](./add-digital-signature-react)
+- [Validate Digital Signatures in React PDF Viewer](./validate-digital-signatures)
 - [Custom fonts for Signature fields](../../how-to/custom-font-signature-field)
 - [Signature workflows](./signature-workflow)

Document-Processing/PDF/PDF-Viewer/react/digital-signature/signature-workflow.md

@@ -46,7 +46,7 @@ function App() {
   );
 }
 
-ReactDOM.createRoot(document.getElementById('sample')!).render(<App />);
+ReactDOM.createRoot(document.getElementById('container')!).render(<App />);
 {% endraw %}
 {% endhighlight %}
 {% endtabs %}
@@ -153,7 +153,7 @@ N> To preview visual differences, check the [Invisible Signature](https://docume
 
 After collecting all signatures and passing validations, **[Lock](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature)** the PDF (and optionally restrict permissions) to prevent further edits.
 
-## Signature Workflow Best Practices (Explanation)
+## Signature Workflow Best Practices
 
 Designing a well‑structured signature workflow ensures clarity, security, and efficiency when working with PDF documents. Signature workflows typically involve multiple participants—reviewers and approvers each interacting with the document at different stages.
 
@@ -187,15 +187,15 @@ To prevent rework, validate the PDF before enabling signatures:
   ![Reviewer using highlights and comments](../images/highlight-comments.png)
 - **Approver** – Ensures feedback is addressed and signs when finalized.  
   ![Signature Image](../images/handwritten-sign.png)
-- **Final Approver** – Verifies requirements, then [Lock Signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature) to make signatures permanent and may restrict further edits.
+- **Final Approver** – Verifies requirements, then [Lock Signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature) to make signatures permanent and restrict further edits.
 
-N> **Implementation tip:** Use the PDF Library’s `flatten` when saving to make annotations and form fields permanent before the last signature. 
+N> **Implementation tip:** Use the PDF Library’s `flatten` when saving to make [annotations](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/annotations#flatten-annotation) and [form fields](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/formfields#flattening-form-fields-in-a-pdf) permanent before the last signature.
 
 ### Multi‑signer patterns and iterative approvals
 - Route the document through a defined **sequence of signers**.  
 - Use [comments and replies](../annotation/comments#add-comments-and-replies) for feedback without altering document content.  
 - For external participants, share only annotation data (XFDF/JSON) when appropriate instead of the full PDF.  
-- After all signatures, **[Lock](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature)** to lock the file. 
+- After all signatures, **[Lock Signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature)** to make the file read-only.
 
 N> Refer to [eSigning PDF Forms](https://document.syncfusion.com/demos/pdf-viewer/react/#/bootstrap5/pdfviewer/esigning-pdf-forms) sample that shows two signers filling only their designated fields and finalizing the document.
 
@@ -212,7 +212,7 @@ N> Refer to [eSigning PDF Forms](https://document.syncfusion.com/demos/pdf-viewe
 - [Customize Annotation](../annotation/customize-annotation)
 - [Digital Signature - JavaScript PDF Library](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature)
 - [Handwritten Signature](../annotation/signature-annotation)
-- [Form Fields API](../form-fields-api)
+- [Form Fields API](../forms/form-fields-api)
 - [Add Digital Signature](./add-digital-signature-react)
 - [Customize Signature Appearance](./customize-signature-appearance)
-- [Signature workflows](./signature-workflow)
+- [Validate Digital Signatures](./validate-digital-signatures)

Document-Processing/PDF/PDF-Viewer/react/digital-signature/validate-digital-signatures.md

@@ -11,9 +11,9 @@ documentation: ug
 
 This guide explains **how to validate digital signatures** on PDFs when using the **React PDF Viewer** together with the **JavaScript PDF Library**. It clarifies what the Viewer does (display fields and signature appearances) and what the **PDF Library** does (perform **cryptographic validation** and produce validation results).
 
-N> **Important:** The React PDF Viewer renders signature fields and their visual appearances, but **cryptographic validation is performed by the JavaScript PDF Library**. Use the library to check integrity, certificate trust, and timestamp status, and surface the result in your UI. 
+N> **Important:** The React PDF Viewer renders signature fields and their visual appearances, but **cryptographic validation is performed by the JavaScript PDF Library**. Use the library to check integrity, certificate trust, and timestamp status, and surface the result in your UI.
 
-## Overview (Explanation)
+## Overview
 
 A **digital signature** is a cryptographic proof embedded in the PDF that allows verifiers to confirm:
 
@@ -22,15 +22,15 @@ A **digital signature** is a cryptographic proof embedded in the PDF that allows
 - **Timestamp validity** – (If present) the signature was time‑stamped by a trusted TSA at signing time.
 - **Revocation status** – Whether the signer’s certificate was revoked at or after signing (OCSP/CRL).
 
- In Syncfusion, you typically **[design the signature field in the Viewer](../../forms/manage-form-fields/create-form-fields#signature-field)** and then use the Syncfusion PDF Library to perform cryptographic validation. See the PDF Library documentation for API references and examples: [Digital signature validation (PDF Library)](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#digital-signature-validation).
+In Syncfusion, you typically **[design the signature field in the Viewer](../../forms/manage-form-fields/create-form-fields#signature-field)** and then use the Syncfusion PDF Library to perform cryptographic validation. See the PDF Library documentation for API references and examples: [Digital signature validation (PDF Library)](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#digital-signature-validation).
 
-## How validation fits in the Viewer flow (Concept)
+## How validation fits in the Viewer flow
 
 1. Load and interact with the PDF in **React PDF Viewer** (place fields, fill forms). 
 2. Use **JavaScript PDF Library** to **open the PDF bytes** and **validate the signature**.
 3. Display the validation outcome (valid/invalid/unknown) in your React UI (badge, toast, side panel).
 
-## How‑to: Validate a digital signature (Client‑side)
+## How to: Validate a digital signature (Client-side)
 
 Cryptographic signature validation is performed by the Syncfusion PDF Library. Please refer to the PDF Library documentation for detailed guidance and sample code. The following pages cover validation concepts, APIs, and full examples:
 
@@ -42,27 +42,27 @@ Cryptographic signature validation is performed by the Syncfusion PDF Library. P
 
 After using the PDF Library to obtain validation results (integrity, trust, timestamp), surface those results in your React UI (for example: badge, table, or details panel) to communicate status to users.
 
-## Interpreting validation outcomes (Reference)
+## Interpreting validation outcomes
 
 - **Valid** – Integrity OK **and** certificate is trusted. (Timestamp valid if present.) 
 - **Invalid** – Bytes changed after signing **or** signature object malformed.
 - **Unknown/Not Trusted** – Integrity OK but signer certificate is not trusted locally (common with **self‑signed PFX** used for demos). Import the signer certificate into the trusted store to see a *Valid* badge.
 
-## Best practices (Explanation)
+## Best practices
 
 - **Single‑save rule:** Do **all edits first**, then **sign**, and **do not modify** the PDF after signing; modifying bytes after signing will invalidate the signature.
 - **Establish trust:** For demos, a self‑signed PFX will appear *Unknown*. For production, use a certificate that chains to a trusted CA or import the signer/issuer to the verifier’s trust store.
 - **Prefer timestamp (TSA):** A trusted timestamp improves long‑term validation even if the signer’s cert later expires or is revoked.
-- **Surface status in UI:** Show a clear badge (Valid/Invalid/Unknown) near the signature field or toolbar, and offer a *View details* panel with integrity, trust, and timestamp info. 
+- **Surface status in UI:** Show a clear badge (Valid/Invalid/Unknown) near the signature field or toolbar, and offer a *View details* panel with integrity, trust, and timestamp info.
 
 ## Troubleshooting
 
-- **Signature shows Invalid** – Check whether the PDF was modified **after** signing (e.g., second save/flatten). Re‑sign as the last step.
+- **Signature shows Invalid** – Check whether the PDF was modified **after** signing (e.g., second save or flatten). Re‑sign as the last step.
 - **Unknown signer** – You are using a **self‑signed** PFX. Import the certificate into the validator’s trust store or use a CA‑issued certificate.
 - **Algorithm unsupported** – Use CMS/PKCS#7 with SHA‑256 (avoid SHA‑1).
 - **No revocation info** – Ensure OCSP/CRL endpoints are reachable by the validator or embed revocation data if supported.
 
 ## See also
 - [Add Digital Signature](./add-digital-signature-react)
 - [Customize Signature Appearance](./customize-signature-appearance)
-- [Signature workflows](./signature-workflow)
+- [Signature workflow](./signature-workflow)

Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/bookmark.md

@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Navigation in React Pdfviewer control | Syncfusion
-description: Learn here all about Navigation in Syncfusion React Pdfviewer control of Syncfusion Essential JS 2 and more.
+title: Bookmark Navigation in React PDF Viewer control | Syncfusion
+description: Learn about bookmark navigation in the Syncfusion React PDF Viewer control of Syncfusion Essential JS 2 and more.
 platform: document-processing
 control: PDF Viewer
 documentation: ug
@@ -60,7 +60,7 @@ export default function App() {
 
 ### 2. Toggle bookmark view programmatically
 
-Toggle bookmark view programmatically using the [`openBookmarkPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkview#openbookmarkpane) and [`closeBookmarkPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkview#closebookmarkpane) APIs.
+Open or close the bookmark pane programmatically using the [`openBookmarkPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkview#openbookmarkpane) and [`closeBookmarkPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkview#closebookmarkpane) APIs. Call `openBookmarkPane` to show the panel and `closeBookmarkPane` to hide it. Both methods have no return value.
 
 {% tabs %}
 {% highlight ts tabtitle="App.tsx" %}
@@ -102,7 +102,7 @@ export default function App() {
 
 ### 3. Navigate programmatically
 
-Call [`goToBookmark(x, y)`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkview#gotobookmark) where `x` is the zero-based page index and `y` is the vertical coordinate.
+Call [`goToBookmark(pageIndex, y)`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkview#gotobookmark) where `pageIndex` is the zero-based page index (so `1` navigates to the second page) and `y` is the vertical coordinate in PDF page space used to position the view.
 
 {% tabs %}
 {% highlight ts tabtitle="App.tsx" %}
@@ -121,7 +121,7 @@ export default function App() {
     }
     return (
         <div style={{ height: '100vh' }}>
-            <button onClick={goTo}>Go To Page 2</button>
+            <button onClick={goTo}>Go to Page 2</button>
             <PdfViewerComponent
                 id="PdfViewer"
                 ref={viewerRef}
@@ -247,4 +247,4 @@ export default function App() {
 ## Related topics
 
 - [React PDF Viewer toolbar](../toolbar-customization/overview)
-- [Feature Modules](../feature-module)
+- [Feature Modules](https://ej2.syncfusion.com/react/documentation/pdfviewer/feature-module)