Getting startedReact tutorial

//Welcome to Liveblocks

Welcome to Liveblocks

Welcome to the Liveblocks interactive tutorial! In this guide you’ll be learning how to get started with the Liveblocks React package, and further, how to build your collaborative app with Next.js.

What is Liveblocks?

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 experiences:

  • 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.

In combination with our REST APIs, webhooks, and schema validation, it’s possible to build an entire collaborative app on Liveblocks infrastructure.

How to use this tutorial

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.

Ready to begin?

In the editor, set ready to true in App.ts.

Modify the code in /App.ts
export const ready = true;

Then press the button for the next page, "Connecting to Liveblocks".