Getting started with React DOCX Editor

21 Jul 20266 minutes to read

React DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a React application.

Prerequisites

Create a new React application

To set up a React application in a TypeScript environment, run the following commands:

npm create vite@latest documenteditor-app -- --template react-ts
cd documenteditor-app

Install the React DOCX Editor npm package

The DOCX Editor package is available in the public npm registry and can be installed directly from npmjs.com.

To install the DOCX Editor component, use the following command:

npm install @syncfusion/ej2-react-documenteditor --save

Register a Syncfusion License Key

Before initializing the React DOCX Editor control, generate a Syncfusion license key and register it in your application.

Import the required CSS styles

Add the DOCX Editor component and its dependent component styles available in the node_modules/@syncfusion package folder. Reference these styles in the src/index.css file.

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-react-documenteditor/styles/tailwind3.css';

NOTE

This example uses the Tailwind 3 theme. To use a different built-in theme, replace the tailwind3.css references with the corresponding theme stylesheets. Refer to the Themes documentation for information about the available themes and the different ways to include theme styles in a React application.

Initialize the DOCX Editor

Add the DOCX Editor component to your application. In the src/App.tsx file, add the following code to initialize the component:

import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);

function App() {
  return (
<DocumentEditorContainerComponent 
            id="container" 
            height="590px" 
            // Use the following service URL only for demo purposes
            serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
            enableToolbar={true}
        />
  );
}

export default App;

NOTE

The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the GitHub Web Service example or the Docker image.

Run the application

Run the application using the following command:

npm run dev

Prerequisites

Create a new React application

To set up a React application in a JavaScript environment, run the following commands:

npm create vite@latest documenteditor-app -- --template react
cd documenteditor-app

Install the React DOCX Editor npm package

The DOCX Editor package is available in the public npm registry and can be installed directly from npmjs.com.

To install the DOCX Editor component, use the following command:

npm install @syncfusion/ej2-react-documenteditor --save

Register a Syncfusion License Key

Before initializing the React DOCX Editor control, generate a Syncfusion license key and register it in your application.

Import the required CSS styles

Add the DOCX Editor component and its dependent component styles available in the node_modules/@syncfusion package folder. Reference these styles in the src/index.css file:

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-react-documenteditor/styles/tailwind3.css';

Initialize the DOCX Editor

Add the DOCX Editor component to your application. In the src/App.jsx file, add the following code to initialize the component:

import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);

function App() {
    return (
        <DocumentEditorContainerComponent 
            id="container" 
            height="590px" 
            // Use the following service URL only for demo purposes
            serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
            enableToolbar={true}
        />
    );
}

export default App;

NOTE

The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the GitHub Web Service example or the Docker image.

Run the application

Run the application using the following command:

npm run dev

After the application starts, open the localhost URL shown in the terminal. The React DOCX Editor is rendered in the browser with a toolbar and an editable document area, as shown below.

Output of React DOCX Editor

You can also explore the DOCX Editor interactively using the live sample below.

NOTE

View Sample in GitHub.

Online Demo

Explore how to create, edit, and print Word documents using the React DOCX Editor in this live demo here.

Video tutorial

Follow this quick walkthrough to install, configure, and start using the React DOCX Editor in your application.

Server-side dependencies

The DOCX Editor component requires server-side interactions for the following operations:

  • Open file formats other than SFDT
  • Paste with formatting
  • Restrict editing
  • Spell check
  • Save as file formats other than SFDT and DOCX

NOTE

If you don’t require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.

For detailed information about server-side dependencies, refer to the Web Services Overview page.

NOTE

Looking for the full React DOCX Editor component overview, features, pricing, and documentation? Visit the React DOCX Editor page.

See also