Liveblocks is a realtime collaboration infrastructure for building performant
collaborative experiences. Follow the following steps to start adding
collaboration to your React application using the APIs from the
@liveblocks/yjs
package.
Every Liveblocks package should use the same version.
liveblocks.config.ts
fileWe can use this file later to define types for our application.
Liveblocks uses the concept of rooms, separate virtual spaces where people
collaborate, and to create a realtime experience, multiple users must
be connected to the same room. Set up a Liveblocks client with LiveblocksProvider
, and join a room with RoomProvider
.
After setting up the room, you can add collaborative components inside it, using
ClientSideSuspense
to add loading spinners to your app.
Now that we set up Liveblocks, we can start integrating Quill and Yjs in the Editor.tsx
file.
To make the editor collaborative, we can rely on QuillBinding
and QuillCursors
from y-quill
and quill-cursors
.
By default, Liveblocks is configured to work without an authentication endpoint where everyone automatically has access to rooms. This approach is great for prototyping and marketing pages where setting up your own security isn’t always required. If you want to limit access to a room for certain users, you’ll need to set up an authentication endpoint to enable permissions.
Set up authentication
Congratulations! You now have set up the foundation for your collaborative Quill text editor inside your React application.
We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.