# Using the Document Editor in an ASP.NET Core React Application > This article shows how to use the Document Editor in an ASP.NET Core React application. The Document Editor is a fully featured word processing component that can be used to create, edit, modify and print documents. - **Author:** Bjoern Meyer - **Published:** 2024-02-27 - **Modified:** 2026-07-17 - **Description:** This article shows how to use the Document Editor in an ASP.NET Core React application. The Document Editor is a fully featured word processing component that can be used to create, edit, modify and print documents. - **3 min read** (491 words) - **Tags:** - ASP.NET - Document Editor - React - **Web URL:** https://www.textcontrol.com/blog/2024/02/27/using-the-document-editor-in-an-asp-net-core-react-application/ - **LLMs URL:** https://www.textcontrol.com/blog/2024/02/27/using-the-document-editor-in-an-asp-net-core-react-application/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2024/02/27/using-the-document-editor-in-an-asp-net-core-react-application/llms-full.txt --- > ### Prerequisites > > In order to create a backend application, [TX Text Control .NET Server](https://www.textcontrol.com/product/tx-text-control-dotnet-server/) must be installed on your machine. When deploying this backend application, refer to the documentation to learn how to install the required TCP Service: > > - [Development and Redistribution](https://docs.textcontrol.com/textcontrol/asp-dotnet/article.aspnet.requirements.htm) ### Creating the Project The following tutorial will show you how to create an *React and ASP.NET Core* application that the required backend middleware and uses the official TX Text Control [Document Editor React component](https://www.npmjs.com/package/@txtextcontrol/tx-react-document-editor). 1. In Visual Studio 2022, create a new project, select *React and ASP.NET Core* as the project template and continue with *Next*. ![Creating the application](https://s1-www.textcontrol.com/assets/dist/blog/2024/02/27/a/assets/visualstudio1.webp "Creating the application") 2. Select a project name, location and solution name in the next dialog and confirm with *Next*. 3. In the last dialog, select *.NET 8 (Long Term Support)* as the *Framework* and confirm with *Create*. ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2024/02/27/a/assets/visualstudio2.webp "ASP.NET Core Web Application") #### Adding NuGet Packages 4. In the *Solution Explorer*, select the created project that ends with *.Server* and choose *Manage NuGet Packages...* from the *Project* main menu. Select *Text Control Offline Packages* from the *Package source* drop-down. *Install* the latest versions of the following package: - *TXTextControl.Web* ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2024/02/27/a/assets/visualstudio3.webp "ASP.NET Core Web Application") ### Adding the Middleware 5. Open the *Program.cs* file located in the project's root folder. Replace the content with the following code: ``` using TXTextControl.Web; var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddControllersWithViews(); var app = builder.Build(); app.UseDefaultFiles(); app.UseStaticFiles(); // Configure the HTTP request pipeline. app.UseHttpsRedirection(); app.UseWebSockets(); app.UseTXWebSocketMiddleware(); app.MapFallbackToFile("/index.html"); app.Run(); ``` ### Adding the React Component 6. In the *Solution Explorer*, right-click *npm* in the project node that ends with *.client* and select *Install new npm packages* from the context menu. 7. In the opened dialog, search for *@txtextcontrol/tx-react-document-editor* and install the package. ![TX Text Control npm packages](https://s1-www.textcontrol.com/assets/dist/blog/2024/02/27/a/assets/npm1.webp "TX Text Control npm packages") ### Adding the Component 8. Open the *App.jsx* file located in the *src* folder. Replace the content with the following code: ``` import DocumentEditor from '@txtextcontrol/tx-react-document-editor'; import './App.css'; function App() { return ( ); } export default App; ``` 9. Be sure to replace the port number (**7066** in this example) with the port number of your hosting application. You can find this port number in the launchSettings.json file of your server application. ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2024/02/27/a/assets/visualstudio5.webp "ASP.NET Core Web Application") Also make sure to set the *launchUrl* to an empty string. 11. Compile and start the application. --- ## 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 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) - [TX Text Control React Packages Released](https://www.textcontrol.com/blog/2024/02/29/tx-text-control-react-packages-released/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) - [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.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) - [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) - [Getting Started: Document Editor for Blazor in ASP.NET Core](https://www.textcontrol.com/blog/2025/03/25/getting-started-document-editor-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) - [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) - [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)