# Getting Started: Document Editor for Blazor in ASP.NET Core

> This article shows how to integrate the Document Editor for Blazor into an ASP.NET Core application running on Windows and Linux. The Document Editor is a powerful word processing component that can be used to create, edit, and view documents in various formats.

- **Author:** Bjoern Meyer
- **Published:** 2025-03-25
- **Modified:** 2026-07-17
- **Description:** This article shows how to integrate the Document Editor for Blazor into an ASP.NET Core application running on Windows and Linux. The Document Editor is a powerful word processing component that can be used to create, edit, and view documents in various formats.
- **3 min read** (502 words)
- **Tags:**
  - ASP.NET
  - ASP.NET Core
  - Blazor
  - Document Editor
- **Web URL:** https://www.textcontrol.com/blog/2025/03/25/getting-started-document-editor-for-blazor-in-asp-net-core/
- **LLMs URL:** https://www.textcontrol.com/blog/2025/03/25/getting-started-document-editor-for-blazor-in-asp-net-core/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2025/03/25/getting-started-document-editor-for-blazor-in-asp-net-core/llms-full.txt

---

> ### Prerequisites
> 
> You need to download and install the trial version of TX Text Control .NET Server to host the required backend:
> 
> - [Download Trial Version](https://www.textcontrol.com/product/tx-text-control-dotnet-server/download/)  
>     Setup download and installation required.

### Creating the Application

Make sure that you downloaded the latest version of Visual Studio 2022 that comes with the [.NET 8 SDK](https://dotnet.microsoft.com/download/dotnet/8.0).

1. In Visual Studio 2022, create a new project by choosing *Create a new project*.
2. Select *Blazor Web App* as the project template and confirm with *Next*.
3. Choose a name for your project and confirm with *Next*.
4. In the next dialog, choose *.NET 8 (Long Term Support)* as the *Framework*, select *Server* as the *Interactive render mode* and confirm with *Create*.
    
    ![Creating the .NET 8 project](https://s1-www.textcontrol.com/assets/dist/blog/2025/03/25/b/assets/visualstudio1.webp "Creating the .NET 8 project")

#### Adding the NuGet Packages

5. In the *Solution Explorer*, select your created project and choose *Manage NuGet Packages...* from the *Project* main menu. Select **nuget.org** as the *Package source*.
    
    Install the following package:
    
    
    - **TXTextControl.Web.Blazor.DocumentEditor**
    
    ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2025/03/25/b/assets/visualstudio2.webp "ASP.NET Core Web Application")

#### Configure the Application

6. Open the *Program.cs* file located in the project's root folder. At the very top of the file, insert the following code:
    
    ```
    using TXTextControl.Web;
    ```
    
    Add the following code after the entry *app.UseHttpsRedirection();*:
    
    ```
    // enable Web Sockets
    app.UseWebSockets();
    
    // attach the Text Control WebSocketHandler middleware
    app.UseTXWebSocketMiddleware();
    ```

#### Adding the Control to the View

7. Find the *Home.razor* file in the *Components -> Pages* folder. Replace the complete content with the following code to add the document editor to the view:
    
    ```
    @page "/"
    @rendermode InteractiveServer
    
    <PageTitle>Home</PageTitle>
    
    <h1>Hello, Blazor!</h1>
    
    <TXTextControl.Web.Blazor.DocumentEditor.DocumentEditor
        @ref="_documentEditor" Width="800px" Height="500px" />
    
    <button class="btn btn-primary mt-5" @onclick="ButtonLoad">
        Load Document
    </button>
    
    @code {
        private TXTextControl.Web.Blazor.DocumentEditor.DocumentEditor _documentEditor;
    
        private async Task ButtonLoad()
        {
            try
            {
                await _documentEditor.LoadDocumentAsync("Documents/template.docx",
                    TXTextControl.Web.StreamType.WordprocessingML);
            }
            catch (Exception ex)
            {
                Console.Error.WriteLine($"Error loading document: {ex.Message}");
            }
        }
    }
    ```

#### Adding Documents

To show how to load documents into the Document Editor, we will add a few sample documents to the application.

8. Create a new folder in the project's root folder and name it *Documents*.
9. Place any documents you want to load into the Document Editor into this folder. In this sample, we will use a document named *template.docx*.

#### Running the Application

10. Run the application by pressing *F5* or by choosing *Debug -> Start Debugging* from the main menu.

When clicking the *Load Document* button, the document *template.docx* will be loaded into the Document Editor.

![Loading documents with TX Text Control Blazor](https://s1-www.textcontrol.com/assets/dist/blog/2025/03/25/b/assets/blazor1.webp "Loading documents with TX Text Control Blazor")

> **Deploying to Linux?**
> 
> If you want to deploy to Linux or run it with WSL or Docker support, see the following article to learn how to deploy the required web server to Linux.
> 
> [Getting Started: Document Editor with ASP.NET Core and Linux WSL Support ](https://www.textcontrol.com/blog/2025/03/12/getting-started-document-editor-with-asp-net-core-and-linux-wsl-support/llms-full.txt)

---

## About Bjoern Meyer

As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.

- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)

---

## Related Posts

- [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt)
- [TX Text Control for Blazor: Mail Merge Integration Tutorial](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-for-blazor-mail-merge-integration-tutorial/llms.txt)
- [TX Text Control Document Editor and Viewer for Blazor Released](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-document-editor-and-viewer-for-blazor-released/llms.txt)
- [Announcing Our Work on a Blazor Component for Document Editing and Viewing](https://www.textcontrol.com/blog/2025/01/24/announcing-our-work-on-a-blazor-component-for-document-editing-and-viewing/llms.txt)
- [Beyond WebSockets: A Glimpse into the Future of Document Editing with WebAssembly](https://www.textcontrol.com/blog/2026/06/10/beyond-websockets-glimpse-future-document-editing-webassembly/llms.txt)
- [5 Layout Patterns for Integrating the TX Text Control Document Editor in ASP.NET Core C#](https://www.textcontrol.com/blog/2026/04/09/5-layout-patterns-for-integrating-the-tx-text-control-document-editor-in-aspnet-core-csharp/llms.txt)
- [Introducing Text Control Agent Skills](https://www.textcontrol.com/blog/2026/03/27/introducing-text-control-agent-skills/llms.txt)
- [Deploying the TX Text Control Document Editor from the Private NuGet Feed to Azure App Services (Linux and Windows)](https://www.textcontrol.com/blog/2026/03/25/deploying-the-tx-text-control-document-editor-from-the-private-nuget-feed-to-azure-app-services-linux-and-windows/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)
- [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.txt)
- [Why Document Processing Libraries Require a Document Editor](https://www.textcontrol.com/blog/2025/12/04/why-document-processing-libraries-require-a-document-editor/llms.txt)
- [Getting Started Video Tutorial: Document Editor in ASP.NET Core C# on Linux](https://www.textcontrol.com/blog/2025/07/29/getting-started-video-tutorial-document-editor-aspnet-core-csharp-linux/llms.txt)
- [E-Sign Comes to Blazor: Document Viewer 33.0.1 Released](https://www.textcontrol.com/blog/2025/04/24/e-sign-comes-to-blazor-document-viewer-33-0-1-released/llms.txt)
- [Deploying the TX Text Control Document Editor in an ASP.NET Core Web App to Azure App Services](https://www.textcontrol.com/blog/2025/03/26/deploying-the-tx-text-control-document-editor-in-an-asp-net-core-web-app-to-azure-app-services/llms.txt)
- [Getting Started: Document Viewer for Blazor in ASP.NET Core](https://www.textcontrol.com/blog/2025/03/25/getting-started-document-viewer-for-blazor-in-asp-net-core/llms.txt)
- [Introducing TXTextControl.Web.Server.Core: A Cross-Platform Backend for TX Text Control Document Editor](https://www.textcontrol.com/blog/2025/03/13/introducing-txtextcontrol-web-server-core-a-cross-platform-backend-for-tx-text-control-document-editor/llms.txt)
- [Getting Started: Document Editor with ASP.NET Core and Docker Support with Linux Containers](https://www.textcontrol.com/blog/2025/03/12/getting-started-document-editor-with-asp-net-core-and-docker-support-with-linux-containers/llms.txt)
- [Preparing Documents for E-Signing for Multiple Signers in .NET C#](https://www.textcontrol.com/blog/2024/11/13/preparing-documents-for-e-signing-for-multiple-signers-in-net-c-sharp/llms.txt)
- [ASP.NET Core: Use the Document Editor and Viewer in the Same Razor View](https://www.textcontrol.com/blog/2024/11/08/asp-net-core-use-the-document-editor-and-viewer-in-the-same-razor-view/llms.txt)
- [Connecting the TXWebSocketMiddleware to a Separate, External TCP Synchronization Service](https://www.textcontrol.com/blog/2024/10/01/connecting-the-txwebsocketmiddleware-to-a-separate-external-tcp-synchronization-service/llms.txt)
- [Getting Started: Creating an ASP.NET Core Web App with the Document Editor in Visual Studio Code (VS Code)](https://www.textcontrol.com/blog/2024/09/27/getting-started-creating-an-asp-net-core-web-app-with-the-document-editor-in-visual-studio-code-vs-code/llms.txt)
- [Getting Started Video Tutorial: How to use the Document Editor in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-editor-in-asp-net-core-csharp/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)
- [ASP.NET Core: Loading Documents in the Document Editor](https://www.textcontrol.com/blog/2024/04/15/asp-net-core-how-to-load-a-document-in-the-document-editor/llms.txt)
- [Adding a Security Middleware to ASP.NET Core Web Applications to Protect TX Text Control Document Editor and Document Viewer Endpoints](https://www.textcontrol.com/blog/2024/03/18/adding-a-security-middleware-to-asp-net-core-web-applications-to-protect-tx-text-control-document-editor-and-document-viewer-endpoints/llms.txt)
