diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index c55fb27e2d..215638d7a4 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -3534,7 +3534,7 @@
 		<a href="/document-processing/word/overview">Word</a>
 		<ul>
 			<li>
-				<a href="/document-processing/word/word-processor/overview">Word Processor</a>
+				<a href="/document-processing/word/word-processor/overview">DOCX Editor</a>
 				<ul>
 					<li>
 						<a href="/document-processing/word/word-processor/asp-net-core/overview">ASP.NET Core</a>
@@ -3851,6 +3851,7 @@
 							<li><a href="/document-processing/word/word-processor/angular/notes">Footnotes and Endnotes</a></li>
 							<li><a href="/document-processing/word/word-processor/angular/view">View</a></li>
 							<li><a href="/document-processing/word/word-processor/angular/security-advisories">Security Advisories</a></li>
+							<li><a href="/document-processing/word/word-processor/angular/unsupported-features">Unsupported Features</a></li>
 							<li>How To
 								<ul>
 									<li><a href="/document-processing/word/word-processor/angular/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
@@ -3911,7 +3912,6 @@
 							<li>Getting Started
 								<ul>
 									<li> <a href="/document-processing/word/word-processor/blazor/getting-started/web-app">Blazor Web App</a></li>
-									<li> <a href="/document-processing/word/word-processor/blazor/getting-started/server-side-application">Blazor Server App</a></li>
 									<li> <a href="/document-processing/word/word-processor/blazor/getting-started/client-side-application">Blazor WASM App</a></li>
 								</ul>
 							</li>
@@ -4067,6 +4067,7 @@
 							<li><a href="/document-processing/word/word-processor/react/notes">Footnotes and Endnotes</a></li>
 							<li><a href="/document-processing/word/word-processor/react/view">View</a></li>
 							<li><a href="/document-processing/word/word-processor/react/security-advisories">Security Advisories</a></li>
+							<li><a href="/document-processing/word/word-processor/react/unsupported-features">Unsupported Features</a></li>
 							<li>How To
 								<ul>
 									<li><a href="/document-processing/word/word-processor/react/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
diff --git a/Document-Processing/Word/Word-Processor/angular/document-editor-toc.html b/Document-Processing/Word/Word-Processor/angular/document-editor-toc.html
index 93de951c06..36ad604811 100644
--- a/Document-Processing/Word/Word-Processor/angular/document-editor-toc.html
+++ b/Document-Processing/Word/Word-Processor/angular/document-editor-toc.html
@@ -87,6 +87,7 @@
         <li><a href="/document-processing/word/word-processor/angular/notes">Footnotes and Endnotes</a></li> 
         <li><a href="/document-processing/word/word-processor/angular/view">View</a></li>
         <li><a href="/document-processing/word/word-processor/angular/security-advisories">Security Advisories</a></li>
+        <li><a href="/document-processing/word/word-processor/angular/unsupported-features">Unsupported features</a></li>
         <li>How To
            <ul>
               <li><a href="/document-processing/word/word-processor/angular/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
diff --git a/Document-Processing/Word/Word-Processor/angular/getting-started.md b/Document-Processing/Word/Word-Processor/angular/getting-started.md
index 084afa607b..112c3625a5 100644
--- a/Document-Processing/Word/Word-Processor/angular/getting-started.md
+++ b/Document-Processing/Word/Word-Processor/angular/getting-started.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Getting Started with Angular DOCX Editor
 
-Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in an Angular application. 
+Syncfusion® Angular DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in an Angular application. 
 
 ## Steps to create an Angular DOCX Editor
 
@@ -20,7 +20,7 @@ Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, an
 
 ### Setup Angular environment
 
