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.
Unfortunately, activation email could not send to your email. Please try again.

Overview

The Document Editor for React 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, table of contents, printing, and importing and exporting Word documents. It helps you add a WYSIWYG and Microsoft Word-compatible, HTML5-based, online Word processor to your web applications.


High performance

The Document Editor is designed and optimized for high performance in every aspect.

Edit rich text contents faster in React Document Editor

Fast editing

All the document editing and formatting functionalities are written in JavaScript that runs completely in client-side and provides a fast editing experience.

React Document Editor is modular and lightweight

Lightweight

Each independent functionality is defined as a separate module. This helps in building a lightweight document editor in your application without losing loading speed.

React Document Editor virtualizes UI for high performance

Virtualization

The virtualized page-rendering approach renders the pages on demand and helps reduce the initial load time and memory consumption when working with large documents.


User interaction

The Document Editor provides intuitive and touch-friendly UI options like context menu, dialogs, and navigation panes.

Interactive, touch-friendly zooming in React Document Editor

Zooming

Interactively zoom in and zoom out of the page contents through touch, mouse, and keyboard.

Interactive, touch-friendly scrolling in React Document Editor

Scrolling

You can scroll among the document pages rapidly through touch, mouse, and keyboard.

Context menu in React Document Editor

Context menu

The context menu comes with all common word processing features. The list of actions is updated automatically based on the selection context.

Dialog in React Document Editor

Dialogs

Enhance the user experience with the help of dialogs for inserting document elements and advanced formatting options.

Interactive image resizing in React Document Editor

Image resizing

Our Document Editor provides an awesome user experience for resizing images. It works interactively with both touch and mouse.

Interactive image resizing in React Document Editor

Table resizing

The rows and columns of a table can be resized interactively.


Seamless editing

Enjoy a smooth and responsive editing experience for mouse, touch, and keyboard interfaces. It runs completely in client-side and facilitates the users testing their typing speed.

Intuitive, touch-friendly selection in React Document Editor

Selection

Flexible selection options through touch, mouse, and keyboard that enhance the editing experience.

Cut, copy, and paste rich text in React Document Editor

Clipboard

Cut, copy, and paste formatted content within the same document. Also, you can 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.


Find and replace

The Document Editor comes with built-in find and replace functionality, which facilitates the user navigating and modifying text within a document. The Microsoft Word-inspired navigation pane provides intuitive UI options to search text and navigate through search results.


Document elements

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

Text

Allows the user to create or edit documents with text in various languages.

Images

Easily browse for an image file and insert it into the editor with text. The Document Editor control supports all common raster image formats like PNG, BMP, JPEG, and GIF.

Tables

Create simple or complex nested tables with rich formatting options like indent, alignment, cell margins and spacing, borders, shadings, repeat header row, break row across pages, etc. Users can add or remove cells and rows and merge or resize cells depending on their contents.

Easily create a link in a document for quick access to webpages, files, email, bookmarks, etc., through a built-in dialog and Microsoft Word-inspired automatic conversion of text to link. Navigation can also be customized programmatically to open the target from other applications.

Bookmarks

Easily insert a bookmark to identify a part of the document for future reference. Navigate to an existing bookmark in the document interactively through a built-in dialog.

Table of contents

Easily add a table of contents (TOC) in the document to outline its content. A built-in dialog provides intuitive options to choose heading and custom styles, and include page numbers and hyperlinks for easy navigation. After modifying an existing document, the user can update the TOC through a context menu option.

Page fields

Add dynamic page numbers to a document that update automatically.

Headers and footers

Easily open and edit header and footer content by double-clicking or double-tapping over the header or footer area. Users can specify different headers and footers for the first page, odd pages, and even pages of each section. They can be added with any content like text, images, page numbers, etc.


Formatting

The Document Editor includes all the commonly used document formatting options.

Text formatting

Customize the appearance of the text with text-level formatting like font family, size, style (bold, italic, underline), strikethrough, text color, highlight, subscript, superscript.

Paragraph formatting

Customize the appearance of a paragraph with paragraph-level formatting like indent, alignment, spacings.

Bullets and numbering

Organize items or create an outline of the document with bullets and numbering ranging from a single-level to multilevel lists.

Page settings

Design the structure and layout of document pages with several properties like size, margins, orientation, header distance, and footer distance.

Styles

The user can create, edit, and apply styles to ensure consistency within a document, like in Microsoft Word. The Document Editor control supports both character and paragraph styles.


Supported file formats

The Document Editor facilitates developers in adding Microsoft Word-inspired word processing capabilities to their applications. It introduces a new native Syncfusion Document Text (*.sfdt) file format, which favors maintaining the document import and export functionalities in client-side.

Import DOCX, DOC, RTF, TXT, WordML, SFDT documents in React Document Editor

Importing

Import the document content from SFDT formats purely in client-side. The Document Editor control ships with a server-side helper library that converts text documents (DOCX, WordML, DOC, RTF, TXT) to SFDT format. You can also customize document imports programmatically to open the documents from other applications.

Export documents as DOCX, SFDT in React Document Editor

Exporting

Export the document content to SFDT and DOCX formats purely in client-side. The exported documents can also be customized programmatically. This allows documents from the Document Editor to be used in other applications.


Printing

Print the rendered document pages directly from the browser. The end user can choose to print the entire document or a specific page interactively.

Print document using React Document Editor


Localization

All the Document Editor strings in the user interface can be localized as needed. The Document Editor uses the Essential JS 2 localization library to localize the strings.

Localize all static text of React Document Editor


45+ REACT COMPONENTS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

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.