# Blazor

> Add the Document Editor component to a Blazor Web App with interactive server rendering and load and save documents on the server with C#.

- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > Getting Started > Document Editor > Blazor
- **2776 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/blazor/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/blazor/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/blazor/llms-full.txt

---

A Blazor Web App shows the Document Editor with the `DocumentEditor` Razor component and hosts the required backend in the same application. You load a DOCX document into the editor and save it back to the server with C# code, without writing JavaScript.

### Prerequisites

- Visual Studio 2026 with the .NET 10 SDK. The Blazor package targets .NET 8 or higher.
- A TX Text Control .NET Server license with a serial number assigned to your email address, and access to the [Text Control Private NuGet Feed](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/nuget/private-feed/llms-full.txt).
- A DOCX document to load, for example *template.docx*.

### How It Works

The `DocumentEditor` component uses the interactive server render mode (`InteractiveServer`). Your C# code runs on the server, so it can load documents from the server's file system into the editor and save them back without sending them through the browser first.

Like every Document Editor frontend, the component needs a backend. In this tutorial, the Blazor application itself hosts it: the `DocumentEditorWorkerManager` hosted service starts the Document Editor backend, and the WebSocket middleware connects the editor in the browser to it.

The Blazor getting started article on the Text Control blog was written for version 33.0 and uses the backend of an installed TX Text Control .NET Server setup. With the private NuGet feed, the backend comes from the `TXTextControl.Web.DocumentEditor.Backend` package instead, as in the [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/aspnet-core/llms-full.txt) tutorial.

### Create the Project

1. In Visual Studio 2026, choose **Create a new project**.
2. Select **Blazor Web App** as the project template and confirm with **Next**.
3. Enter a project name, choose a location and confirm with **Next**.
4. Choose **.NET 10.0 (Long Term Support)** as the **Framework**, select **Server** as the **Interactive render mode** and create the project.

### Install the NuGet Packages

1. In **Solution Explorer**, select your project and choose **Manage NuGet Packages...** from the **Project** menu.
2. Select your private NuGet feed (**TextControl**) as the package source and install `TXTextControl.Web`, `TXTextControl.TextControl.Core.SDK` and `TXTextControl.Web.DocumentEditor.Backend`.
3. Select **nuget.org** as the package source and install `TXTextControl.Web.Blazor.DocumentEditor`.

On nuget.org, the Blazor component is listed with the other TX Text Control web packages. The screenshot comes from the Blazor article on the Text Control blog, written for version 33.0:

![The Visual Studio NuGet Package Manager with nuget.org as the package source and TXTextControl.Web.Blazor.DocumentEditor selected; the details pane lists its dependencies Microsoft.AspNetCore.Components.Web and TXTextControl.Web. The screenshot shows version 33.0.0.](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/nuget-blazor-editor-package.1cfed87f.webp)

| Package | Source | Purpose |
|---|---|---|
| `TXTextControl.Web` | Text Control Private NuGet Feed | The WebSocket middleware of the Document Editor. The Blazor package depends on it. |
| `TXTextControl.TextControl.Core.SDK` | Text Control Private NuGet Feed | The cross-platform TX Text Control engine. |
| `TXTextControl.Web.DocumentEditor.Backend` | Text Control Private NuGet Feed | The Document Editor backend and the hosted service that starts it. |
| `TXTextControl.Web.Blazor.DocumentEditor` | nuget.org | The `DocumentEditor` Razor component for Blazor Web Apps. |

### Configure Program.cs

Open *Program.cs* in the project's root folder. At the very top of the file, insert the following code:

```csharp
using TXTextControl.Web;
using TXTextControl.Web.DocumentEditor.Backend;
```

Before the line `var app = builder.Build();`, register the hosted service that starts the Document Editor backend together with your application:

```csharp
builder.Services.AddHostedService<DocumentEditorWorkerManager>();
```

After the line `app.UseHttpsRedirection();`, add the following code:

