Post

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.