# Integrate Document Editing into any HTML Client using the HTML Widget

> The TX Text Control JavaScript widget enables document editing in any HTML page without ASP.NET. Integration requires a script tag in the HEAD, a container DIV, and a widget constructor call with the container ID. The widget exposes the same JavaScript API as the ASP.NET MVC version.

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

- **Author:** Bjoern Meyer
- **Published:** 2020-01-01
- **Modified:** 2026-03-05
- **Description:** The TX Text Control JavaScript widget enables document editing in any HTML page without ASP.NET. Integration requires a script tag in the HEAD, a container DIV, and a widget constructor call with the container ID. The widget exposes the same JavaScript API as the ASP.NET MVC version.
- **2 min read** (291 words)
- **Tags:**
  - Angular
  - Widget
  - ASP.NET
  - Tutorial
- **Web URL:** https://www.textcontrol.com/blog/2020/01/01/integrate-document-editing/
- **LLMs URL:** https://www.textcontrol.com/blog/2020/01/01/integrate-document-editing/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2020/01/01/integrate-document-editing/llms-full.txt

---

We are providing a concept to support all non ASP.NET web applications such as Angular, React or any other framework and language.

### Test this in JSFiddle

This JSFiddle is not longer available.

The following easy steps are required to add the HTML widget to any HTML page:

1. In order to integrate the widget to your HTML page, simply add the following JavaScript tag to the *HEAD* section:
    
    ```
    <script src="https://labs.textcontrol.com/widget/scripts/txtextcontrol.web.js"></script>
    ```
2. Then create a container DIV somewhere in your HTML that will host the widget. The editor itself will automatically fill the complete container.
    
    ```
    <style>
      #myTextControlContainer {
        width: 1000px;
        height: 500px;
        margin-bottom: 20px;
      }
    </style>
    
    <div id="myTextControlContainer"></div>
    ```
3. Finally, in a *SCRIPT* section, create a new widget by passing the container id in the constructor:
    
    ```
    <script>
      var textControl1;
    
      window.onload = function() {
        textControl1 = new TXTextControlWeb("myTextControlContainer");
      };
    </script>
    ```

The object *textControl1* is now the instance of the widget and can be used to access it's API to manipulate the document. It is possible to create more than one instance of the editor by creating new object instances with different containers.

The widget has (nearly) the same [JavaScript API](https://docs.textcontrol.com/textcontrol/asp-dotnet/ref.javascript.api.htm) like the MVC version of TX Text Control Web. All objects, methods, properties and events can be used in the same way. For example, in order to load an HTML document into the editor, the following code can be used:

```
function loadDocument()
{
  textControl1.loadDocument(
    TXTextControl.StreamType.HTMLFormat,
    btoa('<strong>This is a test</strong>'));
}
```

The documentation shows how to host your own widget:

[TX Text Control Widget Programmer's Guide](https://www.textcontrol.com/documentation/?param=index.htm&product=widget)

The hosting widget project is open source and can be modified as required. You will find this project in our [GitHub repository](https://github.com/TextControl/TextControl.Web.MVC.JSWidget).

---

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

- [Creating a WebSocket Server Project with Node.js](https://www.textcontrol.com/blog/2020/01/01/creating-a-websocket-server-project-with-nodejs/llms.txt)
- [Creating an Angular Document Editor Application](https://www.textcontrol.com/blog/2020/01/01/creating-an-angular-document-editor-application/llms.txt)
- [Deploying an Angular Application using the TX Text Control Widget](https://www.textcontrol.com/blog/2018/08/28/deploying-an-angular-application-using-tx-text-control-widget/llms.txt)
- [Create your First, Very Simple Angular Application with the TX Text Control Widget](https://www.textcontrol.com/blog/2018/08/27/create-your-first-very-simple-angular-application/llms.txt)
- [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt)
- [Impressions from .NET Developer Conference DDC 2024](https://www.textcontrol.com/blog/2024/11/28/impressions-from-net-developer-conference-ddc-2024/llms.txt)
- [Back from Florida: Impressions from VSLive! Orlando 2024](https://www.textcontrol.com/blog/2024/11/21/back-from-florida-impressions-from-vslive-orlando-2024/llms.txt)
- [Implementing a Security Middleware for Angular Document Editor Applications in C#](https://www.textcontrol.com/blog/2024/10/14/implementing-a-security-middleware-for-angular-document-editor-applications/llms.txt)
- [Meet Text Control at DDC .NET Developer Conference 2024](https://www.textcontrol.com/blog/2024/10/07/meet-text-control-at-ddc-net-developer-conference-2024/llms.txt)
- [Visit Text Control at VSLive! in Orlando, Florida](https://www.textcontrol.com/blog/2024/10/01/visit-tx-text-control-at-vslive-in-orlando-florida/llms.txt)
- [Creating Advanced Tables in PDF and DOCX Documents with C#](https://www.textcontrol.com/blog/2024/09/30/creating-advanced-tables-in-pdf-and-docx-documents-with-csharp/llms.txt)
- [Back in the Pocono Mountains: Meet Text Control at TechBash 2024](https://www.textcontrol.com/blog/2024/09/24/back-in-the-pocono-mountains-meet-text-control-at-techbash-2024/llms.txt)
- [Back from Copenhagen Developers Festival 2024](https://www.textcontrol.com/blog/2024/09/05/back-from-copenhagen-developers-festival-2024/llms.txt)
- [Using the Document Editor in SPA Applications using the removeFromDom Method](https://www.textcontrol.com/blog/2024/09/02/using-the-document-editor-in-spa-applications-using-the-removefromdom-method/llms.txt)
- [Video Tutorial: Creating a MailMerge Template and JSON Data Structure](https://www.textcontrol.com/blog/2024/08/16/video-tutorial-creating-a-mailmerge-template-and-json-data-structure/llms.txt)
- [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt)
- [Mail Merge: The Pre-Shaped Data Concept Explained](https://www.textcontrol.com/blog/2024/05/30/mail-merge-the-pre-shaped-data-concept-explained/llms.txt)
- [Meet Text Control at NDC Oslo 2024](https://www.textcontrol.com/blog/2024/05/28/meet-text-control-at-ndc-oslo-2024/llms.txt)
- [Form Field Compatibility: Work with AcroForms, Legacy MS Word Forms, and Content Controls](https://www.textcontrol.com/blog/2024/04/04/form-fields-working-with-acroforms-legacy-ms-word-forms-and-content-controls/llms.txt)
- [Comments JavaScript API: Useful Tips and Tricks](https://www.textcontrol.com/blog/2024/04/01/comments-javascript-api-useful-tips-and-tricks/llms.txt)
- [Integrating Document Lifecycle Management with ASP.NET Core and C#](https://www.textcontrol.com/blog/2024/03/29/integrating-document-lifecycle-management-with-asp-net-core-and-c-sharp/llms.txt)
- [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt)
- [Customizing Electronic Signature Fonts for Typed Signatures in Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/11/customizing-electronic-signature-fonts-for-typed-signatures-in-angular-and-asp-net-core/llms.txt)
- [View and Edit MS Word DOCX Documents in Angular](https://www.textcontrol.com/blog/2023/10/26/view-and-edit-ms-word-docx-documents-in-angular/llms.txt)
- [How to Mail Merge MS Word DOCX Documents in ASP.NET Core C#](https://www.textcontrol.com/blog/2023/10/16/how-to-mail-merge-ms-word-docx-documents-in-aspnet-core-csharp/llms.txt)