10+ React Rich Text Editors

Slate - A completely customizable framework for building rich text editors.

Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs—which are becoming table stakes for applications on the web—without your codebase getting mired in complexity.

The editor's "schema" was hardcoded and hard to customize. Things like bold and italic were supported out of the box, but what about comments, or embeds, or even more domain-specific needs?
Transforming the documents programmatically was very convoluted. Writing as a user may have worked, but making programmatic changes, which is critical for building advanced behaviors, was needlessly complex.
Serializing to HTML, Markdown, etc. seemed like an afterthought. Simple things like transforming a document to HTML or Markdown involved writing lots of boilerplate code, for what seemed like very common use cases.
Re-inventing the view layer seemed inefficient and limiting. Most editors rolled their own views, instead of using existing technologies like React, so you have to learn a whole new system with new "gotchas".
Collaborative editing wasn't designed for in advance. Often the editor's internal representation of data made it impossible to use to for a realtime, collaborative editing use case without basically rewriting the editor.
The repositories were monolithic, not small and reusable. The code bases for many of the editors often didn't expose the internal tooling that could have been re-used by developers, leading to having to reinvent the wheel.
Building complex, nested documents was impossible. Many editors were designed around simplistic "flat" documents, making things like tables, embeds and captions difficult to reason about and sometimes impossible.

Demo GitHub

Draft.js - a React framework for building text editors.

Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.

Extensible and Customizable: We provide the building blocks to enable the creation of a broad variety of rich text composition experiences, from basic text styles to embedded media.
Declarative Rich Text: Draft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API.
*Immutable Editor State: * The Draft.js model is built with immutable-js, offering an API with functional state updates and aggressively leveraging data persistence for scalable memory usage. Demo GitHub

React Draft Wysiwyg

A Wysiwyg editor built using ReactJS and DraftJS libraries.

Configurable toolbar with option to add/remove controls.
Option to change the order of the controls in the toolbar.
Option to add custom controls to the toolbar.
Option to change styles and icons in the toolbar.
Option to show toolbar only when editor is focused.
Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.
Support for block types: Paragraph, H1 - H6, Blockquote, Code.
Support for setting font-size and font-family.
Support for ordered / unordered lists and indenting.
Support for text-alignment.
Support for coloring text or background.
Support for adding / editing links
Choice of more than 150 emojis.
Support for mentions.
Support for hashtags.
Support for adding / uploading images.
Support for aligning images, setting height, width.
Support for Embedded links, flexibility to set height and width.
Option provided to remove added styling.
Option of undo and redo.
Configurable behavior for RTL and Spellcheck.
Support for placeholder.
Support for WAI-ARIA Support attributes
Using editor as controlled or un-controlled React component.
Support to convert Editor Content to HTML, JSON, Markdown.
Support to convert the HTML generated by the editor back to editor content.
Support for internationalization.

Demo GitHub

Quill Rich Text Editor

Quill is a free, open source WYSIWYG editor built for the modern web. With its extensible architecture and a expressive API you can completely customize it to fulfill your needs. Some built in features include:

Fast and lightweight
Semantic markup
Standardized HTML between browsers
Cross browser support including Chrome, Firefox, Safari, and IE 9+

Demo GitHub

React Email Editor

Drag-n-Drop Email Editor Component for React.js.The excellent drag-n-drop email editor by Unlayer as a React.js wrapper component. This is the most powerful and developer friendly visual email builder for your app.

editorId String HTML div id of the container where the editor will be embedded (optional)
style Object style object for the editor container (default {})
minHeight String minimum height to initialize the editor with (default 500px)
onLoad Function called when the editor instance is created
onReady Function called when the editor has finished loading
options Object options passed to the Unlayer editor instance (default {})
tools Object configuration for the built-in and custom tools (default {})
appearance Object configuration for appearance and theme (default {})
projectId Integer Unlayer project ID (optional)

Demo GitHub

Monaco Editor for React

Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins .

Besides types, the library exports Editorand DiffEditor components, as well as the loader utility and the useMonaco hook:

import Editor, { DiffEditor, useMonaco, loader } from "@monaco-editor/react";

Demo GitHub

Alloy Editor

Alloy Editor is a modern WYSIWYG editor built on top of CKEditor, designed to create modern and gorgeous web content.

Smart toolbars appear right near the selected text and offer different functionality based on context
Easily add your own buttons (see the "marquee" example in the docs)
Paste images from clipboard, or Drag&Drop them from another application
Insert images from the device's camera!
Paste rich text from any web page and preserve its formatting
The full styling power of CKEditor...
...with a much more modern UI
The core is fully separated from the UI
The example UI is built with React
Plugin architecture

Demo GitHub

react-contenteditable

React component for a div with editable contents.



import React from 'react'
import ContentEditable from 'react-contenteditable'

class MyComponent extends React.Component {
  constructor() {
    super()
    this.contentEditable = React.createRef();
    this.state = {html: "<b>Hello <i>World</i></b>"};
  };

  handleChange = evt => {
    this.setState({html: evt.target.value});
  };

  render = () => {
    return <ContentEditable
              innerRef={this.contentEditable}
              html={this.state.html} // innerHTML of the editable div
              disabled={false}       // use true to disable editing
              onChange={this.handleChange} // handle innerHTML change
              tagName='article' // Use a custom HTML tag (uses a div by default)
            />
  };
};

Demo GitHub

Megadraft -A Rich Text editor

Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility.



import React from "react";
import ReactDOM from "react-dom";
import {MegadraftEditor, editorStateFromRaw} from "megadraft";

//Import megadraft.css
import 'megadraft/dist/css/megadraft.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: editorStateFromRaw(null)};
  }

  onChange = (editorState) => {
    this.setState({editorState});
  }

  render() {
    return (
      //Add some margin left to show plugins sidebar
      <div style={{marginLeft: 80}}>
        <MegadraftEditor
          editorState={this.state.editorState}
          onChange={this.onChange}
          placeholder='Add some text'/>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

Demo GitHub

react-web-editor

The react-web-editor is a WYSIWYG editor library. you can resize and drag your component. It also has simple rich text editor.

The React Web editor is a library that provides and hooks of components that can dynamically change ui.
It supports features like Resizing, Draggable, and Drag and Drop, You can also upload a image dynamically, and styling component's color and text.
The coordinates tag, which shows where the current components are located, and the guide line, which tells you if the current components are centralized, are built into the block-type components.
Ultimatly, You can make a editor page which can change web's UI dynamically.

Demo GitHub