Liveblocks is a real-time 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.
liveblocks.config.ts
fileThe first step in connecting to Liveblocks is creating a client which
will be responsible for communicating with the back end. You can do
this by modifying createClient
in your config file, and
passing your public API key.
Liveblocks uses the concept of rooms, separate virtual spaces where people collaborate. To create a real-time experience, multiple users must be connected to the same room.
Now that we set up Liveblocks, we can start integrating Slate and Yjs in the CollaborativeEditor.tsx
file.
To make the editor collaborative, we can rely on withYjs
from @slate-yjs/core
.
And here is the Editor.module.css
file to make sure your multiplayer text editor looks nice and tidy.
By default, Liveblocks is configured to work without an authentication endpoint. This approach is great for prototyping and marketing pages where defining your own security isn’t always required. If you want to implement your own security logic to define if certain users should have access to a given room, you’ll need to implement an authentication endpoint.
Set up authentication
Congratulations! You now have set up the foundation for your collaborative Slate text editor inside your React application.