# When to use Tiptap Created: [[2025_02_22]] 12:40 Tags: #rich-text-editing #Software Considering that i used to work at [Tiptap](https://tiptap.dev), a question that I get is why would I move from working on Tiptap to working on [BlockNote](https://www.blocknotejs.org/), isn't BlockNote just built on Tiptap anyway? Here is my attempt to disambiguate things. > [!NOTE] Warning > This post goes __deep__ on the differences between Tiptap and BlockNote which are rich text editors, it assumes that you've worked with either of them before. ## Why Tiptap [Tiptap](https://tiptap.dev/docs/editor/getting-started/overview) is a layer over the powerful [Prosemirror library](https://prosemirror.net/). Prosemirror is a very flexible and extendable rich text editor. But, with great power, comes _a lot of effort_ to build things. The reality of rich text editing is that 90% of what people need out of a solution, is the same for everyone. So, while this flexibility is definitely a strong point, the out of the box experience leaves a lot to be desired with something like Prosemirror. Not even to mention the conceptual [overhead of understanding the library](https://prosemirror.net/docs/guide/) and [it's options](https://prosemirror.net/docs/ref/). This is where Tiptap shines, it's ability to abstract what Prosemirror considers to be orthogonal things, and make it into a much more digestible and composable API. The concept of [extensions is Tiptap's main innovation](https://tiptap.dev/docs/editor/extensions/custom-extensions), this abstraction is what allows Tiptap to be so pluggable and allow full control for a developer to add and remove components to their rich text editing experience. Tiptap then builds on top of this extension model, to offer users a starting point for specific elements within the editor that a developer may want to [include within their editor](https://tiptap.dev/docs/editor/extensions/overview) (e.g. tables, task lists, bullet lists, etc.) By offering these editor extensions, they enable developers to build out the sort of editor experience they want to offer to their users. I see Tiptap as being a framework for building rich text editing experiences. You can compose separate extensions (sort of like components) to build out the experience that you are looking for. So, this all sounds great, but, as with anything, what are the drawbacks? ## Why not Tiptap The main reasons against Tiptap are simply: time-to-editor and mental overhead, because, I believe, Tiptap is fundamentally at the wrong layer of abstraction. ### Time-to-editor Tiptap sells you on the future flexibility of things which you may need to add in the future. When a developer is reviewing different editors, they notice that many of them are pretty much pre-fabbed and may not be extendable in the way that may make sense within their application. For example, it may not make sense to stuff a whole Google Docs UX/UI, when all you need is a chat box. This comes at a tradeoff though, you'll have to not only plug all these extensions together, you'll also have to somehow glue them together in a way that makes sense for your users. Tiptap being headless is a double-edged sword that cuts both ways, it offers you little in terms of actual UI and lets you do whatever you want with no guide on what you _should do_. This costs time, a lot of it. You'll expect to invest a developer and a minimum of a month to integrate everything for your application. The hardest part of an editor is in the details of the integration and the UX. For example, Tiptap allows you the ability to embed an image into the editor, but offers no way to resize it, or align it, or have it link to somewhere, and while it can be done because the API is flexible, it does cost you time. Why does it cost time? Aren't the demos they have enough? ### Mental Overhead Tiptap is a layer over Prosemirror, but it very much is not trying to hide Prosemirror's API from you. It's API is essentially 1-1 with Prosemirror's. This is good in that nothing will "get in your way" but it fails to hide the complexity of Prosemirror. Don't get me wrong, Prosemirror is a rather powerful API, but it definitely is not intuitive. Concepts like [positions](https://prosemirror.net/docs/guide/#doc), [transactions](https://prosemirror.net/docs/guide/#transform), and [decorations](https://prosemirror.net/docs/guide/#view) are difficult to grasp and very few have mastered. Because Tiptap is essentially repackaging this complexity into vertical slices of concerns (extensions), it fails at being simpler than Prosemirror. Tiptap is a JS only library, with framework specific bindings to make it easier to integrate with frameworks like React, Vue as well as 3rd party integrations to other frameworks like Angular and Solid. Because of this, every additional feature has to be built plain JS first, which causes trepidation in introducing new features to the library. For example, there already is integrations for a bubble menu which shows when you have a text selection and a tooltip will show over the content to allow a toolbar to show options on how to modify the content of the selection (e.g. bolding, underlining, etc.) This sort of menu in the Tiptap library is implemented in plain JS with React and Vue bindings, which means 3 separate API's and integrations for just a single menu. ### Open Source One of the biggest elephants in the room is the fact that Tiptap is VC backed (YC S23), which can raise an eyebrow or two about the future of the editor. The reality is Tiptap has slowly been building more paid offerings and not working as actively on the editor. I specifically tried to address a number of things in the upcoming Tiptap version 3 release, but that was largely my own personal effort, in my free time. There has slowly been a turn away from OSS software, from arguably table stakes features as "Pro Extensions". #### Conclusion I think that the reason behind this is that Tiptap is sort of just a better way to organize Prosemirror nodes, marks and plugins. It is closer to a framework, than it is a _solution_. So, Tiptap may not be a panacea, despite it's popularity, but there are several frameworks built on top of it, like [Novel](https://novel.sh/), [Typist](https://typist.doist.dev/?path=/docs/readme--docs) and about a hundred others that add UI components on top of Tiptap like [ShadCN Minimal Tiptap](https://github.com/Aslam97/shadcn-minimal-tiptap). So, why would I pick to work on [BlockNote](https://www.blocknotejs.org/), specifically? ## Why BlockNote I believe that BlockNote is built at the right-level of abstraction. High-level enough, to offer a good out-of-the-box experience, yet built on strong fundamentals to slowly disclose and expose a flexible low-level API for those who actually need it. In my experience, what developers need out of an editor first and foremost is one that works out of the box, and offer a modern user experience that users have come to expect, because as I've said 90% of your experience will be similar to other editors. If you truly need _complete flexibility and control_ over your editor, then you may be better off using an editor framework like Tiptap. How does it do that? ### Simplicity BlockNote achieves a good abstraction over complex concepts like Prosemirror positions (which are good primitives, but make for a messy API), via its use of blocks. For example, inserting text can be thought of as replacing a block with a new one with the updated text rather than finding the right position and inserting from there. This offers a vastly simpler abstraction to understand than what Prosemirror provides, which involves things like positions, resolved positions, etc. This makes it much easier to implement more complex functionality for your editor, by abstracting the hard stuff away from you. Similarly, because of the simpler API, there is lower mental overhead in understanding how the things work. Making it easier to get started and be more productive with the editor, where you can work on your actual business logic and application rather than dealing with the complexities of rich text editing. We want for you to ==focus on the differentiation of your user experience, we'll handle the editor==. ### Strong commitment to Open Source BlockNote is truly committed to open source software. It is one thing to have a open source frontend and selling closed source backend products and hosting. It is entirely a different thing to have all of your source publicly available, and licensed under OSS licenses and dual licensed for companies which would like to earn from our work. ### Conclusion In my opinion, BlockNote is built in such a way that it is actually abstracting you from the difficulties of rich text editing. It implements features that 90% of people would need out of a rich text editor, out of the box, while offering APIs to do more. I'm excited to be working on it, and build out a good editing experience for our users! ## References - [Tiptap](https://tiptap.dev/) - [BlockNote](https://www.blocknotejs.org/) -