Liveblocks - Collab Instantly!

What is Liveblocks?

I have recently started playing around with some collaboration related technologies, most notably yjs & liveblocks

In this article I will be focusing on Liveblocks as it was quite the fun implementing features in applications while using it.

The team behind it summarizes it quite well in the following quote:

Collaborative experiences in days, not months

---

Concepts

Room

A room is the space people can join to collaborate together.

Presence

Presence represents people’s movements and actions inside the room. People in the room are able to see what others are doing in real-time.

Storage

Storage represents the items people can interact with in the room. In the physical world, storage could be represented as documents and notes on a whiteboard.

Storage Persistance

Storage data automatically persists when people leave the room. The data can also be cleared and stored on your database using the API endpoints.

---

Easy collabing

You probably ask yourself, how easy? Well it is as easy as:

  const others = useOthers();
  const updateMyPresence = useUpdateMyPresence();

With these little things you are able to boost your App experience from plain old monotone to a lively multiplayer app!

What I also love is that they have a cpl of packages out, one that I like to use is the @liveblocks/zustand package with which you can have a nice lively shareable state throughout the app, it is as simple as:

import create from "zustand";
import { createClient } from "@liveblocks/client";
import { liveblocks } from "@liveblocks/zustand";
import type { WithLiveblocks } from "@liveblocks/zustand";

type Cursor = { x: number; y: number };

type State = {
  cursor: Cursor;
  setCursor: (cursor: Cursor) => void;
};

const client = createClient({
  publicApiKey: "PUBLIC_KEY",
});

const useStore = create<WithLiveblocks<State>>()(
  liveblocks(
    (set) => ({
      cursor: { x: 0, y: 0 },
      setCursor: (cursor) => set({ cursor }),
    }),
    {
      client,
      presenceMapping: {
        cursor: true,
      },
    }
  )
);

export default useStore;

And with such simple code you would be able to have cursors already flying around, with additional state also see updates of the state in real time and also with 60fps experience if you set the throttle as low as 16!

---

Conclusion

I would recommend it to many people who strive to implement collaborative features as it makes the whole process easier, you get to save months of work and have it in days, live cursors, live updated data on your screen, without the trouble of breaking your head against the wall!

Also love that it is focused on typescript as well which improves the whole developer experience.

All in all I would recommend it, and I am already looking for ways and ideas what and how to implement, with liveblocks, implementing things like a spreadsheet, mural whiteboard etc becomes 10000 times easier, so what are you waiting for, check out their website!