I am trying to integrate Yjs with Quill, using React. I have read through all the docs, API, and seen the available demo for Quill-Yjs, and other demos as well. I do not want to just use the canned examples that have been provided, because then I will understand very little of how Yjs actually works. And so, I am having a really hard time understanding how to begin using Yjs, if I wanted to integrate it with Quill. Maybe, I have just re-started programming an year ago (after a 30 year hiatus), or maybe I am just slow, but after spending a week trying to understand how to implement the API, I gave up. I started with Automerge, and was quickly able to use their API to integrate with Codemirror, and have working code. The Automerge docs helped build good intuition of how to use the API. I would really appreciate if someone can point me to some clear API usage/documentation/examples, such as what Automerge provides, to start using Yjs. For example, is there documentation that explains with clear examples, of end-end complete usage of the API, and not just partial references to API in examples. Again, I have to say that the Automerge docs were very clear and got me going. I get the sense that Yjs is the future, but am completely stuck. Any help is appreciated.
Hey ikibkilam! It’s still early for YJS’s developer experience; dmonad is hard at work improving both YJS and its new docs site, https://docs.yjs.dev/. In the meantime, I’ve found the best way to learn is to make a prototype and dig into the source code itself as reference. The core library and providers, like y-websocket and y-indexeddb, are especially elucidating, but they take some picking apart before you start to develop a mental model for yourself.
You might consider building a small prototype application using only Y.Map, Y.Array and a WebsocketProvider to sync clients; these two primitives plus allow you to build a lot of really cool stuff, before moving on to some of the higher level abstractions dmonad has provided for various text-editors. Another option for more deep learning is the YJS deep dive available on YouTube: https://www.youtube.com/watch?v=0l5XgnQ6rB4 . You might also dig around the source code of canadaduane’s Relm product (https://github.com/relm-us/relm), which is an example of YJS being used in a full-stack context.
I would counter your hesitation to use a canned example with a strong recommendation to do just that! Forking and playing around with yjs, y-websocket, y-prosemirror, and the yjs-demos helped me a lot to better understand the library.
Hi @ikibkilam,
I hear you. I want that Yjs is a project for newcomers and people who are not used to JavaScript. We are just not there yet.
As @braden mentioned, I’m slowly building up the documentation. The getting-started guide on https://docs.yjs.dev/ might be very helpful to you. The documentation was very fragmented. Now I want to maintain all the documentation on a single website.
I appreciate your feedback. If the existing documentation leaves any gaps, please leave a comment in this thread or open a ticket in https://github.com/yjs/docs (the repository maintaining the documentation).
Thanks!