Issue with Initial Data Duplication in Collaborative Editor

1

I’m new to Yjs, and I’m building a collaborative editor using Tiptap and Yjs. Since I have a database limitation that prevents me from storing Yjs directly, I’m storing the JSON output (achieved with editor.getJSON()) in my database. However, when I load the data back during the initial load, I’m encountering a problem with data duplication during the merge. Here’s an overview of my process:

  1. Whenever a user makes an edit, I capture the JSON representation and send it to the backend. This JSON data is then saved to the database, and I also broadcast the update to other users using a Uint8Array.
  2. When other users receive the update, I use Y.applyUpdate(yDoc, updates) to merge the changes.

The issue is that during the initial merge, the data gets duplicated. Subsequent merges work perfectly. What could be causing this initial duplication, and how can I ensure that the initial merge works correctly?

2

Hi, welcome.

If you only store the the JSON, then there is no point using a CRDT. It needs the history to do conflict-free merges. You may be able to sync updates once the editors are open, but how do you determine the initial state across multiple clients properly without history? You’ll run into exactly the problems you’re describing.

If you can save strings to your db, then you can save YJS updates. Just convert them to base64.

I know that’s probably not want you wanted to hear, but I thought I would offer my perspective. Maybe there is a way to fix the duplication problem and initialize it from JSON though! Good luck!

1 Like