BlockNote
BlockNote is an open source, block-based rich text editor for React that offers a polished, Notion-style user experience with minimal setup. It comes with built-in UI components like menus and toolbars, which are fully customizable. It supports drag-and-drop functionality, allowing users to organize content into blocks that can be nested or rearranged. Developers can extend the editor with custom blocks, schemas, and plugins, benefiting from first-class TypeScript support for type safety and autocompletion. BlockNote enables real-time collaboration using Yjs, with support for providers like Liveblocks and PartyKit, allowing multiple users to edit documents simultaneously. It also supports theming, markdown, and HTML conversion, and can be used with vanilla JavaScript for non-React projects. Built on top of ProseMirror and TipTap, BlockNote simplifies the process of adding a rich text editor to applications, eliminating the need to build interface elements from scratch.
Learn more about BlockNote
Trix
Compose beautifully formatted text in your web application. Trix is an editor for writing messages, comments, articles, and lists, the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML. Most WYSIWYG editors are wrappers around HTML’s contenteditable and execCommand APIs, designed by Microsoft to support live editing of web pages in Internet Explorer 5.5, and eventually reverse-engineered and copied by other browsers. Because these APIs were never fully specified or documented, and because WYSIWYG HTML editors are enormous in scope, each browser’s implementation has its own set of bugs and quirks, and JavaScript developers are left to resolve the inconsistencies. Trix sidesteps these inconsistencies by treating contenteditable as an I/O device: when input makes its way to the editor, Trix converts that input into an editing operation on its internal document model.
Learn more about Trix
Slate
Slate is 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. It can do this because all of its logic is implemented with a series of plugins, so you aren't ever constrained by what is or isn't in "core". You can think of it like a pluggable implementation of contenteditable built on top of React. It was inspired by libraries like Draft.js, Prosemirror and Quill. Slate is currently in beta. Its core API is usable now, but you might need to pull request fixes for advanced use cases. Some of its APIs are not "finalized" and will (breaking) change over time as we find better solutions. The most important part of Slate is that plugins are first-class entities.
Learn more about Slate
Tiptap
Tiptap is a headless, open-source rich-text editor framework designed for developers building modern, collaborative applications. Built on ProseMirror, it offers a modular architecture with over 100 extensions, enabling the creation of custom editors tailored to specific user needs. Tiptap supports real-time collaboration through its open source backend, Hocuspocus, allowing multiple users to edit documents simultaneously with features like live cursors and offline editing. It also integrates AI capabilities, such as the content AI extension, which provides in-line text transformations and AI-driven suggestions to enhance content creation. Developers can further extend functionality with features like commenting systems, document management, and import/export options for formats like DOCX. Tiptap's UI components and React templates facilitate rapid development of editors resembling applications like Notion or Google Docs.
Learn more about Tiptap