Tutorials - Creating a multiplayer to-do list with React, Zustand, and Liveblocks

In this 15-minute guide, we’ll be building a collaborative to-do list using React, Zustand, and Liveblocks. As users edit the list, changes will be automatically synced and persisted, allowing for a list that updates in real-time across clients. Users will also be able to see who else is currently online, and when another user is typing.

This guide assumes that you’re already familiar with React and Zustand. If you’re not using Zustand, we recommend reading one of our dedicated to-do list tutorials:

• React tutorial
• React + Redux tutorial

The source code for this guide is available on github.

Install Liveblocks into your project

Install Liveblocks packages

First, we need to create a new app with create-react-app:

npx create-react-app zustand-todo-app --template typescript

To start a plain JavaScript project, you can omit the --template typescript flag.

Then install the Liveblocks packages and Zustand:

npm install zustand @liveblocks/client @liveblocks/zustand

@liveblocks/client lets you interact with Liveblocks servers.
@liveblocks/zustand contains a middleware for Zustand.

Connect to Liveblocks servers

In order to use Liveblocks, we’ll need to sign up and get an API key. Create an account, then navigate to the dashboard to find your public key (it starts with pk_).

Create a new file src/store.ts and initialize the Liveblocks client with your public API key. Then add our liveblocks to your store configuration.

