# Using DS Server with pure HTML and JavaScript

> DS Server comes with client-side libraries for an easy integration into web applications. But DS Server can be also used with pure JavaScript to integrate document processing into web applications.

- **Author:** Bjoern Meyer
- **Published:** 2021-01-05
- **Modified:** 2025-11-16
- **Description:** DS Server comes with client-side libraries for an easy integration into web applications. But DS Server can be also used with pure JavaScript to integrate document processing into web applications.
- **2 min read** (274 words)
- **Tags:**
  - DS Server
  - HTML
  - JavaScript
- **Web URL:** https://www.textcontrol.com/blog/2021/01/05/using-ds-server-with-pure-html-and-javascript/
- **LLMs URL:** https://www.textcontrol.com/blog/2021/01/05/using-ds-server-with-pure-html-and-javascript/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2021/01/05/using-ds-server-with-pure-html-and-javascript/llms-full.txt

---

DS Server provides the backend engine to integrate document processing into web applications. Client-side libraries make the integration easy into common platforms such as Angular or ASP.NET Core.

But DS Server can be used with pure JavaScript as well. This tutorial shows how to integrate the document editor into an HTML page using a trial token.

### Trial Token

For this tutorial, a trial token is required and can be easily created on the dedicated DS Server website:

[Get Token ](https://www.dsserver.io/trial/)

1. Include the following line of code in the `<head>` of an HTML page.
    
    ```
    <script src="https://trial.dsserver.io/documenteditor/JS/ds-server-document-editor.js">
    ```
2. Initialize *TXTextControl* on any `<div>` element on your web page by passing a *settings* object to `TXTextControl.init()`. Add your personal trial token credentials to the *authSettings* object (shown in line 31 and 32 in the code below). The following code contains all required elements to create a working document editor in an HTML page:
    
    ```
    
    <html>
        <head>
            <title>My first DS Server application</title>
            <script
                src="https://trial.dsserver.io/documenteditor/JS/ds-server-document-editor.js">
            </script>
        </head>
    
        <body>
    
            <style>
                #txDocumentEditorContainer {
                    width: 1000px;
                    height: 600px;
                    display: inline-block;
                    position: relative;
                }
            </style>
    
            <h2>DocumentServices.DocumentEditor</h2>
    
            <div id="txDocumentEditorContainer"></div>
    
            <script>
                window.addEventListener("load", function () {
                    TXTextControl.init({
                        containerID: "txDocumentEditorContainer",
                        serviceURL: "https://trial.dsserver.io",
                        authSettings: {
                            clientId: "dsserver.yourclientid",
                            clientSecret: "yourclientsecret"
                        }
                    });
                });
            </script>
    
        </body>
    
    </html>
    ```
3. By adding the following JavaScript code to the HTML page, text will be added and formatted programmatically on loading Text Control:
    
    ```
    // use the JavaScript API
    // https://docs.textcontrol.com/47c66f67/
    TXTextControl.addEventListener("textControlLoaded", function() {
        var sel = TXTextControl.selection;
        sel.setText("Welcome to DS Server", function() {
            sel.setStart(11);
            sel.setLength(9);
            sel.setBold(true);
            sel.setFontSize(30);
        });
    });
    ```

If you load this HTML page in any browser, you will see a working document editor that connects to our demo server that runs DS Server.

Learn more about DS Server on our dedicated website:

<https://www.dsserver.io>

---

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

- [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)
- [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)
- [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 DS Server with Blazor](https://www.textcontrol.com/blog/2021/07/15/using-ds-server-with-blazor/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: Using DocumentViewer with pure HTML and JavaScript](https://www.textcontrol.com/blog/2021/01/28/ds-server-using-documentviewer-with-pure-html-and-javascript/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)
- [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)
- [Technology Preview: Embeddable HTML Widget to integrate Document Editing to Angular, React and other Frameworks](https://www.textcontrol.com/blog/2018/03/01/embeddable-html-widget-for-all-frameworks/llms.txt)
