Choosing the Right Rich Text Editor: Why Superthread Switched to TipTap
Superthread founder David Hasovic shares the journey of building a high-performance editor, comparing TipTap, Lexical, and Quill to create a seamless tasks-and-docs experience.
The Heart of Superthread: Building a Reliable Editor
A project management tool is only as good as its editor. At Superthread, we don’t just treat the editor as a text box; it is the core interface for our pages, cards, comments, and checklists.
When we set out to build Superthread, we wanted an editor that was simple, lightning-fast, and robust enough for ordinary users without the overwhelming complexity of tools like Notion. Here is the story of how we navigated the landscape of rich text libraries and why we eventually landed on TipTap.
The Comparison: TipTap vs. Lexical vs. Quill
Early in our journey, we narrowed our search to three major players. Each had distinct strengths, but our specific needs, particularly our use of Vue.js, sharpened our focus.
| Editor | Pros | Cons |
|---|---|---|
| TipTap | Excellent Vue/React support, huge community, built-in Yjs collaboration. | Some advanced add-ons are still in progress; certain features require a Pro plan. |
| Lexical | Extremely fast, built by Meta, highly flexible. | Primary focus is on React; the Vue implementation wasn’t ready for our needs. |
| Quill | Simple to implement, familiar API, used by major players like Slack. | Less active development; collaborative editing was buggy and difficult to control. |
Lessons Learned from Our First Mistakes
In our initial prototype, we treated the editor as an afterthought. We used an ad-hoc implementation of Quill for comments and tried to hack it together.
The result? A system that felt unpolished and suffered from duplication bugs in collaborative mode. We quickly realized that if we wanted a ‘rock-solid’ experience, we had to start over and do it properly. We needed full control over the collaboration layer, which led us back to TipTap paired with Yjs.
Custom Features We Built
While TipTap provided the foundation, we built several custom extensions to ensure the Superthread experience felt polished:
- The Slash Command: Type / to instantly access formatting options and blocks.
- The Assistant: A direct integration with ChatGPT-4 that allows you to highlight text and rewrite, summarize, or generate content on the fly.
- Smart Mentions: Typing @ brings up a unified search for members, cards, boards, and pages, keeping everything interconnected.
- Internal Link Beautification: When you paste a link to another Superthread resource, it automatically transforms into a ‘beautified’ link that is easy to read and navigate.
- The Bubble Menu: Instead of a cluttered top toolbar, formatting options appear right where your cursor is when you highlight text.
Why TipTap Won
Ultimately, TipTap won because it offered the best balance between ease of use and developer control. It abstracts the complexity of ProseMirror while giving us a modular system where we only include the extensions we need.
For any developer building a Vue-based application that requires real-time collaboration, I can’t recommend TipTap enough. It helped us move from a buggy, hacky prototype to a stable, single-editor architecture used across our entire platform.
Experience the fastest editor in project management.
Write docs and manage tasks in one unified, high-performance workspace. Sign up for Superthread for free
