TX Text Control Document Editor from JS

# Sneak Peek: Using the Document Editor with Pure JavaScript > The current version of the Document Editor requires the use of one of the client packages such as Angular or ASP.NET Core MVC. In the next version, the Document Editor will be able to be initialized with pure JavaScript. - **Author:** Bjoern Meyer - **Published:** 2023-08-24 - **Modified:** 2025-11-16 - **Description:** The current version of the Document Editor requires the use of one of the client packages such as Angular or ASP.NET Core MVC. In the next version, the Document Editor will be able to be initialized with pure JavaScript. - **2 min read** (260 words) - **Tags:** - JavaScript - Document Editor - Release - **Web URL:** https://www.textcontrol.com/blog/2023/08/24/sneak-peek-using-the-document-editor-with-javascript/ - **LLMs URL:** https://www.textcontrol.com/blog/2023/08/24/sneak-peek-using-the-document-editor-with-javascript/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2023/08/24/sneak-peek-using-the-document-editor-with-javascript/llms-full.txt --- The ability to initialize the online document editor with pure JavaScript is one of the new features of TX Text Control 32.0. Before, you needed a client-side package like Angular, Node.js, Web Forms, or ASP.NET Core MVC NuGet packages. The ability to create an instance using pure JavaScript also allows the TX Text Control to be used in Blazor as well (this was previously only possible in combination with our low-code solution [DS Server](https://www.dsserver.io)). To load the initial JavaScript, the backend (WebSocketHandler) received a new endpoint that returns the required JavaScript. This endpoint can be used in a *script* tag in HTML to embed the required JavaScript code. ``` ``` In the URL above, "localhost:7031" is the location where your backend is running. This can be an ASP.NET (Core) application or a Node.js WebSocket server. The *init* method is used to initialize the Document Editor in a given *div* element. ``` TXTextControl.init({ containerID: "txDocumentEditor", webSocketURL: "wss://localhost:7031/api/TXWebSocket" }); ``` The complete HTML page would look like this. The element in which the editor is created is the *div* element with the *id* *txDocumentEditor*. ``` TX Text Control Document Editor from JS

``` The *textControlLoaded* event is attached to the *TXTextControl* element to load a document after the editor is initialized. This is just one of the new features in version 32.0. Stay tuned for more! --- ## 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 - [Build a Custom Backstage View in ASP.NET Core with TX Text Control](https://www.textcontrol.com/blog/2026/02/17/build-a-custom-backstage-view-in-aspnet-core-with-tx-text-control/llms.txt) - [Format Painter in ASP.NET Core: Building Custom Text Formatting with TX Text Control](https://www.textcontrol.com/blog/2025/09/09/format-painter-in-asp-dotnet-core-building-custom-text-formatting-with-tx-text-control/llms.txt) - [Getting Started: Document Editor Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-editor-version-33-0-with-angular-cli-19-0/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) - [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) - [Removing Empty Pages in TX Text Control with JavaScript](https://www.textcontrol.com/blog/2024/06/19/removing-empty-pages-in-tx-textcontrol-with-javascript/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) - [TX Text Control React Packages Released](https://www.textcontrol.com/blog/2024/02/29/tx-text-control-react-packages-released/llms.txt) - [Getting Started: Document Editor with Angular CLI v17.0](https://www.textcontrol.com/blog/2023/12/13/getting-started-document-editor-with-angular-cli-17/llms.txt) - [Getting Started: Document Editor with JavaScript](https://www.textcontrol.com/blog/2023/09/15/getting-started-document-editor-with-javascript/llms.txt) - [Angular: Loading Documents from Assets Folder on Initialization](https://www.textcontrol.com/blog/2023/07/10/angular-loading-documents-from-assets-folder-on-initialization/llms.txt) - [Getting Started: Document Editor with Angular CLI](https://www.textcontrol.com/blog/2023/01/30/getting-started-document-editor-with-angular-cli/llms.txt) - [Sneak Peek 31.0: Customizing the Context Menu of the ASP.NET Document Editor](https://www.textcontrol.com/blog/2022/08/25/sneak-peek-310-customizing-the-context-menu-of-the-aspnet-document-editor/llms.txt) - [ASP.NET DocumentEditor: Set Static Files Path](https://www.textcontrol.com/blog/2021/12/28/aspnet-document-editor-set-static-files-path/llms.txt) - [Sneak Peek 30.0: MS Word Compatible Comments](https://www.textcontrol.com/blog/2021/11/16/version-30-ms-word-compatible-comments/llms.txt) - [Detect Toggle Button Changes Using a MutationObserver](https://www.textcontrol.com/blog/2021/11/11/detect-toggle-button-changes-using-a-mutationobserver/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) - [JavaScript Functions for Typical Form Field Tasks](https://www.textcontrol.com/blog/2020/04/15/javascript-functions-for-typical-form-field-tasks/llms.txt) - [TXTextControl.Web: Creating a Custom ButtonBar using the InputFormat Class](https://www.textcontrol.com/blog/2020/03/20/creating-a-custom-buttonbar-using-the-inputformat-class/llms.txt) - [New JavaScript API Calls for Typical MailMerge Tasks](https://www.textcontrol.com/blog/2020/03/19/new-javascript-api-for-typical-mailmerge-tasks/llms.txt) - [JavaScript: Removing TextFields on Backspace and Delete](https://www.textcontrol.com/blog/2018/10/24/javascript-removing-textfields-on-backspace-and-delete/llms.txt) - [HTML5: Using the New JavaScript Selection Object](https://www.textcontrol.com/blog/2016/12/24/html5-using-the-new-javascript-selection-object/llms.txt)