Document Viewer
Users who only need to read, search, print, annotate or sign a document get the Document Viewer: a viewer in the browser whose documents DS Server renders. Pick your frontend below, ASP.NET Core, Angular, React or plain JavaScript, and follow its tutorial from an empty project to a page that displays a document.
Document Viewer or Document Editor
| Document Viewer | Document Editor | |
|---|---|---|
| Purpose | Display documents, with text search, zooming, printing, a thumbnail pane, annotations, comments and electronic signatures | Create and edit documents and templates |
| Content can be changed | No | Yes |
| Connection to DS Server | HTTP requests below <service URL>/documentviewer | A WebSocket connection to <service URL>/documenteditor/WS |
| JavaScript object | TXDocumentViewer | TXTextControl |
Both components can use the same security profile and appear in the same application. To edit documents, see Document Editor.
How It Works
The viewer runs in the browser and loads its scripts from DS Server, below <service URL>/documentviewer. When OAuth is enabled, DS Server delivers these scripts only to requests with an access token of a security profile, the client ID and client secret the admin creates for your application. The client packages request the token for you:
- The ASP.NET Core package
TXTextControl.DocumentServices.DocumentViewerrequests it on your server and writes the access token and a refresh token into the page, never the client secret. - The Angular and React packages request it from the browser with the client credentials grant type, or take a token that your server requested.
- A plain HTML page requests the token itself, then loads the viewer script with it.
Your application passes the document as a Base64-encoded string, and DS Server renders its pages. Supported File Formats lists the formats DS Server loads. Architecture shows how the parts connect.
Before You Start
Every tutorial needs your own DS Server, installed and licensed as the Installation Guide and Licensing describe, or a trial token for https://trial.dsserver.io, described in Trial Token. An unlicensed server shows "DS Server is not registered." instead of the viewer.
Choose a Frontend
| Frontend | Choose it when | How the viewer is added | The security profile needs |
|---|---|---|---|
| ASP.NET Core | You build an ASP.NET Core MVC application | Html.TXTextControl().DocumentViewer() from the NuGet package TXTextControl.DocumentServices.DocumentViewer | The redirect URI /textcontrol/documentviewer/auth/callback of your application |
| Angular | Your client application is written in Angular 19 to 21 | tx-ds-document-viewer from the npm package @txtextcontrol/tx-ng-ds-document-viewer | Allow "Client Credentials" grant type, or your server passes a token |
| React | Your client application is written in React 19 | DocumentViewer from the npm package @txtextcontrol/tx-react-ds-document-viewer | Allow "Client Credentials" grant type, or your server passes a token |
| JavaScript | You use no framework | The viewer script from DS Server and TXDocumentViewer.init() | Allow "Client Credentials" grant type, or your server passes a token |
If you aren't sure, start with ASP.NET Core: one project, and the client secret stays on your server. Overview in Client-Side Libraries compares the packages.
Pages in This Section
- ASP.NET Core: create an ASP.NET Core MVC application, add the viewer to a view and load a document from a file.
- Angular: add the Angular component to a new Angular application and load a document from TypeScript.
- React: add the React component to a Vite application and pass an access token from your server.
- JavaScript: request a token, load the viewer script and initialize the viewer in a plain HTML page.