Hi everyone, I’m working on a Next.js app with a TipTap editor and I’m trying to enable real-time collaboration with Yjs and Hocuspocus.
Current setup:
Next.js app
TipTap editor using useEditor() and EditorContent
u/tiptap/extension-collaboration
u/tiptap/extension-collaboration-cursor
u/hocuspocus/provider on the frontend
u/hocuspocus/server running separately
Postgres stores normal TipTap JSON content
Postgres also stores a base64 Yjs state
Current behavior:
User A edits a document section.
The edit saves to the database correctly.
User B can see the update only after refreshing the page.
Without refreshing, User B’s editor does not update live.
What we tried:
Started the Hocuspocus server locally.
Added the Hocuspocus WebSocket URL to the frontend.
The editor can switch between normal TipTap mode and Yjs collaboration mode.
When collaboration mode is forced, the editor reads from Yjs state instead of the normal TipTap JSON content.
If the Yjs state is empty or stale, the document appears blank.
Main question:
What is the correct way to initialize a TipTap editor with existing saved TipTap JSON and then move it into Yjs/Hocuspocus collaboration mode without blanking the document?
Specific questions:
Should the existing TipTap JSON be converted into a Y.Doc before the editor is created?
In collaboration mode, should the TipTap editor content option be undefined?
What is the best practice for saving both Yjs state and normal TipTap JSON to a database?
How can I verify that two users are connected to the same Hocuspocus document and receiving updates live?
What are common reasons Hocuspocus/Yjs appears to save correctly but does not broadcast updates to other users?
Any guidance on the correct TipTap + Yjs + Hocuspocus flow would be appreciated.
Top comments (0)