Liveblocks for Mobile Apps: Real-Time Collaboration

Two users simultaneously edit a task list: one on an iPhone, the other on an Android. Data diverges quickly, conflicts pile up, and the final state is unpredictable. REST API doesn't provide real-time, and building a custom WebSocket server with CRDT takes months of development and debugging. Data loss due to conflicts can reach 15% of all changes.

We integrate Liveblocks—a managed infrastructure for collaborative editing. It provides a ready-made WebSocket server, CRDT storage (based on Liveblocks Storage), presence, comments, and notifications via a cloud API. In the browser, integration takes a day; in a React Native mobile app, from a week. This accelerates time to market by 3–6 times compared to building from scratch. Infrastructure cost savings can be significant.

What Liveblocks gives out of the box?

• Storage — CRDT storage based on its own implementation with LiveObject, LiveList, LiveMap. Changes replicate between clients in <100 ms within the same region.
• Presence — ephemeral user state: cursor position, selection, status. Not persisted, only online.
• Yjs integration — via @liveblocks/yjs you can use Yjs documents with web editors (Tiptap, Slate).

According to Wikipedia, CRDT guarantees consistency in distributed systems.

How to connect Liveblocks in React Native?

1. Install packages: npm install @liveblocks/client @liveblocks/react
2. Create a client with createClient and configure authentication.
3. Define Presence and Storage types for your app.
4. Export hooks via createRoomContext.
5. Wrap the editor screen in RoomProvider.

import { createClient } from '@liveblocks/client'; import { createRoomContext } from '@liveblocks/react'; const client = createClient({ authEndpoint: '/api/liveblocks-auth', // or publicApiKey for prototypes }); type Presence = { cursor: { x: number; y: number } | null; selectedItemId: string | null; }; type Storage = { items: LiveList<{ id: string; text: string; done: boolean }>; }; export const { RoomProvider, useMyPresence, useStorage, useMutation } = createRoomContext<Presence, Storage>(client); 

RoomProvider wraps the editor screen. Inside, useStorage gives an immutable snapshot, useMutation — transactional mutations.

Issue in RN: @liveblocks/client uses fetch and WebSocket, which are available, but EventSource (SSE for notifications) is missing without a polyfill. Install react-native-event-source and a global polyfill:

import EventSource from 'react-native-event-source'; global.EventSource = EventSource; 

Get a consultation on client setup and polyfills—this saves you up to 40% of integration time.

What is Presence in a mobile context?

In a browser, presence means mouse coordinates. In a mobile app, other use cases:

• Collaborative task list editing: presence = { focusedItemId: string | null } — highlight the item being edited.
• Collaborative whiteboard: presence = { x, y, tool: 'pen'|'eraser' } — show the stylus.
• Document editor: presence = { selection: { anchor, focus } | null } — text selection.

Use useOthersConnectionIds and useOther for reactive presence data. For optimization, useOthersMapped selects only necessary fields.

Why choose Liveblocks for a mobile app?

The comparison shows: Liveblocks wins on integration speed but falls short on offline mode and data control. For most MVPs and medium projects, this is sufficient.

Offline mode: what is not included out of the box

Liveblocks does not provide offline persistence. When the network is absent, changes are lost. We solve this with a mutation buffer in AsyncStorage:

const [pendingMutations, setPendingMutations] = useAtom(pendingMutationsAtom); NetInfo.addEventListener(state => { if (!state.isConnected) { const snapshot = storage.toObject(); AsyncStorage.setItem('offline_snapshot', JSON.stringify(snapshot)); } else { pendingMutations.forEach(mutation => mutation()); setPendingMutations([]); } }); 

const status = useStatus(); if (status === 'reconnecting') { return <ReconnectingBanner />; }