Liveblocks is a real-time collaboration infrastructure for building performant
collaborative experiences. Liveblocks is a fully integrated solution built
around three core products, each enabling a different facet of collaborative
Presence - Feel a collective virtual presence akin
to sharing a room.
Broadcast - Notify other connected clients by
sending custom events.
Storage - Edit the same document
in-real-time with conflict-free storage.
This guide assumes you’re comfortable with React and have basic knowledge of
Next.js and TypeScript.
Each page of this tutorial has been designed to highlight a different Liveblocks
feature. Read the instructions in the text panel, then follow along by editing
the code in the live editor. The results of your code are then displayed in the
two preview windows.
If you get stuck, you can press the "I'm stuck, show solution" button to see the
correct result, but don’t rely on it—you’ll learn more quickly by figuring the
solution out for yourself.