Getting Started with React DOCX Editor

19 Aug 20267 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

Install the Syncfusion CLI

Install the Syncfusion CLI globally using the following command:

npm install -g @syncfusion/syncfusion-cli

Set up the Vite project using Syncfusion CLI

You can create a React Vite application using the Syncfusion CLI. The CLI provides two ways to create a project:

Non-interactive mode

Non-interactive mode allows you to create a project directly using a single command with the required command-line arguments.

sf new syncfusion-react-app --framework react --template DOCX-Editor --theme tailwind3

In this mode, the project configuration is passed directly in the command. The above command creates a React Vite application configured with the Syncfusion® DOCX Editor component.

Interactive mode

Interactive mode guides you through the project creation process with step-by-step prompts.

sf

When you run the sf command, the CLI prompts you to select the required project configuration. To create a React Vite application with the Syncfusion® DOCX Editor component, select the following options:

√ Project name? ... Syncfusion-react-app
√ Choose Framework: » React
√ Choose Build Tool: » Vite
√ Choose Language: » JavaScript
√ Choose Template: » DOCX-Editor
√ Choose Theme: » Tailwind3
√ Choose Style Format: » CSS
√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no      
√ Install dependencies and start app now? ... no

The above selections generate a React Vite application configured with the Syncfusion® DOCX Editor component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your project requirements.

The Syncfusion® CLI creates the project with a predefined template. After the project is generated, you can customize or replace the component code based on your application requirements.

Run the project

Once the project is created, navigate to the project directory and run the following commands in your terminal.

cd syncfusion-react-app
npm install
npm run dev

The output will appear as follows:

Output of React DOCX Editor Using Syncfusion CLI

Prerequisites

Create a new React application

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

npm create vite@latest documenteditor-app -- --template react-ts
cd documenteditor-app
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

Themes for DOCX Editor can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example, sourced from the theme package. In this package, each component includes an index.css file that automatically loads all the required dependency styles. To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme

By default, Vite projects include a src/index.css file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the src/index.css file to prevent style conflicts.

The required styles for the DOCX Editor are imported in the src/index.css file:

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/document-editor/index.css";
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/document-editor-container/index.css";

Initialize the DOCX Editor

Add the DOCX Editor component to your application. 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;
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