A rich text editor, also called WYSIWYG (what you see is what you get), is essential for many modern applications like Linear, Notion, and Google Docs. Even experienced developers find it challenging to select the right one, often leading to overthinking and project delays. At Liveblocks, we've spent the past year working extensively with these editors, building solutions for popular options, and we've developed strong opinions based on real-world experience.
In this guide, we'll examine several different editors: Tiptap, BlockNote, Lexical, Slate, ProseMirror, Quill, Plate, Remirror, Editor.js, CKEditor, and TinyMCE.
Getting Started
These editors generally fall into two categories: core and batteries-included. Your choice depends on whether you're building something simple like a single text box or a comprehensive collaborative editor with extensive custom features. For a quick recommendation, we believe Tiptap is the most well-rounded choice because it balances feature richness without being overly restrictive about implementation.
Sometimes you need an editor that provides everything ready-made, while other times you want a lightweight option you can customize extensively. We encourage you to continue reading to understand the potential issues and benefits of other alternatives.
Collaboration Features
At Liveblocks, collaboration is a primary focus. Most editors in this list support real-time collaboration through an excellent CRDT library called Yjs. When using Yjs, you still need a backend service to store documents and enable real-time collaboration.
Liveblocks provides a general Yjs backend compatible with any editor supporting Yjs, plus editor-specific integrations for Tiptap and Lexical, with more coming soon. These solutions allow you to start without maintaining your own backend. Some editors also offer their own operational transform-based solutions or closed-source cloud solutions, which we'll explain below.
Important Notes
For this article, we won't include abandoned or unmaintained editors like Draft.js or editors with small communities. We also won't cover closed-source editors like Froala. Regarding accessibility, each editor requires some work, especially when adding plugins, extensions, or frontend frameworks. We'll highlight relevant documentation where available.
1. Tiptap
(Image Source: Tiptap)
Tiptap builds on top of ProseMirror, a powerful but complex editor. Tiptap conceals ProseMirror's complicated aspects, providing an enjoyable developer experience while allowing easy functionality extension, including access to its core ProseMirror plugin system.
Tiptap has a friendly MIT license and ready-to-use support from both Liveblocks and Tiptap Cloud. While feature-packed, its features are divided into tree-shakable packages, keeping the core bundle size smaller than Quill, Slate, and Lexical.
Extensions
Extending Tiptap is straightforward, with the ability to add simple nodes, marks, custom commands, and extensions. You can also override other extensions' behavior, making customization simple without forking or rewriting from scratch.
While most of Tiptap's features are open-source and MIT-licensed, some extensions and features called "pro" extensions are not open source.
Advanced Customization
For more advanced Tiptap integration, you'll likely need to work directly with ProseMirror, which has a steeper learning curve. Tiptap's command system also requires adjustment time as it hides some ProseMirror transaction complexity while adding command chaining ability.
Tiptap relies on a schema for its data model, but unlike ProseMirror, the schema is created automatically by the extensions you add. Most implementations never need to touch or know about the schema, but it can be extremely useful for parsing and document validation.
Problems
Reading documentation between ProseMirror and Tiptap can be challenging, but fortunately Tiptap's source code is readable and includes many examples of working with ProseMirror's core for advanced plugins. Accessibility is also poorly documented in Tiptap, whose guide essentially leaves implementation up to you.
Another issue is that Tiptap's performance can slow considerably if you don't follow best practices, such as avoiding document state traversal during transactions and setting shouldRerenderOnTransaction to false when rendering inside React.
Server-side Changes
Running Tiptap on the server to modify documents isn't easy. For that, you'll want to use ProseMirror directly, which can be tricky after getting used to Tiptap's convenience. Another option is simply modifying the JSON directly. At Liveblocks, we recently released a library to simplify this process.
Real-time Collaboration
Tiptap has extensions supporting real-time collaboration backed by Yjs. There are also two official cloud solutions for adding real-time collaboration: Tiptap Cloud and Liveblocks Text Editor. Liveblocks Text Editor integrates with all our other features, including real-time collaboration, live cursors, comments, mentions, notifications, and version history with more features coming soon.
Good things:
Great documentation
Excellent real-time collaboration support
Framework-agnostic and React-specific packages
Highly extensible
Liveblocks and/or Tiptap Cloud integration
Bad things:
Performance can slow without following best practices
Advanced features require learning ProseMirror internals
Lacks headless server-side editing out-of-the-box
GitHub Link: https://tiptap.dev/github
2. BlockNote
(Image Source: BlockNote)
BlockNote is an opinionated, batteries-included, block-based editor (like Notion) that extends both Tiptap and ProseMirror. If you're seeking a block-based editor, this is an excellent starting point. Most of Tiptap's advantages make this a solid choice.
Beyond what you get from Tiptap, BlockNote provides many out-of-the-box features like slash menus, floating formatting toolbars, smooth animations, and more. Unlike Tiptap, BlockNote focuses primarily on React. While possible to use with vanilla JavaScript or other frameworks, you'll miss the benefits of BlockNote's provided UI elements.
Problems
While BlockNote itself is completely free and open-source, some packages—such as docx and PDF exporters—require a subscription for use in closed-source products.
Real-time Collaboration
BlockNote has real-time collaboration support with Yjs and Liveblocks. We also have a full first-party integration coming soon.
Good things:
Based on battle-tested Tiptap and ProseMirror
Real-time collaboration with Yjs and Liveblocks
Block-based editing API and UI components out-of-the-box
Bad things:
(Mostly) React-only
Heavier bundle size compared to more basic editors
GitHub Link: https://github.com/TypeCellOS/BlockNote
3. Lexical
(Image Source: Lexical)
Lexical has gained significant popularity recently because it's backed by Facebook (Meta) and used in their projects. We spent several months developing comments, mentions, version history, and real-time collaboration support for Lexical, and our conclusion is that although Lexical has a large community and commercial backing, it needs more time to mature before we can recommend it over Tiptap. This isn't surprising, as it hasn't received a 1.0 release at the time of writing.
If you like Lexical and need comments, collaboration, or mentions while avoiding some growing pains we discovered, our package is a good starting point.
Problems
One main issue in extending Lexical is its lack of pure decorations—the ability to style content without affecting the document itself. While Lexical has "decorator nodes," they change the document's content. This means features like collaborative cursors must calculate and draw HTML divs on top of text and listen to scroll/resize events to compensate. Slate (Plate) and ProseMirror (Tiptap, Remirror, BlockNote) both have pure decorations features.
Real-time Collaboration
Without the ready-made Liveblocks package, collaboration in Lexical is particularly difficult. While no editor's collaboration features are perfect (it's a genuinely difficult problem to solve well), there are still several issues causing concern. Lexical's collaboration implementation hardcodes the root node name, making it impossible to have more than one Lexical editor per Yjs document.
Some examples, like StickyNotes in the playground, work around this using nested Lexical composers, creating new documents and new WebSocket connections for each sticky note. This workaround wouldn't scale in production. The good news is that development is moving fast, and we've already seen many issues resolved since we began integrating with Lexical.
Extending Lexical
Lexical's data structure is a hierarchy of nodes and each node is overridable and customizable. You can also add your own nodes based on one of the 4 core node types.
Lexical's core is framework-agnostic, but it has a first-party React integration with its own context, called LexicalComposer, as part of the @lexical/react package. Most core plugins are then reimplemented as children of the LexicalComposer. Lexical also allows headless backend operation without DOM, using the @lexical/headless package. This is useful for server-side document editing.
Server-side Changes
It's possible to edit Lexical on the server using its core helper functions. We've created a library at Liveblocks to simplify this process.
Good things:
Yjs real-time collaboration support
Framework-agnostic and React-specific packages
Liveblocks integration with comments, mentions, and version history
Very active development and large community with Meta backing
Bad things:
Yjs real-time collaboration support is somewhat buggy without handling edge cases yourself
Lacks pure decorations, requiring DOM workarounds for advanced features
Heavier core package than Tiptap and Slate
GitHub Link: https://github.com/facebook/lexical
4. Slate
(Image Source: Slate)
Slate is a customizable and powerful framework for creating rich text editors. It's used by Discord, Grafana, Sanity.io, Slite, and more. Slate provides developers with complete control over the editing experience while maintaining an intuitive design.
At Liveblocks, we also chose Slate as the default editor for our comments composer UI component. We selected Slate because it supports a wide range of functionalities, including rich text formatting, complete editor control, custom node types, and an acceptable bundle size. Slate is vanilla JavaScript, but a React package exists and can be integrated with other frameworks as well.
Extending Slate
Slate has a well-documented system for extending functionality. You can define custom elements, transforms, styles, and events. While Slate's core feature set isn't as complete as some other editors, it has an extensive list of examples showing how to add those features yourself. If you want a more opinionated and batteries-included version of Slate, Plate is an excellent option.
Problems
Slate's bundle size is slightly larger than Tiptap and there aren't as many plugins/extensions in the ecosystem, leaving it up to you to implement some features.
Real-time Collaboration
Slate can be made collaborative with external extensions such as slate-yjs and @liveblocks/yjs.
Good things:
Great documentation
Yjs real-time collaboration support
Framework-agnostic and React-specific packages
Highly extensible
Bad things:
Slightly heavier bundle size than Tiptap
Lacks out-of-the-box features
GitHub Link: https://github.com/ianstormtaylor/slate
5. Quill
(Image Source: Quill)
Quill is a powerful editor used by many popular apps like Slack, LinkedIn, Figma, Zoom, Miro, and Airtable. Quill had been stagnant in recent years; however, its version 2, released in April 2024, is a rewrite focusing on fixing many issues that caused some developers to move on. Quill 2 has also been rewritten in TypeScript. Quill's document model is called Parchment, and users can use it to define their own "blots" that describe attributes, blocks, embeds, and anything else. This is similar to ProseMirror's schemas, nodes, and marks.
Quill is licensed under the permissive BSD-3-Clause license, making it ideal for both personal and commercial use. Quill is backed by Slab, a commercial company, and also has a strong community on GitHub. Before April's release, it had only received a few updates in the previous few years. We'll keep watching Quill to see if its comeback is sustained.
Quill doesn't require a specific framework, so it can be seamlessly integrated into various frameworks such as React.
Problems
Like Lexical, Quill lacks pure decorations, which allow you to style content without modifying the document model. This is useful for things like search/replace, collaborative cursors, etc. An entire library called quill-cursors exists just to overcome this limitation by placing DOM elements on top of the editor.
Real-time Collaboration
Quill can be made collaborative by using Yjs and y-quill with an optional backend like Liveblocks. Quill also has an Elixir-based operational transform backend called Delta.
Good things:
Good documentation
Framework-agnostic and React-specific packages
Yjs real-time collaboration support
Simple delta format
Bad things:
Fewer out-of-the-box features and plugins haven't yet updated to Quill 2
Lack of pure decorations
Somewhat less active development and smaller community
Twice the bundle size of Tiptap or Slate
GitHub Link: https://github.com/slab/quill
6. ProseMirror
(Image Source: ProseMirror)
ProseMirror powers Tiptap, Remirror, BlockNote, and others. It is one of the most battle-tested editors available. ProseMirror relies on a schema for its data structure and has a clear separation of concerns in its codebase. The main ingredients of a ProseMirror editor are state, view, model, and transforms, which are individual packages that can be imported independently. In addition to these modules, you will also need a schema and at least the prosemirror-example-setup just to get started.
Problems
To quote ProseMirror's documentation directly: "Setting up a full editor 'from scratch', using only the core libraries, requires quite a lot of code."
For this reason, unless you're a purist, masochist, or both, we recommend starting with one of the excellent ProseMirror-based editors such as Tiptap, Remirror, or BlockNote. However, if you're going to be modifying any of the aforementioned editors, it's definitely worth learning how ProseMirror works. Thankfully, stellar documentation and an active community make this easier.
Good things:
Excellent documentation with an active community
Yjs real-time collaboration support
Bad things:
Requires a lot of code for a basic example
Fewer out-of-the-box features
Steeper learning curve
GitHub Link: https://github.com/prosemirror
7. Plate
(Image Source: Plate)
Plate is built on top of Slate and adds a host of features like UI, dozens of prebuilt plugins, and entire templates. This is an impressive upgrade over Slate if you're looking for a more opinionated "batteries-included" editor.
Plate also maintains a large amount of flexibility with its plugins, so you can choose to incorporate block-based editing, floating toolbars, mentions, comments, and AI features. Most of these advanced features will require some additional work to implement, such as a backend to store comments. While Plate is free and open-source under the MIT license, it also offers a paid template with lifetime access for a fixed price.
Problems
One drawback to Plate is that most of its functionality—such as plugins, primitives, and components—is React-only. Another drawback is that, at the time of writing, collaboration is only possible through Hocuspocus. However, there's no technical reason for this, and it wouldn't be too difficult to add support for other Yjs providers such as Liveblocks. Let us know if you'd like us to build a compatible package backed by Liveblocks!
Good things:
Extensive library of plugins
Server-side editing support
Templates to help you get started fast
Bad things:
React-only
Collaboration is only available through Hocuspocus
Heavier bundle size compared to more basic editors
GitHub Link: https://github.com/udecode/plate
8. Remirror
(Image Source: Remirror)
Remirror is a project very similar to Tiptap that takes a more opinionated and batteries-included approach, with over 30 plugins, React hooks, i18n, and a11y accessibility. It is built on top of ProseMirror, just like Tiptap, and has a friendly MIT license.
It is one of the few editors that explicitly states its support of a11y and accessibility. Now at version 3, it's considered a stable and mature editor.
Problems
Problems compared to Tiptap are that its community is smaller, with slower updates, and most of its functionality is React-only. Additionally, the bundle sizes of Remirror and its extensions tend to be larger than Tiptap.
Real-time Collaboration
Remirror supports real-time collaboration with Yjs and Liveblocks through its YjsExtension.
Good things:
Great documentation
Extensive library of plugins
Collaboration with Yjs and Liveblocks
Bad things:
React-only
Larger bundle size
Smaller community with less frequent updates
GitHub Link: https://github.com/remirror/remirror
9. Editor.js
(Image Source: Editor.js)
Editor.js is a well-established block-based rich text editor that is actively maintained with a large community. Editor.js offers many plugins (called Tools) and a modern design. The data structure consists of blocks, inlines, and tunes.
The core API has a few extra features that other editors don't have built-in, such as tooltips. The editor itself is framework-agnostic, and there are many community-made plugins and wrappers for almost every framework, as well as backend frameworks and CMS integrations.
Problems
The biggest problem with Editor.js is the lack of any kind of real-time collaboration support, which we believe is crucial to most modern apps. There are a few PRs and some unmaintained attempts at Yjs support, but nothing that's part of the core product. Due to its opinionated and feature-rich nature, the package size is also quite large, even without the useful plugins.
Real-time Collaboration
Editor.js does not support real-time collaboration.
Good things:
Feature-rich with an extensive library of plugins
Many community-made integrations with various CMS and backend frameworks
Bad things:
Larger bundle size
Lack of real-time collaboration support
GitHub Link: https://github.com/codex-team/editor.js
10. CKEditor
(Image Source: CKEditor)
CKEditor has an impressive feature set, and the editor itself dates back more than 20 years! The current version, CKEditor 5, is very modern and easy to use. CKEditor also features a plugin system and support for Angular, React, Vue, Next, and more. CKEditor is a solid choice as long as you are aware of the drawbacks of a GPL-2 license, which may require you to open-source derivative works. Of course, CKSource sells you a non-GPL license as well as cloud services for real-time collaboration. CKEditor's cloud pricing is based on "editor loads".
Problems
Many of its features are behind a paywall, such as markdown, media embeds, mentions, comments, and even multi-level lists. The extensive list of paywalled features and restrictive license are a blocker to our recommendation. However, if you need a white-glove solution and are willing to pay, it may be worth looking into.
Real-time Collaboration
As far as we can tell, there is no other collaboration backend available besides CKEditor's proprietary solution.
Good things:
Extremely feature-rich out-of-the-box
Works with many frameworks
Bad things:
Locked into CKEditor's cloud service for collaboration
GPL-2 license may be a blocker for some
Some features are paid with load-based pricing
GitHub Link: https://github.com/ckeditor/ckeditor5
11. TinyMCE
(Image Source: TinyMCE)
Like CKEditor, TinyMCE is also over 20 years old and also under the GPL-2 license. Despite its age, it's well supported and actively maintained. Their cloud service also prices based on editor load. TinyMCE is available for vanilla JavaScript, React, Vue, and Angular.
Problems
The list of features is comparable to CKEditor, and many of TinyMCE's plugins—such as markdown, mentions, comments, and even advanced typography—are behind the paywall. We couldn't find a way based on the documentation to modify documents on the backend.
Real-time Collaboration
As far as we can tell, there is no other collaboration backend available besides TinyMCE's proprietary solution.
Good things:
Extremely feature-rich out-of-the-box
Works with many frameworks
Bad things:
Locked into Tiny Cloud for collaboration
GPL-2 license may be a blocker for some
Some features are paywalled with load-based pricing
GitHub Link: https://github.com/tinymce/tinymce
Conclusion
Picking the right text editor depends on what you need for your app. Tiptap is the best choice for most projects because it has good features, is easy to customize, and works well with team collaboration tools. It's not too heavy and gives you a good balance of everything. For apps that need block-style editing like Notion, BlockNote is great if you're using React.
If you want full control over everything, Slate lets you build exactly what you want, but you'll need to do more work yourself. CKEditor and TinyMCE have lots of built-in features but cost money and lock you into their services. Lexical looks promising since Facebook supports it, but it's still being developed. Avoid Editor.js for new projects because it doesn't support real-time collaboration, which most modern apps need.
