diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md
index 50cff678f..e7062848a 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md
@@ -19,7 +19,7 @@ To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` pr
 The following example shows how to enable the redaction toolbar:
 
 {% tabs %}
-{% highlight js tabtitle="index.js" %}
+{% highlight js tabtitle="app.jsx" %}
 
 import * as ReactDOM from 'react-dom/client';
 import * as React from 'react';
@@ -52,8 +52,7 @@ export function App() {
         documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
         resourceUrl= "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
         toolbarSettings={toolbarSettings}
-        
-        style={{ 'height': '680px' }} 
+        style={{ 'height': '680px' }}
       >
         <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
           Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md
index 5e0db5078..1a925cb76 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md
@@ -51,9 +51,8 @@ export function App() {
         documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
         resourceUrl= "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
         toolbarSettings={toolbarSettings}
-        
-        style={{ 'height': '680px' }} 
-      >
+        style={{ 'height': '640px' }}>
+
         <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
           Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
       </PdfViewerComponent>
diff --git a/Document-Processing/PDF/PDF-Viewer/react/Redaction/toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/Redaction/toolbar.md
index e1fdc7a06..c3c367aa5 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/Redaction/toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/Redaction/toolbar.md
@@ -51,7 +51,6 @@ export function App() {
         documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
         resourceUrl= "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
         toolbarSettings={toolbarSettings}
-        
         style={{ 'height': '680px' }} 
       >
         <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/comments.md
index 034ebeadc..03ec468e4 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/annotation/comments.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/comments.md
@@ -111,6 +111,7 @@ Edit comments and replies in the following ways:
 >Deleting the root comment from the comment panel also deletes the associated annotation.
 ```html
 <button id="checkComments">Check the Comments</button>