src/store.ts
import create from "zustand";import { createClient } from "@liveblocks/client";import { liveblocks } from "@liveblocks/zustand";import type { WithLiveblocks } from "@liveblocks/zustand";
type State = {  // Your Zustand state type will be defined here};
const client = createClient({  publicApiKey: "pk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});
const useStore = create<WithLiveblocks<State>>()(  liveblocks(    (set) => ({      // Your state and actions will go here    }),    { client }  ));
export default useStore;

Connect to a Liveblocks room

Liveblocks uses the concept of rooms, separate virtual spaces where people can collaborate. To create a multiplayer experience, multiple users must be connected to the same room.

Our middleware injected the object liveblocks to the store. Inside that object, the first methods that we are going to use are enterRoom and leaveRoom.

In our main component, we want to connect to the Liveblocks room when the component does mount, and leave the room when it unmounts.

src/App.tsx
import React, { useEffect } from "react";import useStore from "./store";
import "./App.css";
export default function App() {  const {    liveblocks: { enterRoom, leaveRoom },  } = useStore();
  useEffect(() => {    enterRoom("zustand-todo-app");    return () => {      leaveRoom("zustand-todo-app");    };  }, [enterRoom, leaveRoom]);
  return <div className="container">To-do list app</div>;}

Show who’s currently in the room

Now that Liveblocks is set up, we’re going to use the injected object liveblocks.others to show who’s currently inside the room.

src/App.tsx
import React, { useEffect } from "react";import useStore from "./store";
import "./App.css";
function WhoIsHere() {  const othersUsersCount = useStore((state) => state.liveblocks.others.length);
  return (    <div className="who_is_here">      There are {othersUsersCount} other users online    </div>  );}
export default function App() {  const {    liveblocks: { enterRoom, leaveRoom },  } = useStore();
  useEffect(() => {    enterRoom("zustand-todo-app");    return () => {      leaveRoom("zustand-todo-app");    };  }, [enterRoom, leaveRoom]);
  return (    <div className="container">      <WhoIsHere />    </div>  );}

For a tidier look, here's some styling to place within src/App.css.

src/App.css

Show if someone is typing

Next, we'll add some code to show a message when another user is typing.

Any online user could start typing, and we need to keep track of this, so it's best if each user holds their own isTyping property.

Luckily, Liveblocks uses the concept of presence to handle these temporary states. A user's presence can be used to represent the position of a cursor on screen, the selected shape in a design tool, or in this case, if they're currently typing or not.

We want to add some data to our Zustand store, draft will contain the value of the input. isTyping will be set when the user is writing a draft.

The middleware option presenceMapping: { isTyping: true } means that we want to automatically sync the part of the state named isTyping to Liveblocks Presence.

src/store.ts
import create from "zustand";import { createClient } from "@liveblocks/client";import { liveblocks } from "@liveblocks/zustand";import type { WithLiveblocks } from "@liveblocks/zustand";
type State = {  draft: string;  isTyping: boolean;  setDraft: (draft: string) => void;};
const client = createClient({  publicApiKey: "pk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});
const useStore = create<WithLiveblocks<State>>()(  liveblocks(    (set) => ({      draft: "",      isTyping: false,      setDraft: (draft) => set({ draft, isTyping: draft !== "" }),    }),    {      client,      presenceMapping: { isTyping: true },    }  ));
export default useStore;

Now that we set the isTyping state when necessary, create a new component called SomeoneIsTyping to display a message when at least one other user has isTyping equals to true.

src/App.tsx
import React, { useEffect } from "react";import useStore from "./store";
import "./App.css";
/* WhoIsHere */
function SomeoneIsTyping() {  const others = useStore((state) => state.liveblocks.others);
  const someoneIsTyping = others.some((user) => user.presence.isTyping);
  return someoneIsTyping ? (    <div className="someone_is_typing">Someone is typing</div>  ) : null;}
export default function App() {  const {    draft,    setDraft,    liveblocks: { enterRoom, leaveRoom },  } = useStore();
  useEffect(() => {    enterRoom("zustand-todo-app");    return () => {      leaveRoom("zustand-todo-app");    };  }, [enterRoom, leaveRoom]);
  return (    <div className="container">      <WhoIsHere />      <input        className="input"        type="text"        placeholder="What needs to be done?"        value={draft}        onChange={(e) => setDraft(e.target.value)}      ></input>      <SomeoneIsTyping />    </div>  );}

Sync and persist to-dos

To-do list items will be stored even after all users disconnect, so we won't be using presence to store these values. For this, we need something new.

Add an array of todos to your Zustand store, and tell the middleware to sync and persist them with Liveblocks.

To achieve that, we are going to use the middleware option storageMapping: { todos: true }. It means that the part of the state named todos should be automatically synced with Liveblocks Storage.

src/store.ts
/* ... */
type State = {  draft: string;  isTyping: boolean;  todos: { text: string }[];  setDraft: (draft: string) => void;  addTodo: () => void;  deleteTodo: (index: number) => void;};
/* ... */
const useStore = create<WithLiveblocks<State>>()(  liveblocks(    (set) => ({      draft: "",      isTyping: false,      todos: [],      setDraft: (draft) => set({ draft, isTyping: draft !== "" }),      addTodo: () =>        set((state) => ({          todos: state.todos.concat({ text: state.draft }),          draft: "",        })),      deleteTodo: (index) =>        set((state) => ({          todos: state.todos.filter((_, i) => index !== i),        })),    }),    {      client,      presenceMapping: { isTyping: true },      storageMapping: { todos: true },    }  ));
export default useStore;

We can display the list of todos and use the functions addTodo and deleteTodo to update our list:

src/App.tsx
import React, { useEffect } from "react";import useStore from "./store";
import "./App.css";
/* WhoIsHere *//* SomeoneIsTyping */
export default function App() {  const {    draft,    setDraft,    todos,    addTodo,    deleteTodo,    liveblocks: { enterRoom, leaveRoom, isStorageLoading },  } = useStore();
  useEffect(() => {    enterRoom("zustand-todo-app");    return () => {      leaveRoom("zustand-todo-app");    };  }, [enterRoom, leaveRoom]);
  if (isStorageLoading) {    return <div>Loading...</div>;  }
  return (    <div className="container">      <WhoIsHere />      <input        className="input"        type="text"        placeholder="What needs to be done?"        value={draft}        onChange={(e) => setDraft(e.target.value)}        onKeyDown={(e) => {          if (e.key === "Enter") {            addTodo();          }        }}      ></input>      <SomeoneIsTyping />      {todos.map((todo, index) => {        return (          <div className="todo_container" key={index}>            <div className="todo">{todo.text}</div>            <button              className="delete_button"              onClick={() => {                deleteTodo(index);              }}            >              ✕            </button>          </div>        );      })}    </div>  );}

Voilà! We have a working collaborative to-do list, with persistent data storage.

Summary

In this tutorial, we’ve learnt about the concept of rooms, presence, and others. We've also learnt how to put all these into practice, and how to persist state using storage too.

You can see some stats about the room you created in your dashboard.

Next steps

• API reference
• Authentication