# Document Editor

> Choose a Document Editor frontend for ASP.NET Core, Angular, React, JavaScript, Blazor or Node.js and see how the WebSocket endpoint and backend fit together.

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

---

The Document Editor is an MS Word compatible, WYSIWYG document editor that runs in the browser and uses a ribbon interface. Learn how the editor works, then build your first application with ASP.NET Core, Angular, React, plain JavaScript, Blazor or Node.js.

### What the Document Editor Is

The Document Editor gives your users a word processor inside your web application. Documents are shown page by page with their real layout, and the ribbon bar groups the editing tools in tabs. Your code loads, saves and changes documents through the JavaScript API, the `TXTextControl` object, which is the same in all frontends.

![The Document Editor in the browser with a business letter loaded: the ribbon bar with the Home tab active, the ruler, a page with a heading, an address, a line-item table and body text, and the status bar with section, page, line, column, language and zoom.](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/document-editor-letter.71f053d9.webp)

### How It Works

The Document Editor is not a pure client-side component. The frontend in the browser opens a WebSocket connection to your ASP.NET Core application, where the Document Editor backend synchronizes the document, so every frontend needs this backend. In a Node.js application, a Node.js WebSocket server takes the place of the ASP.NET Core application and connects to the same backend process. [How It Works](https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/components/document-editor/#how-it-works) in the Overview explains the parts, and [Frontends and the ASP.NET Core Backend](https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/architecture/#frontends-and-the-asp-net-core-backend) lists the packages of each frontend.

### Choose a Frontend

| Frontend | Choose it when | How the editor is added |
|---|---|---|
| ASP.NET Core | You build an ASP.NET Core MVC application and want the fastest start. | `Html.TXTextControl().TextControl()` HTML helper in a view |
| Angular | Your client application is written in Angular. | `tx-document-editor` component |
| React | Your client application is written in React. | `DocumentEditor` component |
| JavaScript | You use no framework, or a framework without a dedicated package. | Script tag and `TXTextControl.init()` |
| Blazor | You build a Blazor Web App with interactive server rendering and want to load and save documents in C#. | `DocumentEditor` Razor component |
| Node.js | Your web application runs on Node.js instead of ASP.NET Core. | `DocumentEditor` class, whose `render()` method writes the editor into a page |

If you are not sure, start with ASP.NET Core. It needs only one project, and the JavaScript you learn there works the same way in every other frontend.

### Pages in This Section

- [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/aspnet-core/llms-full.txt): create an ASP.NET Core MVC application that hosts the backend and shows the editor in a view.
- [Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/angular/llms-full.txt): create an ASP.NET Core backend and an Angular application that uses the Angular component.
- [React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/react/llms-full.txt): create an ASP.NET Core backend and a React application that uses the React component.
- [JavaScript](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/javascript/llms-full.txt): load the editor into a plain HTML page and program it with the JavaScript API.
- [Blazor](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/blazor/llms-full.txt): add the Blazor component to a Blazor Web App and load documents from C#.
- [Node.js](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/nodejs/llms-full.txt): serve the editor from an Express application with the Node.js packages and run the backend next to it.

---

## In This Section

- [Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/angular/llms-full.txt): Create an ASP.NET Core backend and an Angular CLI app that shows the Document Editor with the tx-document-editor component, then run both together.
- [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/aspnet-core/llms-full.txt): Create an ASP.NET Core MVC app that hosts the Document Editor backend, shows the editor in a view and runs it on Windows, in WSL or in a Linux container.
- [Blazor](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/blazor/llms-full.txt): Add the Document Editor component to a Blazor Web App with interactive server rendering and load and save documents on the server with C#.
- [JavaScript](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/javascript/llms-full.txt): Load the Document Editor into a plain HTML page without a framework, connect it to an ASP.NET Core backend and program it with the JavaScript API.
- [Node.js](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/nodejs/llms-full.txt): Show the Document Editor in a Node.js app with Express and Pug: tx-document-editor, tx-websocket-server and the TXTextControl.Web.Server.Core backend.
- [React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/react/llms-full.txt): Create an ASP.NET Core backend and a React app that shows the Document Editor with the DocumentEditor component from tx-react-document-editor.

---

## Nearby

- **Previous:** [Save as DOCX and PDF](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-processing/save-docx-pdf/llms-full.txt)
- **Next:** [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/aspnet-core/llms-full.txt)
