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