```csharp
// enable Web Sockets
app.UseWebSockets();

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

`UseWebSockets()` enables WebSockets in ASP.NET Core, because the editor in the browser synchronizes every change with the server over a WebSocket connection. `UseTXWebSocketMiddleware()` accepts that connection and forwards it to the Document Editor backend.

### Add the Editor to a Page

Open *Home.razor* in the *Components/Pages* folder and replace its complete content with the following code:

```razor
@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}");
        }
    }
}
```

#### What the Page Does

- `@rendermode InteractiveServer` runs the page with interactive server rendering, which the component requires.
- `TXTextControl.Web.Blazor.DocumentEditor.DocumentEditor` adds the editor. `Width` and `Height` set its size.
- `@ref="_documentEditor"` stores a reference to the component in the `_documentEditor` field, so your C# code can call its methods.
- `LoadDocumentAsync` loads the file *Documents/template.docx* from the server into the editor. The second parameter is the format, a value of the [`TXTextControl.Web.StreamType`](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/streamtype/enumeration/llms-full.txt) enumeration. `WordprocessingML` is the DOCX format.

### Add a Document

1. Create a folder named *Documents* in the project's root folder.
2. Copy the DOCX document you want to load into this folder and name it *template.docx*.

### Run the Application

Press **F5** or choose **Debug > Start Debugging**. The home page shows the Document Editor with its ribbon bar. Click **Load Document** to load *template.docx* into the editor.

The blog article shows the same page with version 33.0, after an invoice template was loaded:

![The Blazor Web App in the browser: the Home page with the heading "Hello, Blazor!", the Document Editor of 800 by 500 pixels showing an invoice template with merge fields, and the Load Document button below it.](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/blazor-editor-result.1bdccf1a.webp)

### Save the Document on the Server

`SaveDocumentAsync` saves the current content of the editor to a file on the server. Add a second button below the **Load Document** button:

```razor
<button class="btn btn-primary mt-5" @onclick="ButtonSave">
    Save Document
</button>
```

Then add the following method to the `@code` block:

```razor
private async Task ButtonSave()
{
    try
    {
        await _documentEditor.SaveDocumentAsync("Documents/output.docx",
            TXTextControl.Web.StreamType.WordprocessingML);
    }
    catch (Exception ex)
    {
        Console.Error.WriteLine($"Error saving document: {ex.Message}");
    }
}
```

Click **Save Document** to write the edited document to *Documents/output.docx*.

### Load a Document When the Editor Is Ready

To show a document as soon as the editor is ready, handle the `OnLoad` event of the component. Add `OnLoad` to the component tag:

```razor
<TXTextControl.Web.Blazor.DocumentEditor.DocumentEditor
    OnLoad="DocumentEditorLoaded"
    @ref="_documentEditor" Width="800px" Height="500px" />
```

Then add the event handler to the `@code` block. This example loads an HTML string:

```razor
private async Task DocumentEditorLoaded()
{
    try
    {
        await _documentEditor.LoadDocumentAsync(
            "<html><body><h1>Welcome to TX Text Control</h1><p>This is a sample document.</p></body></html>",
            TXTextControl.Web.StringStreamType.HTMLFormat);
    }
    catch (Exception ex)
    {
        Console.Error.WriteLine($"Error loading document: {ex.Message}");
    }
}
```

The component also works with the [JavaScript API](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/javascript-api/llms-full.txt). The global `TXTextControl` object is available in the page for tasks such as responding to user interactions in the browser.

### Next Steps

- [Loading and Saving Documents](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/load-save/llms-full.txt) — load documents into the editor and save them to your backend.
- [Blazor Integration Guide](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/blazor/llms-full.txt) — go further with the Blazor components, including the Document Viewer.
- [Simple Mail Merge](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/mail-merge/simple/llms-full.txt) — merge data into a template designed in the editor.
- [Deployment Guide](https://docs.textcontrol.com/tx-text-control-dotnet-server/deployment/llms-full.txt) — run the application and the backend on Windows, Linux, Docker and in the cloud.

---

## Nearby

- **Previous:** [JavaScript](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/javascript/llms-full.txt)
- **Next:** [Node.js](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/nodejs/llms-full.txt)