From 7e7e9e2a557bc72fae334235012e71ce8f958eb8 Mon Sep 17 00:00:00 2001
From: Sujitha Siva <sujitha.siva@syncfusion.com>
Date: Fri, 8 May 2026 20:20:03 +0530
Subject: [PATCH] 1025962: Add Document Editor Details as a Separate Page

---
 Document-Processing-toc.html                  |   7 +
 .../angular/document-editor-toc.html          |   1 +
 .../how-to/document-editor-component.md       |  39 +++
 .../how-to/document-editor-component.md       |  39 +++
 .../ej2-javascript-document-editor-toc.html   |   1 +
 .../how-to/document-editor-component.md       |  95 +++++++
 .../ej2-typescript-document-editor-toc.html   |   1 +
 .../how-to/document-editor-component.md       |  56 ++++
 .../react/document-editor-toc.html            |   1 +
 .../react/how-to/document-editor-component.md | 263 ++++++++++++++++++
 .../vue/document-editor-toc.html              |   1 +
 .../vue/how-to/document-editor-component.md   |  73 +++++
 12 files changed, 577 insertions(+)
 create mode 100644 Document-Processing/Word/Word-Processor/asp-net-core/how-to/document-editor-component.md
 create mode 100644 Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/document-editor-component.md
 create mode 100644 Document-Processing/Word/Word-Processor/javascript-es5/how-to/document-editor-component.md
 create mode 100644 Document-Processing/Word/Word-Processor/javascript-es6/how-to/document-editor-component.md
 create mode 100644 Document-Processing/Word/Word-Processor/react/how-to/document-editor-component.md
 create mode 100644 Document-Processing/Word/Word-Processor/vue/how-to/document-editor-component.md

diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index b262ea62d1..8ec429e928 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -3541,6 +3541,7 @@
 							<li><a href="/document-processing/word/word-processor/asp-net-core/security-advisories">Security Advisories</a></li>
 							<li>How To
 								<ul>
+									<li><a href="/document-processing/word/word-processor/asp-net-core/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
 									<li><a href="/document-processing/word/word-processor/asp-net-core/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 									<li><a href="/document-processing/word/word-processor/asp-net-core/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 									<li><a href="/document-processing/word/word-processor/asp-net-core/how-to/customize-context-menu">Customize context menu</a></li>
@@ -3655,6 +3656,7 @@
 							<li><a href="/document-processing/word/word-processor/asp-net-mvc/security-advisories">Security Advisories</a></li>
 							<li>How To
 								<ul>
+									<li><a href="/document-processing/word/word-processor/asp-net-mvc/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
 									<li><a href="/document-processing/word/word-processor/asp-net-mvc/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 									<li><a href="/document-processing/word/word-processor/asp-net-mvc/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 									<li><a href="/document-processing/word/word-processor/asp-net-mvc/how-to/customize-context-menu">Customize context menu</a></li>
@@ -3790,6 +3792,7 @@
 							<li><a href="/document-processing/word/word-processor/angular/security-advisories">Security Advisories</a></li>
 							<li>How To
 								<ul>
+									<li><a href="/document-processing/word/word-processor/angular/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
 									<li><a href="/document-processing/word/word-processor/angular/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 									<li><a href="/document-processing/word/word-processor/angular/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 									<li><a href="/document-processing/word/word-processor/angular/how-to/customize-context-menu">Customize context menu</a></li>
@@ -4008,6 +4011,7 @@
 							<li><a href="/document-processing/word/word-processor/react/security-advisories">Security Advisories</a></li>
 							<li>How To
 								<ul>
+									<li><a href="/document-processing/word/word-processor/react/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
 									<li><a href="/document-processing/word/word-processor/react/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 									<li><a href="/document-processing/word/word-processor/react/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 									<li><a href="/document-processing/word/word-processor/react/how-to/customize-context-menu">Customize context menu</a></li>
@@ -4151,6 +4155,7 @@
 							<li><a href="/document-processing/word/word-processor/vue/security-advisories">Security Advisories</a></li>
 							<li>How To
 								<ul>
+									<li><a href="/document-processing/word/word-processor/vue/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
 									<li><a href="/document-processing/word/word-processor/vue/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 									<li><a href="/document-processing/word/word-processor/vue/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 									<li><a href="/document-processing/word/word-processor/vue/how-to/customize-context-menu">Customize context menu</a></li>
@@ -4293,6 +4298,7 @@
 							<li><a href="/document-processing/word/word-processor/javascript-es5/security-advisories">Security Advisories</a></li>
 							<li>How To
 							<ul>
