In this post, I have compiled a list of the best rich text editor libraries for React in 2022. By using a few important criteria, we’ll examine each library so you can make an informed decision about which one is best for your needs. Let’s get started!
Criteria to judge by
First, we should determine what to look for in a good rich-text editor library so we can judge our options against it. In my opinion, these are the most crucial factors when it comes to picking the right editor:
Stability: Knowing whether the library has a stable release is essential. It’s ok if the library is still in BETA, but you should at least have a sense of how likely the maintainers are to introduce breaking changes.
Stars on GitHub: One way to get a sense of the size of the community around a library is to look at how many stars it has on GitHub. It is not a perfect metric, but a good starting point.
React support: This is the key criterion since we are looking for rich text editor libraries that work with React.
The browser and mobile support: We need to know which browsers and mobile devices the library can support. Ideally, the library would support all major browsers and have a clear stance on mobile support.
Age of the last release: This is a good indicator of how active the maintainers are. If it has been more than six months since the latest release that is usually a red flag.
Customizability & Extensibility: You should be able to customize the rich text editor to match your app’s design. The library should also provide useful plugins or extensions to extend its functionality.
Developer experience: The library should have a good developer experience, a smaller learning curve, an active community, and helpful support from the maintainers.
Documentation quality: The documentation should be clear and comprehensive.
DraftJS
Let’s start with one of the older players in the rich text editor space: DraftJS .
DraftJS was created by Facebook and released in 2016. It is a comprehensive rich text editor framework built for React.
Stability: DraftJS has a stable release and is not in BETA.
Stars on GitHub: 21.9K
React support: DraftJS was made specifically for React.
The browser and mobile support: DraftJS supports all major browsers but might require polyfills. There is no official support for mobile, and there are known issues with Android.
Age of the last release: The biggest downside of the library is that it’s no longer actively maintained, with the latest release being more than two years ago.
Customizability & Extensibility: DraftJS is customizable and can be extended with plugins and decorators. Here’s a good list of
plugins and decorators
I found for the library.
Developer experience: If you’re a fan of ImmutableJS I have good news for you: the DraftJS model is built with ImmutableJS. One of the main benefits of ImmutableJS is that it uses copy-on-write to help keep your data updated and makes sure it uses less memory.
Documentation quality: You might find the documentation to be a bit lacking and not very comprehensive.
Lexical
Lexical is a newer rich text editor library by Facebook. It’s reliable, accessible, and performant. Plus, it does something DraftJS couldn’t - prevents the DOM from being manipulated externally, which means plugins and extensions like Grammarly won’t affect it.
Stability: At the time of the writing, Lexical is still in early development, and its APIs and packages are likely to change quite often.
Stars on GitHub: 11.1 K
React support: Lexical is not written for React specifically, but there is an adapter library (@lexical/react) that provides good React support.
The browser and mobile support: The library has good browser and mobile support. It supports most of the major web and mobile browsers. However, it doesn’t support IE11 and older versions of Edge.
Age of the last release: Lexical is actively maintained. At the time of writing, the latest release is
July 20, 2022
.
Customizability & Extensibility: The library’s API makes it easy to build for custom use cases. The authors of Lexical call it “the React for text editors.” At the same time, it comes with several starter packages that include most of the functionality needed to build a powerful editor.
Developer experience: Unlike DraftJS, Lexical has no external dependencies, which makes it easier to reason about the library’s code. There’s no dependency on ImmutableJS because the authors of Lexical realized developers didn’t love using it. Also, Lexical provides solid support for TypeScript.
Documentation quality: I noticed a lack of documentation for Lexical. Their docs have a lot of blank pages with little information in them.
ProseMirror
ProseMirror
is a toolkit for building rich-text editors on the web. It is used by companies such as Atlassian, Asana, and the New York Times.
Stability: ProseMirror is mature and stable. The API is unlikely to change in a way that would break existing code.
Stars on GitHub: Because ProseMirror has multiple repositories, it’s hard to give a precise number. However, the combined stars for all ProseMirror repositories are over 11.0 K.
React support: ProseMirror doesn’t offer built-in React support. However, you can use other React libraries built on top of it, like Remirror or TipTap.
The browser and mobile support: The library likely has the best browser support of all the rich text editors. It works on all major browsers, including IE11. It also has solid mobile support.
Customizability & Extensibility: ProseMirror is highly extensible and the most powerful in terms of customization. You can define your own custom document schema from the ground up.
Developer experience: The learning curve is steeper than in other libraries. Even the authors admit that starting from scratch requires a lot of code. However, they provide plugins for a more out-of-the-box solution.
Documentation quality: The documentation is excellent, with a lot of examples.
Slate
Slate
is another popular library for building extensible rich-text editors. The author claims that the reason for Slate was to solve some of the common issues of other editors, namely hardcoded schemas, monolith repository structures, and the inability to create nested document structures.
Stability: Although Slate is officially still in BETA, it seems fairly stable.
Stars on GitHub: 25K
React support: Slate provides a good React integration via the
slate-react
package.
The browser and mobile support: Slate aims to support all modern web and mobile browsers. Currently, it doesn’t support IE11, and there are some known bugs around the android platform.
Age of the last release: The library maintainers actively contribute to it. At the time of writing, the latest release was on July 29, 2020.
Customizability & Extensibility: One of the main selling points of Slate is its extensibility. The author claims that plugins are first-class citizens in Slate and that you can completely customize the editing experience without fighting the library’s assumptions. The data model of Slate is based on the DOM, which means that advanced behaviors like tables or nested block quotes are possible.
Developer experience: Like most of the other libraries on this list, there’s a bit of a learning curve with Slate, but once you get the hang of it, it’s easy enough to set up. I used Slate in my SaaS project
YourTrail
and had good results with it.
Documentation quality: Solid documentation with simple and to-the-point examples.
TipTap
TipTap
is a popular headless wrapper around ProseMirror written for React.
Stability: Since TipTap is written on top of ProseMirror, most of its underlying logic is battle-tested. TipTap is currently on V2 which is tagged as BETA but seems stable.
Stars on GitHub: 15.9K
React support: Supports React among other frameworks like Vue, Svelte, and Alpine.
The browser and mobile support: Since TipTap uses ProseMirror, it has the same extensive browser and mobile support.
Customizability & Extensibility: With its headless design, TipTap is easy to customize and extend. You can take complete control of how you style the editor without having to resort to hacky workarounds like !important.
Developer experience: With TipTap, you can quickly get your initial rich-text editor prototype up and running with little effort. The API is also very straightforward to use.
Documentation quality: The documentation for TipTap is good overall.
Conclusion
These are some of the best rich text editor libraries for React in 2022. As you can probably see, they all aim to provide extensibility and ease of customization. Each of those libraries has its strengths and weaknesses, and it’s hard to pick a clear winner, so be sure to play around with them before choosing the right one for your project.
If you’d like to get more web development, React and TypeScript tips consider
following me on Twitter,
where I share things as I learn them.
Happy coding!
