5 ms·
Improving Tiptap's Performance for Anthropic's Claude Interface
Hi, I'm Philip from Tiptap. We recently discovered that Anthropic is using our open-source editor for their claude.ai interface. While we're thrilled about this, we noticed some performance issues, even on high-end hardware like the M3 MacBook Pro. We've identified the causes and want to share our findings and solutions.
As developers ourselves, we understand the challenges of integrating rich text editors into complex applications. When we saw the sluggish performance in Claude's interface, we knew we had to investigate.
Our senior engineer, Nicholas (HN username: nickthesick), dug into the implementation using Chrome Dev Tools. Here's what he found:
1. For every keystroke in the editor, there were two renders of the PromptInput component.
2. There a couple of extensions with the same name as reported in the Dev tools console (this can be resolved by making extension have a name property)
3. On every update of the editor, the editor is converted from HTML into markdown even though the user has not submitted their prompt yet.
Here's how to address them:
- With the latest release of Tiptap 2.5, you can now get much more performance out of your editor, if integrated correctly, there should only ever need to be the initial render of the editor & no re-renders on keystrokes. See our guide here for more information and an example: https://tiptap.dev/docs/guides/performance#react-tiptap-editor-integration
- Consider converting the editor content to markdown only on submission, right now it seems like it is causing an extra re-render by having to setState with the new markdown. If this is not possible, consider using a ref since this should be outside of react’s rendering cycle.
- Prior to Tiptap 2.5, a render of the component that called useEditor would have to completely re-initialize the editor, now it can reuse the editor instance which should make it less sensitive to re-renders but it is still recommended to reduce the amount of re-renders as possible to ensure a smooth typing experience
We're sharing this not to criticize, but to help. We're users and fans of Claude ourselves, and we want to see it perform at its best. We're always happy to assist fellow developers in optimizing Tiptap integrations.
We'd love to hear your thoughts on these findings. Have you encountered similar issues? Do you have other optimization strategies to share? Let's discuss how we can improve the developer experience for rich text editing in AI interfaces.
- v3ss0n 2y agoReminder: tiptap's heavylifting was Done by prose mirror. Tiptap is just a wrapper on top
- meiraleal 2y agoDon't think open source projects should be shamed for using open source work.
- v3ss0n 2y agoIf you use tiptap and needs customizations you definitely need to look into promsemirror and nothing much about it is documented in tiptap. Promsemirror's core concepts like Model , State , transform and view concepts are very important when using prosemirror and tiptap but tiptap abstraction hide them as hard as possible. You should try first and understand instead of downvoting. There's no shaming about it. I raised it because: It even avoids to mention them, which causes a lot of trouble in our implementations first and lead us to just implement most in prosemirror
- v3ss0n 2y agoI would like you guys to mention about ProseMirror .There is zero mentioning about ProseMirror on home page even tho it had done 90% of the job for your library. Also any bit of customization or deeper use of TipTap requires Prosemirror.
- philipisik 2y agoThanks for your feedback, I really appreciate it. I would like to understand if you haven't noticed our ProseMirror related content yet, or if there is something missing for you. 1. We mention ProseMirror in the first sentence of the editor docs "Tiptap is a headless wrapper around ProseMirror - a toolkit for building rich text WYSIWYG editors [...]" at: https://tiptap.dev/docs/editor/getting-started/overview https://tiptap.dev/docs/editor/getting-started/overview 2. We have a whole page on our docs about ProseMirror: https://tiptap.dev/docs/editor/core-concepts/prosemirror https://tiptap.dev/docs/editor/core-concepts/prosemirror 3. We explain how to access the ProseMirror API in our documentation: https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#access-the-prosemirror-api https://tiptap.dev/docs/editor/extensions/custom-extensions/... 4. We have a section in the docs explaining the ProseMirror schema: https://tiptap.dev/docs/editor/core-concepts/schema#get-the-underlying-prosemirror-schema https://tiptap.dev/docs/editor/core-concepts/schema#get-the-... 5. We mention ProseMirror in the first paragraph of the readme.md of the GH repo: https://github.com/ueberdosis/tiptap https://github.com/ueberdosis/tiptap 6. We mention ProseMirror on the editor landing page "Powered by ProseMirror [...]" at: https://tiptap.dev/product/editor https://tiptap.dev/product/editor Super curious to hear about your use case and what you need to know/develop in ProseMirror that we should mention in our docs :-)
- v3ss0n 2y agoWe had built and realtime speech to text editor that sync between Radiologist. After transcribing speech it automatically generate radiologist report.For report It is block based Editor that allows easy dragging of each findings and dragging have limit of regions , for example some blocks are not allowed to drag outside of certain sections, some blocks are allowed. Some automatically sorts according to bullet points.
- nklhlk 2y ago[dead]
- philipisik 2y agoNot a real-world case, but for React apps, we have at least tried to clarify the most common errors we know of in a performance guide: https://tiptap.dev/docs/guides/performance https://tiptap.dev/docs/guides/performance
- polotics 2y agoJust as a FYI, you replied to an AI-generated comment. Check out the user's other posts.
- philipisik 2y agoUps ^^
- lpod 2y ago[flagged]
- psawaya 2y agoFYI I just shared this with someone who works in engineering at Anthropic
- philipisik 2y agoWoah, much appreciated! Thanks :-)
- nickthesick 2y agoIf you need any help with this, don't hesitate to reach out at humans@tiptap.dev
- smca 2y agohello! thanks for sharing nick + philip.
- philipisik 2y agoYou're welcome (: