# DS Server: Using DocumentViewer with pure HTML and JavaScript > We provide Angular and .NET Core client-side libraries to use the DocumentViewer with DS Server, but it can be used with pure HTML and JavaScript as well. This article shows how to create a simple HTML based application. - **Author:** Bjoern Meyer - **Published:** 2021-01-28 - **Modified:** 2026-07-17 - **Description:** We provide Angular and .NET Core client-side libraries to use the DocumentViewer with DS Server, but it can be used with pure HTML and JavaScript as well. This article shows how to create a simple HTML based application. - **3 min read** (509 words) - **Tags:** - DocumentViewer - DS Server - JavaScript - **Web URL:** https://www.textcontrol.com/blog/2021/01/28/ds-server-using-documentviewer-with-pure-html-and-javascript/ - **LLMs URL:** https://www.textcontrol.com/blog/2021/01/28/ds-server-using-documentviewer-with-pure-html-and-javascript/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2021/01/28/ds-server-using-documentviewer-with-pure-html-and-javascript/llms-full.txt - **GitHub Repository:** https://github.com/TextControl/dsserver.javascript.documentviewer --- In order to use the DS Server DocumentViewer with pure HTML and JavaScript, an additional step is required to retrieve the OAuth access token from DS Server. This sample shows how to retrieve the token and how to initialize the viewer on a simple HTML page. In order to run this application, a DS Server trial token is required. If you don't have a token yet, you can get your token here for free: [Trial Token ](https://www.dsserver.io/trial/) This sample implements a *DocumentViewer* JavaScript class that requests the access token in order to initialize the viewer: ``` var DocumentServices = (function (tx) { var m_clientID, m_clientSecret, m_serviceURL, m_containerID, m_accessToken, m_userNames = [ "unknown user" ]; m_isSelectionActivated = true; m_showThumbnailPane = true; tx.DocumentViewer = { setUserNames: function (userNames) { m_userNames = userNames; }, setIsSelectionActivated: function (activated) { m_isSelectionActivated = activated; }, setShowThumbnailPane: function (show) { m_showThumbnailPane = show; }, init: function (clientID, clientSecret, serviceURL, containerID) { m_clientID = clientID; m_clientSecret = clientSecret; m_serviceURL = serviceURL; m_containerID = containerID; var script = document.createElement('script'); script.onload = function () { TXDocumentViewer.init( { containerID: m_containerID, viewerSettings: { toolbarDocked: true, dock: "Fill", userNames: m_userNames, isSelectionActivated: m_isSelectionActivated, showThumbnailPane: m_showThumbnailPane, basePath: m_serviceURL + "/documentviewer", oauthSettings: { accessToken: m_accessToken } } }); }; getAccessToken(function(token) { m_accessToken = token; script.src = m_serviceURL + "/documentviewer/textcontrol/GetResource?Resource=minimized.tx-viewer.min.js&access_token=" + m_accessToken; document.head.appendChild(script); }); }, } function getAccessToken(callback) { $.ajax({ type: "POST", headers: { "Authorization": "Basic " + btoa(m_clientID + ":" + m_clientSecret) }, url: m_serviceURL + "/OAuth/Token", data: { "grant_type": "client_credentials" }, success: successFunc }); function successFunc(data, status) { if (typeof callback == "function") { callback(data.access_token); } } } return tx; } ( DocumentServices || {} )); ``` This JavaScript file is then referenced in the sample HTML. Additionally, a host element (*txViewer*) is created and the *init()* method is called with your trial token credentials: ```

``` The function *getAccessToken* is requesting an access token from the OAuth endpoints of DS Server by exchanging the ClientId and ClientSecret for a valid OAuth access token: ``` function getAccessToken(callback) { $.ajax({ type: "POST", headers: { "Authorization": "Basic " + btoa(m_clientID + ":" + m_clientSecret) }, url: m_serviceURL + "/OAuth/Token", data: { "grant_type": "client_credentials" }, success: successFunc }); function successFunc(data, status) { if (typeof callback == "function") { callback(data.access_token); } } } ``` The returned access token is then used to inject the required DocumentViewer JavaScript in order to call the *init()* method of DocumentViewer: ``` var script = document.createElement('script'); script.onload = function () { TXDocumentViewer.init( { containerID: m_containerID, viewerSettings: { toolbarDocked: true, dock: "Fill", userNames: m_userNames, isSelectionActivated: m_isSelectionActivated, showThumbnailPane: m_showThumbnailPane, basePath: m_serviceURL + "/documentviewer", oauthSettings: { accessToken: m_accessToken } } }); }; getAccessToken(function(token) { m_accessToken = token; script.src = m_serviceURL + "/documentviewer/textcontrol/GetResource?Resource=minimized.tx-viewer.min.js&access_token=" + m_accessToken; document.head.appendChild(script); }); ``` This initializes the DocumentViewer on the HTML page. The *loadDocument* method of the JavaScript API can be used to load a document into the created DocumentViewer. You can test this on your own by downloading the full sample from our GitHub repository. --- ## 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) --- ## Related Posts - [JavaScript: Avoid Flickering and Visual Updates by Grouping Undo Steps](https://www.textcontrol.com/blog/2022/07/25/javascript-avoid-flickering-and-visual-updates-by-grouping-undo-steps/llms.txt) - [DS Server or TX Text Control? Different Deployment Scenarios](https://www.textcontrol.com/blog/2022/05/03/ds-server-or-tx-text-control-different-deployment-scenarios/llms.txt) - [Document Editor: JavaScript Object Availability and Order of Events](https://www.textcontrol.com/blog/2022/05/03/documenteditor-javascript-object-availability-and-order-of-events/llms.txt) - [Deploying Documents with Annotations](https://www.textcontrol.com/blog/2022/01/07/deploying-documents-with-annotations/llms.txt) - [Using TX Text Control .NET Server in Blazor Server Apps](https://www.textcontrol.com/blog/2022/01/06/using-tx-text-control-net-server-for-aspnet-in-blazor-server-apps/llms.txt) - [Using the MVC DocumentViewer in ASP.NET Web Forms](https://www.textcontrol.com/blog/2021/08/12/using-the-mvc-documentviewer-in-aspnet-web-forms/llms.txt) - [Using DS Server with Blazor](https://www.textcontrol.com/blog/2021/07/15/using-ds-server-with-blazor/llms.txt) - [DocumentViewer: Deploying Forms](https://www.textcontrol.com/blog/2021/07/02/document-viewer-deploying-forms/llms.txt) - [DocumentViewer Pre-Release: UI Improvements and Events](https://www.textcontrol.com/blog/2021/07/01/documentviewer-pre-release-ui-improvements-and-events/llms.txt) - [DocumentViewer Annotations: Highlight Text](https://www.textcontrol.com/blog/2021/06/18/document-viewer-annotations-highlight-text/llms.txt) - [Creation of Custom Electronic Signature Boxes](https://www.textcontrol.com/blog/2021/06/15/creation-of-custom-electronic-signature-boxes/llms.txt) - [Building Cross-Platform Desktop Applications with Electron](https://www.textcontrol.com/blog/2021/03/25/building-cross-platform-desktop-applications-with-electron/llms.txt) - [Track Changes: Show 'Original' and 'No Markup'](https://www.textcontrol.com/blog/2021/02/18/track-changes-show-original-and-no-markup/llms.txt) - [JavaScript Helper Classes: Converting Selected Text to Form Fields](https://www.textcontrol.com/blog/2021/02/13/javascript-helper-classes-converting-selected-text-to-form-fields/llms.txt) - [DS Server Released: On-Premise Document Services](https://www.textcontrol.com/blog/2021/01/21/ds-server-released-on-premise-document-services/llms.txt) - [Merging Templates using DS Server in ASP.NET Core](https://www.textcontrol.com/blog/2021/01/07/merging-templates-using-ds-server-in-aspnet-core/llms.txt) - [Using DS Server with pure HTML and JavaScript](https://www.textcontrol.com/blog/2021/01/05/using-ds-server-with-pure-html-and-javascript/llms.txt) - [DS Server: Using DocumentViewer in Angular Applications](https://www.textcontrol.com/blog/2020/12/21/ds-server-using-documentviewer-in-angular-applications/llms.txt) - [Using the DocumentViewer in Pure HTML and JavaScript](https://www.textcontrol.com/blog/2020/06/09/using-the-documentviewer-in-pure-html-and-javascript/llms.txt)