+```
 ## How to check the comments added by the user
 
 Comments added to the PDF document can be read using the annotation's `comments` property.
diff --git a/Document-Processing/PDF/PDF-Viewer/react/events.md b/Document-Processing/PDF/PDF-Viewer/react/events.md
index a50101a04..acfbf0817 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/events.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/events.md
@@ -70,14 +70,14 @@ Note: For annotation and signature events, see the dedicated Annotations Events
 
 ## bookmarkClick
 
-The [bookmarkClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#bookmarkclickevent) event triggers when a bookmark item is clicked in the bookmark panel.
+The [bookmarkClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#bookmarkclickevent) event triggers when a bookmark item is clicked in the bookmark panel.
 
-- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkClickEventArgs/).
+- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkClickEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -108,14 +108,14 @@ root.render(<App />);
 
 ## toolbarClick
 
-The [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#toolbarclickevent) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name.
+The [toolbarClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#toolbarclickevent) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name.
 
 - Event arguments: `ClickEventArgs`.
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -146,9 +146,9 @@ root.render(<App />);
 
 ## validateFormFields
 
-The [validateFormFields](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#validateformfieldsevent) event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed.
+The [validateFormFields](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#validateformfieldsevent) event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed.
 
-- Event arguments: [ValidateFormFieldsArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/validateFormFieldsArgs/)
+- Event arguments: [ValidateFormFieldsArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/validateFormFieldsArgs)
   - name: Event name
   - documentName: Current document name
   - formField: The last interacted field’s data (if applicable)
@@ -161,7 +161,7 @@ When it triggers
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -200,14 +200,14 @@ Tip
 
 ## zoomChange
 
-The [zoomChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#zoomchangeevent) event triggers when the magnification value changes.
+The [zoomChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#zoomchangeevent) event triggers when the magnification value changes.
 
-- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/zoomChangeEventArgs/).
+- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/zoomChangeEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -239,14 +239,14 @@ root.render(<App />);
 
 ## buttonFieldClick
 
-The [buttonFieldClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#buttonfieldclickevent) event triggers when a button form field is clicked.
+The [buttonFieldClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#buttonfieldclickevent) event triggers when a button form field is clicked.
 
-- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/buttonFieldClickEventArgs/).
+- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/buttonFieldClickEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -277,14 +277,14 @@ root.render(<App />);
 
 ## commentAdd
 
-The [commentAdd](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#commentaddevent) event triggers when a comment is added in the comment panel.
+The [commentAdd](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#commentaddevent) event triggers when a comment is added in the comment panel.
 
-- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/commentEventArgs/).
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/commentEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -315,14 +315,14 @@ root.render(<App />);
 
 ## commentDelete
 
-The [commentDelete](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#commentdeleteevent) event triggers when a comment is deleted in the comment panel.
+The [commentDelete](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#commentdeleteevent) event triggers when a comment is deleted in the comment panel.
 
-- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/commentEventArgs/).
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/commentEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -352,14 +352,14 @@ root.render(<App />);
 
 ## commentEdit
 
-The [commentEdit](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#commenteditevent) event triggers when a comment is edited in the comment panel.
+The [commentEdit](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#commenteditevent) event triggers when a comment is edited in the comment panel.
 
-- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/commentEventArgs/).
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/commentEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -390,14 +390,14 @@ root.render(<App />);
 
 ## commentSelect
 
-The [commentSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#commentselectevent) event triggers when a comment is selected in the comment panel.
+The [commentSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#commentselectevent) event triggers when a comment is selected in the comment panel.
 
-- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/commentEventArgs/).
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/commentEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -428,14 +428,14 @@ root.render(<App />);
 
 ## commentStatusChanged
 
-The [commentStatusChanged](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#commentstatuschangedevent) event triggers when a comment status is changed in the comment panel.
+The [commentStatusChanged](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#commentstatuschangedevent) event triggers when a comment status is changed in the comment panel.
 
-- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/commentEventArgs/).
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/commentEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -466,14 +466,14 @@ root.render(<App />);
 
 ## created
 
-The [created](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#createdevent) event is triggered during the creation of the PDF Viewer component.
+The [created](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#createdevent) event is triggered during the creation of the PDF Viewer component.
 
 - Event arguments: `void`.
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -504,16 +504,16 @@ root.render(<App />);
 
 ## customContextMenuBeforeOpen
 
-The [customContextMenuBeforeOpen](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#customcontextmenubeforeopenevent) event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected).
+The [customContextMenuBeforeOpen](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#customcontextmenubeforeopenevent) event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected).
 
-- Event arguments: [CustomContextMenuBeforeOpenEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs/)
+- Event arguments: [CustomContextMenuBeforeOpenEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs)
   - name: Event name
   - ids: Array of menu item ids that will be shown; remove ids to hide items for this open
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -562,9 +562,9 @@ root.render(<App />);
 
 ## customContextMenuSelect
 
-The [customContextMenuSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#customcontextmenuselectevent) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id.
+The [customContextMenuSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#customcontextmenuselectevent) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id.
 
-- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/customContextMenuSelectEventArgs/).
+- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/customContextMenuSelectEventArgs).
 
 - name: Event name
 - id: The id of the clicked menu item
@@ -572,7 +572,7 @@ The [customContextMenuSelect](https://ej2.syncfusion.com/react/documentation/api
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -621,14 +621,14 @@ root.render(<App />);
 
 ## documentLoad
 
-The [documentLoad](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#documentloadevent) event occurs after a document is successfully loaded and parsed.
+The [documentLoad](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#documentloadevent) event occurs after a document is successfully loaded and parsed.
 
-- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/loadEventArgs/).
+- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/loadEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -659,14 +659,14 @@ root.render(<App />);
 
 ## documentLoadFailed
 
-The [documentLoadFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#documentloadfailedevent) event triggers when loading a document fails.
+The [documentLoadFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#documentloadfailedevent) event triggers when loading a document fails.
 
-- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/loadFailedEventArgs/).
+- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/loadFailedEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -696,14 +696,14 @@ root.render(<App />);
 
 ## documentUnload
 
-The [documentUnload](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#documentunloadevent) event triggers when closing the current document.
+The [documentUnload](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#documentunloadevent) event triggers when closing the current document.
 
-- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/unloadEventArgs/).
+- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/unloadEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -734,14 +734,14 @@ root.render(<App />);
 
 ## downloadEnd
 
-The [downloadEnd](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#downloadendevent) event triggers after a document download completes.
+The [downloadEnd](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadendevent) event triggers after a document download completes.
 
-- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/downloadEndEventArgs/).
+- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/downloadEndEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -772,14 +772,14 @@ root.render(<App />);
 
 ## downloadStart
 
-The [downloadStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#downloadstartevent) event triggers when the download operation is initiated.
+The [downloadStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstartevent) event triggers when the download operation is initiated.
 
-- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/downloadStartEventArgs/).
+- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/downloadStartEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -810,14 +810,14 @@ root.render(<App />);
 
 ## exportFailed
 
-The [exportFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#exportfailedevent) event triggers when exporting annotations fails.
+The [exportFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#exportfailedevent) event triggers when exporting annotations fails.
 
-- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/exportFailureEventArgs/).
+- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/exportFailureEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -849,14 +849,14 @@ root.render(<App />);
 
 ## exportStart
 
-The [exportStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#exportstartevent) event triggers when exporting annotations starts.
+The [exportStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#exportstartevent) event triggers when exporting annotations starts.
 
-- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/exportStartEventArgs/).
+- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/exportStartEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -887,14 +887,14 @@ root.render(<App />);
 
 ## exportSuccess
 
-The [exportSuccess](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#exportsuccessevent) event triggers when annotations are exported successfully.
+The [exportSuccess](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#exportsuccessevent) event triggers when annotations are exported successfully.
 
-- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/exportSuccessEventArgs/).
+- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/exportSuccessEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -925,14 +925,14 @@ root.render(<App />);
 
 ## extractTextCompleted
 
-The [extractTextCompleted](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#extracttextcompletedevent) event triggers when text extraction completes.
+The [extractTextCompleted](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#extracttextcompletedevent) event triggers when text extraction completes.
 
-- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/extractTextCompletedEventArgs/).
+- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/extractTextCompletedEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -963,14 +963,14 @@ root.render(<App />);
 
 ## hyperlinkClick
 
-The [hyperlinkClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#hyperlinkclickevent) event triggers when a hyperlink is clicked.
+The [hyperlinkClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#hyperlinkclickevent) event triggers when a hyperlink is clicked.
 
-- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/hyperlinkClickEventArgs/).
+- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/hyperlinkClickEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1001,14 +1001,14 @@ root.render(<App />);
 
 ## hyperlinkMouseOver
 
-The [hyperlinkMouseOver](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#hyperlinkmouseoverevent) event triggers when hovering over a hyperlink.
+The [hyperlinkMouseOver](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#hyperlinkmouseoverevent) event triggers when hovering over a hyperlink.
 
 - Event arguments: HyperlinkMouseOverArgs.
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -1040,14 +1040,14 @@ root.render(<App />);
 
 ## importFailed
 
-The [importFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#importfailedevent) event triggers when importing annotations fails.
+The [importFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#importfailedevent) event triggers when importing annotations fails.
 
-- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/importFailureEventArgs/).
+- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/importFailureEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -1079,14 +1079,14 @@ root.render(<App />);
 
 ## importStart
 
-The [importStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#importstartevent) event triggers when importing annotations starts.
+The [importStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#importstartevent) event triggers when importing annotations starts.
 
-- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/importStartEventArgs/).
+- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/importStartEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1117,14 +1117,14 @@ root.render(<App />);
 
 ## importSuccess
 
-The [importSuccess](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#importsuccessevent) event triggers when annotations are imported successfully.
+The [importSuccess](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#importsuccessevent) event triggers when annotations are imported successfully.
 
-- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/importSuccessEventArgs/).
+- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/importSuccessEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1155,9 +1155,9 @@ root.render(<App />);
 
 ## keyboardCustomCommands
 
-The [keyboardCustomCommands](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#keyboardcustomcommandsevent) event triggers when customized keyboard command keys are pressed.
+The [keyboardCustomCommands](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#keyboardcustomcommandsevent) event triggers when customized keyboard command keys are pressed.
 
-- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/keyboardCustomCommandsEventArgs/).
+- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/keyboardCustomCommandsEventArgs).
 
   - name: Event name
   - keyboardCommand: The command metadata raised by Command Manager
@@ -1169,7 +1169,7 @@ Refer to [Keyboard interaction](./accessibility#keyboard-interaction) for detail
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1215,14 +1215,14 @@ root.render(<App />);
 
 ## moveSignature
 
-The [moveSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#movesignatureevent) event triggers when a signature is moved across the page.
+The [moveSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#movesignatureevent) event triggers when a signature is moved across the page.
 
 - Event arguments: `MoveSignatureEventArgs`.
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1253,14 +1253,14 @@ root.render(<App />);
 
 ## pageChange
 
-The [pageChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#pagechangeevent) event triggers when the current page number changes (for example, via scrolling or navigation controls).
+The [pageChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pagechangeevent) event triggers when the current page number changes (for example, via scrolling or navigation controls).
 
-- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageChangeEventArgs/).
+- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageChangeEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1291,14 +1291,14 @@ root.render(<App />);
 
 ## pageClick
 
-The [pageClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#pageclickevent) event triggers when a mouse click occurs on a page.
+The [pageClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pageclickevent) event triggers when a mouse click occurs on a page.
 
-- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageClickEventArgs/).
+- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageClickEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1329,14 +1329,14 @@ root.render(<App />);
 
 ## pageMouseover
 
-The [pageMouseover](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#pagemouseoverevent) event triggers when the mouse moves over a page.
+The [pageMouseover](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pagemouseoverevent) event triggers when the mouse moves over a page.
 
 - Event arguments: `PageMouseoverEventArgs`.
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1367,14 +1367,14 @@ root.render(<App />);
 
 ## pageOrganizerSaveAs
 
-The [pageOrganizerSaveAs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#pageorganizersaveasevent) event triggers when a Save As action is performed in the page organizer.
+The [pageOrganizerSaveAs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pageorganizersaveasevent) event triggers when a Save As action is performed in the page organizer.
 
 - Event arguments: `PageOrganizerSaveAsEventArgs`.
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1405,14 +1405,14 @@ root.render(<App />);
 
 ## pageRenderComplete
 
-The [pageRenderComplete](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#pagerendercompleteevent) event triggers after a page finishes rendering.
+The [pageRenderComplete](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pagerendercompleteevent) event triggers after a page finishes rendering.
 
-- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageRenderCompleteEventArgs/).
+- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageRenderCompleteEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1443,14 +1443,14 @@ root.render(<App />);
 
 ## pageRenderInitiate
 
-The [pageRenderInitiate](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#pagerenderinitiateevent) event triggers when page rendering begins.
+The [pageRenderInitiate](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#pagerenderinitiateevent) event triggers when page rendering begins.
 
-- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageRenderInitiateEventArgs/).
+- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageRenderInitiateEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1481,14 +1481,14 @@ root.render(<App />);
 
 ## printEnd
 
-The [printEnd](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#printendevent) event triggers when a print action completes.
+The [printEnd](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printendevent) event triggers when a print action completes.
 
-- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/printEndEventArgs/).
+- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/printEndEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1519,14 +1519,14 @@ root.render(<App />);
 
 ## printStart
 
-The [printStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#printstartevent) event triggers when a print action is initiated.
+The [printStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printstartevent) event triggers when a print action is initiated.
 
-- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/printStartEventArgs/).
+- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/printStartEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1557,14 +1557,14 @@ root.render(<App />);
 
 ## removeSignature
 
-The [removeSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#removesignatureevent) event triggers when a signature is removed.
+The [removeSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#removesignatureevent) event triggers when a signature is removed.
 
-- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/removeSignatureEventArgs/).
+- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/removeSignatureEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1595,14 +1595,14 @@ root.render(<App />);
 
 ## resizeSignature
 
-The [resizeSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#resizesignatureevent) event triggers when a signature is resized.
+The [resizeSignature](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resizesignatureevent) event triggers when a signature is resized.
 
-- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/resizeSignatureEventArgs/).
+- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/resizeSignatureEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1633,14 +1633,14 @@ root.render(<App />);
 
 ## resourcesLoaded
 
-The [resourcesLoaded](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#resourcesloadedevent) event triggers after the viewer's required resources are loaded.
+The [resourcesLoaded](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourcesloadedevent) event triggers after the viewer's required resources are loaded.
 
 - Event arguments: `void`.
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1671,14 +1671,14 @@ root.render(<App />);
 
 ## signaturePropertiesChange
 
-The [signaturePropertiesChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#signaturepropertieschangeevent) event triggers when signature properties change.
+The [signaturePropertiesChange](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#signaturepropertieschangeevent) event triggers when signature properties change.
 
-- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/).
+- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1709,14 +1709,14 @@ root.render(<App />);
 
 ## signatureSelect
 
-The [signatureSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#signatureselectevent) event triggers when a signature is selected.
+The [signatureSelect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#signatureselectevent) event triggers when a signature is selected.
 
-- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signatureSelectEventArgs/).
+- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signatureSelectEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1747,14 +1747,14 @@ root.render(<App />);
 
 ## signatureUnselect
 
-The [signatureUnselect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#signatureunselectevent) event triggers when a signature is unselected.
+The [signatureUnselect](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#signatureunselectevent) event triggers when a signature is unselected.
 
-- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signatureUnselectEventArgs/).
+- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/signatureUnselectEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1785,14 +1785,14 @@ root.render(<App />);
 
 ## textSearchComplete
 
-The [textSearchComplete](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#textsearchcompleteevent) event triggers when a text search completes.
+The [textSearchComplete](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#textsearchcompleteevent) event triggers when a text search completes.
 
-- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearchCompleteEventArgs/).
+- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearchCompleteEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1823,14 +1823,14 @@ root.render(<App />);
 
 ## textSearchHighlight
 
-The [textSearchHighlight](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#textsearchhighlightevent) event triggers when searched text is highlighted.
+The [textSearchHighlight](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#textsearchhighlightevent) event triggers when searched text is highlighted.
 
-- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearchHighlightEventArgs/).
+- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearchHighlightEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1861,14 +1861,14 @@ root.render(<App />);
 
 ## textSearchStart
 
-The [textSearchStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#textsearchstartevent) event triggers when a text search is initiated.
+The [textSearchStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#textsearchstartevent) event triggers when a text search is initiated.
 
-- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearchStartEventArgs/).
+- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearchStartEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1899,14 +1899,14 @@ root.render(<App />);
 
 ## textSelectionEnd
 
-The [textSelectionEnd](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#textselectionendevent) event triggers when text selection is complete.
+The [textSelectionEnd](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#textselectionendevent) event triggers when text selection is complete.
 
-- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSelectionEndEventArgs/).
+- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSelectionEndEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1937,14 +1937,14 @@ root.render(<App />);
 
 ## textSelectionStart
 
-The [textSelectionStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#textselectionstartevent) event triggers when text selection is initiated.
+The [textSelectionStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#textselectionstartevent) event triggers when text selection is initiated.
 
 - Event arguments: `TextSelectionStartEventArgs`.
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -1975,14 +1975,14 @@ root.render(<App />);
 
 ## thumbnailClick
 
-The [thumbnailClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#thumbnailclickevent) event triggers when a thumbnail is clicked.
+The [thumbnailClick](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#thumbnailclickevent) event triggers when a thumbnail is clicked.
 
-- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/thumbnailClickEventArgs/).
+- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/thumbnailClickEventArgs).
 
 Example:
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md
index d9fd3e5f4..ef300f665 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md
@@ -20,30 +20,29 @@ To get started with Syncfusion<sup style="font-size:70%">&reg;</sup> React UI co
 
 ## Setup for Local Development
 
-1. Create a new React app [`create-react-app`](https://github.com/facebook/create-react-app) and install it using the following command.
+To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production.
 
-```bash
-npm install -g create-react-app
-```
-
-2. To setup basic `React` sample use following commands.
-
-{% tabs %}
-{% highlight js tabtitle="JSX" %}
+> **Note:**  To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
 
-create-react-app quickstart
-cd quickstart
-npm install
+To create a new React application, run the following command.
 
-{% endhighlight %}
-{% highlight js tabtitle="TSX" %}
+```bash
+npm create vite@latest my-app
+```
+To set-up a React application in TypeScript environment, run the following command.
 
-npx create-react-app quickstart --template cra-template-typescript
-cd quickstart
-npm install
+```bash
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+npm run dev
+```
+To set-up a React application in JavaScript environment, run the following command.
 
-{% endhighlight %}
-{% endtabs %}
+```bash
+npm create vite@latest my-app -- --template react
+cd my-app
+npm run dev
+```
 
 ## Adding Syncfusion<sup style="font-size:70%">&reg;</sup> packages
 
@@ -58,7 +57,7 @@ N> The following changes applies to React version 18 and above.
 
 ## Adding PDF Viewer component and the CSS reference
 
-* Add an HTML div element to act as the PDF Viewer element `public/index.html` using the following code.
+* Add an HTML div element to act as the PDF Viewer element `index.html` using the following code.
 
 ```
    <!DOCTYPE html>
