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.
- 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)
- Open source and a licensing model which does not charge per user or session (e.g., not CKEditor)
Nice to Have
Really Nice to Have
- Rust via WASM - Would serializing keystrokes be fast enough?
- Atom’s new concurrency-friendly buffer implementation (Splay Trees)
- Code together in real time with Teletype for Atom
- Moving Atom to React
- The State of Atom’s Performance
- VS Code Text Buffer Reimplementation (Piece Table)
- Real Differences between OT and CRDT for Co-Editors or My Mirror
- Data Consistency for P2P Collaborative Editing $15
- High Responsiveness for Group Editing CRDTs
Many if not all editors have trouble with Android. Otherwise, support seems pretty good for the other devices.
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.
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 is an easy to use single-player rich text editor with an easy to use API.
Etherpad-lite is an opinionated text editor for real-time collaboration. Added for reference.
Medium Editor is a popular WYSIWYG single-player rich text editor inspired by the popular Medium authoring experience.
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.
- Rendered with React Nodes
- ProseMirror Dev Tools - Pretty awesome dev tools to help (me) write fewer console.log statements :)
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”
Other ProseMirror Links
- Learn ProseMirror - Not updated since 2016; Not sure how current
Quill is an easy to use rich text editor with multi-player capabilities.
A reasonably simple demonstration of using contentEditable from a React application with more than a dozen contributors.
A simple code editor for those who want a simple drop-in experience.
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 Deep Table
- Slate Edit Code
- Slate Entity Labeler
- Slate Instant Replace
- Slate Prism (code)
- Slate Sensible Plugin
Slate JS Fork
- GitBook’s Fork which is probably not for you
Built on Slate JS
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.
- Atom is designed to be a hackable editor.
- Brackets is built on CodeMirror
- Nuclide is built on Atom (project is archived)
- Theia (VSCode/Eclipse) is built on Microsoft’s Monaco editor
- VSCode is built on Microsoft’s Monaco Editor which has standalone code hosted within the VSCode repository.
- Note: Microsoft’s real-time collaboration plugin is closed source.
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)