Post

Love how easy it is to build custom collaborative apps with @liveblocks.io 👏 Imagine if `useState` were multiplayer—that's basically what it is. How I built this real-time header ↓

Let's start with the colour changer, and create a button that changes the cover to red. With `useMutation` we can access the real-time document state, and create a function that modifies it. We'll store the colour in the `cover` property.

Next, we want to render the current colour. We can add `useStorage` for this, which returns the current colour string, and updates in real-time whenever there's a change. Pretty easy, huh? That's all it takes to add a new real-time component.

There's a couple of other steps where you set up your types and authenticate your users, but you only need to do it once. Setting up an emoji picker is essentially the same, just you also need an awesome emoji picker component like frimousse.liveblocks.io too.

This is a really simple demo, but you can use also Storage to hold much more complex data, for example deeply nested JSON trees, with full conflict resolution per object/list/map. Picture apps like Figma, Pitch, Spline. Plus, you can make @tldraw.com multiplayer! liveblocks.io/examples/tl...

We've also just added support for editing Storage on the server, meaning you can have AI generate real-time document data for you. Learn more in today's blog post. lblcks.io/qrULpuS