@@ -73,6 +72,7 @@ N> The following changes applies to React version 18 and above.
    <body>
       <div id='sample'>
          <div id='loader'>Loading....</div>
+         <script type="module" src="/src/main.tsx"></script>
       </div>
    </body>
    </html>
@@ -173,11 +173,11 @@ $env:NODE_OPTIONS = "--openssl-legacy-provider"
 Output will be appears as follows.
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/pdfviewer/react/base-cs1/app/index.jsx %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/pdfviewer/react/base-cs1/app/app.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/pdfviewer/react/base-cs1/app/index.tsx %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/pdfviewer/react/base-cs1/app/app.tsx %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
 {% include code-snippet/pdfviewer/react/base-cs1/index.html %}
diff --git a/Document-Processing/PDF/PDF-Viewer/react/getting-started.md b/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
index 2bda29aea..9d77bbcd8 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/getting-started.md
@@ -69,7 +69,7 @@ N> The following changes apply to React version 18 and above.
 
 ## Adding PDF Viewer component and the CSS reference
 
-* Add an HTML div element to act as the PDF Viewer element `public/index.html` using the following code.
+* Add an HTML div element to act as the PDF Viewer element `index.html` using the following code.
 
 ```
    <!DOCTYPE html>
@@ -84,6 +84,7 @@ N> The following changes apply to React version 18 and above.
    <body>
       <div id='sample'>
          <div id='loader'>Loading....</div>
+         <script type="module" src="/src/main.tsx"></script>
       </div>
    </body>
    </html>
@@ -102,7 +103,7 @@ N> The following changes apply to React version 18 and above.
    @import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
 ```
 