+							<li><a href="/document-processing/word/word-processor/javascript-es5/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
 							<li><a href="/document-processing/word/word-processor/javascript-es5/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 							<li><a href="/document-processing/word/word-processor/javascript-es5/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 							<li><a href="/document-processing/word/word-processor/javascript-es5/how-to/customize-context-menu">Customize context menu</a></li>
@@ -4434,6 +4440,7 @@
 							<li><a href="/document-processing/word/word-processor/javascript-es6/security-advisories">Security Advisories</a></li>
 							<li>How To
 							<ul>
+							<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
 							<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 							<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 							<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/customize-context-menu">Customize context menu</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..934e5bddc6 100644
--- a/Document-Processing/Word/Word-Processor/angular/document-editor-toc.html
+++ b/Document-Processing/Word/Word-Processor/angular/document-editor-toc.html
@@ -89,6 +89,7 @@
         <li><a href="/document-processing/word/word-processor/angular/security-advisories">Security Advisories</a></li>
         <li>How To
            <ul>
+              <li><a href="/document-processing/word/word-processor/angular/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
               <li><a href="/document-processing/word/word-processor/angular/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
               <li><a href="/document-processing/word/word-processor/angular/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
               <li><a href="/document-processing/word/word-processor/angular/how-to/customize-context-menu">Customize context menu</a></li>
diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/how-to/document-editor-component.md b/Document-Processing/Word/Word-Processor/asp-net-core/how-to/document-editor-component.md
new file mode 100644
index 0000000000..1820a3bd29
--- /dev/null
+++ b/Document-Processing/Word/Word-Processor/asp-net-core/how-to/document-editor-component.md
@@ -0,0 +1,39 @@
+---
+layout: post
+title: DocumentEditorContainer vs DocumentEditor in ASP.NET Core DOCX Editor
+description: Learn the differences between DocumentEditorContainer and DocumentEditor in the Syncfusion ASP.NET Core DOCX Editor and understand when and how to use the DocumentEditor component for custom document editing scenarios.
+platform: document-processing
+control: DocumentEditor
+documentation: ug
+domainurl: ##DomainURL##a
+---
+
+## DocumentEditorContainer vs DocumentEditor in ASP.NET Core DOCX Editor
+
+In this article, we explain the differences between **DocumentEditorContainer** and **DocumentEditor**, and also describe how to use the **DocumentEditor** component in the ASP.NET Core DOCX Editor.
+
+## Difference between DocumentEditorContainer and DocumentEditor
+
+The **DocumentEditor** component provides a flexible foundation for creating, viewing, and editing Word documents. Unlike **DocumentEditorContainer**, this component allows you to customize the UI options based on your specific requirements.
+
+- **DocumentEditorContainer**: A complete solution with a predefined toolbar and properties pane that provides a comprehensive document editing experience. It allows users to create, view, and edit Word documents with minimal configuration.
+- **DocumentEditor**: A customizable component that provides a flexible foundation for creating, viewing, and editing Word documents. This component allows you to build a user interface based on your specific requirements.
+
+### When to Use DocumentEditorContainer and DocumentEditor
+
+- Choose **DocumentEditorContainer** for standard document editing scenarios (applications similar to Microsoft Word).
+- Choose **DocumentEditor** for advanced or unique UI/UX requirements where customization is key.
+
+## Add ASP.NET Core DocumentEditor control
+
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core DocumentEditor tag helper in `~/Pages/Index.cshtml` page.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/asp-net-core/getting-started/tagHelper %}
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+* [How to customize tool bar](./customize-tool-bar).
diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/document-editor-component.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/document-editor-component.md
new file mode 100644
index 0000000000..105817add2
--- /dev/null
+++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/document-editor-component.md
@@ -0,0 +1,39 @@
+---
+layout: post
+title: DocumentEditorContainer vs DocumentEditor in ASP.NET MVC DOCX Editor
+description: Learn the differences between DocumentEditorContainer and DocumentEditor in the Syncfusion ASP.NET MVC DOCX Editor and understand when and how to use the DocumentEditor component for custom document editing scenarios.
+platform: document-processing
+control: DocumentEditor
+documentation: ug
+domainurl: ##DomainURL##a
+---
+
+## DocumentEditorContainer vs DocumentEditor in ASP.NET MVC DOCX Editor
+
+In this article, we explain the differences between **DocumentEditorContainer** and **DocumentEditor**, and also describe how to use the **DocumentEditor** component in the ASP.NET MVC DOCX Editor.
+
+## Difference between DocumentEditorContainer and DocumentEditor
+
+The **DocumentEditor** component provides a flexible foundation for creating, viewing, and editing Word documents. Unlike **DocumentEditorContainer**, this component allows you to customize the UI options based on your specific requirements.
+
+- **DocumentEditorContainer**: A complete solution with a predefined toolbar and properties pane that provides a comprehensive document editing experience. It allows users to create, view, and edit Word documents with minimal configuration.
+- **DocumentEditor**: A customizable component that provides a flexible foundation for creating, viewing, and editing Word documents. This component allows you to build a user interface based on your specific requirements.
+
+### When to Use DocumentEditorContainer and DocumentEditor
+
+- Choose **DocumentEditorContainer** for standard document editing scenarios (applications similar to Microsoft Word).
+- Choose **DocumentEditor** for advanced or unique UI/UX requirements where customization is key.
+
+## Add ASP.NET MVC DocumentEditor control
+
+Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC DocumentEditor control in `~/Views/Home/Index.cshtml` page.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/asp-net-mvc/getting-started/razor %}
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+* [How to customize tool bar](./customize-tool-bar.md).
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/ej2-javascript-document-editor-toc.html b/Document-Processing/Word/Word-Processor/javascript-es5/ej2-javascript-document-editor-toc.html
index f49b7b5175..17f7d6f3bc 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es5/ej2-javascript-document-editor-toc.html
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/ej2-javascript-document-editor-toc.html
@@ -91,6 +91,7 @@
 <li><a href="/document-processing/word/word-processor/javascript-es5/security-advisories">Security Advisories</a></li>
 <li>How To
 <ul>
