Using the TX Text Control Document Editor in a React Application
This article shows how to use the TX Text Control Document Editor in a React application. The Document Editor is a fully featured word processing component that can be used to create, edit, modify and print documents.

Prerequisites
There are two ways to evaluate the TX Text Control Document Editor. You can either host your own backend by downloading the trial version of TX Text Control .NET Server, or by creating a trial access token to use a hosted backend, valid for 30 days:
- Download Trial Version
Setup download and installation required.- Create Trial Access Token
No download and local installation required.
Creating the React Application
This tutorial shows how to create your first Angular application using the TX Text Control Document Editor.
Prerequisites
-
Create your free trial access token here:
-
Install Node.js® and npm, if not done before.
-
Open a Command Prompt and install the create-react-app globally by typing in the following command:
npm install -g create-react-app
Setting up the Application
-
Open a Command Prompt and create a new React application by typing in the following command:
npx create-react-app my-tx-document-editor-app
-
Change into the newly created directory:
cd my-tx-document-editor-app
-
Install the TX Text Control package:
npm install --save @txtextcontrol/tx-react-document-editor
-
Open this folder in Visual Studio Code using this command:
code .
-
Open the src/App.js file and replace the content with the following code:
import DocumentEditor from '@txtextcontrol/tx-react-document-editor'; import './App.css'; function App() { return ( <DocumentEditor webSocketURL="wss://backend.textcontrol.com/api/TXWebSocket?access-token=your_trial_token" editMode="Edit"> </DocumentEditor> ); } export default App;
Replace your_trial_token with your actual access token you created at the beginning of this tutorial.
Running the Application
-
Start the application by typing in the following command:
npm start
Related Posts
Building an ASP.NET Core Backend Application to Host the Document Editor and…
This article explains how to create an ASP.NET Core backend application to host the Document Editor and Document Viewer. This backend application is required to provide the required functionality…
TX Text Control React Packages Released
We are very happy to announce the immediate availability of React packages for TX Text Control. The new packages are available on npm and provide a wide range of document processing features…
Using the Document Editor in an ASP.NET Core React Application
This article shows how to use the Document Editor in an ASP.NET Core React application. The Document Editor is a fully featured word processing component that can be used to create, edit, modify…
ASP.NETASP.NET CoreDocument Editor
Getting Started Video Tutorial: Document Editor in ASP.NET Core C# on Linux
This video tutorial shows how to use the Document Editor in an ASP.NET Core application using C# and deploy on Linux using Docker. This tutorial is part of the TX Text Control Getting Started…
ASP.NETDocument EditorDocument Protection
Document Protection in ASP.NET with TX Text Control: Healthcare Use Cases
This article explores document protection use cases in the healthcare domain. It also explains how to assign usernames, configure edit modes, and use editable regions based on user roles using the…