-* Add the React PDF Viewer as shown below in `src/index.js` when using JavaScript (JSX). If you're using TypeScript (TSX), add it in `src/index.tsx` to render the PDF Viewer component.
+* Add the React PDF Viewer as shown below in `src/index.js` when using JavaScript (JSX). If you're using TypeScript (TSX), add it in `src/app.tsx` to render the PDF Viewer component.
 
 
 {% tabs %}
@@ -276,8 +277,10 @@ return (<div>
 }
 const root = ReactDOM.createRoot(document.getElementById('sample'));
 root.render(<App />);
+{% endraw %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
+{% raw %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -294,6 +297,7 @@ root.render(<App />);
 <body>
         <div id='sample'>
             <div id='loader'>Loading....</div>
+            <script type="module" src="/src/main.tsx"></script>
         </div>
 </body>
 </html>
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md
index e0bd095e9..0e763b53a 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Change author name using annotation settings in React PDF Viewer | Syncfusion
+title: Change author name using annotation settings in React | Syncfusion
 description: Learn how to change the author name and related annotation settings using the annotationSettings API in the React PDF Viewer.
 platform: document-processing
 control: PDF Viewer
@@ -31,7 +31,7 @@ Change the author name and other properties using the annotationSettings API as
 
 {% tabs %}
 {% highlight ts tabtitle="Standalone" %}
-```ts
+
 import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields } from "../src/index";
 
 PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields);
@@ -40,10 +40,10 @@ viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
 viewer.annotationSettings = { author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, isPrint: true, isDownload: true  };
 viewer.freeTextSettings = { allowTextOnly : true };
 viewer.appendTo("#pdfViewer");
-```
+
 {% endhighlight %}
 {% highlight ts tabtitle="Server-Backed" %}
-```ts
+
 import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields } from "../src/index";
 
 PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields);
@@ -53,6 +53,6 @@ viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
 viewer.annotationSettings = { author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, isPrint: true, isDownload: true  };
 viewer.freeTextSettings = { allowTextOnly : true };
 viewer.appendTo("#pdfViewer");
-```
+
 {% endhighlight %}
 {% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md
index b0efe333b..90e78e08f 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Clear annotations in React PDF Viewer
 
-Use the [deleteAnnotations](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#deleteannotations) method to clear all annotations in the currently loaded document.
+Use the [deleteAnnotations](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#deleteannotations) method to clear all annotations in the currently loaded document.
 
 Example: Clear all annotations in the loaded document
 
@@ -42,5 +42,5 @@ function deleteAnnotationbyId() {
 </script>
 ```
 
-Sample: How to clear annotations using deleteAnnotations
+Sample: [How to clear annotations using deleteAnnotations]
 (https://stackblitz.com/edit/react-xlvqkm?file=public%2Findex.html)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/Context-Menu-Page-Operations1.png b/Document-Processing/PDF/PDF-Viewer/react/images/Context-Menu-Page-Operations1.png
new file mode 100644
index 000000000..3939f80c1
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/Context-Menu-Page-Operations1.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md
index 4fab3cd57..2405d0104 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md
@@ -157,7 +157,7 @@ export function App() {
   </div>);
 }
 function extractPage(){
-// Get the PDF viewer instance
+    // Get the PDF viewer instance
     var viewer = document.getElementById('container').ej2_instances[0];
     //Extract Pages 1,2
     const array = viewer.extractPages('1,2');
diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md
index 606775030..092ccc236 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Organize Page Toolbar Customization in React PDF Viewer control | Syncfusion
+title: Organize Page Toolbar Customization in React | Syncfusion
 description: Learn here all about Organize Page Toolbar Customization in Syncfusion React PDF Viewer control of Syncfusion Essential JS 2 and more.
 platform: document-processing
 control: PDF Viewer
@@ -18,6 +18,7 @@ The `canInsert` property controls the visibility of the insert tool. When set to
 
 {% tabs %}
 {% highlight ts tabtitle="Standalone" %}
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -42,21 +43,23 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
 root.render(<App />);
 
+{% endraw %}
 {% endhighlight %}
 {% highlight ts tabtitle="Server-Backed" %}
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
 function App() {
-  lwt pdfviewer;
+  let pdfviewer;
   return (
     <PdfViewerComponent
       id="PdfViewer"
       ref={(scope) => { pdfviewer = scope; }}
-      serviceUrl='https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
       documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+      serviceUrl='https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
       pageOrganizerSettings={{ canInsert: false }}
       style={{ height: '640px' }}
     >
@@ -68,6 +71,7 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
 root.render(<App />);
 
+{% endraw %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -77,6 +81,7 @@ The `canDelete` property controls the visibility of the delete tool. When set to
 
 {% tabs %}
 {% highlight ts tabtitle="Standalone" %}
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -101,8 +106,10 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
 root.render(<App />);
 
+{% endraw %}
 {% endhighlight %}
 {% highlight ts tabtitle="Server-Backed" %}
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -127,6 +134,7 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
 root.render(<App />);
 
+{% endraw %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -136,6 +144,7 @@ The `canRotate` property controls the visibility of the rotate tool. When set to
 
 {% tabs %}
 {% highlight ts tabtitle="Standalone" %}
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -160,8 +169,10 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
 root.render(<App />);
 
+{% endraw %}
 {% endhighlight %}
 {% highlight ts tabtitle="Server-Backed" %}
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -186,6 +197,7 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
 root.render(<App />);
 
+{% endraw %}
 {% endhighlight %}
 {% endtabs %}
 
diff --git a/Document-Processing/PDF/PDF-Viewer/react/text-search.md b/Document-Processing/PDF/PDF-Viewer/react/text-search.md
index fbe49e308..11b5f543b 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/text-search.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/text-search.md
@@ -110,6 +110,7 @@ While the PDF Viewer's toolbar provides a user-friendly way to search, you can a
 
 The `searchText` method allows you to initiate a search with specific criteria.
 
+{% highlight ts %}
 {% raw %}
 import React, { useRef } from 'react';
 import { PdfViewerComponent } from '@syncfusion/ej2-react-pdfviewer';
@@ -134,11 +135,13 @@ export default function SearchExample() {
   );
 }
 {% endraw %}
+{% endhighlight %}
 
 #### Match Case
 
 To perform a case-sensitive search, set the `isMatchCase` parameter to `true`. This corresponds to the 'Match Case' checkbox in the search panel.
 
+{% highlight ts %}
 {% raw %}
 import React, { useEffect, useRef } from 'react';
 import { PdfViewerComponent } from '@syncfusion/ej2-react-pdfviewer';
@@ -161,11 +164,13 @@ export default function MatchCaseExample() {
   );
 }
 {% endraw %}
+{% endhighlight %}
 
 #### Match Whole Word
 
 You can search for whole words by setting the `isMatchWholeWord` parameter to `true`. When this is enabled, the search will only match occurrences where the search term is not part of a larger word. For example, a search for "view" will not match "viewer".
 
+{% highlight ts %}
 {% raw %}
 import React, { useEffect, useRef } from 'react';
 import { PdfViewerComponent } from '@syncfusion/ej2-react-pdfviewer';
@@ -188,16 +193,17 @@ export default function WholeWordExample() {
   );
 }
 {% endraw %}
+{% endhighlight %}
 
 **Note on 'Match Any Word':** The 'Match Any Word' checkbox in the UI is a feature that splits the input string into multiple words and performs a search for each of them. This is different from the `isMatchWholeWord` parameter of the `searchText` method, which enforces a whole-word match for the entire search string provided.
 
 
 The following text search methods are available in the PDF Viewer,
 
-* [**Search text**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch/#searchtext):- Searches the target text in the PDF document and highlights the occurrences in the pages.
-* [**Search next**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch/#searchnext):- Searches the next occurrence of the searched text from the current occurrence of the PDF Viewer.
-* [**Search previous**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch/#searchprevious):- Searches the previous occurrence of the searched text from the current occurrence of the PDF Viewer.
-* [**Cancel text search**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch/#canceltextsearch):- The text search can be canceled and the highlighted occurrences from the PDF Viewer can be removed .
+* [**Search text**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch#searchtext):- Searches the target text in the PDF document and highlights the occurrences in the pages.
+* [**Search next**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch#searchnext):- Searches the next occurrence of the searched text from the current occurrence of the PDF Viewer.
+* [**Search previous**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch#searchprevious):- Searches the previous occurrence of the searched text from the current occurrence of the PDF Viewer.
+* [**Cancel text search**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearch#canceltextsearch):- The text search can be canceled and the highlighted occurrences from the PDF Viewer can be removed .
 
 ![Alt text](./images/search.png)
 
@@ -560,17 +566,19 @@ The PDF Viewer triggers events during text search operations, allowing you to cu
 
 ### textSearchStart
 
-The [textSearchStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#textsearchstartevent) event is raised the moment a search is initiated from the toolbar UI or by calling `textSearch.searchText(...)` programmatically.
+The [textSearchStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#textsearchstartevent) event is raised the moment a search is initiated from the toolbar UI or by calling `textSearch.searchText(...)` programmatically.
 
 - Triggers when: the user submits a term in the search box or when code calls the search API.
 
-- Event arguments include ([TextSearchStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearchStartEventArgs/)):
+- Event arguments include ([TextSearchStartEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearchStartEventArgs)):
   - searchText: string — the term to search.
   - matchCase: boolean — whether case-sensitive search is enabled.
   - isMatchWholeWord: boolean — whether whole-word matching is enabled.
   - name: string — event name.
   - cancel: boolean — set to true to cancel the default search.
 
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
 {% raw %}
 
 import React from 'react';
@@ -591,19 +599,23 @@ export default function App() {
   );
 }
 {% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 ### textSearchHighlight
 
-The [textSearchHighlight](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#textsearchhighlightevent) event fires whenever an occurrence is highlighted during search or when navigating to next/previous results.
+The [textSearchHighlight](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#textsearchhighlightevent) event fires whenever an occurrence is highlighted during search or when navigating to next/previous results.
 
 - Triggers when: a match is brought into view and highlighted (including navigation between matches).
-- Event arguments include ([TextSearchHighlightEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearchHighlightEventArgs/)):
+- Event arguments include ([TextSearchHighlightEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearchHighlightEventArgs)):
   - bounds: RectangleBoundsModel | RectangleBoundsModel[] — rectangles of the highlighted match.
   - pageNumber: number — page index where the match is highlighted.
   - searchText: string — the searched term.
   - matchCase: boolean — whether case-sensitive search was used.
   - name: string — event name.
 
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
 {% raw %}
 
 import React from 'react';
@@ -623,23 +635,27 @@ export default function App() {
   );
 }
 {% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 ### textSearchComplete
 
-The [textSearchComplete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#textsearchcompleteevent) event is raised after the search engine finishes scanning and resolving all matches for the current query.
+The [textSearchComplete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer#textsearchcompleteevent) event is raised after the search engine finishes scanning and resolving all matches for the current query.
 
 - Triggers when: the search for the submitted term has completed across the document.
 - Typical uses:
   - Update UI with the total number of matches and enable navigation controls.
   - Hide loading indicators or show a "no results" message if none were found.
   - Record analytics for search effectiveness.
-- Event arguments include ([TextSearchCompleteEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearchCompleteEventArgs/)):
+- Event arguments include ([TextSearchCompleteEventArgs](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textSearchCompleteEventArgs)):
   - totalMatches: number — total number of occurrences found.
   - isMatchFound: boolean — indicates whether at least one match was found.
   - searchText: string — the searched term.
   - matchCase: boolean — whether case-sensitive search was used.
   - name: string — event name.
 
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
 {% raw %}
 
 import React from 'react';
@@ -659,6 +675,9 @@ export default function App() {
   );
 }
 {% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
 ## See also
 
 * [Toolbar items](./toolbar)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md
index f8855fb75..06795e2ca 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md
@@ -16,12 +16,12 @@ The annotation toolbar can be customized by showing or hiding default items and
 
 Show or hide the annotation toolbar programmatically during initialization or at runtime.
 
-Use the [EnableAnnotationToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel/#enableannotationtoolbar) property or the [showAnnotationToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/#showannotationtoolbar) method to toggle visibility.
+Use the [EnableAnnotationToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel#enableannotationtoolbar) property or the [showAnnotationToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showannotationtoolbar) method to toggle visibility.
 
 The following code snippet explains how to show or hide the annotation toolbar using the `showAnnotationToolbar` method.
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
@@ -104,14 +104,14 @@ ReactDOM.render(<App />, document.getElementById('container'));
 
 Choose which tools appear and control their order in the annotation toolbar.
 
-Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings/) with the [`AnnotationToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings/#annotationtoolbaritems) property to choose which tools are displayed in the annotation toolbar. The property accepts a list of [`AnnotationToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationToolbarItem/) values. Only the items included in this list are shown; any item not listed is hidden. The rendered order follows the sequence of items in the list.
+Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings) with the [`AnnotationToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings#annotationtoolbaritems) property to choose which tools are displayed in the annotation toolbar. The property accepts a list of [`AnnotationToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationToolbarItem) values. Only the items included in this list are shown; any item not listed is hidden. The rendered order follows the sequence of items in the list.
 
 The annotation toolbar is presented when entering annotation mode in PDF Viewer and adapts responsively based on the available width. Include the Close tool to allow users to exit the annotation toolbar when needed.
 
 The following example demonstrates how to customize the annotation toolbar by specifying a selected set of tools using `AnnotationToolbarItem`.
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/custom-toolbar.md
index cb6b70d28..ed8f16378 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/custom-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/custom-toolbar.md
@@ -16,7 +16,7 @@ Follow these steps to create a custom toolbar for the PDF Viewer:
 
 **Step 1: Create a simple PDF Viewer sample.**
 
-Follow the steps provided in the [getting started](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) guide to create a basic PDF Viewer sample.
+Follow the steps provided in the [getting started](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) guide to create a basic PDF Viewer sample.
 
 **Step 2: Add HTML elements for the custom toolbar.**
 
@@ -603,6 +603,8 @@ class CustomToolbar extends React.Component {
 
 Sample :
 [https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/custom-toolbar]
+(https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/custom-toolbar)
+
 
 ## See also
 * [Feature Modules](./feature-module)
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/form-designer-toolbar.md
index 63e9af5b0..eea7401bc 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/form-designer-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/form-designer-toolbar.md
@@ -16,12 +16,12 @@ The form designer toolbar can be customized by showing or hiding default items a
 
 Show or hide the form designer toolbar programmatically during initialization or at runtime.
 
-Use the [EnableFormDesigner](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel/#enableformdesigner) property or the [showFormDesignerToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/#showformdesignertoolbar) method to toggle visibility.
+Use the [EnableFormDesigner](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel#enableformdesigner) property or the [showFormDesignerToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showformdesignertoolbar) method to toggle visibility.
 
 The following code snippet explains how to show or hide the toolbar using the `EnableFormDesigner` property.
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import React, { useRef } from 'react';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
     ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -89,12 +89,12 @@ export default App;
 
 Choose which tools appear and control their order in the form designer toolbar.
 
-Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings/) with the [`FormDesignerToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings/#formdesignertoolbaritems) property to choose which form design tools are available. The property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formDesignerToolbarItem/) values. The items you include are both displayed and rendered in the order listed; any items you omit are hidden. This provides a streamlined, user-friendly form design experience across devices.
+Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings) with the [`FormDesignerToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings#formdesignertoolbaritems) property to choose which form design tools are available. The property accepts a list of [`FormDesignerToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formDesignerToolbarItem) values. The items you include are both displayed and rendered in the order listed; any items you omit are hidden. This provides a streamlined, user-friendly form design experience across devices.
 
 The following example demonstrates how to customize the form designer toolbar by configuring specific tools using `FormDesignerToolbarItem`.
 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
+{% highlight ts tabtitle="app.tsx" %}
 import React, { useRef } from 'react';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
     ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
diff --git a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/primary-toolbar.md
index 635e2a965..d30a11a6f 100644
--- a/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/primary-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/primary-toolbar.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Primary Toolbar Customization in React PDF Viewer Component | Syncfusion
+title: Primary Toolbar Customization in React PDF Viewer | Syncfusion
 description: Learn here all about primary toolbar customization in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more.
 platform: document-processing
 control: PDF Viewer
@@ -8,18 +8,18 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Primary Toolbar Customization in PDF Viewer Component
+# Primary Toolbar Customization in React PDF Viewer
 
 The primary toolbar of the PDF Viewer can be customized by rearranging existing items, disabling default items, and adding custom items. New items can be placed at specific index positions among the existing items.
 
 ## Show or hide the primary toolbar
 
-Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI. In scenarios where a custom toolbar is required, the built-in toolbar can be hidden. Use the [enableToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel/#enabletoolbar) property or the [showToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/#showtoolbar) method to show or hide the primary toolbar.
+Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI. In scenarios where a custom toolbar is required, the built-in toolbar can be hidden. Use the [enableToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel#enabletoolbar) property or the [showToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showtoolbar) method to show or hide the primary toolbar.
 
 Show or hide the toolbar using the `enableToolbar` property:
 
 {% tabs %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="app.tsx" %}
 import React, { useRef } from 'react';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
@@ -83,7 +83,7 @@ export default App;
 The following code snippet explains how to show or hide the toolbar using the `showToolbar` method.
 
 {% tabs %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="app.tsx" %}
 import React, { useEffect, useRef } from 'react';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
diff --git a/Document-Processing/code-snippet/pdfviewer/react/base-cs1/app/index.jsx b/Document-Processing/code-snippet/pdfviewer/react/base-cs1/app/app.jsx
similarity index 100%
rename from Document-Processing/code-snippet/pdfviewer/react/base-cs1/app/index.jsx
rename to Document-Processing/code-snippet/pdfviewer/react/base-cs1/app/app.jsx
diff --git a/Document-Processing/code-snippet/pdfviewer/react/base-cs1/app/index.tsx b/Document-Processing/code-snippet/pdfviewer/react/base-cs1/app/app.tsx
similarity index 100%
rename from Document-Processing/code-snippet/pdfviewer/react/base-cs1/app/index.tsx
rename to Document-Processing/code-snippet/pdfviewer/react/base-cs1/app/app.tsx
diff --git a/Document-Processing/code-snippet/pdfviewer/react/base-cs1/index.html b/Document-Processing/code-snippet/pdfviewer/react/base-cs1/index.html
index 8720c228f..9479ddef1 100644
--- a/Document-Processing/code-snippet/pdfviewer/react/base-cs1/index.html
+++ b/Document-Processing/code-snippet/pdfviewer/react/base-cs1/index.html
@@ -14,6 +14,7 @@
 <body>
         <div id='sample'>
             <div id='loader'>Loading....</div>
+            <script type="module" src="/src/main.tsx"></script>
         </div>
 </body>
 </html>
\ No newline at end of file