We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The React Word Processor is a feature rich UI component with editing capabilities like Microsoft Word. Also known as the document editor, it is used to create, edit, view, and print Word documents. It provides all the common Word processing features including editing text, formatting contents, resizing images and tables, finding and replacing text, bookmarks, tables of contents, printing, and importing and exporting Word documents.

An overview of React Word Processor.


High performance

The React Word Processor (Document Editor) is designed and optimized for high performance.

Edit rich text contents fast in React Document Editor

Fast editing

All the word processing features are written in React that runs completely on client-side, providing faster editing .

React Word Processor is modular and lightweight

Lightweight

A set of built-in feature-wise modules helps build a lightweight word processor in applications without losing its loading speed.

React Document Editor virtualizes UI for high performance

Virtualization

Renders pages on demand. As a result, large documents are loaded instantly with minimal memory consumption.


Open, edit and save

The React Word Processor (Document Editor) provides a new native file format called Syncfusion Document Text (*.sfdt). It helps maintain document import and export purely on the client-side.

An illustration of Microsoft Word compatibility in React Word Processor.

Microsoft Word Compatible

Provides a .NET library that helps convert Word documents (DOCX, WordML, DOC, RTF, TXT) to SFDT format at server side.

Import SFDT documents in React Document Editor

Importing

Import the SFDT format document content from a local file or string.

Export documents as DOCX, SFDT in React Word Processor

Exporting

Export the document content to SFDT and DOCX formats as a blob or downloadable file.


Find and replace

The React Word Processor (Document Editor) comes with a Microsoft Word-inspired navigation pane. It provides intuitive UI options to search text, navigate between the results, and replace it with other text.

Find and replace functionality in React Word Processor/ Word Document Editor.


Printing

The React Word Processor (Document Editor) allows users to print an entire document or a specific page directly from the browser.

Print document using React Document Editor


User-friendly interactions

Enjoy a smooth and user-friendly experience for mouse, touch, and keyboard interfaces.

Intuitive, touch-friendly selection in React Word Processor

Selection

Flexible selection options using mouse, touch, or Microsoft Word like keyboard shortcuts.

Interactive, touch-friendly scrolling in React Word Processor

Scrolling

Scroll multiple pages of a document rapidly.

Interactive, touch-friendly zooming in React Word Processor

Zooming

Interactively zoom in and zoom out of the page contents.Easily change view to fit a page or page width.


Seamless editing

The React Word Processor provides seamless editing experience and offers intuitive and touch-friendly UI options like context menus, dialogs, and a navigation pane.

Cut, copy, and paste rich text in React Word Processor

Clipboard

Cut, copy, and paste of formatted content within the same document. Also paste plain text to and from other applications.

Undo and redo in React Document Editor

Undo and redo

Perform multiple levels of undo and redo operations.

Dialog in React Word Processor

Dialog

Insert document elements and apply advanced formatting options with ease.

Context menu in React Word Processor

Context menu

The context menu provides options to perform common editing actions. The list of actions is updated automatically based on the selection context.

Interactive image resizing in React Word Processor

Image resizing

Provides an awesome user experience to interactively resize an image using mouse or touch.

Interactive table resizing in React Word Processor

Table resizing

Adjust a row height or column width interactively.


Document elements

The React Word Processor includes all the commonly used document elements like text, images, tables, hyperlinks, bookmarks, table of contents, page fields, sections, headers, and footers.

Text

Create or edit documents with text in various languages.

Images

Easily browse for an image file or online image URL and insert text in line . Common raster image formats like PNG, BMP, JPEG, and GIF, are supported.

Table

Create simple or complex nested tables using built-in dialog. Also add or remove rows and columns, define header rows, merge, or resize cells depending on their contents.

Bookmarks

Mark a place in the document to find it again easily. Users can enter as many bookmarks as needed in the document and give each one a unique name to identify it.

Page fields

Add dynamic page numbers to a document that updates automatically.

Breaks

Use line break, page break, or section break to get the documents formatted better.

Link text for quick access to web page, file, email, bookmark, etc. Users can insert links using built-in dialog and Microsoft Word-inspired automatic conversion of text to link. Moreover, navigation can be customized to open the target from other applications.

Table of contents

Outline the headings in a document and easily navigate to it, and shows page numbers too. Users can customize it using built-in dialog.

Headers and footers

Easily add page numbers, dates, or author’s name at one place to be repeated at the top or bottom of each page. However, users can specify different headers or footers for the first page and odd and even pages of each section.


Formatting

The React Word Processor includes all the commonly used document formatting options.

Text formatting

Format text using bold, italics, underline, font family, size, color, highlight, subscript, superscript, and more.

Paragraph formatting

Format paragraphs with indentation, alignment, and spacing.

Bullets and numbering

