Improving Tiptap's Performance for Anthropic's Claude Interface
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.