---
openFile: "/start.tsx"
showFiles: ["/start.tsx"]
---

Welcome to the Liveblocks interactive tutorial! In this guide you’ll be learning
how to get started with the Liveblocks [React](https://react.dev/) package and
building your collaborative application.

### What is Liveblocks?

Liveblocks is an infrastructure for building performant collaborative
experiences, based around our core products, each enabling a different facet of
collaboration: [Comments](/docs/ready-made-features/comments),
[Notifications](/docs/ready-made-features/notifications),
[Text Editor](/docs/ready-made-features/text-editor),
[Presence](/docs/ready-made-features/presence),
[AI Copilots](/docs/ready-made-features/ai-copilots).

In combination with our [Sync datastores](/docs/platform/sync-datastore),
[Node.js package](/docs/api-reference/liveblocks-node),
[REST APIs](/docs/api-reference/rest-api-endpoints),
[webhooks](/docs/platform/webhooks), it’s easy to embed collaboration into your
product, or build an entire app based on Liveblocks infrastructure.

### What you’ll learn

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.

### How to use this tutorial

<Banner title="Prerequisites">

This guide assumes you’re comfortable with React & have basic TypeScript
knowledge.

</Banner>

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 [start.ts](#/start.ts).

```ts modifyTutorialFile="/start.ts"
export const ready = true;
```

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

---

For an overview of all available documentation, see [/llms.txt](/llms.txt).