Getting started—React tutorial

Connecting to Liveblocks

To use Liveblocks in React, you need to install our packages to your project. We’ve already installed the packages in this guide, but this is how you’d do it in your own project:

$npm install @liveblocks/client @liveblocks/react

After installing the packages, you can initialize a Liveblocks project with a config file, which we’ve already done on this page:

$npx create-liveblocks-app@latest --init

This file is named liveblocks.config.ts, and it’s used to define your TypeScript types.

Setting up a client

The first step in connecting to Liveblocks is creating a client which will be responsible for communicating with our back end. You can do this by adding LiveblocksProvider, and passing your public API key.

<LiveblocksProvider publicApiKey="pk_s9bs7fl...">

Every Liveblocks application needs to be nested inside this. Open App.tsx, set up LiveblocksProvider, and return the CollaborativeApplication component inside.

return (  <LiveblocksProvider publicApiKey={publicApiKey}>    <CollaborativeApplication />  </LiveblocksProvider>);

You should now be seeing a demo application!

Authentication

Ordinarily, you’d find your API keys on the dashboard, but for this tutorial we’re providing you with a temporary key. In most production apps we recommend setting up Liveblocks on the server with your secret key, but for now, the public key is fine. Learn more under authentication.