# How to Embed a DOCX Editor in a Web Application (ASP.NET Core)

> This tutorial shows how to embed a DOCX editor in an ASP.NET Core web application with TX Text Control. It covers setting up the editor, loading a DOCX document, and editing it with true WYSIWYG rendering, without any dependency on Microsoft Word.

- **Author:** Deepika Kathiravan
- **Published:** 2026-10-30
- **Modified:** 2026-10-30
- **Description:** This tutorial shows how to embed a DOCX editor in an ASP.NET Core web application with TX Text Control. It covers setting up the editor, loading a DOCX document, and editing it with true WYSIWYG rendering, without any dependency on Microsoft Word.
- **10 min read** (1822 words)
- **Tags:**
  - DOCX Editor
  - ASP.NET Core
  - Getting Started
  - JavaScript
- **Web URL:** https://www.textcontrol.com/blog/2026/10/30/how-to-embed-docx-editor-aspnet-core/
- **LLMs URL:** https://www.textcontrol.com/blog/2026/10/30/how-to-embed-docx-editor-aspnet-core/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2026/10/30/how-to-embed-docx-editor-aspnet-core/llms-full.txt

---

Embedding a DOCX editor in your web application requires a component that edits Word documents in the browser and keeps their formatting and structure intact. TX Text Control is a DOCX Editor SDK built on a page-based word processing engine. Its [Document Editor](https://www.textcontrol.com/capability/editor/) offers true WYSIWYG editing for DOCX documents. It integrates into ASP.NET Core, Angular, React, Blazor, and JavaScript applications, and its engine runs inside your own application, so documents are processed on your own servers.

The following steps show how to embed DOCX editing into your application using TX Text Control, without any dependency on Microsoft Word.

> **Prerequisites**
> 
> - **Visual Studio 2026** with the [.NET 10 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/10.0).
> - **TX Text Control .NET Server trial**: [download and install the trial version](https://www.textcontrol.com/product/tx-text-control-dotnet-server/download/). The setup installs the backend files and the offline NuGet packages used in this tutorial.

> ### Already have a TX Text Control license?
> 
> You can install all packages from the [Text Control private NuGet feed](https://www.textcontrol.com/blog/2026/02/09/text-control-private-nuget-feed/llms-full.txt). The *TXTextControl.Web.DocumentEditor.Backend* package includes a ready-made hosted service that starts the backend, so you can skip step 2 and register that service in step 4 instead. For the full setup, read [ASP.NET Core Document Editor with Backend via the Text Control Private NuGet Feed](https://www.textcontrol.com/blog/2026/02/09/aspnet-core-document-editor-private-nuget-feed/llms-full.txt).

Step 1: Create the ASP.NET Core Project
---------------------------------------

1. In Visual Studio 2026, choose *Create a new project*.
2. Select *ASP.NET Core Web App (Model-View-Controller)* and confirm with *Next*.
3. Enter a project name and confirm with *Next*.
4. Set the framework to *.NET 10.0 (Long Term Support)*.
5. Check *Enable container support*, then set the container OS to *Linux* and the container build type to *Dockerfile* (this requires Docker Desktop running Linux containers).
6. Confirm with *Create*.

![Create the ASP.NET Core Project](https://s1-www.textcontrol.com/assets/dist/blog/2026/10/30/a/assets/visualstudio1.webp "Create the ASP.NET Core Project")

This tutorial runs the application in a Linux container using the default Visual Studio *Dockerfile*, but the TX Text Control backend runs on both Windows and Linux.

Step 2: Add the Document Editor Backend
---------------------------------------

The backend is the TX Text Control web server that synchronizes and renders documents for the editor. The *TXWebServerProcess* class is an ASP.NET Core hosted service that starts the backend when your application starts.

Add a new class named *TXWebServerProcess.cs*. Right-click the project in *Solution Explorer*, choose *Add -> Class...*, and replace its content with the following code:

```
using System.Diagnostics;
using System.Reflection;

public class TXWebServerProcess : IHostedService
{
    private readonly ILogger<TXWebServerProcess> _logger;

    public TXWebServerProcess(ILogger<TXWebServerProcess> logger) => _logger = logger;

    public Task StartAsync(CancellationToken cancellationToken)
    {
        try
        {
            string? path = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location);
            string dllPath = Path.Combine(path ?? "", "TXTextControl.Web.Server.Core.dll");

            if (string.IsNullOrEmpty(path) || !File.Exists(dllPath))
                _logger.LogWarning("TX Web Server process could not be started.");
            else
            {
                Process.Start(new ProcessStartInfo("dotnet", $"\"{dllPath}\" &") { UseShellExecute = true, WorkingDirectory = path });
                _logger.LogInformation("TX Web Server process started.");
            }
        }
        catch (Exception ex) { _logger.LogError(ex, "Error starting TX Web Server."); }

        return Task.CompletedTask;
    }

    public Task StopAsync(CancellationToken cancellationToken)
    {
        _logger.LogInformation("Stopping TX Web Server process...");
        return Task.CompletedTask;
    }
}
```

Then add the backend files to the project. Right-click the project in *Solution Explorer*, choose *Add -> Existing Item...*, and browse to the installation folder:

*C:\\Program Files\\Text Control GmbH\\TX Text Control 34.0.NET Server for ASP.NET\\Assembly\\net8.0*

Set the file filter to All Files (\*.\*) and add these files:

- *TXTextControl.Web.Server.Core.deps.json*
- *TXTextControl.Web.Server.Core.dll*
- *TXTextControl.Web.Server.Core.Process.deps.json*
- *TXTextControl.Web.Server.Core.Process.dll*
- *TXTextControl.Web.Server.Core.Process.runtimeconfig.json*
- *TXTextControl.Web.Server.Core.runtimeconfig.json*
- *TXTextControl.Web.Server.Core.config.json*

Confirm with *Add*.

Select the added files in *Solution Explorer* and set *Copy to Output Directory* to *Copy always*.

Step 3: Add the TX Text Control NuGet Packages
----------------------------------------------

Open *Manage NuGet Packages...* from the *Project* menu, select **Text Control Offline Packages** as the package source, and install:

- **TXTextControl.Web**
- **TXTextControl.TextControl.Core.SDK**

![Add the TX Text Control NuGet Packages](https://s1-www.textcontrol.com/assets/dist/blog/2026/10/30/a/assets/visualstudio2.webp "Add the TX Text Control NuGet Packages")

Step 4: Configure Program.cs
----------------------------

Open *Program.cs* and make three changes:

1. At the top of the file, add the following code:
    
    ```
    using TXTextControl.Web;
    ```
2. Register the backend after `builder.Services.AddControllersWithViews();`:
    
    ```
    builder.Services.AddHostedService<TXWebServerProcess>();
    ```
3. Enable WebSockets and add the TX Text Control middleware before `app.UseRouting();`:
    
    ```
    // enable WebSockets
    app.UseWebSockets();
    
    // attach the Text Control WebSocketHandler middleware
    app.UseTXWebSocketMiddleware();
    ```

The complete *Program.cs* file looks like this:

```
using TXTextControl.Web;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

builder.Services.AddHostedService<TXWebServerProcess>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

// enable WebSockets
app.UseWebSockets();

// attach the Text Control WebSocketHandler middleware
app.UseTXWebSocketMiddleware();

app.UseRouting();

app.UseAuthorization();

app.MapStaticAssets();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}")
    .WithStaticAssets();

app.Run();
```

Step 5: Add the DOCX Editor to a View
-------------------------------------

Open *Views/Home/Index.cshtml* in *Solution Explorer* and replace its content with the following code. It renders the editor and loads a short welcome text:

```
@using TXTextControl.Web.MVC

@{
    var sDocument = "<html><body><p>Welcome to <strong>Text Control</strong></p></body></html>";
}

@Html.TXTextControl().TextControl(settings =>
{
    settings.UserNames = new string[] { "Tim Typer" };
}).LoadText(sDocument, TXTextControl.Web.StringStreamType.HTMLFormat).Render()
```

Start the application by pressing *F5* or choosing *Debug -> Start Debugging* from the main menu. The DOCX editor opens in the browser with a Word-like ribbon interface, ready for editing.

![Add the DOCX Editor](https://s1-www.textcontrol.com/assets/dist/blog/2026/10/30/a/assets/editor1.webp "Add the DOCX Editor")

Step 6: Load a DOCX Document
----------------------------

In production applications, documents typically come from a database, blob storage, or the file system. In this example, the server reads a DOCX file and sends it to the editor as a Base64 string.

Create a folder named *App\_Data* in the project, add a DOCX file named *sample.docx*. You can use your own document or [download the sample document](https://s1-www.textcontrol.com/assets/dist/blog/2026/10/30/a/assets/sample_docx.zip) used in this tutorial. Set its *Copy to Output Directory* property to *Copy always*. Then add this action to *Controllers/HomeController.cs*:

```
[HttpGet]
public IActionResult LoadDocument()
{
    byte[] data = System.IO.File.ReadAllBytes("App_Data/sample.docx");
    return Content(Convert.ToBase64String(data));
}
```

In *Index.cshtml*, add the following script after the editor code from step 5. It waits until the editor is ready, requests the document, and loads it into the editor with the loadDocument method:

```
<script>
    TXTextControl.addEventListener("textControlLoaded", function () {
        fetch("/Home/LoadDocument")
            .then(response => response.text())
            .then(base64 => {
                TXTextControl.loadDocument(TXTextControl.StreamType.WordprocessingML, base64);
            });
    });
</script>
```

`WordprocessingML` is the stream type for DOCX. The document is now loaded into the TX Text Control engine and shown in the editor.

![Load a DOCX Document](https://s1-www.textcontrol.com/assets/dist/blog/2026/10/30/a/assets/editor2.webp "Load a DOCX Document")

Step 7: Edit the Document
-------------------------

Once the document is loaded, users can edit it right away. TX Text Control's DOCX editor offers **true WYSIWYG editing**, with pixel-perfect rendering that always matches the generated PDF and printed output.

The Microsoft Word-like ribbon interface is built in, so users get the word processing features they already know, with little or no training, including:

- Character and paragraph formatting, styles, and bulleted and numbered lists
- Tables, images, sections, and headers and footers
- Merge fields for designing templates
- Form fields such as checkboxes, drop-downs, and date pickers
- Tracked changes and comments for review workflows

In addition to the built-in interface, you can edit documents programmatically through the JavaScript API. The following example adds a button that inserts a table:

```
<input type="button" onclick="insertTable()" value="Insert Table" />

<script>
    function insertTable() {
        TXTextControl.tables.add(5, 5, 10, function(e) {
          if (e === true) { // if added
            TXTextControl.tables.getItem(function(table) {
              table.cells.forEach(function(cell) {

                cell.setText("Cell text");

              });
            }, null, 10);
          }
        })
    }
</script>
```

![Edit DOCX Document](https://s1-www.textcontrol.com/assets/dist/blog/2026/10/30/a/assets/editor3.webp "Edit DOCX Document")

Beyond tables, the JavaScript API also covers formatting, form fields, tracked changes, and more.

Next Steps
----------

Your application now embeds a DOCX editor that loads and edits Word documents. The following resources explain how to extend this integration:

- **Use another frontend framework**: [Angular](https://www.textcontrol.com/product/tx-text-control-dotnet-server/getting-started/?type=Getting+Started&technology=Angular), [React](https://www.textcontrol.com/product/tx-text-control-dotnet-server/getting-started/?type=Getting+Started&technology=React), [Blazor](https://www.textcontrol.com/product/tx-text-control-dotnet-server/getting-started/?type=Getting+Started&technology=Blazor), and [JavaScript](https://www.textcontrol.com/product/tx-text-control-dotnet-server/getting-started/?type=Getting+Started&technology=JavaScript)
- **Add review workflows**: [Document Redlining and Approval Workflows with TX Text Control Track Changes in .NET C#](https://www.textcontrol.com/blog/2024/08/07/document-redlining-and-approval-workflows-with-tx-text-control-track-changes-in-net-csharp/llms-full.txt)
- **Control who can edit which parts**: [Document Protection in ASP.NET with TX Text Control](https://www.textcontrol.com/blog/2025/06/25/document-protection-in-asp-dotnet-with-tx-text-control-healthcare-use-cases/llms-full.txt)
- **Choose the right SDK**: [DOCX Editor SDK evaluation guide](https://www.textcontrol.com/blog/2026/10/28/docx-editor-sdk-complete-evaluation-guide-and-checklist/llms-full.txt)

### Frequently Asked Questions

What is a DOCX Editor SDK? 
---------------------------

A DOCX Editor SDK is a software development kit that includes a Microsoft Word-like editor component for DOCX documents to your own application, along with APIs for processing them programmatically. TX Text Control is a DOCX Editor SDK, and its Document Editor is available for ASP.NET Core, Angular, React, Blazor, and JavaScript.

How do I embed a DOCX editor in a web application? 
---------------------------------------------------

Use a DOCX Editor SDK that provides a browser-based editor with true WYSIWYG editing and a backend that processes the documents. With TX Text Control in ASP.NET Core, you can add the NuGet packages, start the Document Editor backend as a hosted service, enable the WebSocket middleware, and render the editor in a Razor view. DOCX files are then loaded with the JavaScript *loadDocument* method.

Is TX Text Control compatible with Microsoft Word? 
---------------------------------------------------

Yes. The TX Text Control Document Editor loads, edits, and exports Word documents in DOCX format. Sections, headers and footers, form fields, tracked changes, and comments are preserved when the documents are opened in Microsoft Word.

Does the DOCX editor offer true WYSIWYG editing? 
-------------------------------------------------

Yes. The TX Text Control Document Editor is built on a page-based word processing engine, so DOCX documents are edited as real pages with true WYSIWYG editing. Because the same engine powers the editor and the export, what users see always matches the generated PDF and printed output.

Can I export the edited DOCX document to PDF? 
----------------------------------------------

Yes. The JavaScript *saveDocument* method can export the edited document as PDF or save it back as DOCX or other formats, such as HTML and RTF.

---

## About Deepika Kathiravan

Deepika Kathiravan is a developer marketing professional, currently Developer Experience Marketing Lead at Text Control. Before moving into marketing, she had almost eight years of experience in various software industry roles. Following her passion for digital media, Deepika relocated to Germany and earned a Master's in Digital Media from the University of Bremen. She now enjoys blending her technical and marketing expertise by creating developer-centered content and driving strategic growth for the brand.

- [LinkedIn](https://www.linkedin.com/in/deepikakathiravan/)

---

## Related Posts

- [DOCX Editor SDK: A Complete Evaluation Guide and Checklist](https://www.textcontrol.com/blog/2026/10/28/docx-editor-sdk-complete-evaluation-guide-and-checklist/llms.txt)
- [Getting Started: Document Viewer with JavaScript](https://www.textcontrol.com/blog/2023/09/15/getting-started-document-viewer-with-javascript/llms.txt)
- [Getting Started: Document Editor with JavaScript](https://www.textcontrol.com/blog/2023/09/15/getting-started-document-editor-with-javascript/llms.txt)
- [Build a Custom Backstage View in ASP.NET Core with TX Text Control](https://www.textcontrol.com/blog/2026/02/17/build-a-custom-backstage-view-in-aspnet-core-with-tx-text-control/llms.txt)
- [5 Document Workflows You Can Automate With JavaScript Rich Text Editor](https://www.textcontrol.com/blog/2026/01/14/five-document-workflows-you-can-automate-with-javascript-rich-text-editor/llms.txt)
- [Format Painter in ASP.NET Core: Building Custom Text Formatting with TX Text Control](https://www.textcontrol.com/blog/2025/09/09/format-painter-in-asp-dotnet-core-building-custom-text-formatting-with-tx-text-control/llms.txt)
- [Add JavaScript to PDFs with TX Text Control in C# .NET: Time-Based Alerts Made Easy](https://www.textcontrol.com/blog/2025/06/13/add-javascript-to-pdfs-with-tx-text-control-in-c-dot-net-time-based-alerts-made-easy/llms.txt)
- [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt)
- [Loading Documents from Azure Blob Storage into the TX Text Control Document Editor using pure JavaScript](https://www.textcontrol.com/blog/2024/04/08/loading-documents-from-azure-blob-storage-into-tx-text-control-document-editor-using-pure-javascript/llms.txt)
- [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt)
- [Getting Started: Document Editor with ASP.NET Core](https://www.textcontrol.com/blog/2023/09/13/getting-started-document-editor-with-aspnet-core/llms.txt)
- [Updating SubTextParts using JavaScript Promises](https://www.textcontrol.com/blog/2022/12/23/updating-subtextparts-using-javascript-promises/llms.txt)
- [MailMerge: Working with Image Placeholders](https://www.textcontrol.com/blog/2022/12/22/mailmerge-working-with-image-placeholders/llms.txt)
- [Getting Started: Document Editor with ASP.NET Core](https://www.textcontrol.com/blog/2022/09/01/getting-started-document-editor-with-aspnet-core/llms.txt)
- [JavaScript: Avoid Flickering and Visual Updates by Grouping Undo Steps](https://www.textcontrol.com/blog/2022/07/25/javascript-avoid-flickering-and-visual-updates-by-grouping-undo-steps/llms.txt)
- [DS Server Released: On-Premise Document Services](https://www.textcontrol.com/blog/2021/01/21/ds-server-released-on-premise-document-services/llms.txt)
- [Merging Templates using DS Server in ASP.NET Core](https://www.textcontrol.com/blog/2021/01/07/merging-templates-using-ds-server-in-aspnet-core/llms.txt)
- [Synchronizing Editable Regions with SignalR Broadcasting](https://www.textcontrol.com/blog/2020/05/12/synchronizing-editable-regions-with-signalr/llms.txt)