Can you open and edit Word document in browser in React DOCX Editor?
Yes, you can open and edit Word documents directly in the browser by using the Syncfusion® React DOCX Editor component. This dedicated UI component provides a rich, Word-like editing experience, enabling users to create, edit, view, and print Word documents (DOCX, WordML, DOC, RTF) directly in the browser, and can be easily integrated with server APIs to load and save documents.
This article provides a step-by-step guide to open and edit Word documents directly in the browser using Syncfusion® React DOCX Editor.
Prerequisites
Before starting, ensure your development environment meets the following requirements:
• Node.js: Version 14.0.0 or above
• React: Version 15.5.4 or higher.
For detailed system requirements, refer to the documentation.
Step-by-step guide to open and edit Word documents in the browser
Before opening the document, you should embed a Syncfusion® DOCX Editor in React.
Step 1: Create or use a React application
To embed a Syncfusion® DOCX Editor in your React application, you first need an existing application or create a new React application. Refer to the documentation to create a new React application.
Step 2 : Install the Syncfusion® DOCX Editor package
All the Syncfusion® React component packages are available in npmjs.com public registry. To install the Syncfusion® DOCX Editor component, use the following command
npm install @syncfusion/ej2-react-documenteditor --save
Step 3: Add the required CSS styles
• For the editor to render correctly, you must import its stylesheet. The simplest way to do this is to add the import statement to your src/App.css file.
• Open src/App.css and add the following lines at the top:
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-documenteditor/styles/material.css';
@import '../node_modules/@syncfusion/ej2-ribbon/styles/material.css';
Step 4: Add the DOCX Editor to a React Component
• Now that the Syncfusion® DOCX editor packages are installed and styles are imported, you can add the Syncfusion® DOCX editor to your React application. You will typically replace the default content of your src/App.tsx with the DocumentEditorContainer Component.
• Open your src/App.tsx file and replace its content with the following code:
import * as React from 'react';
import './App.css';
import { DocumentEditorContainerComponent, Ribbon, Toolbar } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar, Ribbon);
const Default = () => {
let container = React.useRef(null);
// Initialize the DOCX Editor Container with Ribbon mode enabled
return (
<div className="control-pane">
<div className="control-section">
<div id="documenteditor_container_body">
<DocumentEditorContainerComponent
id="container"
ref={container}
height={'590px'}
toolbarMode="Ribbon" // Options: 'Ribbon' or 'Toolbar'
enableToolbar={true}
locale="en-US"
/>
</div>
</div>
</div>
);
};
export default Default;
Step 5 : Add the license key
From v20.1.047 onwards, it is necessary to register a license key for Syncfusion® React components. For more information on obtaining and registering your license key, please refer to the documentation.
Step 6 : Initial client-side view
At this point, if you run your React application without a connected server, you will see the Syncfusion® DOCX Editor’s UI, but it might not fully function until the serviceUrl points to a live backend.
Open your terminal in the React project directory and run:
npm start
Step 7: Web API for importing Word documents
As the Syncfusion® DOCX Editor component client-side script requires the document in SFDT file format, you can convert the Word documents (DOCX, WordML, DOC), rich text format documents (RTF), and text documents (TXT) into SFDT format by using this Web API.
Create an ASP.NET Core Web API with the following example code for importing Word documents into Syncfusion® DOCX Editor component.
[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
[Route("Import")]
public string Import(IFormCollection data)
{
if (data.Files.Count == 0)
return null;
Stream stream = new MemoryStream();
IFormFile file = data.Files[0];
int index = file.FileName.LastIndexOf('.');
string type = index > -1 && index < file.FileName.Length - 1 ?
file.FileName.Substring(index) : ".docx";
file.CopyTo(stream);
stream.Position = 0;
//Hooks MetafileImageParsed event.
WordDocument.MetafileImageParsed += OnMetafileImageParsed;
WordDocument document = WordDocument.Load(stream, GetFormatType(type.ToLower()));
//Unhooks MetafileImageParsed event.
WordDocument.MetafileImageParsed -= OnMetafileImageParsed;
string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
document.Dispose();
return json;
}
Refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use it for the serviceUrl property.
Step 8: Add service URL
Once your ASP.NET Core Web API service is running (e.g., http://localhost:62870/api/documenteditor/), update the serviceUrl property in your src/App.tsx file to point to this URL.
import * as React from 'react';
import './App.css';
import { DocumentEditorContainerComponent, Ribbon, Toolbar } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar, Ribbon);
const Default = () => {
let hostUrl = "http://localhost:62870/api/documenteditor/";
let container = React.useRef(null);
// Initialize the DOCX Editor Container with Ribbon mode enabled
return (
<div className="control-pane">
<div className="control-section">
<div id="documenteditor_container_body">
<DocumentEditorContainerComponent
id="container"
ref={container}
height={'590px'}
toolbarMode="Ribbon" // Options: 'Ribbon' or 'Toolbar'
serviceUrl={hostUrl}
enableToolbar={true}
locale="en-US"
/>
</div>
</div>
</div>
);
};
export default Default;
Step 9: Run the application
To see the Syncfusion® DOCX Editor in action with a functioning backend, ensure your Web API service is running, then run your React application.
• Start your Web API service
• Run your React application: Open your terminal in the React project directory and run:
npm start
Your browser will open to http://localhost:3000, displaying a fully functional Syncfusion® DOCX Editor embedded in your React application, ready to interact with your server for document processing.
Step 10: Opening a document
Click the Open button as shown in the image, then locate the document you want to open in File Explorer.
Now, the file opens as shown in the screenshot below.
Step 11: Editing a Document in the browser
You can easily edit the document directly in the browser. For example, to apply bold formatting, select the text you want to format, then click the Bold icon on the ribbon. The selected text will now appear in bold.
You can download a complete working sample of the open and edit Word documents directly in the browser from GitHub.
Conclusion
I hope you enjoyed learning about open and edit Word document in browser in React Docx Editor.
You can refer to our React DOCX Editor feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React DOCX Editor example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
