Hacker News new | past | comments | ask | show | jobs | submit login
Improving Tiptap's Performance for Anthropic's Claude Interface
24 points by philipisik 6 months ago | hide | past | favorite | 15 comments
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.




If you need any help with this, don't hesitate to reach out at humans@tiptap.dev


hello! thanks for sharing nick + philip.


You're welcome (:


FYI I just shared this with someone who works in engineering at Anthropic


Woah, much appreciated! Thanks :-)


I 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.


Thanks 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

2. We have a whole page on our docs about 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/...

4. We have a section in the docs explaining the 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

6. We mention ProseMirror on the editor landing page "Powered by ProseMirror [...]" at: 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 :-)


We 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.


Interesting. We developed a POC for speech-to-text earlier this year, but it's not ready for release yet. Thanks for sharing your case. Since Tiptap is headless, we're always curious to see what people build on top of us :-)


[dead]


Not 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


Just as a FYI, you replied to an AI-generated comment. Check out the user's other posts.


Ups ^^


Reminder: tiptap's heavylifting was Done by prose mirror. Tiptap is just a wrapper on top


Don't think open source projects should be shamed for using open source work.


If 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




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: