# React > Add the DocumentEditor component of tx-react-ds-document-editor to a React app built with Vite, pass client credentials or an access token and insert text. - **Product:** DS Server - **Section:** Documentation - **Kind:** Topic - **Path:** DS Server > Getting Started > Document Editor > React - **2112 words** - **Web URL:** https://docs.textcontrol.com/ds-server/getting-started/document-editor/react/ - **LLMs URL:** https://docs.textcontrol.com/ds-server/getting-started/document-editor/react/llms.txt - **LLMs-Full URL:** https://docs.textcontrol.com/ds-server/getting-started/document-editor/react/llms-full.txt --- React applications show the Document Editor of DS Server with the `DocumentEditor` component of the npm package `@txtextcontrol/tx-react-ds-document-editor`. The component loads the editor from DS Server and gets its access token there, so a first application needs no backend of your own. You prepare a security profile, create a Vite application, add the component and insert text with the JavaScript API once the editor is ready. ### Prerequisites - [Node.js](https://nodejs.org/en/download/) and npm, and an editor such as [Visual Studio Code](https://code.visualstudio.com/). - A DS Server that is installed, licensed and reachable from the browser, as the [Installation Guide](https://docs.textcontrol.com/ds-server/installation/llms-full.txt) and [Licensing](https://docs.textcontrol.com/ds-server/administration/licensing/llms-full.txt) describe. The samples use `http://localhost:5000`. With a trial token instead, skip the next section, use `https://trial.dsserver.io` as the service URL and the client ID and secret of the token; see [Trial Token](https://docs.textcontrol.com/ds-server/getting-started/trial-token/llms-full.txt). The package version 5.0.0 requires React 19 and DS Server 5.0. ### Prepare a Security Profile With a client ID and a client secret, the component requests its access token from the browser with the client credentials grant type. The security profile must allow this grant type, which is off by default. 1. In the admin portal of DS Server, choose **Security Profiles**, click **+ Create new profile**, enter a name and click **Create**. 2. Copy the **Client ID** and the **Client Secret** of the new profile. 3. Switch on **Allow "Client Credentials" grant type** and click **Done**. ![The Authorized Redirect URIs list of a security profile and, below it, the Allow Client Credentials grant type switch turned on in green.](https://docs.textcontrol.com/assets/img/ds-server/portal-client-credentials.221d7483.webp) Any visitor of the page can read client credentials that are part of its JavaScript. Use them for development. For production, pass an access token that your server requested, as [Use an Access Token](#use-an-access-token) shows. ### Create the React Application 1. Open a command prompt and create a new React application with Vite: ```bash npm create vite@latest my-ds-editor-app ``` Select **React** as the framework and **JavaScript** as the variant, keep the default linter and answer **No** to *Install with npm and start now?*, because the next steps install the packages. 2. Change to the new folder and install the dependencies: ```bash cd my-ds-editor-app npm install ``` 3. Install the Document Editor package: ```bash npm i @txtextcontrol/tx-react-ds-document-editor ``` ### Add the Editor Component Open *src/App.jsx*, replace its complete content with the following code and save the file. Replace the service URL, the client ID and the client secret with your values. ```jsx import DocumentEditorPackage from '@txtextcontrol/tx-react-ds-document-editor'; // Vite 8 returns the CommonJS module for a default import const DocumentEditor = DocumentEditorPackage.default ?? DocumentEditorPackage; function App() { function handleLoad() { // wait until the editor is ready TXTextControl.addEventListener('textControlLoaded', () => { TXTextControl.selection.setText('Welcome to DS Server'); }); } return ( ', clientSecret: '' }} onLoad={handleLoad} /> ); } export default App; ``` #### What the Code Does - The package is a CommonJS module. Since Vite 8, the default import of such a module returns the whole module object in a project whose *package.json* sets `"type": "module"`, as the Vite template does. The code takes the component from its `default` property; with `??`, it works with earlier Vite versions too. A plain `import DocumentEditor from '@txtextcontrol/tx-react-ds-document-editor'` makes React report an invalid element type under Vite 8. - `style` sets the size of the editor. `serviceURL` is the address of DS Server and must start with `http://` or `https://`. - `authSettings` holds the credentials of the security profile, or an `accessToken`. - `onLoad` runs as soon as the editor script is loaded and the global [`TXTextControl`](https://docs.textcontrol.com/ds-server/reference/javascript/txtextcontrol/llms-full.txt) object exists. The handler waits for `textControlLoaded`, which fires when the editor is ready, and inserts text with [`selection.setText`](https://docs.textcontrol.com/ds-server/reference/javascript/selection/settext-method/llms-full.txt). [React](https://docs.textcontrol.com/ds-server/client-libraries/react/#documenteditor) in Client-Side Libraries lists every property, such as `editMode`, `userNames` and `culture`. ### Run the Application 1. In the command prompt, start the development server: ```bash npm run dev ``` 2. Open the address it prints, `http://localhost:5173` by default, in your browser. The page shows the Document Editor with its ribbon bar and the text "Welcome to DS Server". The React component has no property for a document. Load one in `onLoad`, after `textControlLoaded`, with [`loadDocument`](https://docs.textcontrol.com/ds-server/reference/javascript/txtextcontrol/loaddocument-method/llms-full.txt), and save it with [`saveDocument`](https://docs.textcontrol.com/ds-server/reference/javascript/txtextcontrol/savedocument-method/llms-full.txt). The ribbon of the DS Server editor has no **File** tab. ### Use an Access Token To keep the client secret on your server, request the access token there and pass it in `authSettings`. The component uses the token when it loads the editor, so render it only after the token has arrived. Replace the content of *src/App.jsx* with the following code, and `https://localhost:7143/api/token` with the address of your token endpoint: ```jsx import { useEffect, useState } from 'react'; import DocumentEditorPackage from '@txtextcontrol/tx-react-ds-document-editor'; // Vite 8 returns the CommonJS module for a default import const DocumentEditor = DocumentEditorPackage.default ?? DocumentEditorPackage; function App() { const [accessToken, setAccessToken] = useState(null); useEffect(() => { // request the access token from your own backend fetch('https://localhost:7143/api/token') .then(response => response.json()) .then(token => setAccessToken(token.access_token)); }, []); if (!accessToken) { return null; } return ( ); } export default App; ``` [Keep the Client Secret on Your Server](https://docs.textcontrol.com/ds-server/getting-started/document-editor/javascript/#keep-the-client-secret-on-your-server) shows an ASP.NET Core endpoint that returns the token. The Vite development server runs on another origin, so the endpoint must allow it with a CORS policy. Protect the endpoint, for example with the sign-in of your application, because anyone who can call it gets a token. ### Troubleshooting - **"Element type is invalid"** in the browser console: the plain default import returned the module object. Take the component from `default`, as the code above does. - **"DS Server is not registered."** The editor area stays gray and shows this message when the DS Server has no license. Register it in the admin portal, as [Licensing](https://docs.textcontrol.com/ds-server/administration/licensing/llms-full.txt) describes. - **`Could not retrieve OAuth token. Error: unsupported_grant_type`** in the browser console: the security profile doesn't allow the client credentials grant type. [Document Editor and Viewer](https://docs.textcontrol.com/ds-server/troubleshooting/editor-viewer/llms-full.txt) in Troubleshooting covers more problems. ### Next Steps - [React](https://docs.textcontrol.com/ds-server/client-libraries/react/llms-full.txt): every property of the React components. - [Document Editor JavaScript API](https://docs.textcontrol.com/ds-server/reference/javascript/llms-full.txt): the `TXTextControl` object and its methods and events. - [Document Viewer in React](https://docs.textcontrol.com/ds-server/getting-started/document-viewer/react/llms-full.txt): display documents in the same application. - [OAuth Grant Types](https://docs.textcontrol.com/ds-server/administration/oauth-grant-types/llms-full.txt): client credentials and authorization code. --- ## Nearby - **Previous:** [Angular](https://docs.textcontrol.com/ds-server/getting-started/document-editor/angular/llms-full.txt) - **Next:** [JavaScript](https://docs.textcontrol.com/ds-server/getting-started/document-editor/javascript/llms-full.txt)