+    <li><a href="/document-processing/word/word-processor/javascript-es5/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
 <li><a href="/document-processing/word/word-processor/javascript-es5/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 <li><a href="/document-processing/word/word-processor/javascript-es5/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 <li><a href="/document-processing/word/word-processor/javascript-es5/how-to/customize-context-menu">Customize context menu</a></li>
diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/document-editor-component.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/document-editor-component.md
new file mode 100644
index 0000000000..3cb8ead466
--- /dev/null
+++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/document-editor-component.md
@@ -0,0 +1,95 @@
+---
+layout: post
+title: DocumentEditorContainer vs DocumentEditor in Javascript ES5 DOCX Editor
+description: Learn the differences between DocumentEditorContainer and DocumentEditor in the Syncfusion Javascript (ES5) DOCX Editor and understand when and how to use the DocumentEditor component for custom document editing scenarios.
+platform: document-processing
+control: DocumentEditor
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+## DocumentEditorContainer vs DocumentEditor in Javascript ES5 DOCX Editor
+
+In this article, we explain the differences between **DocumentEditorContainer** and **DocumentEditor**, and also describe how to use the **DocumentEditor** component in the Javascript (ES5) DOCX Editor.
+
+## Difference between DocumentEditorContainer and DocumentEditor
+
+The **DocumentEditor** component provides a flexible foundation for creating, viewing, and editing Word documents. Unlike **DocumentEditorContainer**, this component allows you to customize the UI options based on your specific requirements.
+
+- **DocumentEditorContainer**: A complete solution with a predefined toolbar and properties pane that provides a comprehensive document editing experience. It allows users to create, view, and edit Word documents with minimal configuration.
+- **DocumentEditor**: A customizable component that provides a flexible foundation for creating, viewing, and editing Word documents. This component allows you to build a user interface based on your specific requirements.
+
+### When to Use DocumentEditorContainer and DocumentEditor
+
+- Choose **DocumentEditorContainer** for standard document editing scenarios (applications similar to Microsoft Word).
+- Choose **DocumentEditor** for advanced or unique UI/UX requirements where customization is key.
+
+## Adding DocumentEditor component
+
+Add the `Div` element and initiate the DocumentEditor component in the `index.html` by using following code
+
+```html
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Essential JS 2 Document editor</title>
+    <!-- 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>
+<body>
+    <!-- Element which is going to render -->
+    <div id='DocumentEditor'></div>
+    <script>
+        // Initialize DocumentEditor component
+        var documenteditor = new ej.documenteditor.DocumentEditor({ 
+            isReadOnly: false, 
+            serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' 
+        });
+
+        documenteditor.acceptTab = true;
+
+        // Enable all the built-in modules
+        documenteditor.enableAllModules();
+        documenteditor.pageOutline = '#E0E0E0';
+
+        // Document editor control rendering
+        documenteditor.appendTo('#DocumentEditor');
+    </script>
+</body>
+</html>
+```
+
+> 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).
+
+## See Also
+
+* [How to customize toolbar](./customize-tool-bar)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/ej2-typescript-document-editor-toc.html b/Document-Processing/Word/Word-Processor/javascript-es6/ej2-typescript-document-editor-toc.html
index 7a126a0ea1..c90d8f31bc 100644
--- a/Document-Processing/Word/Word-Processor/javascript-es6/ej2-typescript-document-editor-toc.html
+++ b/Document-Processing/Word/Word-Processor/javascript-es6/ej2-typescript-document-editor-toc.html
@@ -90,6 +90,7 @@
 <li><a href="/document-processing/word/word-processor/javascript-es6/security-advisories">Security Advisories</a></li>
 <li>How To
 <ul>
