# React DOCX Editor: Add Word-Like Editing to Your Web App > This tutorial shows how to add a React DOCX editor to your web application with TX Text Control .NET Server. It covers setting up the backend, adding the Document Editor component, and loading and editing a DOCX document, with no Microsoft Word dependency. - **Author:** Deepika Kathiravan - **Published:** 2026-11-04 - **Modified:** 2026-11-04 - **Description:** This tutorial shows how to add a React DOCX editor to your web application with TX Text Control .NET Server. It covers setting up the backend, adding the Document Editor component, and loading and editing a DOCX document, with no Microsoft Word dependency. - **12 min read** (2224 words) - **Tags:** - DOCX Editor - React - ASP.NET Core - Getting Started - **Web URL:** https://www.textcontrol.com/blog/2026/11/04/how-to-add-react-docx-editor/ - **LLMs URL:** https://www.textcontrol.com/blog/2026/11/04/how-to-add-react-docx-editor/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2026/11/04/how-to-add-react-docx-editor/llms-full.txt --- A React DOCX editor lets users edit Word documents directly in your React application. TX Text Control offers this through a DOCX Editor SDK with its own word processing engine and a [Document Editor](https://www.textcontrol.com/capability/editor/) that is available as a React component on npm. For React developers, this means adding one component instead of building word processing features themselves. The editor offers a true WYSIWYG experience: what users see while editing matches the generated PDF and printed output. The engine behind the editor also handles server-side document processing. The following steps show how to set up the backend, add the React DOCX editor, and load and edit DOCX documents, all without needing Microsoft Word. How the React DOCX Editor Works ------------------------------- The application in this tutorial has two parts: - **React frontend**: The *@txtextcontrol/tx-react-document-editor* package renders the editor with its Word-like ribbon interface in your React application. - **ASP.NET Core backend**: The TX Text Control backend synchronizes and renders documents for the editor. The React component connects to it over a WebSocket connection. > ### Want to try the editor without setting up a backend? > > [Create a free trial access token](https://www.textcontrol.com/product/client-package/token/), valid for 30 days, to connect the editor to a backend hosted by TX Text Control. Then create the React application as shown below, and when you add the editor, use this `webSocketURL` with your token: > > `wss://backend.textcontrol.com/api/TXWebSocket?access-token=your_trial_token` > > The editor opens with a blank document that you can edit right away. The tutorial below shows how to load DOCX files from your own ASP.NET Core backend. > **Prerequisites** > > - **Visual Studio 2026** with the [.NET 10 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/10.0). > - **Node.js and npm**: [download the current LTS version of Node.js](https://nodejs.org/en), which includes npm. > - **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 Backend Project ----------------------------------------------- 1. In Visual Studio 2026, choose *Create a new project*. 2. Select *ASP.NET Core Web API* and confirm with *Next*. 3. Enter a project name and confirm with *Next*. 4. Set the framework to *.NET 10.0 (Long Term Support)*, check *Use controllers*, and confirm with *Create*. ![Create the ASP.NET Core Project](https://s1-www.textcontrol.com/assets/dist/blog/2026/11/04/a/assets/visualstudio1.webp "Create the ASP.NET Core Project") This tutorial runs the backend directly on Windows, but the TX Text Control backend also runs on Linux and in Docker containers. Step 2: Add the Document Editor Backend --------------------------------------- The *TXWebServerProcess* class is an ASP.NET Core hosted service that launches the TX Text Control backend together with your application. Right-click the project in *Solution Explorer*, choose *Add -> Class...*, and add a new class named *TXWebServerProcess.cs*. Replace its content with the following code: ``` using System.Diagnostics; using System.Reflection; public class TXWebServerProcess : IHostedService { private readonly ILogger _logger; public TXWebServerProcess(ILogger 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/11/04/a/assets/visualstudio2.webp "Add the TX Text Control NuGet Packages") Step 4: Configure Program.cs ---------------------------- Open *Program.cs* and replace its content with the following code. It starts the backend, enables the WebSocket connection for the editor, and allows the React development server to call the API: ``` using TXTextControl.Web; var builder = WebApplication.CreateBuilder(args); builder.Services.AddControllers(); builder.Services.AddHostedService(); // allow the React development server to call the API builder.Services.AddCors(options => options.AddPolicy("ReactApp", policy => policy.WithOrigins("http://localhost:5173").AllowAnyMethod().AllowAnyHeader())); var app = builder.Build(); app.UseHttpsRedirection(); // enable WebSockets app.UseWebSockets(); // attach the TX Text Control WebSocketHandler middleware app.UseTXWebSocketMiddleware(); app.UseCors("ReactApp"); app.UseAuthorization(); app.MapControllers(); app.Run(); ``` Step 5: Add an Endpoint That Returns the DOCX Document ------------------------------------------------------ In production applications, documents typically come from a database, blob storage, or the file system. In this example, the backend reads a DOCX file and returns it to the React application as a Base64 string. Create a folder named *App\_Data* in the project and 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/11/04/a/assets/sample.zip) used in this tutorial. Set its *Copy to Output Directory* property to *Copy always*. Right-click the *Controllers* folder, choose *Add -> Class...*, and name it *DocumentController.cs*. Replace its content with the following API controller code: ``` using Microsoft.AspNetCore.Mvc; [ApiController] [Route("api/[controller]")] public class DocumentController : ControllerBase { [HttpGet("load")] public IActionResult Load() { byte[] data = System.IO.File.ReadAllBytes("App_Data/sample.docx"); return Content(Convert.ToBase64String(data)); } } ``` Start the backend by pressing *F5* or choosing *Debug -> Start Debugging* from the main menu. You will need the backend's HTTPS port in the next steps. To find it, open *Properties/launchSettings.json* in *Solution Explorer* and look for the *applicationUrl* in the *https* profile, for example *https://localhost:7017*. ![Find the HTTPS Port](https://s1-www.textcontrol.com/assets/dist/blog/2026/11/04/a/assets/visualstudio3.webp "Find the HTTPS Port") Step 6: Create the React Application ------------------------------------ Open a Command Prompt and create a new React application with [Vite](https://vite.dev/): ``` npm create vite@latest docx-editor-react -- --template react ``` The command asks a few questions. Answer them as follows: - *Ok to proceed?* Type *y* to install create-vite. - *Linter*: Press *Enter* to accept the default. The linter does not affect this tutorial. - *Install with npm and start now?* Choose *No*. The next commands install the dependencies, and you start the application in Step 7. Then change into the project folder and install the dependencies: ``` cd docx-editor-react npm install ``` Then install the TX Text Control Document Editor package for React: ``` npm install @txtextcontrol/tx-react-document-editor ``` To edit the files in the next steps, open the project in Visual Studio Code: ``` code . ``` Step 7: Add the React DOCX Editor --------------------------------- Open *src/App.jsx* and replace its content with the following code. Replace 7017 with your backend's HTTPS port from Step 5. If you use a trial access token instead, replace the whole `webSocketURL` value with the URL shown at the beginning of this tutorial: ``` import DocumentEditorModule from '@txtextcontrol/tx-react-document-editor'; import './App.css'; // in Vite projects, the component is wrapped in .default const DocumentEditor = DocumentEditorModule.default ?? DocumentEditorModule; function App() { return ( ); } export default App; ``` The `webSocketURL` starts with `wss://`, the secure WebSocket protocol, because the backend runs on HTTPS. Start the React application: ``` npm run dev ``` Open *http://localhost:5173* in your browser. The DOCX editor opens, ready for editing. Vite's default styles place the editor in a narrow, centered column. For a full-width editor, adjust the styles in *src/App.css* and *src/index.css*. ![Add the React DOCX Editor](https://s1-www.textcontrol.com/assets/dist/blog/2026/11/04/a/assets/editor1.webp "Add the React DOCX Editor") Step 8: Load a DOCX Document ---------------------------- To load the DOCX file from the backend, update *src/App.jsx* as follows. The code waits until the editor is ready, requests the document from the endpoint in step 5, and loads it with the loadDocument method: ``` import { useEffect } from 'react'; import DocumentEditorModule from '@txtextcontrol/tx-react-document-editor'; import './App.css'; // in Vite projects, the component is wrapped in .default const DocumentEditor = DocumentEditorModule.default ?? DocumentEditorModule; const BACKEND_URL = 'https://localhost:7017'; function App() { useEffect(() => { const loadDocument = async () => { const response = await fetch(`${BACKEND_URL}/api/document/load`); const base64 = await response.text(); window.TXTextControl.loadDocument( window.TXTextControl.StreamType.WordprocessingML, base64); }; // wait until the editor script has created the global TXTextControl object const timer = setInterval(() => { if (window.TXTextControl) { clearInterval(timer); window.TXTextControl.addEventListener('textControlLoaded', loadDocument); } }, 100); return () => clearInterval(timer); }, []); return ( ); } export default App; ``` `WordprocessingML` is the stream type for DOCX. The document is now loaded and shown in the React DOCX editor. ![Load a DOCX Document](https://s1-www.textcontrol.com/assets/dist/blog/2026/11/04/a/assets/editor2.webp "Load a DOCX Document") Step 9: Edit the Document ------------------------- Once the document is loaded, users can edit it directly in your React application. The built-in ribbon has a familiar, Microsoft Word-like interface that requires little or no training. Its features include: - **Format text**: fonts, paragraph formatting, styles, and lists - **Structure documents**: tables, images, sections, and headers and footers - **Build templates**: merge fields for document generation - **Create forms**: checkboxes, drop-downs, and date pickers - **Review documents**: tracked changes and comments You can also control the editor programmatically with the TX Text Control JavaScript API. For example, add your own buttons that format text, insert form fields, or manage tracked changes. Learn More ---------- Your React application now includes a DOCX editor that loads and edits Word documents. The following resources provide more information on related topics: - **Protect the backend**: [Adding a Security Middleware to ASP.NET Core Web Applications](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-full.txt) - **Restrict editing**: [Document Protection in ASP.NET with TX Text Control: Healthcare Use Cases](https://www.textcontrol.com/blog/2025/06/25/document-protection-in-asp-dotnet-with-tx-text-control-healthcare-use-cases/llms-full.txt) - **Add review workflows**: [Building a Modern Track Changes Review Workflow in ASP.NET Core C#](https://www.textcontrol.com/blog/2026/04/28/building-a-modern-track-changes-review-workflow-in-aspnet-core-csharp/llms-full.txt) - **Use the editor in ASP.NET Core**: [How to Embed a DOCX Editor in a Web Application (ASP.NET Core)](https://www.textcontrol.com/blog/2026/10/30/how-to-embed-docx-editor-aspnet-core/llms-full.txt) - **Choose the right SDK**: [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-full.txt) ### Frequently Asked Questions What is a React DOCX editor? ----------------------------- A React DOCX editor is a component that adds Microsoft Word-like editing of DOCX documents to a React application. TX Text Control is a DOCX Editor SDK that provides its Document Editor as a React component in the *@txtextcontrol/tx-react-document-editor* npm package. How do I add a DOCX editor to a React application? --------------------------------------------------- Install the *@txtextcontrol/tx-react-document-editor* package, add the Document Editor component to your React application, and set its `webSocketURL` to an ASP.NET Core backend that runs the TX Text Control middleware. DOCX files are then loaded with the JavaScript *loadDocument* method. Is the React DOCX editor WYSIWYG? ---------------------------------- Yes. The React DOCX editor offers true WYSIWYG editing: what users see while editing matches the generated PDF and printed output. The component connects to a backend that runs the TX Text Control word processing engine, which renders the documents for the editor. Can I try the React DOCX editor for free? ------------------------------------------ Yes. You can download the TX Text Control .NET Server trial to run your own backend, as shown in this tutorial, or create a free trial access token, valid for 30 days, to connect the React DOCX editor to a backend hosted by TX Text Control. Is the React DOCX editor compatible with Microsoft Word? --------------------------------------------------------- Yes. Existing Word documents in DOCX format can be opened in the React DOCX editor, edited, and saved back for use in Microsoft Word. The editor supports Word features such as sections, headers and footers, form fields, tracked changes, and comments. Can I convert DOCX to PDF in a React application? -------------------------------------------------- Yes. With TX Text Control, call the *saveDocument* method of the JavaScript API in your React application to export the edited document as a PDF. The same method also saves documents as DOCX, HTML, or 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 - [How to Embed a DOCX Editor in a Web Application (ASP.NET Core)](https://www.textcontrol.com/blog/2026/10/30/how-to-embed-docx-editor-aspnet-core/llms.txt) - [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) - [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 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) - [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) - [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) - [DocumentViewer for React Prerelease](https://www.textcontrol.com/blog/2020/10/27/document-viewer-for-react-prerelease/llms.txt)