Embed An Editable Word Document On A Web Page

Updated on Sep 22, 2025

This repository contains an example of how to embed an editable Word document on a web page using the Syncfusion DOCX Editor in 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.