TX Text Control .NET Server

Document Viewer

Topic

Angular and React applications get the Document Viewer from npm packages. Their versions, dependencies and installation are listed below, together with the ASP.NET Core backend they need. For complete step-by-step tutorials, go to Getting Started: Document Viewer.

Packages

PackageWhat it containsLatest versionPublished
@txtextcontrol/tx-ng-document-viewerThe Angular component tx-document-viewer in the module DocumentViewerModule34.0.1March 9, 2026
@txtextcontrol/tx-react-document-viewerThe React component DocumentViewer34.0.0November 10, 2025

Both packages are public and install without credentials. There is no Node.js package for the Document Viewer. Without a framework, you add the viewer with two scripts that the backend serves, as shown in Getting Started: Document Viewer with JavaScript.

Both components are based on the same viewer as all other Document Viewer frontends and use the same JavaScript API, the TXDocumentViewer object.

Dependencies

The Angular package depends on tslib ^2.5.0, the React package on no other package. Both declare the framework versions your application must use as peer dependencies, and the Angular package also declares @angular/cdk. Angular and React list the ranges. Two things to know about them:

  • Angular: version 34.0.1 of the Angular package extends the range to Angular 21. If your application uses Angular 20 or 21, install 34.0.1.
  • React: the React viewer declares React 18, while the React Document Editor declares React 19.2, which matters if you want both components in one project. See Using Both Packages in One Project.

Install the Packages

You need Node.js and npm. In the folder of your client application, install the package of your framework, Angular or React:

npm i @txtextcontrol/tx-ng-document-viewer
npm i @txtextcontrol/tx-react-document-viewer

Before you install the Angular package, install @angular/cdk with the major version of your Angular version, and after the installation, import DocumentViewerModule, as Angular describes. A new Vite project uses React 19, so install React 18 before the React package, and in projects created with Vite 8, take the component from the default property of the package, as React shows.

The Backend

The components contain only the viewer's user interface. The documents are loaded and rendered by an ASP.NET Core application that runs TX Text Control .NET Server. The viewer communicates with it over HTTP.

  1. Create an ASP.NET Core application, for example with the ASP.NET Core Web API project template.

  2. Install the viewer package and an engine package from the Text Control Private NuGet Feed:

    dotnet add package TXTextControl.Web.DocumentViewer
dotnet add package TXTextControl.TextControl.Core.SDK

  3. In Program.cs, add a CORS policy with AddCors and apply it with UseCors, then call app.UseRouting() and app.UseTXDocumentViewer(). The file needs the directive using TXTextControl.Web.MVC.DocumentViewer;. The complete file is shown in the Angular and React tutorials.

With the Classic engine, install TXTextControl.Web.DocumentViewer.Classic and TXTextControl.TextControl.ASP.SDK instead; Package Overview describes both viewer packages. TXTextControl.Web.DocumentViewer is also published on nuget.org; see Public NuGet Packages for what that version requires.

To connect a component to the backend, set its basePath property to the URL of the ASP.NET Core application, for example https://localhost:7275. The properties width, height and basePath are required. Because your Angular or React development server and the backend run on different origins, the backend must allow cross-origin requests (CORS). In production, you can restrict the CORS policy to the origins of your frontend.

The same ASP.NET Core application can also host the backend of the Document Editor. Install the packages of both components and add the calls that each of them needs to Program.cs. The editor's packages and calls are listed on the Document Editor page.

Next Steps