Organize items or create an outline of a document with bullets and numbering. Both single and multilevel lists can be added.

Styles

Apply built-in styles to ensure consistency within a document. In addition, modify it or create custom styles. Both character and paragraph styles are supported.

Table formatting

Format the table with indent, alignment, cell margins and spacing, borders, shadings, row height, break row across pages, and more.

Page settings

Design the structure and layout of document pages in each section by customizing size, margins, header distance, footer distance, etc.


Localization

All the static texts in the user interfaces of the React Word Processor can be localized to any desired language.

Localize all static text of React Word Processor


React Word Processor Code Example

Easily get started with the React Word Processor using a few simple lines of TSX code example as demonstrated below. Also explore our React Word Processor Example that shows you how to configure the word processor in React.

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SampleBase } from './sample-base';
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
import { TitleBar } from './title-bar';

DocumentEditorContainerComponent.Inject(Toolbar);
// tslint:disable:max-line-length
export class Default extends SampleBase {
    constructor() {
        super(...arguments);
        this.hostUrl = 'https://ej2services.syncfusion.com/production/web-services/';
        this.onLoadDefault = () => {
            this.container.documentEditor.documentName = 'Getting Started';
            this.titleBar.updateDocumentTitle();
            this.container.documentChange = () => {
                this.titleBar.updateDocumentTitle();
                this.container.documentEditor.focusIn();
            };
        };
    }
    rendereComplete() {
        this.container.serviceUrl = this.hostUrl + 'api/documenteditor/';
        this.container.documentEditor.pageOutline = '#E0E0E0';
        this.container.documentEditor.acceptTab = true;
        this.container.documentEditor.resize();
        this.titleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), this.container.documentEditor, true);
        this.onLoadDefault();
    }
    render() {
        return (<div className='control-pane'>
            <div className='control-section'>
                <div id='documenteditor_titlebar' className="e-de-ctn-title"></div>
                <div id="documenteditor_container_body">
                    <DocumentEditorContainerComponent id="container" ref={(scope) => { this.container = scope; }} style=display height={'590px'} enableToolbar={true} locale='en-US'/>
                </div>
            </div>
            <script>{window.onbeforeunload = function () {
            return 'Want to save your changes?';
        }}
            </script>
        </div>);
    }
}

render(<Default />, document.getElementById('sample'));

Other supported frameworks

Word Processor component is also available in Blazor, Vue, Angular, and JavaScript frameworks. Check out the different Word Processor platforms from the links below,




65+ REACT UI COMPONENTS

Frequently Asked Questions

  • Experience seamless and Microsoft Word like WYSIWYG editing capabilities.
  • Compatible with Microsoft Word file formats (DOC, DOCX) and other formats such as RTF and SFDT (Syncfusion Document Text) format files.
  • Offers highly intuitive user interfaces.
  • Designed and optimized for high performance in every aspect.
  • One of the best React Word Processor in the market that offers feature-rich UI to interact with the software.
  • Simple configuration and API.
  • Supports all modern browsers.
  • Mobile-touch friendly and responsive.
  • Expansive learning resources such as demos and documentation to learn quickly and get started with React Word Processor.

We do not sell the React Word Processor separately. It is only available for purchase as part of the Syncfusion React suite, which contains over 70 React components, including the Word Processor. A single developer license for the Syncfusion Essential Studio for React suite costs $995.00 USD, including one year of support and updates. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

You can find our React Word Processor demo here.

No, our 70 React components, including Word Processor, are not sold individually, only as a single package. However, we have competitively priced the product so it only costs a little bit more than what some other vendors charge for their Word Processor alone. We have also found that, in our experience, our customers usually start off using one of our products and then expand to several products quickly, so we felt it was best to offer all 70 React components for a flat fee of $995/developer. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team today to see if you qualify for any additional discounts.

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

A good place to start would be our comprehensive getting started documentation.

Read independent,
authenticated reviews
on G2

Download Now Pricing

What do our customers say about us?

double quotes

We're using the file formats and Windows/JavaScript list controls a lot. They're fast, easy to use, and the documentation is good and contains examples. Tickets with questions or suggestions were answered within a day, so we're happy to use the Syncfusion libraries.
Daniel Persidok

Daniel Persidok

wpd onshore GmbH & Co. KG

double quotes

Using Syncfusion Angular and JavaScript controls makes front-end web development a piece of cake. Each component has many properties that can be configured as per your desire, methods that can be used to interact with the element, and a lot of events that trigger at different stages, which makes modifying your components according to the state of the application an easy task. Also, their support is amazing! They always offer a sample working project, which makes it very simple to solve your question about your code.
Carlos Rodriguez Garcia

Carlos Rodriguez Garcia

Vistatec

Transform your applications today by downloading our free evaluation version Download Free Trial

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile