# Document Editor

> Install tx-ng-document-editor, tx-react-document-editor or the Node.js tx-document-editor and tx-websocket-server, and set up the WebSocket backend they need.

- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > Installation Guide > npm Packages > Document Editor
- **1689 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/document-editor/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/document-editor/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/document-editor/llms-full.txt

---

The Document Editor is available as npm packages for Angular, React and Node.js. Each package is listed with its versions and dependencies, how to install it and the backend it needs; the complete step-by-step tutorials are in [Getting Started: Document Editor](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/llms-full.txt).

### Packages

| Package | What it contains | Latest version | Published |
|---|---|---|---|
| [`@txtextcontrol/tx-ng-document-editor`](https://www.npmjs.com/package/@txtextcontrol/tx-ng-document-editor) | The Angular component `tx-document-editor` in the module `DocumentEditorModule` | 34.0.0 | November 10, 2025 |
| [`@txtextcontrol/tx-react-document-editor`](https://www.npmjs.com/package/@txtextcontrol/tx-react-document-editor) | The React component `DocumentEditor` | 34.0.0 | November 10, 2025 |
| [`@txtextcontrol/tx-document-editor`](https://www.npmjs.com/package/@txtextcontrol/tx-document-editor) | The `DocumentEditor` class for Node.js web applications. Its `render()` method returns the editor markup for a page. | 34.0.0 | November 10, 2025 |
| [`@txtextcontrol/tx-websocket-server`](https://www.npmjs.com/package/@txtextcontrol/tx-websocket-server) | The `WebSocketServer` class, which provides the WebSocket endpoint of the editor in a Node.js application | 34.5.0 | September 14, 2026 |

All four packages are public and install without credentials. All frontends share the same JavaScript API, the [TXTextControl](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/llms-full.txt) object.

### Dependencies

The Angular and React packages declare the Angular or React versions your application must use as peer dependencies; [Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/angular/#packages-and-supported-angular-versions) and [React](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/react/#packages-and-required-react-versions) list the ranges and explain what to do in case of a conflict. The Angular package also depends on `@angular/cdk` in the same range and on `tslib` `^2.8.1`, and the React package has no other dependencies. The Node.js packages have no peer dependencies:

| Package | Dependencies |
|---|---|
| `@txtextcontrol/tx-document-editor` 34.0.0 | None |
| `@txtextcontrol/tx-websocket-server` 34.5.0 | `http-server` `^14.1.1`, `net` `^1.0.2`, `ws` `^8.18.3` |

npm installs the dependencies automatically.

### Install the Packages

You need [Node.js](https://nodejs.org/en/download/) and npm. Run the commands in the folder of your client application.

#### Angular and React

Install the package of your framework:

```bash
npm i @txtextcontrol/tx-ng-document-editor
npm i @txtextcontrol/tx-react-document-editor
```

Before you install the Angular package, check the `@angular/cdk` version of your application, and after the installation, import `DocumentEditorModule`, as [Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/angular/#install-the-packages) describes. The React package requires React 19.2 or a later 19.x version, and projects created with Vite 8 take the component from the `default` property of the package, as [React](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/react/#install-the-document-editor) shows.

#### Node.js

A Node.js application needs the editor package and the WebSocket server package:

```bash
npm install @txtextcontrol/tx-document-editor
npm install @txtextcontrol/tx-websocket-server
```

The example in the package README also uses the web framework Express and the template engine Pug, which you install with `npm install express` and `npm install pug`.

### The Backend for Angular and React

The Angular and React components contain only the user interface. They open a WebSocket connection to an ASP.NET Core application that runs TX Text Control .NET Server and synchronizes the document.

1. Create an ASP.NET Core application, for example with the **ASP.NET Core Web API** project template.
2. Install the NuGet packages from the [Text Control Private NuGet Feed](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/nuget/private-feed/llms-full.txt):

    ```bash
    dotnet add package TXTextControl.Web
    dotnet add package TXTextControl.TextControl.Core.SDK
    dotnet add package TXTextControl.Web.DocumentEditor.Backend
    ```
3. In *Program.cs*, register the hosted service with `builder.Services.AddHostedService<DocumentEditorWorkerManager>()`, and call `app.UseWebSockets()` and `app.UseTXWebSocketMiddleware()`. The complete file is shown in the [Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/angular/llms-full.txt) and [React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/react/llms-full.txt) tutorials.

`TXTextControl.Web` provides the WebSocket middleware, and `TXTextControl.Web.DocumentEditor.Backend` the backend process that the middleware connects to over TCP, by default on port 4283; [Document Editor](https://docs.textcontrol.com/tx-text-control-dotnet-server/overview/architecture/#document-editor) in Product Architecture explains the connection chain.

To connect a component to the backend, set its `webSocketURL` to the address of the ASP.NET Core application with the `wss` protocol and the path `/api/TXWebSocket`, for example `wss://localhost:7118/api/TXWebSocket`. Use `ws` when the backend runs on HTTP. The Document Editor needs no CORS policy.

### The Backend for Node.js

The Node.js packages also communicate over a WebSocket connection. Instead of an ASP.NET Core application, the Node.js application provides the WebSocket endpoint with the `WebSocketServer` class, which forwards the connection to the Document Editor backend `TXTextControl.Web.Server.Core` over TCP, by default to `localhost` on port 4283. You host this backend yourself: in a Node.js application, no hosted service starts it, so you publish its files from the NuGet packages and start it as a standalone application, a Windows service or a Linux daemon. Only ASP.NET applications on the .NET Framework still deploy the older TX TextControl Service.

The [Node.js](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/nodejs/llms-full.txt) tutorial prepares the backend and shows the Express application from the package README in [Write the Application](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/nodejs/#write-the-application). [Connect to a Backend on Another Machine](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/nodejs/#connect-to-a-backend-on-another-machine) lists the options of the `WebSocketServer` constructor, such as the address and port of the backend.

The READMEs name these requirements:

- `@txtextcontrol/tx-document-editor` 34.0.0: `@txtextcontrol/tx-websocket-server` 34.0.0 or higher, or the NuGet package `TXTextControl.Web` 34.0.0 or higher as the WebSocket endpoint, and TX Text Control .NET Server 34.0 or higher.
- `@txtextcontrol/tx-websocket-server` 34.5.0: TX Text Control .NET Server 34.0 SP5.

The README of the Angular package also describes a Node.js application with `WebSocketServer` as the WebSocket endpoint for the Angular component, as [Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/angular/#use-a-node-js-websocket-server) in the Integration Guide shows.

### Next Steps

- [Getting Started: Document Editor with Angular](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/angular/llms-full.txt) — build an Angular application with the Document Editor and its ASP.NET Core backend.
- [Getting Started: Document Editor with React](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/react/llms-full.txt) — build a React application with the Document Editor and its ASP.NET Core backend.
- [Angular npm Packages](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/angular/llms-full.txt) — the supported Angular versions, root modules and standalone components.
- [Document Editor Architecture](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/architecture/llms-full.txt) — how the frontend, the middleware and the backend process work together.

---

## Nearby

- **Previous:** [npm Packages](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/llms-full.txt)
- **Next:** [Document Viewer](https://docs.textcontrol.com/tx-text-control-dotnet-server/installation/npm/document-viewer/llms-full.txt)