+<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
 <li><a href="/document-processing/word/word-processor/javascript-es6/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 <li><a href="/document-processing/word/word-processor/javascript-es6/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 <li><a href="/document-processing/word/word-processor/javascript-es6/how-to/customize-context-menu">Customize context menu</a></li>
diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/document-editor-component.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/document-editor-component.md
new file mode 100644
index 0000000000..06d9c0cbcf
--- /dev/null
+++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/document-editor-component.md
@@ -0,0 +1,56 @@
+---
+layout: post
+title: DocumentEditorContainer vs DocumentEditor in Javascript ES6 DOCX Editor
+description: Learn the differences between DocumentEditorContainer and DocumentEditor in the Syncfusion Javascript (ES6) DOCX Editor and understand when and how to use the DocumentEditor component for custom document editing scenarios.
+platform: document-processing
+control: DocumentEditor
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+## DocumentEditorContainer vs DocumentEditor in Javascript ES6 DOCX Editor
+
+In this article, we explain the differences between **DocumentEditorContainer** and **DocumentEditor**, and also describe how to use the **DocumentEditor** component in the Javascript (ES6) DOCX Editor.
+
+## Difference between DocumentEditorContainer and DocumentEditor
+
+The **DocumentEditor** component provides a flexible foundation for creating, viewing, and editing Word documents. Unlike **DocumentEditorContainer**, this component allows you to customize the UI options based on your specific requirements.
+
+- **DocumentEditorContainer**: A complete solution with a predefined toolbar and properties pane that provides a comprehensive document editing experience. It allows users to create, view, and edit Word documents with minimal configuration.
+- **DocumentEditor**: A customizable component that provides a flexible foundation for creating, viewing, and editing Word documents. This component allows you to build a user interface based on your specific requirements.
+
+### When to Use DocumentEditorContainer and DocumentEditor
+
+- Choose **DocumentEditorContainer** for standard document editing scenarios (applications similar to Microsoft Word).
+- Choose **DocumentEditor** for advanced or unique UI/UX requirements where customization is key.
+
+## Adding Document editor component
+
+You can start adding the Document editor component to the application. Add the DocumentEditor component 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 { DocumentEditor } from '@syncfusion/ej2-documenteditor';
+
+// Initialize Document editor component
+let documenteditor: DocumentEditor = new DocumentEditor({ 
+    isReadOnly: false, 
+    height: '370px', 
+    serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' 
+});
+
+// Enable all built-in modules
+documenteditor.enableAllModules();
+
+// Render the Document editor component
+documenteditor.appendTo('#DocumentEditor');
+
+{% endhighlight %}
+{% endtabs %}
+
+## See Also
+
+* [How to customize toolbar](./customize-tool-bar)
\ No newline at end of file
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..f70e9c0ac5 100644
--- a/Document-Processing/Word/Word-Processor/react/document-editor-toc.html
+++ b/Document-Processing/Word/Word-Processor/react/document-editor-toc.html
@@ -90,6 +90,7 @@
 <li><a href="/document-processing/word/word-processor/react/security-advisories">Security Advisories</a></li>
 <li>How To
 <ul>
+    <li><a href="/document-processing/word/word-processor/react/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
 <li><a href="/document-processing/word/word-processor/react/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 <li><a href="/document-processing/word/word-processor/react/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 <li><a href="/document-processing/word/word-processor/react/how-to/customize-context-menu">Customize context menu</a></li>
