Tiptap 2.5 – Solving React performance issues in our open-source editor
4 comments
Nice! I used TipTap on top of ProseMirror(and ProseMirror.Net) with stepwisehq.com .
Most React prosemirror-based editors were making the same mistake a couple years ago; re-rendering everything on each keystroke. Particularly the tool bars, and then the node views of course.
I created an observable(MobX) "fact cache" that I populate with extra state information necessary to drive the toolbars and other complex editor UI after each keystroke. Active node types, active marks, nodes fully in selection, and etc. Super fast to update, can even prune search space based on doc diffs, and minimizes React work.
Most React prosemirror-based editors were making the same mistake a couple years ago; re-rendering everything on each keystroke. Particularly the tool bars, and then the node views of course.
I created an observable(MobX) "fact cache" that I populate with extra state information necessary to drive the toolbars and other complex editor UI after each keystroke. Active node types, active marks, nodes fully in selection, and etc. Super fast to update, can even prune search space based on doc diffs, and minimizes React work.
Super pumped about this realease! Founder at Athena Intelligence here -- we’ve integrated Tiptap into our AI-driven analytics platform, specifically for our Reporting module. Our AI agent, Athena, uses Tiptap to co-author reports with users, making the whole process of document creation truly AI assisted. Tiptap's performance and flexibility are a big win for us. Huge props to the Tiptap team for this killer release.
Tiptap is probably the most powerful off the shelf editor.
Used it to augment the Moodle content editor for a customer and it worked really well.
Used it to augment the Moodle content editor for a customer and it worked really well.
Thanks for your kind words :-) Never heard of anyone extending Moodle with Tiptap before.
[deleted]
For developers using Tiptap in React, we've heard about performance issues. So the key to building a faster Tiptap editor is the new, more performant API for re-rendering the editor. Tiptap 2.5 is fully backwards compatible, and you can now use new options to optimize the rendering behavior of your editor.
We've created a demo that visualizes the difference in re-render frequency between the old and new versions in React. You can see it in action and play around with it here: https://tiptap.dev/docs/examples/advanced/react-performance
While this release primarily benefits React users, we've also made some performance improvements for Vue 3.
Feel free to try out Tiptap 2.5 and let us know what you think. We're here to answer any questions and are always open to contributions.
Happy coding, Philip and the Tiptap team