HelpBot Assistant

How can I help you?

Getting started with React Document editor component

13 Feb 202621 minutes to read

This section explains the steps to create a Word document editor within your application and demonstrates the basic usage of the Document editor component.

To get started quickly with DocumentEditor component, you can check the video below.

Prerequisites

System requirements for Syncfusion^® Document editor

Dependencies

The following list shows the minimum dependencies required to use the Document editor component:

|-- @syncfusion/ej2-react-documenteditor
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-build
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-splitbuttons
    |-- @syncfusion/ej2-documenteditor
    |-- @syncfusion/ej2-charts

Server-side dependencies

The Document editor component requires server-side interactions for the following operations:

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.

Setup for local development

To easily set up a React application, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a React application using create-react-app, refer to this documentation for more details.

Create a new React application

To create a new React application, run the following command:

npm create vite@latest my-app

Set up TypeScript environment

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

npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

Set up JavaScript environment

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

npm create vite@latest my-app -- --template react
cd my-app
npm run dev

Adding Syncfusion^® packages

All available Essential^® JS 2 packages are published in npmjs.com public registry.
You can choose the component that you want to install.

To install the Document editor component, use the following command:

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

Note: The --save flag instructs npm to include the Document editor package inside the dependencies section of the package.json file.

Adding CSS reference

Add the Document editor component and its dependent component styles available in the node_modules/@syncfusion package folder. Reference these styles in the src/App.css file:

@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";

Note: To learn about individual component CSS files, refer to the Individual Component theme files section.

Choosing a component

DocumentEditorContainer: A complete solution with a predefined toolbar and properties pane for comprehensive document editing
DocumentEditor: A customizable component where you build the UI according to your specific requirements

Note: Starting from version v19.3.0.x, the text size measurement accuracy has been optimized to match Microsoft Word pagination for most documents. This improvement is enabled by default. You can disable it to retain the pagination behavior of older versions if needed.

DocumentEditorContainer component

The DocumentEditorContainer component provides a complete document editing experience with a predefined toolbar and properties pane, allowing users to create, view, and edit Word documents with minimal configuration.

Adding DocumentEditorContainer component

Add the DocumentEditorContainer 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'} 
            serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
            enableToolbar={true}
        />
    );
}

export default App;

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ used in the Document editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, host your own web service with the required server configurations. Refer to the GitHub Web Service example or use the Docker image for hosting your own web service.

Run the DocumentEditorContainer application

Run the following command in the console to start the development server:

npm run dev

The DocumentEditorContainer output will be displayed as follows:

app.jsx
app.tsx
app.html
import { createRoot } from 'react-dom/client';
import * as React from 'react';
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
function Default() {
    return (<DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true}/>);
}
export default Default;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<Default />);
import { createRoot } from 'react-dom/client';
import * as React from 'react';
import {
    DocumentEditorContainerComponent, Toolbar
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
function Default() {
    return (
    <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true} />);
}
export default Default
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<Default />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/fabric.css" rel="stylesheet" />   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

DocumentEditor component

The DocumentEditor component provides a flexible foundation for creating, viewing, and editing Word documents. Unlike DocumentEditorContainer, this component allows you to customize the UI options based on your specific requirements.

Adding DocumentEditor component

Add the DocumentEditor component to your application. In the src/App.tsx file, add the following code to initialize the component with the required services:

import * as React from 'react';
import { 
    DocumentEditorComponent, 
    Print, 
    SfdtExport, 
    WordExport, 
    TextExport, 
    Selection, 
    Search, 
    Editor, 
    ImageResizer, 
    EditorHistory, 
    ContextMenu, 
    OptionsPane, 
    HyperlinkDialog, 
    TableDialog, 
    BookmarkDialog, 
    TableOfContentsDialog, 
    PageSetupDialog, 
    StyleDialog, 
    ListDialog, 
    ParagraphDialog, 
    BulletsAndNumberingDialog, 
    FontDialog, 
    TablePropertiesDialog, 
    BordersAndShadingDialog, 
    TableOptionsDialog, 
    CellOptionsDialog, 
    StylesDialog 
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorComponent.Inject(
    Print, 
    SfdtExport, 
    WordExport, 
    TextExport, 
    Selection, 
    Search, 
    Editor, 
    ImageResizer, 
    EditorHistory, 
    ContextMenu, 
    OptionsPane, 
    HyperlinkDialog, 
    TableDialog, 
    BookmarkDialog, 
    TableOfContentsDialog, 
    PageSetupDialog, 
    StyleDialog, 
    ListDialog, 
    ParagraphDialog, 
    BulletsAndNumberingDialog, 
    FontDialog, 
    TablePropertiesDialog, 
    BordersAndShadingDialog, 
    TableOptionsDialog, 
    CellOptionsDialog, 
    StylesDialog
);

function App() {
    return (
        <DocumentEditorComponent 
            id="container" 
            height={'330px'} 
            serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
            isReadOnly={false} 
            enablePrint={true} 
            enableSelection={true} 
            enableEditor={true} 
            enableEditorHistory={true} 
            enableContextMenu={true} 
            enableSearch={true} 
            enableOptionsPane={true} 
            enableBookmarkDialog={true} 
            enableBordersAndShadingDialog={true} 
            enableFontDialog={true} 
            enableTableDialog={true} 
            enableParagraphDialog={true} 
            enableHyperlinkDialog={true} 
            enableImageResizer={true} 
            enableListDialog={true} 
            enablePageSetupDialog={true} 
            enableSfdtExport={true} 
            enableStyleDialog={true} 
            enableTableOfContentsDialog={true} 
            enableTableOptionsDialog={true} 
            enableTablePropertiesDialog={true} 
            enableTextExport={true} 
            enableWordExport={true} 
        />
    );
}

export default App;

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ used in the Document editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, host your own web service with the required server configurations. Refer to the GitHub Web Service example or use the Docker image for hosting your own web service.

Run the DocumentEditor application

Run the following command to compile and start the application:

npm run dev

The Document editor output will be displayed as follows:

App.jsx
App.tsx
App.html
import { createRoot } from 'react-dom/client';
import * as React from 'react';
import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
function Default() {
    return (<DocumentEditorComponent id="container" height={'330px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true}/>);
}
export default Default;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<Default />);
import { createRoot } from 'react-dom/client';
import * as React from 'react';

import {
    DocumentEditorComponent, DocumentEditor, RequestNavigateEventArgs, ViewChangeEventArgs,
    Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory,
    ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog,
    PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog,
    TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog
} from '@syncfusion/ej2-react-documenteditor';


DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
function Default() {
    return (
        <DocumentEditorComponent id="container" height={'330px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" isReadOnly={false} enablePrint={true}
            enableSelection={true} enableEditor={true} enableEditorHistory={true}
            enableContextMenu={true} enableSearch={true} enableOptionsPane={true}
            enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true}
            enablePageSetupDialog={true} enableSfdtExport={true}
            enableStyleDialog={true} enableTableOfContentsDialog={true}
            enableTableOptionsDialog={true} enableTablePropertiesDialog={true}
            enableTextExport={true} enableWordExport={true} />
    );
}
export default Default
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<Default />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/fabric.css" rel="stylesheet" />   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Getting started with React Document editor component

Prerequisites

Dependencies

Server-side dependencies

Setup for local development

Create a new React application

Set up TypeScript environment

Set up JavaScript environment

Adding Syncfusion^® packages

Adding CSS reference

Choosing a component

DocumentEditorContainer component

Adding DocumentEditorContainer component

Run the DocumentEditorContainer application

DocumentEditor component

Adding DocumentEditor component

Run the DocumentEditor application

Frequently Asked Questions

How can I help you?

Getting started with React Document editor component

Prerequisites

Dependencies

Server-side dependencies

Setup for local development

Create a new React application

Set up TypeScript environment

Set up JavaScript environment

Adding Syncfusion® packages

Adding CSS reference

Choosing a component

DocumentEditorContainer component

Adding DocumentEditorContainer component

Run the DocumentEditorContainer application

DocumentEditor component

Adding DocumentEditor component

Run the DocumentEditor application

Frequently Asked Questions

Adding Syncfusion^® packages