React Word Processor | WYSIWYG Document Editor

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.

Why choose Syncfusion Essential Studio^® React Word Processor?

A high performance React Word Processor.

High performance

The React Word Processor has been designed and optimized for high performance.

React Word Processor MS word editor.

Microsoft-Word-like editor

The Word Processor is a feature-rich Word document editor component. With it, you can add a Microsoft Word-like word processing solution to your web application.

React Word Processor restrict editing.

Restrict editing

The Word Processor allows you to restrict editing. When a protected document has range permissions, only a unique user or user group is authorized to modify a separate text area.

React Word Processor comments.

Add notes using comments

You can add comments to documents using the Document Editor. In both the code and the UI, you may add, navigate, remove and mention others users.

React Word Processor track and review.

Track and review changes

The track changes feature keeps a record of changes and edits made to a document. Users can then accept or reject the changes. It is a useful tool for managing modifications made by multiple reviewers in the same document.

React Word Processor responsiveness.

Create and fill forms

The Word Processor has an intuitive UI for creating fillable forms in documents by inserting legacy form fields, just like Microsoft Word. Once the document is protected with the FormFieldsOnly restriction, users can fill out the form.

React Word Processor themes.

Attractive, customizable themes

Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the online Theme Studio tool to customize the themes of the word processor easily.

React Word Processor globalization.

Globalization and localization

Enable users from different locales to use the component by formatting dates, currency, and numbering to suit preferences.

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.

tsx
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'));

Open, edit, and save

The React Word Processor (Document Editor) provides a new native file format called Syncfusion Document Text (*.sfdt). It helps open, edit, and save the document purely on the client side.

An illustration of microsoft word compatibility.

Microsoft Word compatible

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

Word Editor NuGet

Import SFDT documents in React Word Processor.

Importing

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

Importing documentation

Export documents as SFDT, DOCX, and SFDT in React Word Processor.

Exporting

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

Exporting documentation

Collaborative editing

The React Word Processor allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.

More details on collaborative editing

Find and replace

The React Word Processor 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 documentation

Find and replace functionality in React Word Processor.

Printing

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

Print document using React Word Processor.

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.

Keyboard shortcuts documentation

Interactive, touch-friendly scrolling in React Word Processor.

Scrolling

Scroll multiple pages of a document rapidly.

Scrolling documentation

Interactive, touch-friendly zooming in React Word Processor.

Zooming

Interactively zoom in and zoom out the page contents. Users can easily change the view to fit a page or page width.

Zooming documentation

Seamless editing

The React Word Processor provides a 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 formatted content within the same document. Also paste plain text to and from other applications.

Clipboard documentation

Undo and redo in React Word Processor.

Undo and redo

Perform multiple levels of undo and redo operations.

Undo and redo documentation

Dialog in React Word Processor.

Dialog

Insert document elements and apply advanced formatting options with ease.

Dialog documentation

Context menu in React Word Processor.

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.

Interactive ruler in React Word Processor.

Ruler

The ruler provides options to precisely adjust margins, indentation, and tab stops, providing enhanced control over document formatting.

Interactive heading navigation in React Word Processor.

Navigating documents by heading allows users to move around the document very quickly.

Interactive change case in React Word Processor.

Change case

The change case functionality allows users to change the capitalization of the selected text without having to retype it.

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, and merge, or resize cells depending on their content.

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 breaks, page breaks, or section breaks to get the documents formatted better.

Hyperlink

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.

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

Headers and footers

Easily add page numbers, dates, or author’s name in 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.

Text formatting documentation

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 in React Word Processor.

Table formatting

Format the table with indent, alignment, cell margins and spacing, borders, shadings, row height, break rows 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.

Frequently Asked Questions

✅ Why should you choose Syncfusion Essential Studio® React Word Processor?

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.

✅ What is the price for Syncfusion React Word Processor?

We do not sell the React Word Processor separately. It is only available for purchase as part of the Syncfusion team license. This contains over 1,800 components and frameworks, including the React Word Processor. The price of the team license starts at $395 per month for 5 developers, and includes support and updates until the subscription expires. In addition, we might offer discounts based on currently active promotions. Please contact our product specialists today to see if you qualify for any additional discounts.

✅ Where can I find the Syncfusion React Word Processor demo?

You can find our React Word Processor demo, which demonstrates how to render and configure the Word Processor.

✅ Can I purchase the Syncfusion React Word Processor component separately?

No, our 1,800+ components and frameworks for web, mobile, and desktop, including our React Word Processor, are not sold individually. They are only available as part of a team license. 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 component 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 1,800+ components and frameworks for a subscription fee that starts at $395 per month for a team of 5 developers. Additionally, we might be able to offer discounts based on currently active promotions. Please contact our product specialists today to see if you qualify for any additional discounts.

✅ Can I download and utilize the Syncfusion React Word Processor for free?

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, 5 or fewer developers, and 10 or fewer total employees.

✅ How do I get started with Syncfusion React Word Processor?

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

Aweseome, enough said. really

Easy usability, solving real life problems. easy to implement. most of the cases has the operators and settings possibilities you right away need. never fails to impress

Oliver O,

Geschäftsführung Kreation/Artdirektion, Small-Business

A giant framework with great pricing options

I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.

Alejandro Javier V,

CEO, Small-Business

Learning

React Word Processor - A Comprehensive Document Editor Component

No credit card required.