# Getting Started: Creating an ASP.NET Core Web App with the Document Editor in Visual Studio Code (VS Code)

> This article shows how to create an ASP.NET Core Web App with the Document Editor in Visual Studio Code (VS Code). The Document Editor is a powerful word processing component that can be used to create, edit, view, and print documents in various formats.

- **Author:** Bjoern Meyer
- **Published:** 2024-09-27
- **Modified:** 2025-11-16
- **Description:** This article shows how to create an ASP.NET Core Web App with the Document Editor in Visual Studio Code (VS Code). The Document Editor is a powerful word processing component that can be used to create, edit, view, and print documents in various formats.
- **4 min read** (696 words)
- **Tags:**
  - ASP.NET
  - ASP.NET Core
  - Document Editor
  - VS Code
- **Web URL:** 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 URL:** 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
- **LLMs-Full URL:** 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-full.txt

---

Visual Studio Code is a lightweight but powerful source code editor that runs on your desktop and is available for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtimes.

In this tutorial, we will show you how to create an ASP.NET Core Web App that uses the TX Text Control Document Editor in Visual Studio Code.

> ### Prerequisites
> 
> There are two ways to evaluate the TX Text Control *Document Editor*. You can either host your own backend by downloading the trial version of TX Text Control .NET Server, or by creating a trial access token to use a hosted backend, valid for 30 days:
> 
> - [Download Trial Version](https://www.textcontrol.com/product/tx-text-control-dotnet-server/download/)  
>     Setup download and installation required.
> - [Create Trial Access Token](https://www.textcontrol.com/product/client-package/token/)  
>     No download and local installation required.
> 
> Before you start, you need to have the following prerequisites:
> 
> - [.NET SDK 8.0](https://dotnet.microsoft.com/en-us/download)
> - [Visual Studio Code](https://visualstudio.microsoft.com/downloads/)
> - [Node.js](https://nodejs.org/en/download/)

### Helpful Extensions

Visual Studio Code has a rich ecosystem of extensions that can be installed to add additional features to the editor. The following extensions are helpful when working with ASP.NET C#:

- [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit)
- [NuGet Gallery](https://marketplace.visualstudio.com/items?itemName=patcx.vscode-nuget-gallery)

### Creating the Application

1. Open Visual Studio Code and open a folder where you want to create the application. Open the terminal and execute the following command:
    
    ```
    dotnet new mvc -o tx-text-control-document-editor
    ```
    
    This command creates a new ASP.NET Core Web App (MVC) project in a new folder called *tx-text-control-document-editor*.
    
    ![TX Text Control in VS Code](https://s1-www.textcontrol.com/assets/dist/blog/2024/09/27/a/assets/vscode1.webp "TX Text Control in VS Code")

#### Adding the NuGet Package

1. In the same terminal window find the tab *NUGET* and open it. Search for *TXTextControl.Web* and install the package.
    
    ![TX Text Control in VS Code](https://s1-www.textcontrol.com/assets/dist/blog/2024/09/27/a/assets/vscode2.webp "TX Text Control in VS Code")

#### Configure the Application

> **Trial Access Token Users**
> 
> In case you are using a **Trial Access Token**, skip this complete step.

1. 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.UseStaticFiles();:
    
    ```
    // enable Web Sockets
    app.UseWebSockets();
    
    // attach the Text Control WebSocketHandler middleware
    app.UseTXWebSocketMiddleware();
    ```

#### Adding the Document Editor

1. Find the *Index.cshtml* file in the *Views -> Home* folder. Replace the complete content with the following code to add the document editor to the view:
    
    ```
    @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()
    
    <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>
    @bjoerntx
    Comment
    ```
    
    > **Trial Access Token Users**
    > 
    > In case you are using a **Trial Access Token**, replace the content with the following code.
    > 
    > ```
    > @using TXTextControl.Web.MVC
    > 	
    > @Html.TXTextControl().TextControl(settings => {
    > 	settings.WebSocketURL = "wss://backend.textcontrol.com/api/TXWebSocket?access-token=addYourTokenHere"
    > }).Render()
    > ```
    > 
    > Replace *addYourTokenHere* with your actual **Trial Access Token**.

#### Run the Application

1. Open the terminal, navigate to the project's root folder and execute the following command:
    
    ```
    dotnet run
    ```
    
    ![TX Text Control in VS Code](https://s1-www.textcontrol.com/assets/dist/blog/2024/09/27/a/assets/vscode3.webp "TX Text Control in VS Code")
2. Open a browser and navigate to the URL that is displayed in the terminal.
    
    ![TX Text Control in VS Code](https://s1-www.textcontrol.com/assets/dist/blog/2024/09/27/a/assets/vscode4.webp "TX Text Control in VS Code")

### Conclusion

That's it. You have successfully created an ASP.NET Core Web App that uses the TX Text Control Document Editor in Visual Studio Code. You can now use the editor to create, edit, and save documents in your 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

- [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)
- [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 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)
- [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)
- [Merging Templates with MailMerge with Different Merge Field Settings in C#](https://www.textcontrol.com/blog/2023/12/16/merging-templates-with-mailmerge-with-different-merge-field-settings/llms.txt)
- [Edit MS Word Documents Online in ASP.NET Core C#](https://www.textcontrol.com/blog/2023/10/06/edit-ms-word-documents-online-in-aspnet-core-csharp/llms.txt)