# Using the DocumentViewer in Pure HTML and JavaScript

> The TX Text Control DocumentViewer cannot be only used in ASP.NET, ASP.NET Core and Angular applications, but also in pure HTML and JavaScript applications. This tutorial shows how to create a simple HTML application using the DocumentViewer.

> **Note:** This article is outdated and may no longer be accurate.

- **Author:** Bjoern Meyer
- **Published:** 2020-06-09
- **Modified:** 2025-11-16
- **Description:** This tutorial shows how to create a simple HTML application using the DocumentViewer and shows how to load local documents into the viewer.
- **2 min read** (203 words)
- **Tags:**
  - DocumentViewer
  - HTML
  - JavaScript
  - .NET Core
  - Vanilla JS
- **Web URL:** https://www.textcontrol.com/blog/2020/06/09/using-the-documentviewer-in-pure-html-and-javascript/
- **LLMs URL:** https://www.textcontrol.com/blog/2020/06/09/using-the-documentviewer-in-pure-html-and-javascript/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2020/06/09/using-the-documentviewer-in-pure-html-and-javascript/llms-full.txt

---

The new prerelease version of the [TX Text Control DocumentViewer NuGet package](https://www.nuget.org/packages/TXTextControl.Web.DocumentViewer/28.0.203.500-beta4) allows you to host the required backend endpoints in an ASP.NET or ASP.NET Core Web Application. This backend can then be used by the [Angular version](https://www.npmjs.com/package/@txtextcontrol/tx-ng-document-viewer/v/28.0.0-beta) of the DocumentViewer.

But this backend also allows you to initialize the TX Text Control DocumentViewer in a pure HTML and JavaScript environment.

In order to use this, you will have to create a trial access token to use the backend server.

[Access Token ](https://www.textcontrol.com/product/client-package/token/)### Adding the Viewer to HTML

1. Add the *Script* tag to your HTML file in the *head* section:
    
    ```
    <script src="https://backend.textcontrol.com/TextControl/GetResource?Resource=minimized.tx-viewer.min.js&access-token=yourtoken"></script>
    ```
    
    When hosted on your own, replace *https://backend.textcontrol.com* with your endpoint URL.
2. Add a hosting element to your HTML:
    
    ```
    <div id="txViewerHost"></div>
    ```
3. Add the following *script* tag to your HTML and set the *id* of the hosting element to the *containerID* property:
    
    ```
    <script>
      // create a new DocumentViewer
      TXDocumentViewer.init( {
        containerID: 'txViewerHost',
        viewerSettings: {
          toolbarDocked: true,
          dock: "Fill",
          isSelectionActivated: true,
          showThumbnailPane: true,
          basePath: 'https://backend.textcontrol.com',
        }
      });
    </script>
    ```
    
    Also here, replace the *basePath* with your endpoint URL when hosted on your own.

---

## 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)