diff --git a/Document-Processing/Word/Word-Processor/react/how-to/document-editor-component.md b/Document-Processing/Word/Word-Processor/react/how-to/document-editor-component.md
new file mode 100644
index 0000000000..39289d7e36
--- /dev/null
+++ b/Document-Processing/Word/Word-Processor/react/how-to/document-editor-component.md
@@ -0,0 +1,263 @@
+---
+layout: post
+title: DocumentEditorContainer vs DocumentEditor in React DOCX Editor
+description: Learn the differences between DocumentEditorContainer and DocumentEditor in the Syncfusion React DOCX Editor and understand when and how to use the DocumentEditor component for custom document editing scenarios.
+platform: document-processing
+control: DocumentEditor
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+## DocumentEditorContainer vs DocumentEditor in React DOCX Editor
+
+In this article, we explain the differences between **DocumentEditorContainer** and **DocumentEditor**, and also describe how to use the **DocumentEditor** component in the React DOCX Editor.
+
+## Difference between DocumentEditorContainer and DocumentEditor
+
+The **DocumentEditor** component provides a flexible foundation for creating, viewing, and editing Word documents. Unlike **DocumentEditorContainer**, this component allows you to customize the UI options based on your specific requirements.
+
+- **DocumentEditorContainer**: A complete solution with a predefined toolbar and properties pane that provides a comprehensive document editing experience. It allows users to create, view, and edit Word documents with minimal configuration.
+- **DocumentEditor**: A customizable component that provides a flexible foundation for creating, viewing, and editing Word documents. This component allows you to build a user interface based on your specific requirements.
+
+### When to Use DocumentEditorContainer and DocumentEditor
+
+- Choose **DocumentEditorContainer** for standard document editing scenarios (applications similar to Microsoft Word).
+- Choose **DocumentEditor** for advanced or unique UI/UX requirements where customization is key.
+
+## Adding DocumentEditor component
+
+{% tabcontents %}
+
+{% tabcontent TypeScript %}
+
+Add the DocumentEditor component to your application. In the `src/App.tsx` file, add the following code to initialize the component with the required services
+
+```ts
+import * as React from 'react';
+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-react-documenteditor';
+
+DocumentEditorComponent.Inject(
+    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
+);
+
+function App() {
+    return (
+        <DocumentEditorComponent 
+            id="container" 
+            height={'330px'} 
+            serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
+            isReadOnly={false} 
+            enablePrint={true} 
+            enableSelection={true} 
+            enableEditor={true} 
+            enableEditorHistory={true} 
+            enableContextMenu={true} 
+            enableSearch={true} 
+            enableOptionsPane={true} 
+            enableBookmarkDialog={true} 
+            enableBordersAndShadingDialog={true} 
+            enableFontDialog={true} 
+            enableTableDialog={true} 
+            enableParagraphDialog={true} 
+            enableHyperlinkDialog={true} 
+            enableImageResizer={true} 
+            enableListDialog={true} 
+            enablePageSetupDialog={true} 
+            enableSfdtExport={true} 
+            enableStyleDialog={true} 
+            enableTableOfContentsDialog={true} 
+            enableTableOptionsDialog={true} 
+            enableTablePropertiesDialog={true} 
+            enableTextExport={true} 
+            enableWordExport={true} 
+        />
+    );
+}
+
+export default 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).
+
+{% tabs %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/document-editor/react/base-cs2/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "/document-processing/code-snippet/document-editor/react/base-cs2" %}
+
+{% endtabcontent %}
+
+{% tabcontent JavaScript %}
+
+Add the DocumentEditor component to your application. In the `src/App.jsx` file, add the following code to initialize the component with the required services
+
+```jsx
+import React from 'react';
+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-react-documenteditor';
+
+DocumentEditorComponent.Inject(
+  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
+);
+
+function App() {
+  return (
+    <DocumentEditorComponent
+      id="container"
+      height="330px"
+      serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"
+      isReadOnly={false}
+      enablePrint={true}
+      enableSelection={true}
+      enableEditor={true}
+      enableEditorHistory={true}
+      enableContextMenu={true}
+      enableSearch={true}
+      enableOptionsPane={true}
+      enableBookmarkDialog={true}
+      enableBordersAndShadingDialog={true}
+      enableFontDialog={true}
+      enableTableDialog={true}
+      enableParagraphDialog={true}
+      enableHyperlinkDialog={true}
+      enableImageResizer={true}
+      enableListDialog={true}
+      enablePageSetupDialog={true}
+      enableSfdtExport={true}
+      enableStyleDialog={true}
+      enableTableOfContentsDialog={true}
+      enableTableOptionsDialog={true}
+      enableTablePropertiesDialog={true}
+      enableTextExport={true}
+      enableWordExport={true}
+    />
+  );
+}
+
+export default 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).
+
+{% tabs %}
+{% highlight ts tabtitle="app.jsx" %}
+{% include code-snippet/document-editor/react/base-cs2/app/index.jsx %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "/document-processing/code-snippet/document-editor/react/base-cs2" %}
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## See Also
+
+* [How to customize toolbar](./customize-tool-bar)
+
diff --git a/Document-Processing/Word/Word-Processor/vue/document-editor-toc.html b/Document-Processing/Word/Word-Processor/vue/document-editor-toc.html
index a51d764ea5..c8cdc2acf8 100644
--- a/Document-Processing/Word/Word-Processor/vue/document-editor-toc.html
+++ b/Document-Processing/Word/Word-Processor/vue/document-editor-toc.html
@@ -91,6 +91,7 @@
 <li><a href="/document-processing/word/word-processor/vue/security-advisories">Security Advisories</a></li>
 <li>How To
 <ul>
