Embed A DOCX Editor In React Application

Updated on Sep 17, 2025

This repository contains example how to seamlessly embed the powerful Syncfusion® DOCX Editor into a React application. It showcases rich Word document (DOCX) editing and rendering directly within the browser, entirely free from Microsoft Word or Office interop dependencies.

How to run the application

Clone the repository to your local machine.
Install Dependencies Install the required npm packages for the project.
```
npm install
```
Run the Web Service The Syncfusion Document Editor requires a server-side backend for processing Word documents. You can run the web service from either of the following sources:
- GitHub Source: Clone and run the ASP.NET Core Web Service example.
- Docker Image: Use the pre-built Docker image.
Once your web service is running, update the serviceUrl property in src/App.tsx to point to its endpoint.
```
// In src/App.tsx
<DocumentEditorContainerComponent 
    serviceUrl="http://localhost:62869/api/documenteditor/" 
    height={'100vh'}
    enableToolbar={true} 
/>
```
Run the Application Start the React development server.
```
npm start
```
This will open the application in your default web browser, typically at http://localhost:3000.

Resources

Product page: Syncfusion® React Word Processor
Documentation: Syncfusion® Word Processor
Online demo: Syncfusion® Word Processor - Demo

Support and feedback

For any other queries, reach our Syncfusion® support team or post the queries through the community forums.

Request new feature through Syncfusion® feedback portal.

License

This is a commercial product and requires a paid license for possession or use Syncfusion's licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. You can purchase a licnense here or start a free 30-day trial here.