-You can use [Angular CLI](https://github.com/angular/angular-cli) to set up your Angular applications. To install Angular CLI, use the following command:
+You can use [Angular CLI](https://github.com/angular/angular-cli) to set up your Angular application. To install Angular CLI, use the following command:
 
 ```bash
 npm install -g @angular/cli
@@ -28,35 +28,53 @@ npm install -g @angular/cli
 
 ### Create an Angular application
 
-Start a new Angular application using the Angular CLI command below:
+**Step 1:** Start a new Angular application using the Angular CLI command below:
 
 ```bash
-ng new my-app
+ng new documenteditor-app
 ```
 
-This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
+**Step 2:** This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
 
-![Initial_setup](images/Initial-setup.png)
+```text
+? Which stylesheet system would you like to use?
+❯ CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
+  Tailwind CSS    [ https://tailwindcss.com                                        ]
+  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
+  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
+  Less            [ http://lesscss.org                                             ]
+```
 
 In this guide, CSS is selected as the stylesheet format.
 
-During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.
-
-![Server Side Rendering setup](images/Server-Side-Rendering-setup.png)
+**Step 3:** During project setup, when prompted for the server-side rendering (SSR) option, choose the appropriate configuration.
 
-Select the required AI tool or 'none' if you do not need any AI tool.
+```text
+? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N) N
+```
 
-![AI tools](images/AI-tools.png)
+**Step 4:** Select the required AI tool or 'none' if you do not need any AI tool.
+
+```text
+? Which AI tools do you want to configure with Angular best practices? https://angular.dev/ai/develop-with-ai
+❯ None
+  Agents.md      [ https://agents.md/                                               ]
+  Claude         [ https://docs.anthropic.com/en/docs/claude-code/memory            ]
+  Cursor         [ https://docs.cursor.com/en/context/rules                         ]
+  Gemini         [ https://ai.google.dev/gemini-api/docs                            ]
+  GitHub Copilot [ https://code.visualstudio.com/docs/copilot/copilot-customization ]
+  JetBrains AI   [ https://www.jetbrains.com/help/junie/customize-guidelines.html   ]
+```
 
-Next, navigate to the created project folder:
+**Step 5:** Next, navigate to the created project folder:
 
 ```bash
-cd my-app
+cd documenteditor-app
 ```
 
 ### Install the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor packages
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-angular-documenteditor).
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Angular Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-angular-documenteditor).
 
 To install the Document Editor component, use the following command:
 
@@ -68,7 +86,9 @@ npm install @syncfusion/ej2-angular-documenteditor --save
 
 The following CSS files are available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/styles.css` file using the following code:
 
-```css
+{% tabs %}
+{% highlight css tabtitle="styles.css" %}
+
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@@ -78,13 +98,17 @@ The following CSS files are available in the `node_modules/@syncfusion` package
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ### Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component
 
-Modify the template in the `src/app/app.ts` file to render the Document Editor component. Add the Angular Document Editor by using the <ejs-documenteditorcontainer> selector in the template section of the app.ts file.
+Modify the `src/app/app.ts` file to render the Document Editor component. Add the Angular Document Editor by using the <ejs-documenteditorcontainer> selector in the `template` section of the `src/app/app.ts` file.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
 
-```typescript
 import { Component } from '@angular/core';
 import {
   DocumentEditorContainerModule,
@@ -107,9 +131,11 @@ import {
   `
 })
 export class App {}
-```
 
-> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
+{% endhighlight %}
+{% endtabs %}
+
+> Note: The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
 
 ### Run the application
 
@@ -118,27 +144,20 @@ Run the application using the following command:
 ```bash
 ng serve --open
 ```
-Open http://localhost:4200 in your browser to run the application.
 
-The Document Editor is displayed as shown below.
+After the application starts, open the localhost URL shown in the terminal. The Angular Document Editor is rendered in the browser with a toolbar and an editable document area, as shown below.
 
-{% tabs %}
-{% highlight ts tabtitle="app.ts" %}
-{% include code-snippet/document-editor/angular/document-editor-container-cs2/src/app.component.ts %}
-{% endhighlight %}
-
-{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/document-editor/angular/document-editor-container-cs2/src/main.ts %}
-{% endhighlight %}
-{% endtabs %}
+![Output of Angular Document Editor](./images/angular_getting_started.png)
 
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Getting-started-angular-word-processor).
 
+You can also explore the Document Editor interactively using the live sample below.
+
 {% previewsample "/document-processing/samples/document-editor/angular/document-editor-container-cs2" %}
 
 ## Video tutorial
 
-To get started quickly with the Document Editor component using CLI, you can check the video below.
+To get started quickly with the Document Editor component using the Angular CLI, you can check the video below.
 
 {% youtube "https://www.youtube.com/watch?v=UHdjjR_BbQY" %}
 
@@ -152,6 +171,12 @@ The Document Editor component requires server-side interactions for the followin
 * Spell check
 * Save as file formats other than SFDT and DOCX
 
->Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.
+> Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.
 
 For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page.
+
+## See also
+
+- [Open a document](./import)
+- [Save a document](./export)
+- [Collaborative Editing](./collaborative-editing/overview)
diff --git a/Document-Processing/Word/Word-Processor/angular/images/Initial-setup.png b/Document-Processing/Word/Word-Processor/angular/images/Initial-setup.png
deleted file mode 100644
index 1c7bd9ec70..0000000000
Binary files a/Document-Processing/Word/Word-Processor/angular/images/Initial-setup.png and /dev/null differ
diff --git a/Document-Processing/Word/Word-Processor/angular/images/angular_getting_started.png b/Document-Processing/Word/Word-Processor/angular/images/angular_getting_started.png
new file mode 100644
index 0000000000..f75c3d3bc8
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/angular/images/angular_getting_started.png differ
diff --git a/Document-Processing/Word/Word-Processor/angular/overview.md b/Document-Processing/Word/Word-Processor/angular/overview.md
index 567933de74..d2a8ef9b16 100644
--- a/Document-Processing/Word/Word-Processor/angular/overview.md
+++ b/Document-Processing/Word/Word-Processor/angular/overview.md
@@ -1,14 +1,14 @@
 ---
 layout: post
-title: Overview in Angular Document editor component | Syncfusion
-description: Learn here all about Index in Syncfusion Angular Document editor component of Syncfusion Essential JS 2 and more.
+title: Overview of Angular DOCX Editor | Syncfusion
+description: Learn about the Angular DOCX Editor control, which enables you to create, edit, view, and print Word documents.
 platform: document-processing
 control: Index 
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Overview
+# Overview of the Angular DOCX Editor
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> [Angular DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/angular-docx-editor) (Document Editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats. 
 
@@ -57,4 +57,4 @@ You can deploy web APIs for server-side dependencies of Document Editor componen
 
 To know more about server-side dependencies, refer this [page](./web-services/core).
 
->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
\ No newline at end of file
+>Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
diff --git a/Document-Processing/Word/Word-Processor/angular/unsupported-features.md b/Document-Processing/Word/Word-Processor/angular/unsupported-features.md
new file mode 100644
index 0000000000..f6a95ea541
--- /dev/null
+++ b/Document-Processing/Word/Word-Processor/angular/unsupported-features.md
@@ -0,0 +1,58 @@
+---
+layout: post
+title: Unsupported features in Angular DOCX Editor component | Syncfusion
+description: Learn about the list of unsupported features in the Angular Document Editor to understand its limitations.
+control: Unsupported features
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Unsupported Features in Angular DOCX Editor
+
+This section describes the unsupported elements in Syncfusion® Angular DOCX Editor (Document Editor) 
+
+## Document formatting
+
+| Feature | Details | Supported |
+|--------|--------|-----------|
+| Paragraph Properties | Shading | No |
+|  | Mirror indent | No |
+|  | Suppress line numbers | No |
+|  | Don’t hyphenate | No |
+|  | Border styles (*Except dotted and dashed; other styles are rendered as solid*) | Partial |
+| Text Properties | Shading  | No |
+|  |  Position | No |
+|  |  Font kerning | No |
+|  |  Ligatures | No |
+|  |  Number spacing | No |
+|  |  Number forms | No |
+|  |  Stylistic sets | No |
+|  |  Contextual alternates| No |
+|  | Text Direction (Top to Bottom, Bottom to Top) | No |
+|  | Border styles (*Except dotted and dashed; other styles are rendered as solid*) | Partial |
+| Section Formatting | Mirror margins | No |
+| | Gutter | No |
+| | Line numbers | No |
+| | Bi-direction | No |
+| Page background | Page background color or image | No |
+| Watermark  |  Text and Picture watermark| No |
+| Table Format | Border styles (*Except dotted and dashed; other styles are rendered as solid*) | Partial |
+
+## Word Document Elements
+
+| Feature | Supported |
+|--------|----------------|
+| ActiveX Controls | No |
+| Cover Page | No |
+| Embedded Objects | No |
+| Images | Bitmap images only |
+| Ink/Draw | No |
+| Video or audio files | No |
+| Macros | No |
+| Models, Smart-Art, and Charts | [Supported Charts](https://help.syncfusion.com/document-processing/word/word-processor/angular/chart) |
+| Shapes, Textboxes, and WordArt | [Supported shapes](https://help.syncfusion.com/document-processing/word/word-processor/angular/shapes#supported-shapes) *(Shape Properties: Fill types, borders, rotation and effects are not supported) |
+| Signature line | No |
+| Special Characters, Symbols, Equations | No |
+| Built-in and custom document properties | No |
+| Comment reactions | No |
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md b/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md
index 2d580a496b..570db78c13 100644
--- a/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md
+++ b/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Getting Started with ASP.NET Core DOCX Editor
 
-Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a ASP.NET Core application. 
+Syncfusion® ASP.NET Core DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a ASP.NET Core application. 
 
 ## Steps to create an ASP.NET Core DOCX Editor
 
-This section briefly explains about how to include [ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) control in your ASP.NET Core application using Visual Studio.
+This section briefly explains how to include [ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) control in your ASP.NET Core application using Visual Studio.
 
 ### Prerequisites
 
@@ -24,13 +24,13 @@ This section briefly explains about how to include [ASP.NET Core DOCX Editor](ht
 Create a new ASP.NET Core web application using one of the following methods:
 
 * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app)
-* [Create a Project using Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages)
 
-### Install Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Nuget packages
+
+### Install Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core NuGet packages
 
 To add **ASP.NET Core Document Editor** component in the application, follow the steps below.
- - open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), 
- - search and install the following package
+ - Open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), 
+ - Search and install the following package
     - [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core/)
     
 Alternatively, you can utilize the following package manager command to achieve the same.
@@ -43,11 +43,11 @@ Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> This package includes dependencies such as  [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for license validation.”
+N> This package includes dependencies such as  [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for license validation.
 
 ### Add Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Tag Helper
 
-Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper.
+Open `~/Views/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_ViewImports.cshtml" %}
@@ -59,7 +59,7 @@ Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelpe
 
 ### Add Themes and Script References
 
-Here, the theme and script is referred using CDN inside the `<head>` of `~/Pages/Shared/_Layout.cshtml` file as follows,
+Here, the theme and scripts are referenced using CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` file as follows,
 
 {% tabs %}
 {% highlight cshtml tabtitle="~/_Layout.cshtml" %}
@@ -79,7 +79,7 @@ N> Refer the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentation/
 
 ### Register Syncfusion<sup style="font-size:70%">&reg;</sup> Script Manager
 
-Also, register the script manager `<ejs-script>` at the end of `<body>` in the ASP.NET Core application as follows.
+Also, register the script manager `<ejs-scripts>` at the end of `<body>` in the `~/Views/Shared/_Layout.cshtml` file as follows.
 
 {% tabs %}
 {% highlight cshtml tabtitle="~/_Layout.cshtml" %}
@@ -95,18 +95,26 @@ Also, register the script manager `<ejs-script>` at the end of `<body>` in the A
 
 ### Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Document Editor tag helper in `~/Pages/Index.cshtml` page.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Document Editor tag helper in `~/Views/Home/Index.cshtml` page.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/document-editor/asp-net-core/document-editor-container/getting-started/tagHelper %}
+
+<ejs-documenteditorcontainer id="container" height="620px"></ejs-documenteditorcontainer>
+
 {% endhighlight %}
 {% endtabs %}
 
 ### Run the application
 
-Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Document Editor control will be rendered in the default web browser.
+Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Document Editor control will be rendered in the default web browser as shown below.
+
+![Output of ASP.NET Core DOCX Editor](./images/aspnetcore-docx-editor.png)
+
+N> You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/tree/main/DocumentEditor/ASP.NET%20Core%20Tag%20Helper%20Examples).
 
-![ASP.NET Core DocumentEditor Control](images/documenteditor-control.png)
+## See also
 
-N> You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/tree/main/DocumentEditor/ASP.NET%20Core%20Tag%20Helper%20Examples).
\ No newline at end of file
+- [Open a document](./import)
+- [Save a document](./export)
+- [Collaborative Editing](./collaborative-editing/overview)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/images/aspnetcore-docx-editor.png b/Document-Processing/Word/Word-Processor/asp-net-core/images/aspnetcore-docx-editor.png
new file mode 100644
index 0000000000..eb4c562318
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/asp-net-core/images/aspnetcore-docx-editor.png differ
diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/overview.md b/Document-Processing/Word/Word-Processor/asp-net-core/overview.md
index e68d6bcb11..46a883002a 100644
--- a/Document-Processing/Word/Word-Processor/asp-net-core/overview.md
+++ b/Document-Processing/Word/Word-Processor/asp-net-core/overview.md
@@ -1,14 +1,14 @@
 ---
 layout: post
-title: Overview in Document Editor Component | Syncfusion
-description: Learn here all about overview in Syncfusion Document Editor component of Syncfusion Essential JS 2 and more.
+title: Overview of ASP.NET Core DOCX Editor | Syncfusion
+description: Learn about the ASP.NET Core DOCX Editor control, which enables you to create, edit, view, and print Word documents.
 platform: document-processing
 control: Index
 documentation: ug
 ---
 
 
-# Overview
+# Overview of the ASP.NET Core DOCX Editor
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> [ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) (Document Editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats. 
 
@@ -33,4 +33,4 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> [ASP.NET Core DOCX Editor](
 * Provides intuitive UI options like context menu, [dialogs](../asp-net-core/dialog), and [navigation pane](../asp-net-core/find-and-replace#options-pane).
 * Provides a [ribbon interface](../asp-net-core/ribbon.md) similar to Microsoft Word, with tab-based commands for quick and intuitive access to features. 
 * [Localizes](../asp-net-core/global-local) all the static text to any desired language.
-* Allows to create a lightweight Word viewer using module injection to view and [prints](../asp-net-core/print) Word documents.
\ No newline at end of file
+* Allows to create a lightweight Word viewer using module injection to view and [prints](../asp-net-core/print) Word documents.
diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md
index 31153af665..b440eabe20 100644
--- a/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md
+++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with ASP.NET MVC DOCX Editor
 
-Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a ASP.NET MVC application. 
+Syncfusion® ASP.NET MVC DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a ASP.NET MVC application. 
 
 ## Steps to create an ASP.NET MVC DOCX Editor
 
@@ -22,15 +22,18 @@ This section briefly explains about how to include [ASP.NET MVC DOCX Editor](htt
 ### Create ASP.NET MVC application with HTML helper
 
 * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app)
-* [Create a Project using Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/project-template)
+
 
 ### Install Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Nuget packages
 
 To add **ASP.NET MVC Document Editor** component in the application, follow the steps below.
-- open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), 
-- search and install the following package
+- Open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), 
+- Search and install the following package
     - [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5)
 
+
+Alternatively, you can utilize the following package manager command to achieve the same.
+
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
 
@@ -39,7 +42,7 @@ Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.ej2version }}
 {% endhighlight %}
 {% endtabs %}
 
-N> This package includes dependencies such as  [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for license validation.”
+N> This package includes dependencies such as  [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for license validation.
 
 ### Add namespace
 
@@ -93,13 +96,21 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Document Ed
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/getting-started/razor %}
+@Html.EJS().DocumentEditorContainer("container").Height("590px").Render()
 {% endhighlight %}
 {% endtabs %}
 
 
 ### Run the application
 
-Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Document Editor control will be rendered in the default web browser.
+Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Document Editor control will be rendered in the default web browser as shown below.
+
+![Output of ASP.NET MVC DOCX Editor](./images/aspnetmvc-docx-editor.png)
 
 N> You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/DocumentEditor/ASP.NET%20MVC%20Razor%20Examples).
+
+## See also
+
+- [Open a document](./import)
+- [Save a document](./export)
+- [Collaborative Editing](./collaborative-editing/overview)
diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/images/aspnetmvc-docx-editor.png b/Document-Processing/Word/Word-Processor/asp-net-mvc/images/aspnetmvc-docx-editor.png
new file mode 100644
index 0000000000..a4679df1ed
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/asp-net-mvc/images/aspnetmvc-docx-editor.png differ
diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/overview.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/overview.md
index 73221734f7..c02ab02d6a 100644
--- a/Document-Processing/Word/Word-Processor/asp-net-mvc/overview.md
+++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/overview.md
@@ -1,14 +1,14 @@
 ---
 layout: post
-title: Overview in ASP.NET MVC Document Editor Component
-description: Learn here all about overview in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more.
+title: Overview of ASP.NET MVC DOCX Editor | Syncfusion
+description: Learn about the ASP.NET MVC DOCX Editor control, which enables you to create, edit, view, and print Word documents.
 platform: document-processing
 control: Index
 documentation: ug
 ---
 
 
-# Overview
+# Overview of the ASP.NET MVC DOCX Editor
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> [ASP.NET MVC DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-mvc-docx-editor) (Document Editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats. 
 
@@ -33,4 +33,5 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> [ASP.NET MVC DOCX Editor](h
 * Provides intuitive UI options like context menu, [dialogs](./dialog), and [navigation pane](./find-and-replace#options-pane).
 * Provides a [ribbon interface](./ribbon.md) similar to Microsoft Word, with tab-based commands for quick and intuitive access to features. 
 * [Localizes](./global-local) all the static text to any desired language.
-* Allows to create a lightweight Word viewer using module injection to view and [prints](./print) Word documents.
\ No newline at end of file
+* Allows to create a lightweight Word viewer using module injection to view and [prints](./print) Word documents.
+
diff --git a/Document-Processing/Word/Word-Processor/blazor/getting-started/client-side-application.md b/Document-Processing/Word/Word-Processor/blazor/getting-started/client-side-application.md
index 77dabde636..1cbd582068 100644
--- a/Document-Processing/Word/Word-Processor/blazor/getting-started/client-side-application.md
+++ b/Document-Processing/Word/Word-Processor/blazor/getting-started/client-side-application.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor DOCX Editor in Blazor WASM
 
-Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Blazor WebAssembly (WASM) application. 
+Syncfusion® Blazor DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Blazor WebAssembly (WASM) application. 
 
 
 ## Steps to create a Blazor WASM DOCX Editor
@@ -149,20 +149,28 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ### Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Document Editor component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Document Editor component in the **~/Pages/Home.razor** file.
 
 {% tabs %}
 {% highlight razor %}
 
-<SfDocumentEditorContainer EnableToolbar=true></SfDocumentEditorContainer>
+<SfDocumentEditorContainer EnableToolbar=true Height="590px"></SfDocumentEditorContainer>
 
 {% endhighlight %}
 {% endtabs %}
 
 ### Run the application
 
-Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Document Editor component in your default web browser.
+Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Document Editor component in your default web browser. The output will appear as follows:
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBpDiLugARSruZb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DocumentEditor](../images/blazor-document-editor.png)" %}
+
+![Blazor DOCX Editor in WASM](../images/blazor-docx-editor.png)
 
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DocumentEditor).
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBpDiLugARSruZb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DocumentEditor](../images/blazor-document-editor.png)" %}
+## See also
+
+- [Getting started in Blazor Web app](https://help.syncfusion.com/document-processing/word/word-processor/blazor/getting-started/web-app)
+- [Open a document](https://help.syncfusion.com/document-processing/word/word-processor/blazor/opening-a-document)
+- [Save a document](https://help.syncfusion.com/document-processing/word/word-processor/blazor/saving-document)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/blazor/getting-started/server-side-application.md b/Document-Processing/Word/Word-Processor/blazor/getting-started/server-side-application.md
deleted file mode 100644
index d09f25b18e..0000000000
--- a/Document-Processing/Word/Word-Processor/blazor/getting-started/server-side-application.md
+++ /dev/null
@@ -1,214 +0,0 @@
----
-layout: post
-title: Getting Stared with Blazor Server DOCX Editor | Syncfusion
-description: Learn how to create a DOCX Editor in a Blazor Server application using the Syncfusion® Document Editor control to create, edit, and view Word documents.
-platform: document-processing
-control: DocumentEditor
-documentation: ug
----
-
-# Getting Started with Blazor DOCX Editor in Blazor Server
-
-Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Blazor Server application. 
-
-## Steps to create a Blazor Server DOCX Editor
-
-This section explains how to include the [Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) component in a Blazor Server app using Visual Studio and Visual Studio Code.
-
-{% tabcontents %}
-
-{% tabcontent Visual Studio %}
-
-### Prerequisites
-
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-
-### Create a new Blazor Server App in Visual Studio
-
-You can create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs).
-
-### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Nuget packages
-
-To add **Blazor Document Editor** component in the application, follow the steps below.
- - open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), 
- - search and install the following packages
-    - [Syncfusion.Blazor.WordProcessor](https://www.nuget.org/packages/Syncfusion.Blazor.WordProcessor)
-    - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
-Alternatively, use the following Package Manager commands.
-
-{% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
-
-Install-Package Syncfusion.Blazor.WordProcessor -Version {{ site.releaseversion }}
-Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DOCX Editor are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages and component details.
-
-{% endtabcontent %}
-
-{% tabcontent Visual Studio Code %}
-
-### Prerequisites
-
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-
-### Create a new Blazor Server App in Visual Studio Code
-
-You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc).
-
-Alternatively, you can create a Server application using the following commands in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
-
-{% tabs %}
-
-{% highlight c# tabtitle="Blazor Server App" %}
-
-dotnet new blazorserver -o BlazorApp
-cd BlazorApp
-
-{% endhighlight %}
-{% endtabs %}
-
-### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Nuget packages
-
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure the terminal is at the project root directory where the `.csproj` file is located.
-* Run the following command to install 
-    - [Syncfusion.Blazor.WordProcessor](https://www.nuget.org/packages/Syncfusion.Blazor.WordProcessor)
-    - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
-
-{% tabs %}
-
-{% highlight c# tabtitle="Package Manager" %}
-
-dotnet add package Syncfusion.Blazor.WordProcessor -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-dotnet restore
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DOCX Editor are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
-{% endtabcontent %}
-
-{% endtabcontents %}
-
-### Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Services
-
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DocumentEditor` namespaces.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.DocumentEditor
-
-{% endhighlight %}
-{% endtabs %}
-
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of your Blazor Server app.
-
-{% tabs %}
-{% highlight c# tabtitle="~/Program.cs" hl_lines="3 9 12" %}
-
-using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Web;
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorPages();
-builder.Services.AddServerSideBlazor().AddHubOptions(o => { o.MaximumReceiveMessageSize = 102400000; });
-
-// Add Syncfusion Blazor service to the container.
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add Themes and Script References
-
-Add the following stylesheet and script to the head section. The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `<head>` of the main page as follows:
-
-* For **.NET 6** Blazor Server app, include it in **~/Pages/_Layout.cshtml** file.
-
-* For **.NET 7** Blazor Server app, include it in the **~/Pages/_Host.cshtml** file.
-
-```html
-<head>
-    ....
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
-    <script src="_content/Syncfusion.Blazor.WordProcessor/scripts/syncfusion-blazor-documenteditor.min.js" type="text/javascript"></script>
-</head>
-```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
-
-### Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component
-
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Document Editor component in the **~/Pages/Index.razor** file.
-
-{% tabs %}
-{% highlight razor %}
-
-<SfDocumentEditorContainer EnableToolbar=true></SfDocumentEditorContainer>
-
-{% endhighlight %}
-{% endtabs %}
-
-### Run the application
-
-Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DocumentEditor component in your default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBpDiLugARSruZb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DocumentEditor](../images/blazor-document-editor.png)" %}
-
-### Load an Existing Document
-
-To load an existing document during control initialization, use the following code example, which opens a Word document. Convert it to SFDT and load it in the editor.
-
-{% tabs %}
-{% highlight razor %}
-
-@using System.IO;
-@using Syncfusion.Blazor.DocumentEditor;
-
-<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
-    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
-</SfDocumentEditorContainer>
-
-@code {
-    SfDocumentEditorContainer container;
-
-    public void OnCreated(object args)
-    {
-        string filePath = "wwwroot/data/GettingStarted.docx";
-        using (FileStream fileStream = new FileStream(filePath, System.IO.FileMode.Open, System.IO.FileAccess.Read))
-        {
-            WordDocument document = WordDocument.Load(fileStream, ImportFormatType.Docx);
-            string json = JsonSerializer.Serialize(document);
-            document.Dispose();
-            //To observe the memory go down, null out the reference of document variable.
-            document = null;
-            SfDocumentEditor editor = container.DocumentEditor;
-            editor.OpenAsync(json);
-            //To observe the memory go down, null out the reference of json variable.
-            json = null;
-        }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DocumentEditor).
-
-## Video tutorial
-
-To get started quickly with the Blazor Document Editor component, watch the following video.
-
-{% youtube "https://www.youtube.com/watch?v=85rMT46LLgY" %}
diff --git a/Document-Processing/Word/Word-Processor/blazor/getting-started/web-app.md b/Document-Processing/Word/Word-Processor/blazor/getting-started/web-app.md
index 87d06158ae..ac67d8cce1 100644
--- a/Document-Processing/Word/Word-Processor/blazor/getting-started/web-app.md
+++ b/Document-Processing/Word/Word-Processor/blazor/getting-started/web-app.md
@@ -8,7 +8,7 @@ documentation: ug
 
 # Getting Started with Blazor DOCX Editor in Web App
 
-Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Blazor WebAssembly (WASM) application.
+Syncfusion® Blazor DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Blazor WebAssembly (WASM) application.
 
 ## Steps to create a Blazor Web App DOCX Editor
 This section explains about how to include the [Blazor Document Editor](https://www.syncfusion.com/blazor-components/blazor-word-processor) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
@@ -30,8 +30,8 @@ You need to configure the corresponding [Interactive render mode](https://learn.
 ### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Nuget packages
 
 To add **Blazor Document Editor** component in the application, follow the steps below.
- - open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), 
- - search and install the following packages
+ - Open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), 
+ - Search and install the following packages
     - [Syncfusion.Blazor.WordProcessor](https://www.nuget.org/packages/Syncfusion.Blazor.WordProcessor)
     - [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
     
@@ -46,8 +46,6 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DOCX Editor are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
 {% endtabcontent %}
 
 {% tabcontent Visual Studio Code %}
@@ -98,13 +96,12 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DOCX Editor are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details.
-
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-### Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Services
+
+### Add import namespaces
 
 | Interactive Render Mode | Description |
 | -- | -- |
@@ -122,63 +119,26 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DocumentEditor` namespaces
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of your Blazor Web App.
+### Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Services
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of the Blazor Web App.
+Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Web App.
 
 {% tabs %}
-{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
+{% highlight c# tabtitle="Program.cs" %}
 
-...
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents()
-    .AddInteractiveWebAssemblyComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
 ....
-
-{% endhighlight %}
-{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.Services.AddSyncfusionBlazor();
-
-await builder.Build().RunAsync();
-
-{% endhighlight %}
-{% endtabs %}
-
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
 using Syncfusion.Blazor;
+....
 
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
 builder.Services.AddSyncfusionBlazor();
 
-var app = builder.Build();
 ....
 
 {% endhighlight %}
 {% endtabs %}
 
+N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App.
+
 ### Add Themes and Script References
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -199,7 +159,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ### Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Document Editor component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Document Editor component in the `~/Components/Pages/*.razor` file. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
@@ -208,21 +168,17 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Document Editor
 |  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
+N> Supported render modes are `@rendermode InteractiveAuto`, `@rendermode InteractiveServer`, `@rendermode InteractiveWebAssembly`. If an interactivity location as Global no need to mention render mode. Set the interactivity mode for whole sample. Check out the [Blazor Render Modes](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0) for other Render Modes.
+
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
 @* desired render mode define here *@
 @rendermode InteractiveAuto
 
-{% endhighlight %}
-{% endtabs %}
-
-N> Supported render modes are `@rendermode InteractiveAuto`, `@rendermode InteractiveServer`, `@rendermode InteractiveWebAssembly`. If an interactivity location as Global no need to mention render mode. Set the interactivity mode for whole sample. Check out the [Blazor Render Modes](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0) for other Render Modes.
-
-{% tabs %}
-{% highlight razor %}
+@using Syncfusion.Blazor.DocumentEditor
 
-<SfDocumentEditorContainer EnableToolbar=true></SfDocumentEditorContainer>
+<SfDocumentEditorContainer EnableToolbar=true Height="590px"></SfDocumentEditorContainer>
 
 {% endhighlight %}
 {% endtabs %}
@@ -230,46 +186,20 @@ N> Supported render modes are `@rendermode InteractiveAuto`, `@rendermode Intera
 
 ### Run the application
 
-Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DocumentEditor component in your default web browser.
+Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DocumentEditor component in your default web browser. The output will appear as follows:
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBpDiLugARSruZb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DocumentEditor](../images/blazor-document-editor.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBpDiLugARSruZb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-### Load an Existing document
+![Blazor DOCX Editor in Web app](../images/blazor-docx-editor.png)
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DocumentEditor).
+
+## See also
+
+- [Getting started in Blazor WASM app](https://help.syncfusion.com/document-processing/word/word-processor/blazor/getting-started/server-side-application)
+- [Open a document](https://help.syncfusion.com/document-processing/word/word-processor/blazor/opening-a-document)
+- [Save a document](https://help.syncfusion.com/document-processing/word/word-processor/blazor/saving-document)
 
-To load an existing document during control initialization, use the following code example, which opens a Word document. Convert it to SFDT and load in the editor.
 
-{% tabs %}
-{% highlight razor %}
-
-@using System.IO;
-@using Syncfusion.Blazor.DocumentEditor;
-
-<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
-    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
-</SfDocumentEditorContainer>
-
-@code {
-    SfDocumentEditorContainer container;
-
-    public void OnCreated(object args)
-    {
-        string filePath = "wwwroot/data/GettingStarted.docx";
-        using (FileStream fileStream = new FileStream(filePath, System.IO.FileMode.Open, System.IO.FileAccess.Read))
-        {
-            WordDocument document = WordDocument.Load(fileStream, ImportFormatType.Docx);
-            string json = JsonSerializer.Serialize(document);
-            document.Dispose();
-            //To observe the memory go down, null out the reference of document variable.
-            document = null;
-            SfDocumentEditor editor = container.DocumentEditor;
-            editor.OpenAsync(json);
-            //To observe the memory go down, null out the reference of json variable.
-            json = null;
-        }
-    }
-}
 
-{% endhighlight %}
-{% endtabs %}
 
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DocumentEditor).
diff --git a/Document-Processing/Word/Word-Processor/blazor/images/blazor-docx-editor.png b/Document-Processing/Word/Word-Processor/blazor/images/blazor-docx-editor.png
new file mode 100644
index 0000000000..8c7890037d
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/blazor/images/blazor-docx-editor.png differ
diff --git a/Document-Processing/Word/Word-Processor/blazor/overview.md b/Document-Processing/Word/Word-Processor/blazor/overview.md
index 4b8c894a60..4aa75eae44 100644
--- a/Document-Processing/Word/Word-Processor/blazor/overview.md
+++ b/Document-Processing/Word/Word-Processor/blazor/overview.md
@@ -1,13 +1,13 @@
 ---
 layout: post
-title: Overview of the Blazor DocumentEditor Component | Syncfusion
-description: Checkout and learn about overview of the Syncfusion Blazor DocumentEditor component and much more details.
+title: Overview of Blazor DOCX Editor | Syncfusion
+description: Learn about the Blazor DOCX Editor control, which enables you to create, edit, view, and print Word documents.
 platform: document-processing
 control: DocumentEditor
 documentation: ug
 ---
 
-# Overview of the Blazor DocumentEditor Component
+# Overview of the Blazor DOCX Editor
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats. 
 
@@ -31,4 +31,4 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> [Blazor DOCX Editor](https:
 * Allows user interactions like zoom, scroll select contents through touch, mouse, and keyboard.
 * Provides intuitive UI options like context menu, dialogs, and [navigation pane](./find-and-replace.md#show-or-hide-navigation-pane).
 * Localizes all the static text to any desired language.
-* Allows to create a lightweight Word viewer using module injection to view and [prints](./print.md) Word documents.
\ No newline at end of file
+* Allows to create a lightweight Word viewer using module injection to view and [prints](./print.md) Word documents.
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md b/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md
index 18b15a58d3..2c8dfb6200 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md
@@ -8,118 +8,84 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Getting Started with JavaScript (ES5) Document Editor
+# Getting Started with JavaScript (ES5) DOCX Editor
 
-Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a JavaScript (ES5) application.
+Syncfusion® JavaScript DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a JavaScript (ES5) application.
 
-## Steps to create a JavaScript (ES5) DOCX Editor
+## Steps to create a DOCX Editor using JavaScript (ES5)
 
-Create a folder named `documenteditor-app` with `index.html` file. Then, add the required Syncfusion Document Editor style and script references to the `index.html` file.
+Create a folder named `documenteditor-app` with `index.html` and `index.js` files. Your application structure should look like this:
 
-You can add the required resources using either of the following methods:
-
-### Using local script and style references
-
-Create a `resources` folder under `documenteditor-app`, and then copy the required script and style files from the [DOCX Editor SDK](https://www.syncfusion.com/account/manage-trials/start-trials) build into it.
-
-  Your application structure should look like this:
-  ```text
+ ```text
   documenteditor-app/
   ├── index.html
-  └── resources/
+  └── index.js
   ```
-### Using CDN link for script and style reference
 
-Reference the scripts and styles directly from the CDN.
+### Add style and script references
+
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Essential JS 2 components' global scripts and styles are available at the following CDN link formats.
+
+**Syntax:**
+
   ```text
   Script: https://cdn.syncfusion.com/ej2/{VERSION}/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
   Style: https://cdn.syncfusion.com/ej2/{VERSION}/{PACKAGE_NAME}/styles/{THEME_NAME}.css
   ```
 
-{% tabs %}
-{% highlight html tabtitle="Local script and style" %}
+  **Example:**
 
-...
-<head>
-    <!-- EJ2 Document editor dependent material theme -->
-    <link href="resources/base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="resources/buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="resources/inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="resources/popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="resources/lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="resources/navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="resources/splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="resources/dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <!-- EJ2 DocumentEditor material theme -->
-    <link href="resources/documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <!-- EJ2 Document editor dependent scripts -->
-    <script src="resources/scripts/ej2-base.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-data.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-svg-base.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-file-utils.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-compression.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-pdf-export.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-buttons.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-popups.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-splitbuttons.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-inputs.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-lists.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-navigations.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-dropdowns.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-calendars.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-charts.min.js" type="text/javascript"></script>
-    <script src="resources/scripts/ej2-office-chart.min.js" type="text/javascript"></script>
-    <!-- EJ2 Document editor script -->
-    <script src="resources/scripts/ej2-documenteditor.min.js" type="text/javascript"></script>
-</head>
-...
+  ```text
+  Script: https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/dist/global/ej2-base.min.js 
+  Style: https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/material.css
+  ```
 
-{% endhighlight %}
-{% highlight html tabtitle="CDN link for script and style" %}
+Add the following CDN references inside the `<head>` section of your `index.html` file, as shown below.
+
+{% tabs %}
+{% highlight html tabtitle="index.html" %}
 
 ...
 <head>
-    <!-- EJ2 Document editor dependent theme -->
-    <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="https://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <link href="https://cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <!-- EJ2 Document editor theme -->
-    <link href="https://cdn.syncfusion.com/ej2/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
-    <!-- EJ2 Document editor dependent scripts -->
-    <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
-    <script src="https://cdn.syncfusion.com/ej2/ej2-office-chart/dist/global/ej2-office-chart.min.js" type="text/javascript"></script>
-    <!-- EJ2 Document editor script -->
-    <script src="https://cdn.syncfusion.com/ej2/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+    <title>Syncfusion JavaScript Document Editor</title>
+	<!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js" type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
 </head>
 ...
 {% endhighlight %}
 {% endtabs %}
 
-> **Note:** To learn more about other ways to load themes or scripts, see the [Themes topic](https://ej2.syncfusion.com/javascript/documentation/appearance/theme) and [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator) documentation.
-
-
 ### Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component
 
-Add a container element for the Document Editor in the `index.html` file and then initialize the control in script tag.
+Add a container element for the Document Editor in the `index.html` file and then initialize the control in the `<script>` tag.
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
@@ -131,23 +97,30 @@ Add a container element for the Document Editor in the `index.html` file and the
     <!-- Add your style references here -->
 </head>
 <body>
-    <!-- Element which is going to render as Document editor -->
-    <div id='DocumentEditor' style='height:620px'></div>
-    <script>
-        // Initialize Document Editor Container component
-        var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ 
-            enableToolbar: true, 
-            height: '590px' 
-        });
-        ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
-        // Use the following service URL only for demo purposes
-        documenteditorContainer.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
-        // DocumentEditorContainer control rendering
-        documenteditorContainer.appendTo('#DocumentEditor');
-    </script>
+    <!-- Element that renders the Document Editor -->
+    <div id='DocumentEditor'></div>
+    <script src="index.js" type="text/javascript"></script>
 </body>
 </html>
 
+{% endhighlight %}
+{% highlight js tabtitle="index.js" %}
+
+// Inject toolbar
+ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+
+// Initialize Document Editor Container component
+var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ 
+    enableToolbar: true, 
+    height: '590px'
+
+});
+
+// Use the following service URL only for demo purposes
+documenteditorContainer.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
+// Render the DocumentEditorContainer control
+documenteditorContainer.appendTo('#DocumentEditor');
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -155,9 +128,78 @@ Add a container element for the Document Editor in the `index.html` file and the
 
 ### Run the application
 
-Now, open the `index.html` file in a web browser to render the JavaScript Document Editor.
+Now, the complete code for `index.html` and `index.js` is shown below.
 
-Use the following live preview to explore the Document Editor control.
+{% tabs %}
+{% highlight html tabtitle="index.html" %}
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Syncfusion JavaScript Document Editor</title>
+	<!-- EJ2 Document Editor dependent theme -->
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <!-- EJ2 Document Editor theme -->
+    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
+    <!-- EJ2 Document Editor dependent scripts -->
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-file-utils/dist/global/ej2-file-utils.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-compression/dist/global/ej2-compression.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-office-chart/dist/global/ej2-office-chart.min.js" type="text/javascript"></script>
+    <!-- EJ2 Document Editor script -->
+    <script src="https://cdn.syncfusion.com/ej2/33.2.3/ej2-documenteditor/dist/global/ej2-documenteditor.min.js" type="text/javascript"></script>
+</head>
+<body>
+    <!-- Element that renders the Document Editor -->
+    <div id='DocumentEditor'></div>
+    <script src="index.js" type="text/javascript"></script>
+</body>
+</html>
+
+{% endhighlight %}
+{% highlight js tabtitle="index.js" %}
+
+// Inject toolbar
+ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+
+// Initialize Document Editor Container component
+var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ 
+    enableToolbar: true, 
+    height: '590px'
+
+});
+
+// Use the following service URL only for demo purposes
+documenteditorContainer.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
+// Render the DocumentEditorContainer control
+documenteditorContainer.appendTo('#DocumentEditor');
+
+{% endhighlight %}
+{% endtabs %}
+
+Open the `index.html` file in a web browser. The JavaScript (ES5) Document Editor is rendered with a toolbar and an editable document area, as shown below.
+
+![Output of JavaScript ES5 Document Editor](./images/javascript_es5_getting_started.png)
+
+You can also explore the Document Editor interactively using the live sample below.
 
 {% previewsample "/document-processing/code-snippet/document-editor/javascript-es5/es5-getting-started-cs2" %}
 
@@ -171,6 +213,12 @@ The Document Editor component requires server-side interactions for the followin
 * Spell check
 * Save as file formats other than SFDT and DOCX
 
->Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.
+> Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.
+
+For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page.
+
+## See also
 
-For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page.
\ No newline at end of file
+- [Open a document](./import)
+- [Save a document](./export)
+- [Collaborative Editing](./collaborative-editing/overview)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/images/javascript_es5_getting_started.png b/Document-Processing/Word/Word-Processor/javascript-es5/images/javascript_es5_getting_started.png
new file mode 100644
index 0000000000..f75c3d3bc8
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/javascript-es5/images/javascript_es5_getting_started.png differ
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/overview.md b/Document-Processing/Word/Word-Processor/javascript-es5/overview.md
index 1c2d833c02..a0cd1cc15c 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/overview.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/overview.md
@@ -1,16 +1,16 @@
 ---
 layout: post
 title: Overview of JavaScript (ES5) Document editor control | Syncfusion
-description: Document editor for JavaScript (ES5) is used to create, edit, view and print word documents.
+description: Learn about the JavaScript (ES5) DOCX Editor control, which enables you to create, edit, view, and print Word documents
 platform: document-processing
 control: Index 
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Overview
+# Overview of the JavaScript (ES5) DOCX Editor
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Javascript DOCX Editor (Document Editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats. 
+The Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript DOCX Editor (Document Editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats. 
 
 ![Output of JavaScript DOCX Editor](./images/docx-editor.png)
 
@@ -57,4 +57,4 @@ You can deploy web APIs for server-side dependencies of Document Editor componen
 
 To know more about server-side dependencies, refer this [page](./web-services-overview).
 
->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
\ No newline at end of file
+>Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md b/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md
index 1706dd61ae..3f604503e5 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es6/getting-started.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Getting Started with JavaScript (ES6) DOCX Editor | Syncfusion
+title: Getting Started with TypeScript DOCX Editor | Syncfusion
 description: Learn how to create a DOCX Editor in a TypeScript application using the Syncfusion® Document Editor control to create, edit, and view Word documents.
 platform: document-processing
 control: Getting started 
@@ -8,49 +8,57 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Getting Started with JavaScript (ES6) DOCX Editor
+# Getting Started with TypeScript DOCX Editor
 
-Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a TypeScript application. 
+Syncfusion® TypeScript DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a TypeScript application. 
 
-## Steps to create an JavaScript (ES6) DOCX Editor
+## Steps to create a DOCX Editor using TypeScript
 
-### Set up development environment
+### Prerequisites
+Ensure the following tools are installed on your machine:
 
-Open the command prompt from the required directory and run the following command to clone the Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript (Essential<sup style="font-size:70%">&reg;</sup> JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-):
+1. [Git](https://git-scm.com/downloads)
+2. [Node.js](https://nodejs.org/en/)
 
-{% tabs %}
-{% highlight bash tabtitle="CMD" %}
+### Set up development environment
 
-git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart
+Create a simple TypeScript application using the Essential<sup style="font-size:70%">&reg;</sup> JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository.
 
-{% endhighlight %}
-{% endtabs %}
+> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/).
 
-After cloning the application in the `ej2-quickstart` folder, run the following command to navigate to the project directory:
+**Step 1:** Open the command prompt from the required directory and clone the quickstart project from GitHub.
 
-{% tabs %}
-{% highlight bash tabtitle="CMD" %}
+```bash
+git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart
+```
 
-cd ej2-quickstart
+**Step 2:** Navigate to the `ej2-quickstart` folder.
 
-{% endhighlight %}
-{% endtabs %}
+```bash
+cd ej2-quickstart
+```
 
 ### Install the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor packages
 
-The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages:
+By default, the `ej2‑quickstart` repository is preconfigured with the [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in `~/package.json`. This package installs all Syncfusion Essential JS 2 component packages, including the Document Editor and other EJ2 controls.
+ 
+To install only the Document Editor component, replace the dependency with [@syncfusion/ej2-documenteditor](https://www.npmjs.com/package/@syncfusion/ej2-documenteditor), as shown below:
 
-{% tabs %}
-{% highlight bash tabtitle="NPM" %}
+```bash
+"dependencies": {
+  "@syncfusion/ej2-documenteditor": "*"
+}
+```
 
-npm install
+Install the dependent npm packages using the following command.
 
-{% endhighlight %}
-{% endtabs %}
+```bash
+npm install
+```
 
 ### Add CSS reference
 
-Add the required Syncfusion CSS files to `~/src/styles/styles.css`:
+Add the following Document Editor and dependent component style references to `~/src/styles/styles.css`:
 
 {% tabs %}
 {% highlight css tabtitle="style.css" %}
@@ -63,7 +71,7 @@ Add the required Syncfusion CSS files to `~/src/styles/styles.css`:
 @import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import "../../node_modules/@syncfusion/ej2-documenteditor/styles/material.css";
+@import '../../node_modules/@syncfusion/ej2-documenteditor/styles/material.css';
 
 {% endhighlight %}
 {% endtabs %}
@@ -71,32 +79,7 @@ Add the required Syncfusion CSS files to `~/src/styles/styles.css`:
 
 ## Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component
 
-You can start adding the Essential<sup style="font-size:70%">&reg;</sup> JS 2 Document Editor component to the application. Add the Document Editor in the `app.ts` and `index.html` files using the following code.
-
-Place the following code in the `app.ts` file:
-
-{% tabs %}
-{% highlight ts tabtitle="app.ts" %}
-
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let documenteditor: DocumentEditorContainer = new DocumentEditorContainer({ 
-    enableToolbar: true, 
-    height: '390px', 
-    // Use the following service URL only for demo purposes
-    serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
-});
-
-documenteditor.appendTo('#DocumentEditor');
-
-{% endhighlight %}
-{% endtabs %}
-
-> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
-
-Add an HTML div element to act as the Document Editor element in the `index.html` file:
+Add an HTML `div` element to act as the Document Editor element in the `index.html` file:
 
 {% tabs %}
 {% highlight html tabtitle="index.html" %}
@@ -104,16 +87,16 @@ Add an HTML div element to act as the Document Editor element in the `index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Essential JS 2 Document editor</title>
+    <title>Syncfusion TypeScript Document Editor</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
-    <meta name="description" content="Essential JS 2" />
+    <meta name="description" content="Syncfusion TypeScript Document Editor" />
     <meta name="author" content="Syncfusion" />
     <link rel="shortcut icon" href="resources/favicon.ico" />
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
 </head>
 <body>
-    <!-- Element which will render as DocumentEditorContainer -->
+    <!-- Element which will render as Document Editor -->
     <div id="DocumentEditor"></div>
 </body>
 </html>
@@ -121,6 +104,29 @@ Add an HTML div element to act as the Document Editor element in the `index.html
 {% endhighlight %}
 {% endtabs %}
 
+Add a container element for the Document Editor control in the `app.ts` file using the following code.
+
+{% tabs %}
+{% highlight ts tabtitle="app.ts" %}
+
+import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
+
+DocumentEditorContainer.Inject(Toolbar);
+
+let documenteditor: DocumentEditorContainer = new DocumentEditorContainer({
+    enableToolbar: true,
+    height: '590px',
+    // Use the following service URL only for demo purposes
+    serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
+});
+documenteditor.appendTo('#DocumentEditor');
+
+{% endhighlight %}
+{% endtabs %}
+
+> Note: The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
+
+
 ### Run the application
 
 Run the application using the following command:
@@ -133,18 +139,11 @@ npm start
 {% endhighlight %}
 {% endtabs %}
 
-The Document Editor is displayed as shown below.
+After the application starts, open the localhost URL shown in the terminal. The TypeScript Document Editor is rendered in the browser with a toolbar and an editable document area, as shown below.
 
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/javascript-es6/getting-started-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/javascript-es6/getting-started-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
+![Output of TypeScript Document Editor](./images/typescript_getting_started.png)
 
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-).
+You can also explore the Document Editor interactively using the live sample below.
 
 {% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/getting-started-cs2" %}
 
@@ -158,6 +157,12 @@ The Document Editor component requires server-side interactions for the followin
 * Spell check
 * Save as file formats other than SFDT and DOCX
 
->Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.
+> Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.
 
 For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page.
+
+## See also
+
+- [Open a document](./import)
+- [Save a document](./export)
+- [Collaborative Editing](./collaborative-editing/overview)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/images/typescript_getting_started.png b/Document-Processing/Word/Word-Processor/javascript-es6/images/typescript_getting_started.png
new file mode 100644
index 0000000000..f75c3d3bc8
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/javascript-es6/images/typescript_getting_started.png differ
diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/overview.md b/Document-Processing/Word/Word-Processor/javascript-es6/overview.md
index 7800c14530..6135fd4c92 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es6/overview.md
+++ b/Document-Processing/Word/Word-Processor/javascript-es6/overview.md
@@ -1,19 +1,20 @@
 ---
 layout: post
-title: Overview of JavaScript (ES6) Document editor control | Syncfusion
-description: Document editor for JavaScript (ES6) is used to create, edit, view and print word documents.
+title: Overview of JavaScript (ES6) DOCX Editor | Syncfusion
+description: Learn about the JavaScript (ES6) DOCX Editor control, which enables you to create, edit, view, and print Word documents.
 platform: document-processing
 control: Index 
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Overview
+# Overview of the JavaScript (ES6) DOCX Editor
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats. 
 
 ![Overview image of TypeScript Document Editor](./images/Typescript-docx-editor-overview-image.png)
 
+
 ## Key Features
 
 * [Opens](./import) the native `Syncfusion Document Text (*.sfdt)` format documents in the client-side.
diff --git a/Document-Processing/Word/Word-Processor/overview.md b/Document-Processing/Word/Word-Processor/overview.md
index c4c54da715..9f26da7432 100644
--- a/Document-Processing/Word/Word-Processor/overview.md
+++ b/Document-Processing/Word/Word-Processor/overview.md
@@ -1,13 +1,13 @@
 ---
 title: Microsoft Word-like Word Processor Component | Syncfusion
-description: View, edit and print Word documents in WPF, JavaScript, Angular, React, Vue, ASP.NET MVC, ASP.NET Core, and Blazor applications without Microsoft Office dependencies.
+description: View, edit and print Word documents in WPF, JavaScript, Angular, React, Vue, ASP.NET MVC, ASP.NET Core, and Blazor applications without Microsoft Office.
 platform: document-processing
 control: general
 documentation: UG
 keywords: Word, SDK, view, edit, read, document-editor
 ---
 
-# Welcome to Syncfusion<sup>&reg;</sup> Word Processor Component
+# Welcome to Syncfusion<sup>&reg;</sup> DOCX Editor Component
 
-Syncfusion<sup>&reg;</sup> Word Processor component is a Microsoft Word-like GUI component used to view, edit and print Word documents in WPF, JavaScript, Angular, React, Vue, ASP.NET MVC, ASP.NET Core, and Blazor applications that works without Microsoft Office dependencies. It eases you developers to just integrate this Word editor component to achieve the required Word document viewing, editing functionalities and concentrate on core logics of your application.
+Syncfusion<sup>&reg;</sup> DOCX Editor component is a Microsoft Word-like GUI component used to view, edit and print Word documents in WPF, JavaScript, Angular, React, Vue, ASP.NET MVC, ASP.NET Core, and Blazor applications that works without Microsoft Office dependencies. It eases you developers to just integrate this Word editor component to achieve the required Word document viewing, editing functionalities and concentrate on core logics of your application.
 
diff --git a/Document-Processing/Word/Word-Processor/react/document-editor-toc.html b/Document-Processing/Word/Word-Processor/react/document-editor-toc.html
index c3e343a70a..9df7e6ba3c 100644
--- a/Document-Processing/Word/Word-Processor/react/document-editor-toc.html
+++ b/Document-Processing/Word/Word-Processor/react/document-editor-toc.html
@@ -88,6 +88,7 @@
 <li><a href="/document-processing/word/word-processor/react/notes">Footnotes and Endnotes</a></li>
 <li><a href="/document-processing/word/word-processor/react/view">View</a></li>
 <li><a href="/document-processing/word/word-processor/react/security-advisories">Security Advisories</a></li>
+<li><a href="/document-processing/word/word-processor/react/unsupported-features">Unsupported features</a></li>
 <li>How To
 <ul>
 <li><a href="/document-processing/word/word-processor/react/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
diff --git a/Document-Processing/Word/Word-Processor/react/getting-started.md b/Document-Processing/Word/Word-Processor/react/getting-started.md
index 424b211d48..b7d9f28460 100644
--- a/Document-Processing/Word/Word-Processor/react/getting-started.md
+++ b/Document-Processing/Word/Word-Processor/react/getting-started.md
@@ -10,9 +10,9 @@ domainurl: ##DomainURL##
 
 # Getting started with React DOCX Editor
 
-Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a React application. 
+Syncfusion® React DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a React application. 
 
-## Steps to create React DOCX Editor
+## Steps to create a React DOCX Editor
 
 {% tabcontents %}
 
@@ -27,13 +27,13 @@ Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, an
 To set up a React application in a TypeScript environment, run the following commands:
 
 ```bash
-npm create vite@latest my-app -- --template react-ts
-cd my-app
+npm create vite@latest documenteditor-app -- --template react-ts
+cd documenteditor-app
 ```
 
 ### Install the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor packages
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor).
+The Syncfusion<sup style="font-size:70%">&reg;</sup> React Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor).
 
 
 To install the Document Editor component, use the following command:
@@ -44,9 +44,11 @@ npm install @syncfusion/ej2-react-documenteditor --save
 
 ### Add CSS reference
 
-Add the Document Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file:
+Add the Document Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file.
+
+{% tabs %}
+{% highlight css tabtitle="index.css" %}
 
-```css
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@@ -55,16 +57,18 @@ Add the Document Editor component and its dependent component styles available i
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import "../node_modules/@syncfusion/ej2-documenteditor/styles/material.css";
-```
+@import '../node_modules/@syncfusion/ej2-documenteditor/styles/material.css';
+
+{% endhighlight %}
+{% endtabs %}
 
 ### Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component
 
 Add the Document Editor component to your application. In the `src/App.tsx` file, add the following code to initialize the component:
 
-{% raw %}
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
 
-```ts
 import * as React from 'react';
 import {
   DocumentEditorContainerComponent,
@@ -77,8 +81,8 @@ function App() {
   return (
 <DocumentEditorContainerComponent 
             id="container" 
-            height={'590px'} 
-            //Use the following service URL only for demo purposes
+            height="590px" 
+            // Use the following service URL only for demo purposes
             serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
             enableToolbar={true}
         />
@@ -86,32 +90,19 @@ function App() {
 }
 
 export default App;
-```
 
-{% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 > The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
 
-### Run the  application
+### Run the application
 
 Run the application using the following command:
 
 ```bash
 npm run dev
 ```
-Open http://localhost:3000 in your browser to run the application.
-
-The Document Editor is displayed as shown below.
-
-{% tabs %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/document-editor/react/base-cs3/app/index.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/getting-started-with-the-react-document-editor-component).
-
-{% previewsample "/document-processing/code-snippet/document-editor/react/base-cs3" %}
 
 {% endtabcontent %}
 
@@ -127,13 +118,13 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 To set up a React application in a JavaScript environment, run the following commands:
 
 ```bash
-npm create vite@latest my-app -- --template react
-cd my-app
+npm create vite@latest documenteditor-app -- --template react
+cd documenteditor-app
 ```
 
 ### Install the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor packages
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/~syncfusionorg).
+The Syncfusion<sup style="font-size:70%">&reg;</sup> React Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor).
 
 
 To install the Document Editor component, use the following command:
@@ -146,7 +137,9 @@ npm install @syncfusion/ej2-react-documenteditor --save
 
 Add the Document Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `src/index.css` file:
 
-```css
+{% tabs %}
+{% highlight css tabtitle="index.css" %}
+
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@@ -155,17 +148,19 @@ Add the Document Editor component and its dependent component styles available i
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import "../node_modules/@syncfusion/ej2-documenteditor/styles/material.css";
-```
+@import '../node_modules/@syncfusion/ej2-documenteditor/styles/material.css';
+
+{% endhighlight %}
+{% endtabs %}
 
 ### Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component
 
 Add the Document Editor component to your application. In the `src/App.jsx` file, add the following code to initialize the component:
 
-{% raw %}
 
-```js
-import * as React from 'react';
+{% tabs %}
+{% highlight js tabtitle="App.jsx" %}
+
 import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
 
 DocumentEditorContainerComponent.Inject(Toolbar);
@@ -174,8 +169,8 @@ function App() {
     return (
         <DocumentEditorContainerComponent 
             id="container" 
-            height={'590px'} 
-            //Use the following service URL only for demo purposes
+            height="590px" 
+            // Use the following service URL only for demo purposes
             serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
             enableToolbar={true}
         />
@@ -183,11 +178,11 @@ function App() {
 }
 
 export default App;
-```
 
-{% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
-> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
+> Note: The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
 
 ### Run the  application
 
@@ -196,24 +191,20 @@ Run the application using the following command:
 ```bash
 npm run dev
 ```
-Open http://localhost:3000 in your browser to run the application.
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-The Document Editor is displayed as shown below.
+After the application starts, open the localhost URL shown in the terminal. The React Document Editor is rendered in the browser with a toolbar and an editable document area, as shown below.
 
-{% tabs %}
-{% highlight ts tabtitle="app.jsx" %}
-{% include code-snippet/document-editor/react/base-cs3/app/index.jsx %}
-{% endhighlight %}
-{% endtabs %}
+![Output of React Document Editor](./images/react_getting_started.png)
 
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/getting-started-with-the-react-document-editor-component).
+
+You can also explore the Document Editor interactively using the live sample below.
         
 {% previewsample "/document-processing/code-snippet/document-editor/react/base-cs3" %}
 
-{% endtabcontent %}
-
-{% endtabcontents %}
-
 ## Video tutorial
 
 To get started quickly with Document Editor component, you can check the video below.
@@ -230,6 +221,13 @@ The Document Editor component requires server-side interactions for the followin
 * Spell check
 * Save as file formats other than SFDT and DOCX
 
->Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.
+> Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.
 
 For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page.
+
+
+## See also
+
+- [Open a document](./import)
+- [Save a document](./export)
+- [Collaborative Editing](./collaborative-editing/overview)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/react/images/react_getting_started.png b/Document-Processing/Word/Word-Processor/react/images/react_getting_started.png
new file mode 100644
index 0000000000..f75c3d3bc8
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/react/images/react_getting_started.png differ
diff --git a/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md b/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md
index ca6d2f8922..72e6d782bc 100644
--- a/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md
+++ b/Document-Processing/Word/Word-Processor/react/nextjs-getting-started.md
@@ -1,32 +1,30 @@
 ---
 layout: post
-title: React Document Editor getting started with Next.js | Syncfusion
-description: Integrate the Syncfusion React Document Editor into a Next.js application with step‑by‑step setup and usage.
+title: Getting started React DOCX Editor in Next.js | Syncfusion
+description: Learn how to create a DOCX Editor in a Next.js application using the Syncfusion® Document Editor control to create, edit, and view Word documents.
 control: Next.js
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Getting started with React Document Editor in Next.js
+# Getting started with React DOCX Editor in Next.js
 
 This section provides a step-by-step guide for setting up a Next.js application and integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> React Document Editor component.
 
-## What is Next.js?
+## Steps to create a React DOCX Editor in Next.js
 
-[Next.js](https://nextjs.org/) is a React framework that makes it easy to build fast, SEO-friendly, and user-friendly web applications. It provides features such as server-side rendering, automatic code splitting, routing, and API routes, making it an excellent choice for building modern web applications.
-
-## Prerequisites
+### Prerequisites
 
 Before getting started with the Next.js application, ensure the following prerequisites are met:
 
-* [Node.js 16.8](https://nodejs.org/en) or later.
+* [Node.js 18.17.0](https://nodejs.org/en) or later (LTS recommended).
 
-* The application is compatible with macOS, Windows, and Linux operating systems.
+* The application is compatible with macOS, Windows, and Linux.
 
-## Create a Next.js application
+### Create a Next.js application
 
-To create a new `Next.js` application, use one of the commands that are specific to either NPM or Yarn.
+**Step 1:** To create a new `Next.js` application, use one of the commands that are specific to either NPM or Yarn.
 
 {% tabs %}
 {% highlight bash tabtitle="NPM" %}
@@ -43,9 +41,7 @@ yarn create next-app
 
 Using one of the above commands will prompt you to configure additional settings for the project:
 
-### Define the project name
-
-Specify the name of the project directly. In this example, the project is named `ej2-next js-documenteditor`:
+**Step 2:** Specify the name of the project directly. In this example, the project is named `ej2-next js-documenteditor`:
 
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
@@ -55,28 +51,22 @@ Specify the name of the project directly. In this example, the project is named
 {% endhighlight %}
 {% endtabs %}
 
-### Select the required packages
-
-Choose the following configuration options:
+**Step 3:** Choose the following configuration options:
 
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
 √ What is your project named? ... ej2-nextjs-documenteditor
-√ Would you like to use TypeScript? ... No / `Yes`
-√ Would you like to use ESLint? ... No / `Yes`
-√ Would you like to use Tailwind CSS? ... `No` / Yes
-√ Would you like to use `src/` directory? ... No / `Yes`
-√ Would you like to use App Router? (recommended) ... No / `Yes`
-√ Would you like to customize the default import alias? ... `No` / Yes
-Creating a new Next.js app in D:\ej2-nextjs-documenteditor.
+√ What is your project named? ... ej2-nextjs-grid
+? Would you like to use the recommended Next.js defaults?
+>   Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router
+    No, reuse previous settings
+    No, customize settings
 
 {% endhighlight %}
 {% endtabs %}
 
-### Navigate to the project directory
-
-Once the above steps are complete, navigate to the project directory using the following command:
+**Step 4:** Once the above steps are complete, navigate to the project directory using the following command:
 
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
@@ -88,11 +78,11 @@ cd ej2-nextjs-documenteditor
 
 The application is ready to run with default settings. The next steps will add the Syncfusion Document Editor component to the project.
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> React packages
+### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor packages
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion<sup style="font-size:70%">&reg;</sup> React components in the project, install the corresponding npm package.
+Syncfusion<sup style="font-size:70%">&reg;</sup> React Document Editor package is available at [npmjs.com](https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor).
 
-Here, the [React Document Editor component](https://www.syncfusion.com/react-components/react-word-processor) is used in the project. To install the React Document Editor component, use the following command:
+To install the React Document Editor component, use the following command:
 
 {% tabs %}
 {% highlight bash tabtitle="NPM" %}
@@ -107,11 +97,9 @@ yarn add @syncfusion/ej2-react-documenteditor
 {% endhighlight %}
 {% endtabs %}
 
-## Import Syncfusion<sup style="font-size:70%">&reg;</sup> CSS styles
-
-Syncfusion<sup style="font-size:70%">&reg;</sup> React components come with [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme), which are available in the installed packages. It’s easy to adapt the Syncfusion<sup style="font-size:70%">&reg;</sup> React components to match the style of your application by referring to one of the built-in themes.
+### Add CSS reference
 
-Import the `Material` theme into the **src/app/globals.css** file and removed the existing styles in that file, as shown below:
+Add the Document Editor component and its dependent component styles available in the `node_modules/@syncfusion` package folder. Reference these styles in the `app/globals.css` file.
 
 {% tabs %}
 {% highlight css tabtitle="globals.css" %}
@@ -124,33 +112,18 @@ Import the `Material` theme into the **src/app/globals.css** file and removed th
 @import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import "../../node_modules/@syncfusion/ej2-react-documenteditor/styles/material.css";
+@import '../../node_modules/@syncfusion/ej2-react-documenteditor/styles/material.css';
 
 {% endhighlight %}
 {% endtabs %}
 
 > To learn more about built-in themes and CSS reference for individual components, refer to the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) section.
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> React Document Editor component
 
-Follow these steps to add the React Document Editor component to the Next.js project:
+### Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component
 
-### Import the Document Editor component
+Add the Document Editor component to your application. In the `app/page.tsx` file, add the following code to initialize the component:
 
-Before adding the Document Editor component to your markup, import the Document Editor component in the `src/app/page.tsx` file:
-
-{% tabs %}
-{% highlight ts tabtitle="page.tsx" %}
-
-'use client'
-import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
-
-{% endhighlight %}
-{% endtabs %}
-
-### Define the Document Editor component
-
-Define the Document Editor component in the `src/app/page.tsx` file, as shown below:
 
 {% tabs %}
 {% highlight ts tabtitle="page.tsx" %}
@@ -162,26 +135,24 @@ DocumentEditorContainerComponent.Inject(Toolbar);
 
 export default function Home() {
   return (
-    <>
-      <h2>Syncfusion React Document Editor Component</h2>
       <DocumentEditorContainerComponent 
         id="container" 
-        height={'590px'} 
+        height="590px"
+        // Use the following service URL only for demo purposes
         serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
         enableToolbar={true}>
       </DocumentEditorContainerComponent>
-    </>
   )
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` used in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, host your own web service with the required server configurations. Refer to the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or use the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service.
+> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
 
-## Run the application
+### Run the application
 
-To run the application, use the following command:
+Run the application using the following command:
 
 {% tabs %}
 {% highlight bash tabtitle="NPM" %}
@@ -195,6 +166,23 @@ yarn run dev
 
 {% endhighlight %}
 {% endtabs %}
-To learn more about the functionality of the Document Editor component, refer to the [documentation](./feature-module.md).
 
-> [View the NEXT.js Document Editor sample in the GitHub repository](https://github.com/SyncfusionExamples/ej2-nextjs-documenteditor).
+After the application starts, open the localhost URL shown in the terminal. The React Document Editor is rendered in the browser with a toolbar and an editable document area, as shown below.
+
+![Output of React Document Editor in Next.js](./images/react_getting_started.png)
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/ej2-nextjs-documenteditor).
+
+## Server-side dependencies
+
+The Document Editor component requires server-side interactions for the following operations:
+
+* Open file formats other than SFDT
+* Paste with formatting
+* Restrict editing
+* Spell check
+* Save as file formats other than SFDT and DOCX
+
+> Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.
+
+For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page.
diff --git a/Document-Processing/Word/Word-Processor/react/overview.md b/Document-Processing/Word/Word-Processor/react/overview.md
index ef9e3246ec..c96b8ed80a 100644
--- a/Document-Processing/Word/Word-Processor/react/overview.md
+++ b/Document-Processing/Word/Word-Processor/react/overview.md
@@ -1,14 +1,14 @@
 ---
 layout: post
-title: Overview in React Document editor component | Syncfusion
-description: Learn here all about Index in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
+title: Overview of React DOCX Editor | Syncfusion
+description: Learn about the React DOCX Editor control, which enables you to create, edit, view, and print Word documents.
 control: Index 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-
+# Overview of the React DOCX Editor
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats. 
 
@@ -59,4 +59,4 @@ You can deploy web APIs for server-side dependencies of Document Editor componen
 
 To know more about server-side dependencies, refer this [page](./web-services-overview).
 
->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
\ No newline at end of file
+>Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
diff --git a/Document-Processing/Word/Word-Processor/react/unsupported-features.md b/Document-Processing/Word/Word-Processor/react/unsupported-features.md
new file mode 100644
index 0000000000..a57d2b1bfa
--- /dev/null
+++ b/Document-Processing/Word/Word-Processor/react/unsupported-features.md
@@ -0,0 +1,58 @@
+---
+layout: post
+title: Unsupported features in React DOCX Editor component | Syncfusion
+description: Learn about the list of unsupported features in the React Document Editor to understand its limitations.
+control: Unsupported features
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Unsupported Features in React DOCX Editor
+
+This section describes the unsupported elements in Syncfusion® React DOCX Editor (Document Editor) 
+
+## Document formatting
+
+| Feature | Details | Supported |
+|--------|--------|-----------|
+| Paragraph Properties | Shading | No |
+|  | Mirror indent | No |
+|  | Suppress line numbers | No |
+|  | Don’t hyphenate | No |
+|  | Border styles (*Except dotted and dashed; other styles are rendered as solid*) | Partial |
+| Text Properties | Shading  | No |
+|  |  Position | No |
+|  |  Font kerning | No |
+|  |  Ligatures | No |
+|  |  Number spacing | No |
+|  |  Number forms | No |
+|  |  Stylistic sets | No |
+|  |  Contextual alternates| No |
+|  | Text Direction (Top to Bottom, Bottom to Top) | No |
+|  | Border styles (*Except dotted and dashed; other styles are rendered as solid*) | Partial |
+| Section Formatting | Mirror margins | No |
+| | Gutter | No |
+| | Line numbers | No |
+| | Bi-direction | No |
+| Page background | Page background color or image | No |
+| Watermark  |  Text and Picture watermark| No |
+| Table Format | Border styles (*Except dotted and dashed; other styles are rendered as solid*) | Partial |
+
+## Word Document Elements
+
+| Feature | Supported |
+|--------|----------------|
+| ActiveX Controls | No |
+| Cover Page | No |
+| Embedded Objects | No |
+| Images | Bitmap images only |
+| Ink/Draw | No |
+| Video or audio files | No |
+| Macros | No |
+| Models, Smart-Art, and Charts | [Supported Charts](https://help.syncfusion.com/document-processing/word/word-processor/react/chart) |
+| Shapes, Textboxes, and WordArt | [Supported shapes](https://help.syncfusion.com/document-processing/word/word-processor/react/shapes#supported-shapes) *(Shape Properties: Fill types, borders, rotation and effects are not supported) |
+| Signature line | No |
+| Special Characters, Symbols, Equations | No |
+| Built-in and custom document properties | No |
+| Comment reactions | No 
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/uwp/Getting-Started.md b/Document-Processing/Word/Word-Processor/uwp/Getting-Started.md
index 6a54cecd96..bd0b03c263 100644
--- a/Document-Processing/Word/Word-Processor/uwp/Getting-Started.md
+++ b/Document-Processing/Word/Word-Processor/uwp/Getting-Started.md
@@ -8,183 +8,255 @@ keywords: getting-started
 ---
 # Getting Started with UWP RichTextBox (SfRichTextBoxAdv)
 
-SfRichTextBoxAdv is a control that allows you to view and edit rich text contents including table, text, images and hyperlinks. This section describes how to get started with SfRichTextBoxAdv control.
+Syncfusion® UWP RichTextBox (SfRichTextBoxAdv) enables you to create, edit, view, and print Word documents in UWP applications. This section guides you through the steps to get started and create a RichTextBox in a UWP application.
 
-## Assembly Reference
+## Create a RichTextBox in UWP using SfRichTextBoxAdv
 
-You can find SfRichTextBoxAdv control from the following assembly under the namespace Syncfusion.UI.Xaml.RichTextBoxAdv
+In this walkthrough, you will create a UWP application that uses the Syncfusion® UWP SfRichTextBoxAdv control.
 
-* Syncfusion.SfRichTextBoxAdv.UWP
+The steps below cover the essential tasks required to add and use the SfRichTextBoxAdv control in a UWP project. 
 
+### Create a New UWP Project
 
-The following assembly references are required to deploy SfRichTextBoxAdv control in your application.
+1. Open **Visual Studio**.
+2. Click **Create a new project**.
+3. Select **Blank App (Universal Windows)** or **UWP App** from the project templates.
+4. Click **Next**.
+5. Enter the **project name**, location, and other required details.
+6. Click **Create**.
 
-* Syncfusion.DocIO.UWP
+### Add SfRichTextBoxAdv dependencies
 
-* Syncfusion.SfRadialMenu.UWP
+{% tabcontents %}
 
-* Syncfusion.SfShared.UWP
+{% tabcontent NuGet packages %}
 
+ **Using NuGet Package Manager (UI):** 
 
-N> 1. Starting with v16.2.0.41 (2018 Vol 2), if you reference Syncfusion&reg; assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion license&reg; key in your UWP application to use our components.
-N> 2. Starting from version v20.3.0.52, we internally disposed all the resources used by SfRichTextBoxAdv instance inside Unloaded event. This change is added to automatically release the memory utilized by SfRichTextBoxAdv instance when it is unloaded. This behavior change may introduce a break if you remove the SfRichTextBoxAdv instance from its parent container and add it to the same or another parent container in your application. In case you used such logic in your application, then kindly add below code before removing the SfRichTextBoxAdv instance from its parent container.
+1.	In Solution Explorer, right-click the project and select **Manage NuGet Packages**.
+2.	Search for [Syncfusion.SfRichTextBoxAdv.UWP](https://www.nuget.org/packages/Syncfusion.SfRichTextBoxAdv.UWP) and install the latest version.
+3.	Verify that all required dependencies are installed and the project is successfully restored.
 
-<table>
-  <thead>
-    <tr>
-      <th>Old code</th>
-      <th>New code</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <pre><code>
-//Remove the control from the parent Grid
-grid.Children.Remove(richTextBoxAdv);
 
-//Add the SfRichTextBoxAdv control to the Grid
-grid.Children.Add(richTextBoxAdv);
-      </code></pre>
-    </td>
-    <td>
-      <pre><code>
-//Create a file stream
-MemoryStream memoryStream = new MemoryStream();
+**Using Package Manager Console:**
 
-//Save the document to the stream 
-richTextBoxAdv.Save(memoryStream, FormatType.Docx);
+{% tabs %}
+{% highlight c# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.SfRichTextBoxAdv.UWP
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% tabcontent Assemblies %}
+
+The following assembly references are required to use the **SfRichTextBoxAdv** control in your application.
+
+- Syncfusion.SfRichTextBoxAdv.UWP
+- Syncfusion.DocIO.UWP
+- Syncfusion.SfRadialMenu.UWP
+- Syncfusion.SfShared.UWP
+
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-//Remove the control from the parent Grid
-grid.Children.Remove(richTextBoxAdv);
+N> 1. Starting with v16.2.0.41 (2018 Vol 2), if you reference Syncfusion&reg; assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion license key in your UWP application to use our components.
 
-//Create new instance of SfRichTextBoxAdv
-richTextBoxAdv = new SfRichTextBoxAdv();
+### Add SfRichTextBoxAdv control
 
-//Add the SfRichTextBoxAdv control to the Grid
-grid.Children.Add(richTextBoxAdv);
+{% tabcontents %}
 
-//Load the saved stream into SfRichTextBoxAdv
-richTextBoxAdv.Load(memoryStream, FormatType.Docx);
-      </code></pre>
-    </td>
-  </tr>
-  </tbody>
-</table>
+{% tabcontent Via Designer %}
 
-## Adding SfRichTextBoxAdv to an application
+Open the Toolbox window and drag the **SfRichTextBoxAdv** control onto the Design view of the UWP application to add it to the user interface.
 
+![Dragging SfRichTextBoxAdv Control from Toolbox](Getting-Started_images/uwp-richtextbox-dragfrom-toolbox.png)
+{% endtabcontent %}
 
-After adding the aforementioned assembly references to your application, you can add SfRichTextBoxAdv as any normal control.
+{% tabcontent Via XAML %}
 
-You can either drag the SfRichTextBoxAdv control from the toolbox window to the Design view or directly define the control in XAML view.
-![Getting-Started_img1](Getting-Started_images/Getting-Started_img1.jpeg)
+To add the control manually in XAML, follow these steps:
+
+1.	Import Syncfusion® UWP SfRichTextBoxAdv control namespace Syncfusion.UI.Xaml.RichTextBoxAdv in the XAML page.
+
+2.	Declare SfRichTextBoxAdv control in the XAML page.
 
 {% tabs %}
-{% highlight xaml %}
-<RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv" ManipulationMode="All" xmlns:RichTextBoxAdv="using:Syncfusion.UI.Xaml.RichTextBoxAdv"/>
+{% highlight xaml tabtitle="XAML" %}
+
+<Page
+    x:Class="SfRichTextBoxAdv.MainPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:SfRichTextBoxAdv"
+    xmlns:RichTextBoxAdv="using:Syncfusion.UI.Xaml.RichTextBoxAdv"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <Grid>
+        <RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv" ManipulationMode="All"/>
+    </Grid>
+</Page>
+
 
 {% endhighlight %}
+{% endtabs %}
+{% endtabcontent %}
 
-{% highlight c# %}
-// Initializes a new instance of SfRichTextBoxAdv.
-SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv();
-richTextBoxAdv.ManipulationMode = ManipulationModes.All;
+{% tabcontent Via C# %}
 
-{% endhighlight %}
+To add the control manually in C#, add the following code in *.xaml.cs
+
+{% tabs %}
+{% highlight c# tabtitle="C#" %}
 
+using Syncfusion.UI.Xaml.RichTextBoxAdv;
+
+public sealed partial class MainPage : Page
+{
+    public MainPage()
+    {
+        // Create an instance of SfRichTextBoxAdv control
+        SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv();
+
+        // Add the SfRichTextBoxAdv control to the container (Grid)
+        Root_Grid.Children.Add(richTextBoxAdv);
+    }
+}
+
+{% endhighlight %}
 {% endtabs %}
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+
+### Run the Application
+
+1. Press **F5** or click **Start Debugging** in Visual Studio.
+2. The UWP application is deployed and launched on the selected target device and displays the SfRichTextBoxAdv control
+3. Press Ctrl+O to open an existing document. The selected document will be displayed within the SfRichTextBoxAdv control, as shown below.
+
+![UWP SfRichTextBoxAdv Control](Getting-Started_images/uwp-sfrichtextboxadv-control.png)
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/UWP-RichTextBox-Examples/tree/main/Samples/SfRichTextBoxAdv).
+
+## Use SfRichTextBoxAdv as a standard RichTextBox
 
-## Using SfRichTextBoxAdv as a standard RichTextBox
+Use the following code to configure the SfRichTextBoxAdv control as a standard RichTextBox with rich text formatting options.
 
-This section discusses about how to use the SfRichTextBoxAdv control as a standard RichTextBox control with rich text formatting options.
 {% tabs %}
 {% highlight xaml %}
-<Page>
-
-    <Page.Resources>
-        <RichTextBoxAdv:UnderlineToggleConverter x:Key="UnderlineToggleConverter"/>
-        <RichTextBoxAdv:LeftAlignmentToggleConverter x:Key="LeftAlignmentToggleConverter"/>
-        <RichTextBoxAdv:CenterAlignmentToggleConverter x:Key="CenterAlignmentToggleConverter"/>
-        <RichTextBoxAdv:RightAlignmentToggleConverter x:Key="RightAlignmentToggleConverter"/>
-        <RichTextBoxAdv:JustifyAlignmentToggleConverter x:Key="JustifyAlignmentToggleConverter"/>
-        <Style TargetType="Button">
-            <Setter Property="Background" Value="Transparent" />
-            <Setter Property="Margin" Value="12 4"/>
-        </Style>
-        <Style TargetType="ToggleButton">
-            <Setter Property="Background" Value="Transparent" />
-            <Setter Property="Margin" Value="12 4"/>
-        </Style>
-    </Page.Resources>
-
-    <Grid Background="#F1F1F1">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="*"/>
-        </Grid.RowDefinitions>
-        <Grid>
-            <!-- Defines the data context as RichTextBoxAdv -->
-            <StackPanel Orientation="Horizontal" DataContext="{Binding ElementName=richTextBoxAdv}">
-                <!-- UI option to perform Undo/Redo using command binding -->
-                <StackPanel Orientation="Horizontal">
-                    <Button Command="{Binding UndoCommand}" IsTabStop="False">
-                        <Image Source="/Images/Undo.png" Height="40" Width="40" />
-                    </Button>
-                    <Button Command="{Binding RedoCommand}" IsTabStop="False">
-                        <Image Source="/Images/Redo.png" Height="40" Width="40" />
-                    </Button>
+<Page
+    x:Class="Standard_RichTextBox.MainPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Standard_RichTextBox"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    xmlns:RichTextBoxAdv="using:Syncfusion.UI.Xaml.RichTextBoxAdv"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <Page>
+        <Page.Resources>
+            <RichTextBoxAdv:UnderlineToggleConverter x:Key="UnderlineToggleConverter"/>
+            <RichTextBoxAdv:LeftAlignmentToggleConverter x:Key="LeftAlignmentToggleConverter"/>
+            <RichTextBoxAdv:CenterAlignmentToggleConverter x:Key="CenterAlignmentToggleConverter"/>
+            <RichTextBoxAdv:RightAlignmentToggleConverter x:Key="RightAlignmentToggleConverter"/>
+            <RichTextBoxAdv:JustifyAlignmentToggleConverter x:Key="JustifyAlignmentToggleConverter"/>
+            <Style TargetType="Button">
+                <Setter Property="Background" Value="Transparent" />
+                <Setter Property="Margin" Value="12 4"/>
+            </Style>
+            <Style TargetType="ToggleButton">
+                <Setter Property="Background" Value="Transparent" />
+                <Setter Property="Margin" Value="12 4"/>
+            </Style>
+        </Page.Resources>
+
+        <Grid Background="#F1F1F1">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="*"/>
+            </Grid.RowDefinitions>
+            <Grid>
+                <!-- Defines the data context as RichTextBoxAdv -->
+                <StackPanel Orientation="Horizontal" DataContext="{Binding ElementName=richTextBoxAdv}">
+                    <!-- UI option to perform Undo/Redo using command binding -->
+                    <StackPanel Orientation="Horizontal">
+                        <Button Command="{Binding UndoCommand}" IsTabStop="False">
+                            <Image Source="/Images/Undo.png" Height="40" Width="40" />
+                        </Button>
+                        <Button Command="{Binding RedoCommand}" IsTabStop="False">
+                            <Image Source="/Images/Redo.png" Height="40" Width="40" />
+                        </Button>
+                    </StackPanel>
+                    <!-- UI option to perform Clipboard operations using command binding -->
+                    <Border Width="2" Height="46" Background="#1F1F1F"/>
+                    <StackPanel Orientation="Horizontal">
+                        <Button Command="{Binding CutCommand}" IsTabStop="False">
+                            <Image Source="/Images/Cut.png" Height="40" Width="40" />
+                        </Button>
+                        <Button Command="{Binding CopyCommand}" IsTabStop="False">
+                            <Image Source="/Images/Copy.png" Height="40" Width="40" />
+                        </Button>
+                        <Button Command="{Binding PasteCommand}" IsTabStop="False">
+                            <Image Source="/Images/Paste.png" Height="40" Width="40" />
+                        </Button>
+                    </StackPanel>
+                    <!-- UI option to apply character formatting using property binding -->
+                    <Border Width="2" Height="46" Background="#1F1F1F"/>
+                    <StackPanel Orientation="Horizontal">
+                        <ToggleButton IsChecked="{Binding Selection.CharacterFormat.Bold, Mode=TwoWay}" IsTabStop="False">
+                            <Image Source="/Images/Bold.png" Height="40" Width="40" />
+                        </ToggleButton>
+                        <ToggleButton IsChecked="{Binding Selection.CharacterFormat.Italic, Mode=TwoWay}" IsTabStop="False">
+                            <Image Source="/Images/Italic.png" Height="40" Width="40" />
+                        </ToggleButton>
+                        <ToggleButton IsChecked="{Binding Selection.CharacterFormat.Underline, Converter={StaticResource UnderlineToggleConverter}, Mode=TwoWay}" IsTabStop="False">
+                            <Image Source="/Images/Underline.png" Height="40" Width="40" />
+                        </ToggleButton>
+                    </StackPanel>
+                    <Border Width="2" Height="46" Background="#1F1F1F"/>
+                    <!-- UI option to apply paragraph formatting using property binding -->
+                    <StackPanel Orientation="Horizontal">
+                        <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource LeftAlignmentToggleConverter}, Mode=TwoWay}" IsTabStop="False">
+                            <Image Source="/Images/Left.png" Height="40" Width="40" />
+                        </ToggleButton>
+                        <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource CenterAlignmentToggleConverter}, Mode=TwoWay}" IsTabStop="False">
+                            <Image Source="/Images/Center.png" Height="40" Width="40" />
+                        </ToggleButton>
+                        <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource RightAlignmentToggleConverter}, Mode=TwoWay}" IsTabStop="False">
+                            <Image Source="/Images/Right.png" Height="40" Width="40" />
+                        </ToggleButton>
+                        <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource JustifyAlignmentToggleConverter}, Mode=TwoWay}" IsTabStop="False">
+                            <Image Source="/Images/Justify.png" Height="40" Width="40" />
+                        </ToggleButton>
+                    </StackPanel>
                 </StackPanel>
-                <!-- UI option to perform Clipboard operations using command binding -->
-                <Border Width="2" Height="46" Background="#1F1F1F"/>
-                <StackPanel Orientation="Horizontal">
-                    <Button Command="{Binding CutCommand}" IsTabStop="False">
-                        <Image Source="/Images/Cut.png" Height="40" Width="40" />
-                    </Button>
-                    <Button Command="{Binding CopyCommand}" IsTabStop="False">
-                        <Image Source="/Images/Copy.png" Height="40" Width="40" />
-                    </Button>
-                    <Button Command="{Binding PasteCommand}" IsTabStop="False">
-                        <Image Source="/Images/Paste.png" Height="40" Width="40" />
-                    </Button>
-                </StackPanel>
-                <!-- UI option to apply character formatting using property binding -->
-                <Border Width="2" Height="46" Background="#1F1F1F"/>
-                <StackPanel Orientation="Horizontal">
-                    <ToggleButton IsChecked="{Binding Selection.CharacterFormat.Bold}" IsTabStop="False">
-                        <Image Source="/Images/Bold.png" Height="40" Width="40" />
-                    </ToggleButton>
-                    <ToggleButton IsChecked="{Binding Selection.CharacterFormat.Italic}" IsTabStop="False">
-                        <Image Source="/Images/Italic.png" Height="40" Width="40" />
-                    </ToggleButton>
-                    <ToggleButton IsChecked="{Binding Selection.CharacterFormat.Underline, Converter={StaticResource UnderlineToggleConverter}}" IsTabStop="False">
-                        <Image Source="/Images/Underline.png" Height="40" Width="40" />
-                    </ToggleButton>
-                </StackPanel>
-                <Border Width="2" Height="46" Background="#1F1F1F"/>
-                <!-- UI option to apply paragraph formatting using property binding -->
-                <StackPanel Orientation="Horizontal">
-                    <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource LeftAlignmentToggleConverter}}" IsTabStop="False">
-                        <Image Source="/Images/Left.png" Height="40" Width="40" />
-                    </ToggleButton>
-                    <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource CenterAlignmentToggleConverter}}" IsTabStop="False">
-                        <Image Source="/Images/Center.png" Height="40" Width="40" />
-                    </ToggleButton>
-                    <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource RightAlignmentToggleConverter}}" IsTabStop="False">
-                        <Image Source="/Images/Right.png" Height="40" Width="40" />
-                    </ToggleButton>
-                    <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource JustifyAlignmentToggleConverter}}" IsTabStop="False">
-                        <Image Source="/Images/Justify.png" Height="40" Width="40" />
-                    </ToggleButton>
-                </StackPanel>
-            </StackPanel>
+            </Grid>
+            <RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv" Grid.Row="1" ManipulationMode="All" LayoutType="Continuous"/>
         </Grid>
-        <RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv" Grid.Row="1" ManipulationMode="All" />
-    </Grid>
+    </Page>    
 </Page>
 
 
-
 {% endhighlight %}
 
 {% endtabs %}
+
+You can download a standard RichTextBox example from [GitHub](https://github.com/SyncfusionExamples/UWP-RichTextBox-Examples/tree/main/Samples/Standard%20RichTextBox).
+
+When the application is executed, the standard RichTextBox control is displayed as illustrated below.
+![UWP Standard RichTextBox](Getting-Started_images/uwp-standard-sfrichtextboxadv.png)
+
+
+## See also
+
+- [Import and Export](./Import-and-Export)
+- [Selection](./Selection)
+- [Commands](./Commands)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/uwp/Getting-Started_images/Getting-Started_img1.jpeg b/Document-Processing/Word/Word-Processor/uwp/Getting-Started_images/Getting-Started_img1.jpeg
deleted file mode 100644
index fcb0d9c700..0000000000
Binary files a/Document-Processing/Word/Word-Processor/uwp/Getting-Started_images/Getting-Started_img1.jpeg and /dev/null differ
diff --git a/Document-Processing/Word/Word-Processor/uwp/Getting-Started_images/uwp-richtextbox-dragfrom-toolbox.png b/Document-Processing/Word/Word-Processor/uwp/Getting-Started_images/uwp-richtextbox-dragfrom-toolbox.png
new file mode 100644
index 0000000000..78ab97672f
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/uwp/Getting-Started_images/uwp-richtextbox-dragfrom-toolbox.png differ
diff --git a/Document-Processing/Word/Word-Processor/uwp/Getting-Started_images/uwp-sfrichtextboxadv-control.png b/Document-Processing/Word/Word-Processor/uwp/Getting-Started_images/uwp-sfrichtextboxadv-control.png
new file mode 100644
index 0000000000..3ce392186b
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/uwp/Getting-Started_images/uwp-sfrichtextboxadv-control.png differ
diff --git a/Document-Processing/Word/Word-Processor/uwp/Getting-Started_images/uwp-standard-sfrichtextboxadv.png b/Document-Processing/Word/Word-Processor/uwp/Getting-Started_images/uwp-standard-sfrichtextboxadv.png
new file mode 100644
index 0000000000..1a5bb73b6a
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/uwp/Getting-Started_images/uwp-standard-sfrichtextboxadv.png differ
diff --git a/Document-Processing/Word/Word-Processor/uwp/Overview.md b/Document-Processing/Word/Word-Processor/uwp/Overview.md
index 95acaaceb8..17a2597391 100644
--- a/Document-Processing/Word/Word-Processor/uwp/Overview.md
+++ b/Document-Processing/Word/Word-Processor/uwp/Overview.md
@@ -30,4 +30,4 @@ The Syncfusion <sup style="font-size:70%">&reg;</sup> UWP RichTextBox [(SfRichTe
 * Supports loading encrypted Word documents with valid password. 
 
 
-N> Currently, the SfRichTextBoxAdv cannot edit rich text in headers and footers.
\ No newline at end of file
+N> Currently, the SfRichTextBoxAdv cannot edit rich text in headers and footers.
diff --git a/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md b/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md
index d9df5c6de7..2dabf24a98 100644
--- a/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md
+++ b/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md
@@ -1,107 +1,51 @@
 ---
 layout: post
-title: Getting started vue 3 with Vue Document editor component | Syncfusion
-description: Check out and learn about Getting started vue 3 with Vue Document editor component of Syncfusion Essential JS 2 and more details.
+title: Getting Started with Vue 3 DOCX Editor | Syncfusion
+description: Learn how to create a DOCX Editor in a Vue 3 application using the Syncfusion® Document Editor control to create, edit, and view Word documents.
 control: Getting started vue 3 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Getting Started with Syncfusion® Document editor Component in Vue 3
+# Getting Started with Vue DOCX Editor (Vue 3)
 
-This article provides a step-by-step guide for setting up a [Vite](https://vitejs.dev/) project with a JavaScript environment and integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Document editor component using the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) / [Options API](https://vuejs.org/guide/introduction.html#options-api).
+This article provides a step-by-step guide for setting up a [Vite](https://vitejs.dev/) project with integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Document Editor component using the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) or [Options API](https://vuejs.org/guide/introduction.html#options-api).
 
-The `Composition API` is a new feature introduced in Vue.js 3 that provides an alternative way to organize and reuse component logic. It allows developers to write components as functions that use smaller, reusable functions called composition functions to manage their properties and behavior.
 
-The `Options API` is the traditional way of writing Vue.js components, where the component logic is organized into a series of options that define the component's properties and behavior. These options include data, methods, computed properties, watchers, life cycle hooks, and more.
+## Steps to create a DOCX Editor in Vue 3
 
-## Prerequisites
+### Prerequisites
 
 [System requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements)
 
-## Set up the Vite project
+### Create a Vue application
 
-A recommended approach for beginning with Vue is to scaffold a project using [Vite](https://vitejs.dev/). To create a new Vite project, use one of the commands that are specific to either NPM or Yarn.
+To create a new Vue application, run the following command.
 
 ```bash
-npm create vite@latest
+npm create vite@latest documenteditor-app -- --template vue
 ```
 
-or
+Next, you will be prompted with "Install with npm and start now?". Select **Yes**. Move into the created project using the following command:
 
 ```bash
-yarn create vite
+cd documenteditor-app  
 ```
 
-Using one of the above commands will lead you to set up additional configurations for the project as below:
+### Install the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Document Editor packages
 
-1.Define the project name: We can specify the name of the project directly. Let's specify the name of the project as `my-project` for this article.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-vue-documenteditor).
 
-```bash
-? Project name: » my-project
-```
-
-2.Select `Vue` as the framework. It will create a Vue 3 project.
-
-```bash
-? Select a framework: » - Use arrow-keys. Return to submit.
-Vanilla
-> Vue
-  React
-  Preact
-  Lit
-  Svelte
-  Others
-```
-
-3.Choose `JavaScript` as the framework variant to build this Vite project using JavaScript and Vue.
-
-```bash
-? Select a variant: » - Use arrow-keys. Return to submit.
-> JavaScript
-  TypeScript
-  Customize with create-vue ↗
-  Nuxt ↗
-```
-
-4.Upon completing the steps to create the `my-project`, run the following command to install its dependencies:
-
-```bash
-cd my-project
-npm install
-```
-
-or
-
-```bash
-cd my-project
-yarn install
-```
-
-Now that `my-project` is ready to run with default settings, let's add Syncfusion<sup style="font-size:70%">&reg;</sup> components to the project.
-
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Vue packages
-
-Syncfusion<sup style="font-size:70%">&reg;</sup> Vue component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). To use Syncfusion<sup style="font-size:70%">&reg;</sup> Vue components in the project, install the corresponding npm package.
-
-This article uses the [Vue Document editor component](https://www.syncfusion.com/vue-components/vue-word-processor) as an example. To use the Vue Document editor component in the project, the `@syncfusion/ej2-vue-documenteditor` package needs to be installed using the following command:
+To install the Document Editor component, use the following command:
 
 ```bash
   npm install @syncfusion/ej2-vue-documenteditor --save
 ```
 
-or
-
-```bash
-yarn add @syncfusion/ej2-vue-documenteditor
-```
-
-## Import Syncfusion<sup style="font-size:70%">&reg;</sup> CSS styles
+### Add CSS reference
 
-You can import themes for the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to know more about built-in themes and different ways to refer to themes in a Vue project.
-
-In this article, `Material` theme is applied using CSS styles, which are available in installed packages. The necessary `Material` CSS styles for the Document editor component and its dependents were imported into the `<style>` section of **src/App.vue** file.
+Add the following Document Editor and dependent component style references to the `<style>` section of the `src/App.vue` file.
 
 {% tabs %}
 {% highlight html tabtitle="~/src/App.vue" %}
@@ -115,328 +59,135 @@ In this article, `Material` theme is applied using CSS styles, which are availab
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css';
 </style>
 
 {% endhighlight %}
 {% endtabs %}
 
-> Document editor has different themes, please refer to [supported themes](https://ej2.syncfusion.com/vue/documentation/appearance/theme) section.
-
-## Adding Component
-
-> Starting from `v19.3.0.x`, we have optimized the accuracy of text size measurements such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API [to disable it and retain the document pagination behavior of older versions](./how-to/disable-optimized-text-measuring).
-
-### Adding DocumentEditor component in the application
-
-Document editor Component is used to create, view and edit word documents. In this, you can customize the UI options based on your requirements to modify the document.
-
-You have completed all the necessary configurations needed for rendering the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue component. Now, you are going to add the Document editor component using following steps.
-
-Follow the below steps to add the Vue Document editor component using `Composition API` or `Options API`:
-
-**Step 1:** First, import and register the DocumentEditor component and its child directives in the `script` section of the **src/App.vue** file. If you are using the `Composition API`, you should add the `setup` attribute to the `script` tag to indicate that Vue will be using the `Composition API`.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-<script setup>
-import { DocumentEditorComponent as EjsDocumenteditor, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<script>
-import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
-</script>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Step 2:** Add the component definition in `template` section.
-
-{% tabs %}
-{% highlight html tabtitle="~/src/App.vue" %}
-
-<template>
-  <ejs-documenteditor :serviceUrl='serviceUrl' :isReadOnly='false' :enablePrint='true' :enableSfdtExport='true' :enableSelection='true' :enableContextMenu='true' :enableSearch='true' :enableOptionsPane='true' :enableWordExport='true' :enableTextExport='true' :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true'> </ejs-documenteditor>
-</template>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Step 3:** Declare the bound properties `serviceUrl` in the `script` section.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-<script>
-  import { provide } from 'vue';
-  import { DocumentEditorComponent as EjsDocumenteditor, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
-
-  const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
-  const documenteditor = null;
-
-  provide('DocumentEditor', [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]);
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<script>
-  import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
-
-  //Component registeration
-  export default {
-    name: 'App',
-    components: {
-      // Declaring component
-      'ejs-documenteditor' : DocumentEditorComponent
-    },
-    data () {
-      return {
-        serviceUrl:'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
-      };
-    },
-    provide: {
-        DocumentEditor: [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]
-    }
-  }
-</script>
-
-{% endhighlight %}
-{% endtabs %}
+> Note: Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to know more about built-in themes and different ways to refer to themes in a Vue project.
 
-> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
+### Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Document Editor component
 
-**Step 4:** Summarizing the above steps, update the `src/App.vue` file with following code.
+Import and register the Document Editor component in the `<script>` section of `src/App.vue`. If you use the `Composition API`, add the `setup` attribute to the `<script>` tag. Then, define the component in the `<template>` section.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
 
 <template>
-  <ejs-documenteditor :serviceUrl='serviceUrl' :isReadOnly='false' :enablePrint='true' :enableSfdtExport='true' :enableSelection='true' :enableContextMenu='true' :enableSearch='true' :enableOptionsPane='true' :enableWordExport='true' :enableTextExport='true' :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true'> </ejs-documenteditor>
+  <ejs-documenteditorcontainer 
+   height="590px"
+   :serviceUrl="serviceUrl" 
+   :enableToolbar="true"> 
+  </ejs-documenteditorcontainer>
 </template>
 
 <script setup>
   import { provide } from 'vue';
-  import { DocumentEditorComponent as EjsDocumenteditor, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
-
+  import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+  
+  // Use the following service URL only for demo purposes
   const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
-  const documenteditor = null;
 
-  provide('DocumentEditor', [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]);
+  provide('DocumentEditorContainer', [Toolbar]);
 </script>
 
-<style>
-  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-  @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
-</style>
-
 {% endhighlight %}
 {% highlight html tabtitle="Options API (~/src/App.vue)" %}
 
 <template>
-  <ejs-documenteditor :serviceUrl='serviceUrl' :isReadOnly='false' :enablePrint='true' :enableSfdtExport='true' :enableSelection='true' :enableContextMenu='true' :enableSearch='true' :enableOptionsPane='true' :enableWordExport='true' :enableTextExport='true' :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true' :enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true' :enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true' :enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true' :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true'> </ejs-documenteditor>
+  <ejs-documenteditorcontainer 
+    height="590px"
+    :serviceUrl="serviceUrl" 
+    :enableToolbar="true"> 
+  </ejs-documenteditorcontainer>
 </template>
 
 <script>
-  import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
+  import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
 
-  //Component registeration
   export default {
     name: 'App',
     components: {
-      // Declaring component
-      'ejs-documenteditor' : DocumentEditorComponent
+       'ejs-documenteditorcontainer' : DocumentEditorContainerComponent
     },
     data () {
       return {
+        // Use the following service URL only for demo purposes
         serviceUrl:'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
       };
     },
     provide: {
-        DocumentEditor: [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]
+      DocumentEditorContainer: [Toolbar]
     }
   }
 </script>
 
-<style>
-  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-  @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
-</style>
-
 {% endhighlight %}
 {% endtabs %}
 
-> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-#### Running the DocumentEditor application
+> Note: The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
 
-Run the application using the following command.
+### Run the application
 
-```bash
-npm run dev
-```
-
-or
-
-```bash
-yarn run dev
-```
-
-The output will appear as follows:
-
-![Output](./images/vue3-documenteditor-demo.png)
-
-### Adding DocumentEditorContainer component in the application
-
-Document editor Container Component is also used to create, view and edit word document. But here, you can use predefined toolbar and properties pane to view and modify word document.
-
-You have completed all the necessary configurations needed  for rendering the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue component. Now, you are going to add the DocumentEditorContainer component using following steps.
-
-Follow the below steps to add the Vue DocumentEditorContainer component using `Composition API` or `Options API`:
+The complete code for `src/App.vue` is shown below.
 
-**Step 1:** First, import and register the DocumentEditorContainer component and its child directives in the `script` section of the **src/App.vue** file. If you are using the `Composition API`, you should add the `setup` attribute to the `script` tag to indicate that Vue will be using the `Composition API`.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}
 
-<script setup>
-  import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<script>
-  import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
-</script>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Step 2:** Add the component definition in `template` section.
-
-{% tabs %}
-{% highlight html tabtitle="~/src/App.vue" %}
-
 <template>
-  <ejs-documenteditorcontainer :serviceUrl='serviceUrl' :enableToolbar='true'> </ejs-documenteditorcontainer>
+  <ejs-documenteditorcontainer 
+   height="590px"
+   :serviceUrl="serviceUrl" 
+   :enableToolbar="true"> 
+  </ejs-documenteditorcontainer>
 </template>
 
-{% endhighlight %}
-{% endtabs %}
-
-**Step 3:** Declare the bound properties `serviceUrl` in the `script` section.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
 <script setup>
   import { provide } from 'vue';
   import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
-
-  const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
-  const documentEditorContainer = null;
-
-  provide('DocumentEditorContainer', [Toolbar]);
-</script>
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-<script>
-  import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
-
-  //Component registeration
-  export default {
-    name: 'App',
-    components: {
-      // Declaring component
-      "ejs-documenteditorcontainer": DocumentEditorContainerComponent
-    },
-    data () {
-      return {
-        serviceUrl:'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
-      };
-    },
-    provide: {
-        DocumentEditorContainer: [Toolbar]
-    }
-  }
-</script>
-
-{% endhighlight %}
-{% endtabs %}
-
-> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-**Step 4:** Summarizing the above steps, update the `src/App.vue` file with following code.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-<template>
-  <ejs-documenteditorcontainer :serviceUrl='serviceUrl' :enableToolbar='true'> </ejs-documenteditorcontainer>
-</template>
-
-<script setup>
-  import { provide, ref } from 'vue';
-  import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
-
+  
+  // Use the following service URL only for demo purposes
   const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
-  const documentEditorContainer = ref(null);
 
   provide('DocumentEditorContainer', [Toolbar]);
 </script>
 
 <style>
-  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-  @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css';
 </style>
 
 {% endhighlight %}
 {% highlight html tabtitle="Options API (~/src/App.vue)" %}
 
 <template>
-  <ejs-documenteditorcontainer :serviceUrl='serviceUrl' :enableToolbar='true'> </ejs-documenteditorcontainer>
+  <ejs-documenteditorcontainer 
+    height="590px"
+    :serviceUrl="serviceUrl" 
+    :enableToolbar="true"> 
+  </ejs-documenteditorcontainer>
 </template>
 
 <script>
   import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
 
-  //Component registeration
   export default {
     name: 'App',
     components: {
-      // Declaring component
-      'ejs-documenteditorcontainer' : DocumentEditorContainerComponent
+       'ejs-documenteditorcontainer' : DocumentEditorContainerComponent
     },
     data () {
       return {
+        // Use the following service URL only for demo purposes
         serviceUrl:'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
       };
     },
@@ -445,38 +196,47 @@ Follow the below steps to add the Vue DocumentEditorContainer component using `C
     }
   }
 </script>
-
 <style>
-  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-  @import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css';
 </style>
 
 {% endhighlight %}
 {% endtabs %}
 
-> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-#### Running the DocumentEditorContainer application
-
-Run the application using the following command.
+Run the application using the following command:
 
 ```bash
 npm run dev
 ```
 
-or
+After the application starts, open the localhost URL shown in the terminal. The Vue Document Editor is rendered in the browser with a toolbar and an editable document area, as shown below.
 
-```bash
-yarn run dev
-```
+![Output of Vue 3 Document Editor](./images/vue_3_getting_started.png)
+
+## Server-side dependencies
+
+The Document Editor component requires server-side interactions for the following operations:
+
+* Open file formats other than SFDT
+* Paste with formatting
+* Restrict editing
+* Spell check
+* Save as file formats other than SFDT and DOCX
+
+> Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.
+
+For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page.
 
-The output will appear as follows:
+## See also
 
-![Output](./images/vue3-documenteditorcontainer-demo.png)
\ No newline at end of file
+- [Open a document](./import)
+- [Save a document](./export)
+- [Collaborative Editing](./collaborative-editing/overview)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/vue/getting-started.md b/Document-Processing/Word/Word-Processor/vue/getting-started.md
index b7f6a70104..88553bedeb 100644
--- a/Document-Processing/Word/Word-Processor/vue/getting-started.md
+++ b/Document-Processing/Word/Word-Processor/vue/getting-started.md
@@ -8,48 +8,43 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Getting Started with Vue DOCX Editor in Vue 2
+# Getting Started with Vue DOCX Editor (Vue 2)
 
-Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Vue application.
+Syncfusion® Vue DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Vue application.
 
-## Steps to create a Vue DOCX Editor
+## Steps to create a DOCX Editor in Vue 2
 
 ### Prerequisites
 
 [System requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements)
 
 
-### Setting up the Vue 2 project
+### Create a Vue application
 
-To generate a Vue 2 project using Vue-CLI, use the [vue create](https://cli.vuejs.org#getting-started) command. Follow these steps to install Vue CLI and create a new project:
-Using npm (global Vue CLI):
+Use [Vue CLI](https://cli.vuejs.org/#getting-started) to set up a Vue application, as it provides a modular project architecture, flexible configuration, and an integrated plugin system.
+
+Install Vue CLI globally using the following command:
 
 ```bash
 npm install -g @vue/cli
-vue create quickstart
-cd quickstart
-npm run serve
 ```
 
-Or using Yarn (global Vue CLI):
+Create a new Vue application using the following command:
 
 ```bash
-yarn global add @vue/cli
 vue create quickstart
-cd quickstart
-yarn run serve
 ```
 
-When creating a new project, choose the option `Vue 2` from the menu.
-
-![Reference](./images/vue2-terminal.png)
+When creating a new project, you will be prompted to choose a project type. Select the option **Default ([Vue 2] babel, eslint)**. 
 
-Once the `quickstart` project is set up with default settings, proceed to add Syncfusion<sup style="font-size:70%">&reg;</sup> components to the project.
+Move into the created project using the following command:
 
+```bash
+cd quickstart
+```
+### Install the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Document Editor packages
 
-### Install the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor packages
-
-The Syncfusion<sup style="font-size:70%">&reg;</sup> DOCX Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-vue-documenteditor).
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Document Editor package is available in the public npm registry and can be installed directly from [`npmjs.com`](https://www.npmjs.com/package/@syncfusion/ej2-vue-documenteditor).
 
 To install the Document Editor component, use the following command:
 
@@ -57,86 +52,148 @@ To install the Document Editor component, use the following command:
 npm install @syncfusion/ej2-vue-documenteditor --save
 ```
 
-or
+### Add CSS reference
 
-```bash
-yarn add @syncfusion/ej2-vue-documenteditor
-```
+Add the following Document Editor and dependent component style references to the `<style>` section of `src/App.vue` file.
 
-### Add CSS reference
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-documenteditor/styles/material.css';
 
-You can import themes for the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to know more about built-in themes and different ways to refer to themes in a Vue project.
+{% endhighlight %}
+{% endtabs %}
 
-In this article, the `Material` theme is applied using CSS styles, which are available in installed packages. The necessary `Material` CSS styles for the Document Editor component and its dependents were imported into the `<style>` section of **src/App.vue** file.
+> Note: Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) to know more about built-in themes and different ways to refer to themes in a Vue project.
 
-```css
-@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
-@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
-@import '../../node_modules/@syncfusion/ej2-lists/styles/material.css';
-@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import "../../node_modules/@syncfusion/ej2-documenteditor/styles/material.css";
-```
+### Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Vue Document Editor component
 
-### Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Document Editor component
+Modify the `src/App.vue` file to render the Document Editor. Add the Vue Document Editor in the `<template>` section using the `<ejs-documenteditorcontainer>` selector and configure it in the `<script>` section.
 
-Modify the template in the `src/App.vue` file to render the Document Editor component. Add the Vue Document Editor by using the `<ejs-documenteditorcontainer>` selector in `<template>` section of the `App.vue` file.
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
 
-```
 <template>
-    <div id="app">
-        <ejs-documenteditorcontainer height="590px" :serviceUrl='serviceUrl' :enableToolbar='true'> </ejs-documenteditorcontainer>
-    </div>
+  <div id="app">
+    <ejs-documenteditorcontainer
+      height="590px"
+      :serviceUrl="serviceUrl"
+      :enableToolbar="true">
+    </ejs-documenteditorcontainer>
+  </div>
 </template>
 
 <script>
-  import { DocumentEditorContainerComponent,Toolbar } from '@syncfusion/ej2-vue-documenteditor';
-  export default {
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
   name: "App",
+
   components: {
     "ejs-documenteditorcontainer": DocumentEditorContainerComponent
   },
+
   data() {
     // Use the following service URL only for demo purposes
-    return { serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }
+    return {
+      serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
+    };
   },
+
   provide: {
-    //Inject require modules.
+    // Inject required modules.
     DocumentEditorContainer: [Toolbar]
   }
-}
+};
 </script>
-```
-> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
+
+{% endhighlight %}
+{% endtabs %}
+
+> Note: The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).
 
 ### Run the application
 
+The complete code for `src/App.vue` is shown below.
+
+{% tabs %}
+{% highlight html tabtitle="App.vue" %}
+
+<template>
+  <div id="app">
+    <ejs-documenteditorcontainer
+      height="590px"
+      :serviceUrl="serviceUrl"
+      :enableToolbar="true">
+    </ejs-documenteditorcontainer>
+  </div>
+</template>
+
+<script>
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  name: "App",
+
+  components: {
+    "ejs-documenteditorcontainer": DocumentEditorContainerComponent
+  },
+
+  data() {
+    // Use the following service URL only for demo purposes
+    return {
+      serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
+    };
+  },
+
+  provide: {
+    // Inject required modules.
+    DocumentEditorContainer: [Toolbar]
+  }
+};
+</script>
+
+<style>
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-documenteditor/styles/material.css';
+</style>
+
+{% endhighlight %}
+{% endtabs %}
+
+
 Run the application using the following command:
 
 ```bash
 npm run serve
 ```
 
-The Document Editor is displayed as shown below.
+After the application starts, open the localhost URL shown in the terminal. The Vue Document Editor is rendered in the browser with a toolbar and an editable document area, as shown below.
 
-{% tabs %}
-{% highlight html tabtitle="app.vue" %}
-{% include code-snippet/document-editor/vue/getting-started-cs3/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "/document-processing/code-snippet/document-editor/vue/getting-started-cs3" %}
+![Output of Vue Document Editor](./images/vue_2_getting_started.png)
 
 ## Video tutorial
 
 To get started quickly with the Document Editor component using CLI, you can check the video below.
 
-{% youtube "https://www.syncfusion.com/tutorial-videos/vue/word-processor?title=getting-started-with-the-vue-word-processor" %}
+{% youtube "https://www.youtube.com/watch?v=UbmGFUXtzYg" %}
 
-## Server side dependencies
+## Server-side dependencies
 
 The Document Editor component requires server-side interactions for the following operations:
 
@@ -146,6 +203,12 @@ The Document Editor component requires server-side interactions for the followin
 * Spell check
 * Save as file formats other than SFDT and DOCX
 
->Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.
+> Note: If you don't require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.
+
+For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page.
+
+## See also
 
-For detailed information about server-side dependencies, refer to the [Web Services Overview](./web-services-overview) page.
\ No newline at end of file
+- [Open a document](./import)
+- [Save a document](./export)
+- [Collaborative Editing](./collaborative-editing/overview)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/vue/images/vue2-terminal.png b/Document-Processing/Word/Word-Processor/vue/images/vue2-terminal.png
deleted file mode 100644
index 39beefaa25..0000000000
Binary files a/Document-Processing/Word/Word-Processor/vue/images/vue2-terminal.png and /dev/null differ
diff --git a/Document-Processing/Word/Word-Processor/vue/images/vue_2_getting_started.png b/Document-Processing/Word/Word-Processor/vue/images/vue_2_getting_started.png
new file mode 100644
index 0000000000..f75c3d3bc8
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/vue/images/vue_2_getting_started.png differ
diff --git a/Document-Processing/Word/Word-Processor/vue/images/vue_3_getting_started.png b/Document-Processing/Word/Word-Processor/vue/images/vue_3_getting_started.png
new file mode 100644
index 0000000000..3ee9a2bce2
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/vue/images/vue_3_getting_started.png differ
diff --git a/Document-Processing/Word/Word-Processor/vue/overview.md b/Document-Processing/Word/Word-Processor/vue/overview.md
index 8cffcfb682..aa4b44b535 100644
--- a/Document-Processing/Word/Word-Processor/vue/overview.md
+++ b/Document-Processing/Word/Word-Processor/vue/overview.md
@@ -1,14 +1,14 @@
 ---
 layout: post
-title: Overview in Vue Document editor component | Syncfusion
-description: Learn here all about Overview in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
+title: Overview of Vue DOCX Editor | Syncfusion
+description: Learn about the Vue DOCX Editor control, which enables you to create, edit, view, and print Word documents.
 control: Index 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Overview
+# Overview of the Vue DOCX Editor
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/Vue-docx-editor) (Document Editor) is a feature-rich, user-interactive component that enables creating, editing, viewing, and printing Word documents with advanced formatting, editing capabilities, and broad support for document import and export formats. 
 
@@ -58,4 +58,4 @@ You can deploy web APIs for server-side dependencies of Document Editor componen
 
 To know more about server-side dependencies, refer this [page](./web-services-overview).
 
->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
\ No newline at end of file
+>Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
diff --git a/Document-Processing/Word/Word-Processor/wpf/Getting-Started.md b/Document-Processing/Word/Word-Processor/wpf/Getting-Started.md
index 2dc450fcec..1f5a545cc8 100644
--- a/Document-Processing/Word/Word-Processor/wpf/Getting-Started.md
+++ b/Document-Processing/Word/Word-Processor/wpf/Getting-Started.md
@@ -9,147 +9,324 @@ keywords: getting started
 
 # Getting Started with WPF RichTextBox (SfRichTextBoxAdv)
 
-This section describes how to get started with [WPF RichTextBox](https://www.syncfusion.com/wpf-controls/richtextbox) (SfRichTextBoxAdv) control.
+Syncfusion® [WPF RichTextBox](https://www.syncfusion.com/wpf-controls/richtextbox) (SfRichTextBoxAdv) enables you to create, edit, view, and print Word documents in WPF applications. This section guides you through the steps to get started and create a RichTextBox in a WPF application.
 
-## Assembly Reference
+## Create a RichTextBox in WPF using SfRichTextBoxAdv
 
-You can find WPF RichTextBox (SfRichTextBoxAdv) control from the following assembly under the namespace Syncfusion.Windows.Controls.RichTextBoxAdv
+In this walkthrough, you will create a WPF application that uses the Syncfusion® WPF SfRichTextBoxAdv control.
 
-* Syncfusion.SfRichTextBoxAdv.WPF
+The steps below cover the essential tasks required to add and use the SfRichTextBoxAdv control in a WPF project.
 
+### Create a New WPF Project
 
-The following assembly references are required to deploy SfRichTextBoxAdv control in your application.
+1. Open **Visual Studio**.
+2. Click **Create a new project**.
+3. Select **WPF App (.NET Framework)** or **WPF App (.NET Core)**.
+4. Click **Next**.
+5. Enter the **project name** and other required details.
+6. Click **Create**.
 
-* Syncfusion.Compression.Base
+### Add SfRichTextBoxAdv dependencies
 
-* Syncfusion.OfficeChart.Base
+{% tabcontents %}
 
-* Syncfusion.Shared.WPF
+{% tabcontent NuGet packages %}
 
-* For 3.5 and 4.0 Frameworks – Syncfusion.DocIO.ClientProfile
+**Using NuGet Package Manager (UI):** 
 
-* For 4.5 and higher Frameworks – Syncfusion.DocIO.Base
+1.	In Solution Explorer, right-click the project and choose **Manage NuGet Packages**.
+2.	Search for [Syncfusion.SfRichTextBoxAdv.Wpf](https://www.nuget.org/packages/Syncfusion.SfRichTextBoxAdv.WPF) and install the latest version.
+3.	Ensure the necessary dependencies are installed correctly, and the project is restored.
 
-N> Starting with v16.2.0.41 (2018 Vol 2), if you reference Syncfusion&reg; assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your projects. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion&reg; license key in your WPF application to use our components.
+**Using Package Manager Console:** 
 
-## Create a simple application with SfRichTextBoxAdv
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.SfRichTextBoxAdv.WPF
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% tabcontent Assemblies %}
+
+The following assembly references are required to use the **SfRichTextBoxAdv** control in your application.
+
+- Syncfusion.SfRichTextBoxAdv.WPF
+- Syncfusion.Compression.Base
+- Syncfusion.OfficeChart.Base
+- Syncfusion.Shared.WPF
+- Syncfusion.DocIO.Base
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+N> Starting with v16.2.0.41 (2018 Vol 2), if you reference Syncfusion&reg; assemblies from trial setup or from the NuGet feed, you also have to add "Syncfusion.Licensing" assembly reference and include a license key in your project. Please refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion&reg; license key in your WPF application to use our components.
 
-This section explains how to create a simple application using SfRichTextBoxAdv. It covers the basic steps to add and configure the control for rich text editing.
 
-### Add SfRichTextBoxAdv to your application
+### Add SfRichTextBoxAdv control
 
-After adding the required assembly references to your application, you can include SfRichTextBoxAdv like any standard control.
+{% tabcontents %}
 
-You can add the control in one of the following ways:
-- Drag the **SfRichTextBoxAdv** control from the Toolbox to the Design view.
-- Define the control directly in the XAML view.
+{% tabcontent Via Designer %}
+
+Open the Toolbox window and drag the **SfRichTextBoxAdv** control onto the Design view of the WPF application to add it to the user interface.
+
+![Dragging SfRichTextBoxAdv Control from Toolbox](Getting-Started_images/wpf-richtextbox-dragfrom-toolbox.png)
+
+{% endtabcontent %}
+
+{% tabcontent Via XAML %}
+
+To add the control manually in XAML, follow these steps:
+
+1.	Import Syncfusion® WPF schema http://schemas.syncfusion.com/wpf or SfRichTextBoxAdv control namespace Syncfusion.Windows.Controls.RichTextBoxAdv in the XAML page.
+
+2.	Declare SfRichTextBoxAdv control in the XAML page.
 
-![WPF RichTextBox Control](Getting-Started_images/wpf-richtextbox-control.jpeg)
 
 {% tabs %}
-{% highlight xaml %}
-<RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv" xmlns:RichTextBoxAdv="clr-namespace:Syncfusion.Windows.Controls.RichTextBoxAdv;assembly=Syncfusion.SfRichTextBoxAdv.Wpf" />
+{% highlight xaml tabtitle="XAML" %}
 
-{% endhighlight %}
-{% highlight c# %}
-// Initializes a new instance of RichTextBoxAdv.
-SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv();
+<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
+        x:Class="DocumentEditor.MainWindow"
+        Title="MainWindow" Height="450" Width="800">
+    <Grid>
+        <syncfusion:SfRichTextBoxAdv x:Name="richTextBoxAdv"/>
+    </Grid>
+</Window>
 
-{% endhighlight %}
 
+{% endhighlight %}
 {% endtabs %}
+{% endtabcontent %}
+
+{% tabcontent Via C# %}
+
+To add the control manually in C#, add the following code in *.xaml.cs
+
+{% tabs %}
+{% highlight c# tabtitle="C#" %}
 
+using Syncfusion.Windows.Controls.RichTextBoxAdv;
 
-## Creating Document editor with Ribbon
+public partial class MainWindow : Window
+{
+    public MainWindow()
+    {
+        // Create an instance of SfRichTextBoxAdv control
+        SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv();
 
-This section discusses about how to create document editor with ribbon similar to Microsoft Word. The SfRichTextRibbon is a Ribbon control customized to work with SfRichTextBoxAdv control, which gives you the look and feel of Microsoft Word.
+        // Add the SfRichTextBoxAdv control to the container (Grid)
+        Root_Grid.Children.Add(richTextBoxAdv);
+    }
+}
+{% endhighlight %}
+{% endtabs %}
+{% endtabcontent %}
 
-You can find the SfRichTextRibbon control from the following assembly under the namespace Syncfusion.Windows.Controls.RichTextBoxAdv
+{% endtabcontents %}
 
-* Syncfusion.SfRichTextRibbon.WPF
+### Run the Application
 
-The following assembly reference are additionally required to deploy SfRichTextRibbon control along with aforementioned assemblies.
+1. Press **F5** or click **Start** in Visual Studio.
+2. The application launches and displays the **SfRichTextBoxAdv** control.
+3. Press Ctrl+O to open an existing document. The selected document will be displayed within the SfRichTextBoxAdv control, as shown below.
 
-* Syncfusion.Tools.WPF
+![WPF SfRichTextBoxAdv Control](Getting-Started_images/wpf-sfrichtextboxadv-control.png)
 
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/WPF-RichTextBox-Examples/tree/main/Samples/SfRichTextBoxAdv).
 
-### Adding the Control via Designer
+## Add ribbon UI to SfRichTextBoxAdv
 
-1. Create new WPF application in Visual Studio
+If you need a ribbon-based user interface, you can add **SfRichTextRibbon** with **SfRichTextBoxAdv** control. It enhances the user experience by organizing commands into tabs and groups, similar to Microsoft Word.
 
-2. Use the Syncfusion&reg; RibbonWindow instead of Window
+### Add SfRichTextRibbon Dependencies
 
-![WPF RibbonWindow](Getting-Started_images/wpf-ribbonwindow.jpeg)
+{% tabcontents %}
 
-3. Drag the SfRichTextRibbon control from the Toolbox window to the Design View. An instance of the SfRichTextRibbon control is created in the Design view
+{% tabcontent NuGet packages %}
 
-![Dragging RichTextBox Control from Toolbox](Getting-Started_images/wpf-richtextbox-toolbox.jpeg)
+**Using NuGet Package Manager (UI)**
 
-4. Drag the SfRichTextBoxAdv control from the Toolbox window to the Design View. An instance of the SfRichTextBoxAdv control is created in the Design view
+1.	In Solution Explorer, right-click the project and choose **Manage NuGet Packages**.
+2.	Search for [Syncfusion.SfRichTextRibbon.Wpf](https://www.nuget.org/packages/Syncfusion.SfRichTextRibbon.WPF) and install the latest version.
+3.	Ensure the necessary dependencies are installed correctly, and the project is restored.
 
-![Draggin RichTextRibbon Control from Toolbox](Getting-Started_images/wpf-richtextribbon-toolbox.jpeg)
 
-5. To make an interaction between SfRichTextRibbon and SfRichTextBoxAdv, bind the SfRichTextBoxAdv as DataContext to the SfRichTextRibbon
+**Using Package Manager Console**
 
-{% capture codesnippet1 %}
 {% tabs %}
-{% highlight xaml %}
-<Syncfusion:SfRichTextRibbon x:Name="richTextRibbon SnapsToDevicePixels="True" DataContext="{Binding ElementName=richTextBoxAdv}" /> 
+{% highlight c# tabtitle="C#" %}
 
-{% endhighlight %}
+Install-Package Syncfusion.SfRichTextRibbon.WPF
 
+{% endhighlight %}
 {% endtabs %}
-{% endcapture %}
-{{ codesnippet1 | OrderList_Indent_Level_1 }}
 
+N> Installing the SfRichTextRibbon NuGet package will automatically install the required SfRichTextBoxAdv NuGet package as a dependency.
+
+{% endtabcontent %}
+
+{% tabcontent Assemblies %}
+
+The following assembly references are required to use the **SfRichTextRibbon** control in your application.
+
+- Syncfusion.SfRichTextRibbon.WPF
+- Syncfusion.SfRichTextBoxAdv.WPF
+- Syncfusion.Compression.Base
+- Syncfusion.OfficeChart.Base
+- Syncfusion.Shared.WPF
+- Syncfusion.Tools.WPF
+- Syncfusion.DocIO.Base
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+### Add SfRichTextRibbon to the application
+
+{% tabcontents %}
+
+{% tabcontent Via Designer %}
+
+Open the Toolbox window and drag the **SfRichTextRibbon** and **SfRichTextBoxAdv** onto the Design view. Bind the SfRichTextBoxAdv as DataContext to the SfRichTextRibbon in XAML.
+
+![Dragging SfRichTextRibbon Control from Toolbox](Getting-Started_images/wpf-sfrichtextribbon-dragfrom-toolbox.png)
 
-### Adding Control via code.
+{% endtabcontent %}
 
-You can also add the SfRichTextRibbon and SfRichTextBoxAdv programmatically by using XAML
+{% tabcontent Via XAML %}
+To add the control manually in XAML, follow these steps:
+
+1.	Import the Syncfusion® WPF schema http://schemas.syncfusion.com/wpf or SfRichTextRibbon control namespace Syncfusion.Windows.Controls.RichTextBoxAdv in XAML page.
+2.	To use the SfRichTextRibbon use the Syncfusion® RibbonWindow instead of Window.
+3.	Declare the SfRichTextRibbon and SfRichTextBoxAdv controls in XAML page.
+4.  To make an interaction between SfRichTextRibbon and SfRichTextBoxAdv, bind the SfRichTextBoxAdv as DataContext to the SfRichTextRibbon.
 
 {% tabs %}
-{% highlight xaml %}
-<Syncfusion:RibbonWindow x:Class="DocumentEditor.MainWindow"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-        xmlns:local="clr-namespace:DocumentEditor"
-        mc:Ignorable="d"
-        xmlns:Syncfusion="http://schemas.syncfusion.com/wpf"
-        Title="MainWindow" Height="350" Width="525" Syncfusion:SfSkinManager.Theme="{Syncfusion:SkinManagerExtension ThemeName=FluentLight}">
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="*"/>
-        </Grid.RowDefinitions>
-        <Syncfusion:SfRichTextRibbon x:Name="richTextRibbon" SnapsToDevicePixels="True"/>
-        <Syncfusion:SfRichTextBoxAdv x:Name="richTextBoxAdv" Background="#F1F1F1" Grid.Row="1"></Syncfusion:SfRichTextBoxAdv>
-    </Grid>
+{% highlight xaml tabtitle="XAML" %}
+
+<Syncfusion:RibbonWindow xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                         xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
+                         x:Class="DocumentEditor.MainWindow"
+                         Title="MainWindow" Height="450" Width="800">
+<Grid>
+     <Grid.RowDefinitions>
+         <RowDefinition Height="Auto"/>
+         <RowDefinition Height="*"/>
+     </Grid.RowDefinitions>
+     <syncfusion:SfRichTextRibbon x:Name="richTextRibbon" SnapsToDevicePixels="True"  DataContext="{Binding ElementName=richTextBoxAdv}"/>
+     <syncfusion:SfRichTextBoxAdv x:Name="richTextBoxAdv" Background="#F1F1F1" Grid.Row="1"/>
+ </Grid>
 </Syncfusion:RibbonWindow>
 
+
 {% endhighlight %}
+{% endtabs %}
+
+{% endtabcontent %}
+
+{% tabcontent Via C# %}
+To add the control manually in C#, add the below code in *.xaml.cs
+
+{% tabs %}
+{% highlight c# tabtitle="C#" %}
+
+using Syncfusion.Windows.Controls.RichTextBoxAdv;
+using Syncfusion.Windows.Tools.Controls;
+
+public partial class MainWindow : RibbonWindow
+{
+    public MainWindow()
+    {
+        // Create the root Grid container for layout
+        Grid rootGrid = new Grid();
+
+        // Define the first row (auto-sized for ribbon)
+        RowDefinition row1 = new RowDefinition();
+        row1.Height = GridLength.Auto;
+
+        // Define the second row (fills remaining space for editor)
+        RowDefinition row2 = new RowDefinition();
+        row2.Height = new GridLength(1, GridUnitType.Star);
+
+        // Add row definitions to the grid
+        rootGrid.RowDefinitions.Add(row1);
+        rootGrid.RowDefinitions.Add(row2);
 
+        // Instantiate the rich text editor control
+        richTextBoxAdv = new SfRichTextBoxAdv();
+
+        // Set background color for better UI appearance
+        richTextBoxAdv.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#F1F1F1"));
+
+        // Instantiate the ribbon control
+        richTextRibbon = new SfRichTextRibbon();
+
+        // Enable pixel snapping for sharper rendering
+        richTextRibbon.SnapsToDevicePixels = true;
+
+        // Set the DataContext of the ribbon to the editor
+        // This allows the ribbon to interact with the editor (binding commands)
+        richTextRibbon.DataContext = richTextBoxAdv;
+
+        // Position the ribbon in the first row
+        Grid.SetRow(richTextRibbon, 0);
+
+        // Position the editor in the second row
+        Grid.SetRow(richTextBoxAdv, 1);
+
+        // Add controls to the grid
+        rootGrid.Children.Add(richTextRibbon);
+        rootGrid.Children.Add(richTextBoxAdv);
+
+        // Set the constructed grid as the content of the UserControl
+        this.Content = rootGrid;
+    }
+}
+
+{% endhighlight %}
 {% endtabs %}
+{% endtabcontent %}
+
+{% endtabcontents %}
 
 N> Prefer using `SfRichTextRibbon` within `RibbonWindow` in your application, since the backstage of Ribbon will be opened only when the ribbon is loaded under the `RibbonWindow`
 
-Finally, you can get the following output similar to Microsoft Word on executing the application
+### Run the Application with Ribbon UI
+
+1. Press **F5** or click **Start** in Visual Studio.  
+2. The application will launch with the **SfRichTextRibbon** and **SfRichTextBoxAdv** controls.  
+3. Press **Ctrl + O** or use the **Open** option in the **SfRichTextRibbon** to open a document, which will be displayed in the **SfRichTextBoxAdv** control, with ribbon options available for editing and formatting, as shown below
 
-![WPF RichTextBox](Getting-Started_images/wpf-richtextbox.jpeg)
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/WPF-RichTextBox-Examples/tree/main/Samples/SfRichTextBoxAdv%20with%20SfRichTextRibbon).
 
-## Using SfRichTextBoxAdv as a standard RichTextBox
+![WPF SfRichTextBoxAdv Control along with its SfRichTextRibbon](Getting-Started_images/wpf-sfrichtextboxadv-with-sfrichtextribbon.png)
 
-This section discusses about how to use the SfRichTextBoxAdv control as a standard RichTextBox control with rich text formatting options.
+
+## Use SfRichTextBoxAdv as a standard RichTextBox
+
+Use the following code to configure the SfRichTextBoxAdv control as a standard RichTextBox with rich text formatting options.
 
 {% tabs %}
 {% highlight xaml %}
-<Window x:Class="Sample.MainWindow"
+<Window x:Class="Standard_RichTextBox.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
-       xmlns:RichTextBoxAdv="clr-namespace:Syncfusion.Windows.Controls.RichTextBoxAdv;assembly=Syncfusion.SfRichTextBoxAdv.Wpf">
-    
-    
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:Standard_RichTextBox"
+        mc:Ignorable="d"
+        xmlns:RichTextBoxAdv="clr-namespace:Syncfusion.Windows.Controls.RichTextBoxAdv;assembly=Syncfusion.SfRichTextBoxAdv.Wpf"
+        Title="SfRichTextBoxAdv" Height="450" Width="800">
+   
     <Window.Resources>
         <RichTextBoxAdv:UnderlineToggleConverter x:Key="UnderlineToggleConverter"/>
         <RichTextBoxAdv:LeftAlignmentToggleConverter x:Key="LeftAlignmentToggleConverter"/>
@@ -178,70 +355,72 @@ This section discusses about how to use the SfRichTextBoxAdv control as a standa
                 <!-- UI option to perform Undo/Redo using command binding -->
                 <StackPanel Orientation="Horizontal">
                     <Button Command="RichTextBoxAdv:SfRichTextBoxAdv.UndoCommand" CommandTarget="{Binding ElementName=richTextBoxAdv}" Focusable="False">
-                        <Image Source="/Images/Undo.png" Height="40" Width="40" />
+                        <Image Source="\Images\Undo.png" Height="40" Width="40" />
                     </Button>
                     <Button Command="RichTextBoxAdv:SfRichTextBoxAdv.RedoCommand" CommandTarget="{Binding ElementName=richTextBoxAdv}" Focusable="False">
-                        <Image Source="/Images/Redo.png" Height="40" Width="40" />
+                        <Image Source="\Images\Redo.png" Height="40" Width="40" />
                     </Button>
                 </StackPanel>
                 <!-- UI option to perform Clipboard operations using command binding -->
                 <Border Width="2" Height="46" Background="#1F1F1F"/>
                 <StackPanel Orientation="Horizontal">
                     <Button Command="RichTextBoxAdv:SfRichTextBoxAdv.CutCommand" CommandTarget="{Binding ElementName=richTextBoxAdv}" Focusable="False">
-                        <Image Source="/Images/Cut.png" Height="40" Width="40" />
+                        <Image Source="\Images\Cut.png" Height="40" Width="40" />
                     </Button>
                     <Button Command="RichTextBoxAdv:SfRichTextBoxAdv.CopyCommand" CommandTarget="{Binding ElementName=richTextBoxAdv}" Focusable="False">
-                        <Image Source="/Images/Copy.png" Height="40" Width="40" />
+                        <Image Source="\Images\Copy.png" Height="40" Width="40" />
                     </Button>
                     <Button Command="RichTextBoxAdv:SfRichTextBoxAdv.PasteCommand" CommandTarget="{Binding ElementName=richTextBoxAdv}" Focusable="False">
-                        <Image Source="/Images/Paste.png" Height="40" Width="40" />
+                        <Image Source="\Images\Paste.png" Height="40" Width="40" />
                     </Button>
                 </StackPanel>
                 <!-- UI option to apply character formatting using property binding -->
                 <Border Width="2" Height="46" Background="#1F1F1F"/>
                 <StackPanel Orientation="Horizontal">
                     <ToggleButton IsChecked="{Binding Selection.CharacterFormat.Bold}" Focusable="False">
-                        <Image Source="/Images/Bold.png" Height="40" Width="40" />
+                        <Image Source="\Images\Bold.png" Height="40" Width="40" />
                     </ToggleButton>
                     <ToggleButton IsChecked="{Binding Selection.CharacterFormat.Italic}" Focusable="False">
-                        <Image Source="/Images/Italic.png" Height="40" Width="40" />
+                        <Image Source="\Images\Italic.png" Height="40" Width="40" />
                     </ToggleButton>
                     <ToggleButton IsChecked="{Binding Selection.CharacterFormat.Underline, Converter={StaticResource UnderlineToggleConverter}}" Focusable="False">
-                        <Image Source="/Images/Underline.png" Height="40" Width="40" />
+                        <Image Source="\Images\Underline.png" Height="40" Width="40" />
                     </ToggleButton>
                 </StackPanel>
                 <Border Width="2" Height="46" Background="#1F1F1F"/>
                 <!-- UI option to apply paragraph formatting using property binding -->
                 <StackPanel Orientation="Horizontal">
                     <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource LeftAlignmentToggleConverter}}" Focusable="False">
-                        <Image Source="/Images/Left.png" Height="40" Width="40" />
+                        <Image Source="\Images\Left.png" Height="40" Width="40" />
                     </ToggleButton>
                     <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource CenterAlignmentToggleConverter}}" Focusable="False">
-                        <Image Source="/Images/Center.png" Height="40" Width="40" />
+                        <Image Source="\Images\Center.png" Height="40" Width="40" />
                     </ToggleButton>
                     <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource RightAlignmentToggleConverter}}" Focusable="False">
-                        <Image Source="/Images/Right.png" Height="40" Width="40" />
+                        <Image Source="\Images\Right.png" Height="40" Width="40" />
                     </ToggleButton>
                     <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource JustifyAlignmentToggleConverter}}" Focusable="False">
-                        <Image Source="/Images/Justify.png" Height="40" Width="40" />
+                        <Image Source="\Images\Justify.png" Height="40" Width="40" />
                     </ToggleButton>
                 </StackPanel>
             </StackPanel>
         </Grid>
-        <RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv" Grid.Row="1"  />
+        <RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv" Grid.Row="1" LayoutType="Continuous"  />
     </Grid>
-
 </Window>
 
 {% endhighlight %}
 
 {% endtabs %}
 
-N> [View Standard RichTextBox example in GitHub](https://github.com/SyncfusionExamples/WPF-RichTextBox-Examples/tree/main/Samples/Standard%20RichTextBox)
+You can download a standard RichTextBox example from [GitHub](https://github.com/SyncfusionExamples/WPF-RichTextBox-Examples/tree/main/Samples/Standard%20RichTextBox).
+
+When the application is executed, the standard RichTextBox control is displayed as illustrated below.
+![WPF Standard RichTextBox](Getting-Started_images/wpf-standard-sfrichtextboxadv.png)
 
 ## Theme
 
-SfRichTextBoxAdv supports various built-in themes. Refer to the below links to apply themes for the SfRichTextBoxAdv,
+SfRichTextBoxAdv supports various built-in themes. Refer to the following links to apply themes for the SfRichTextBoxAdv,
 
   * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager)
 	
@@ -249,4 +428,11 @@ SfRichTextBoxAdv supports various built-in themes. Refer to the below links to a
 
 ![Applying Theme to WPF RichTextBox](Getting-Started_images/wpf-richtextbox-theme.png)
 
-N> You can refer to our [WPF RichTextBox](https://www.syncfusion.com/wpf-controls/richtextbox) feature tour page for its groundbreaking feature representations.You can also explore our [WPF RichTextBox example](https://github.com/syncfusion/docx-editor-sdk-wpf-demos) to knows how to render and configure the editing tools.
\ No newline at end of file
+N> You can also explore our [WPF RichTextBox example](https://github.com/syncfusion/docx-editor-sdk-wpf-demos) to knows how to render and configure the editing tools.
+
+
+## See also
+
+- [Import and Export](./Import-and-Export)
+- [Selection](./Selection)
+- [Commands](./Commands)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-ribbonwindow.jpeg b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-ribbonwindow.jpeg
deleted file mode 100644
index be279f2c59..0000000000
Binary files a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-ribbonwindow.jpeg and /dev/null differ
diff --git a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextbox-control.jpeg b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextbox-control.jpeg
deleted file mode 100644
index b8f686424e..0000000000
Binary files a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextbox-control.jpeg and /dev/null differ
diff --git a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextbox-dragfrom-toolbox.png b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextbox-dragfrom-toolbox.png
new file mode 100644
index 0000000000..c417153cbe
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextbox-dragfrom-toolbox.png differ
diff --git a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextbox-toolbox.jpeg b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextbox-toolbox.jpeg
deleted file mode 100644
index b77f3ec9a6..0000000000
Binary files a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextbox-toolbox.jpeg and /dev/null differ
diff --git a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextbox.jpeg b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextbox.jpeg
deleted file mode 100644
index 0ae9078d7b..0000000000
Binary files a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextbox.jpeg and /dev/null differ
diff --git a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextribbon-toolbox.jpeg b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextribbon-toolbox.jpeg
deleted file mode 100644
index 0b02a7ff9a..0000000000
Binary files a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-richtextribbon-toolbox.jpeg and /dev/null differ
diff --git a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-sfrichtextboxadv-control.png b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-sfrichtextboxadv-control.png
new file mode 100644
index 0000000000..1af31cdf48
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-sfrichtextboxadv-control.png differ
diff --git a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-sfrichtextboxadv-with-sfrichtextribbon.png b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-sfrichtextboxadv-with-sfrichtextribbon.png
new file mode 100644
index 0000000000..0e799820c5
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-sfrichtextboxadv-with-sfrichtextribbon.png differ
diff --git a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-sfrichtextribbon-dragfrom-toolbox.png b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-sfrichtextribbon-dragfrom-toolbox.png
new file mode 100644
index 0000000000..5b43cf2abd
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-sfrichtextribbon-dragfrom-toolbox.png differ
diff --git a/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-standard-sfrichtextboxadv.png b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-standard-sfrichtextboxadv.png
new file mode 100644
index 0000000000..b1a2544812
Binary files /dev/null and b/Document-Processing/Word/Word-Processor/wpf/Getting-Started_images/wpf-standard-sfrichtextboxadv.png differ
diff --git a/Document-Processing/Word/Word-Processor/wpf/Overview.md b/Document-Processing/Word/Word-Processor/wpf/Overview.md
index 65dfe0664e..1b0fbea253 100644
--- a/Document-Processing/Word/Word-Processor/wpf/Overview.md
+++ b/Document-Processing/Word/Word-Processor/wpf/Overview.md
@@ -23,4 +23,4 @@ The Syncfusion <sup style="font-size:70%">&reg;</sup> [WPF RichTextBox](https://
 * Enables [cut](./Clipboard.md), [copy](./Clipboard.md), and [paste](./Clipboard.md) operations, including rich text content via the clipboard. 
 * Supports loading encrypted Word documents with valid password. 
 
->Note: Currently, the SfRichTextBoxAdv cannot edit rich text in headers and footers. 
\ No newline at end of file
+>Note: Currently, the SfRichTextBoxAdv cannot edit rich text in headers and footers.