This document organizes notes, sources, and other explorations in the pursuit of building a web-based text editor. My use cases do not seem to be typical. If you seek a rich text editor or a syntax editor, there are many great packages ready for you to integrate or build on.

Criteria

Must Have

  • WYSIWYG Rich Text
  • Data model supportive of lexing and parsing structured text
  • Apply updates to multiple nodes in a single transaction (e.g. changing sentence three changes how sentence six and nine are processed)
  • Multi-player
  • Open source and a licensing model which does not charge per user or session (e.g., not CKEditor)

Nice to Have

  • TypeScript

Really Nice to Have

  • Rust via WASM - Would serializing keystrokes be fast enough?

Sorted alphabetically:

Papers

Web-Based Text Editors written in JavaScript (or hopefully TypeScript)

Mobile Support

Many if not all editors have trouble with Android. Otherwise, support seems pretty good for the other devices.

Sorted alphabetically:

CodeMirror

CodeMirror is a long living project with great browser support. In 2019, the project is being rewritten from scratch in TypeScript to use the same techniques applied successfully in ProseMirror. CodeMirror is a great choice for code editors. No doubt, you’ve already used CodeMirror by changing code in your browser’s developer tools. The next version should support collaborative editing.

DraftJS

As of this writing, DraftJS is the most popular choice for a rich text editor for React applications. The editor is developed within Facebook and used for comments and other important features. DraftJS is slow to adopt community pull requests or tend to issues. Facebook seems to have shared DraftJS which is appreciated but does not have a keen interest in guiding the project for use cases outside of Facebook (which makes sense to me). The editor exposes operations one can leverage for collaborative editing and conflict management.

Editor.js

Editor.js is an easy to use single-player rich text editor with an easy to use API.

Etherpad-lite

Etherpad-lite is an opinionated text editor for real-time collaboration. Added for reference.

Medium Editor

Medium Editor is a popular WYSIWYG single-player rich text editor inspired by the popular Medium authoring experience.

ProseMirror

ProseMirror is a collection of packages which establish a foundation for programmers to build rich text editors. There are examples you can download to try out ProseMirror quickly; however, you should not expect to just plug-in ProseMirror and move onto the next task. If your use case has specific requirements for how the text editor works ProseMirror is a excellent choice. Used by the New York Times, Atlassian (prosemirror-utils, AtlasKit), and many other projects.

ProseMirror Plugins

Based on ProseMirror

  • CZI ProseMirror - “Rich Text Editor built with React and ProseMirror” from Chan Zuckerberg Initiative
  • PubPub Editor - “A stand alone, extensible WSIWYG editor based on ProseMirror”

Quill

Quill is an easy to use rich text editor with multi-player capabilities.

React ContentEditable

A reasonably simple demonstration of using contentEditable from a React application with more than a dozen contributors.

Simple React Code Editor

A simple code editor for those who want a simple drop-in experience.

Slate JS

SlateJS is easy to get started and has an intuitive API for manipulating a document. Slate has an active Slack community. As of this writing, Slate’s external API is pretty stable; however, the internals are going through a significant rewrite to drop ImmutableJS in favor of Immer.

Slate JS Plugins

Slate JS Fork

Built on Slate JS

Trix

Trix is a drop-in rich text editor by the folks at Basecamp.

Text Editors for Code

The following are less relevant for my use case; however, they are great projects. Reading their source has helped me learn a great deal.

Text Editor Experiments

The following are exciting experiments I found in my online travels:

  • Carota is an example of building a code editor using the HTML5 canvas tag which is definitely not recommended and the project has been abandoned (yet interesting).
  • TimeWriter is a demonstration of event sourcing to synchronize state between devices.

Rust Based Editors

  • edit-text - Alpha quality text editor written in Rust (WASM)
  • xray - Learning project to create a Rust based editor rendered in React and mostly by the GPU (WASM)

Non-Web Editors (Reference Only)