Welcome to the Liveblocks interactive tutorial! In this guide you’ll be learning how to get started with the Liveblocks React package and building your collaborative application.
Liveblocks is an infrastructure for building performant collaborative experiences, based around four core products, each enabling a different facet of collaboration: Comments, Notifications, Text editor, Realtime APIs.
In combination with our Node.js package, REST APIs, webhooks, it’s easy to embed collaboration into your product, or build an entire app based on Liveblocks infrastructure.
This tutorial dives into the basics that power every application, regardless of which product you’re adding. This includes setting up your React client, joining a room, using realtime presence, and more. It does not go into detail about any specific product.
This guide assumes you’re comfortable with React & have basic TypeScript knowledge.
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.
In the editor, set ready to true in App.ts.
/App.tsexport const ready = true;Then press the button for the next page, "Connecting to Liveblocks".