+<li><a href="/document-processing/word/word-processor/vue/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
 <li><a href="/document-processing/word/word-processor/vue/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 <li><a href="/document-processing/word/word-processor/vue/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 <li><a href="/document-processing/word/word-processor/vue/how-to/customize-context-menu">Customize context menu</a></li>
diff --git a/Document-Processing/Word/Word-Processor/vue/how-to/document-editor-component.md b/Document-Processing/Word/Word-Processor/vue/how-to/document-editor-component.md
new file mode 100644
index 0000000000..2c70c64c68
--- /dev/null
+++ b/Document-Processing/Word/Word-Processor/vue/how-to/document-editor-component.md
@@ -0,0 +1,73 @@
+---
+layout: post
+title: DocumentEditorContainer vs DocumentEditor in Vue DOCX Editor
+description: Learn the differences between DocumentEditorContainer and DocumentEditor in the Syncfusion Vue DOCX Editor and understand when and how to use the DocumentEditor component for custom document editing scenarios.
+platform: document-processing
+control: DocumentEditor
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+## DocumentEditorContainer vs DocumentEditor in Vue DOCX Editor
+
+In this article, we explain the differences between **DocumentEditorContainer** and **DocumentEditor**, and also describe how to use the **DocumentEditor** component in the Vue DOCX Editor.
+
+## Difference between DocumentEditorContainer and DocumentEditor
+
+The **DocumentEditor** component provides a flexible foundation for creating, viewing, and editing Word documents. Unlike **DocumentEditorContainer**, this component allows you to customize the UI options based on your specific requirements.
+
+- **DocumentEditorContainer**: A complete solution with a predefined toolbar and properties pane that provides a comprehensive document editing experience. It allows users to create, view, and edit Word documents with minimal configuration.
+- **DocumentEditor**: A customizable component that provides a flexible foundation for creating, viewing, and editing Word documents. This component allows you to build a user interface based on your specific requirements.
+
+### When to Use DocumentEditorContainer and DocumentEditor
+
+- Choose **DocumentEditorContainer** for standard document editing scenarios (applications similar to Microsoft Word).
+- Choose **DocumentEditor** for advanced or unique UI/UX requirements where customization is key.
+
+## Registering DocumentEditor Component
+
+You can register the Document editor component in your application by using the `Vue.use()`.
+
+Refer to the code example given below.
+
+```ts
+import { DocumentEditorPlugin } from '@syncfusion/ej2-vue-documenteditor';
+
+Vue.use(DocumentEditorPlugin);
+```
+
+> Registering `DocumentEditorPlugin` in vue, will register the Document Editor component along with its required child directives globally.
+
+## Adding DocumentEditor Component
+
+Add the Vue Document editor by using `<ejs-documenteditor>` selector in `<template>` section of the `App.vue` file.
+
+```
+<template>
+    <div id="app">
+          <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' height="370px"> </ejs-documenteditor>
+    </div>
+</template>
+
+<script>
+  import Vue from 'vue';
+  import { DocumentEditorPlugin, 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';
+  Vue.use(DocumentEditorPlugin);
+  export default {
+    data () {
+      return {
+        serviceUrl:'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
+      },
+      provide: {
+        //Inject require modules.
+        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>
+```
+> 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).
+
+## See Also
+
+* [How to customize toolbar](./customize-tool-bar)