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® 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® 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 @@
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
+
+
+
+ Essential JS 2 Document editor
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+> 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 @@
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 9df7e6ba3c..83743d1f9f 100644
--- a/Document-Processing/Word/Word-Processor/react/document-editor-toc.html
+++ b/Document-Processing/Word/Word-Processor/react/document-editor-toc.html
@@ -91,6 +91,7 @@
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 (
+
+ );
+}
+
+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 (
+
+ );
+}
+
+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 @@
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 `` selector in `` section of the `App.vue` file.
+
+```
+
+
+
+
+
+
+
+```
+> 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)