Embed collaborative experiences into your React app
Liveblocks empowers developers to embed performant collaborative features to any product in just days.
Companies of all sizes and industries use Liveblocks
Multiplayer Editing -Realtime collaboration
Let users co-edit text and manipulate data simultaneously, in realtime—just like Figma or Notion.
import{ LiveObject}from"@liveblocks/client";import{ useStorage, useMutation}from"./liveblocks.config";// Pass these to RoomProviderconst initialStorage={ scientist:newLiveObject({ firstName:"Ada", lastName:"Lovelace",}),};exportdefaultfunctionForm(){const scientist=useStorage(root=> root.scientist);const update=useMutation(({ storage}, field, value)=>{ storage.get('scientist').set(field, value);},[]);return(<><input value={scientist.firstName} onChange={(e)=>{update("firstName", e.target.value)}/><input value={scientist.lastName} onChange={(e)=>{update("lastName", e.target.value)}/></>);}Presence -Realtime presence indicators
Easily integrate presence indicators like live cursors and avatar stacks to create a shared, realtime experience.
import*asYfrom"yjs";import{ createClient}from"@liveblocks/client";import LiveblocksProviderfrom"@liveblocks/yjs";const client=createClient({ publicApiKey:"pk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});const{ room, leave}= client.enterRoom("your-room-id",{ initialPresence:{},});// Create Yjs document and providerconst yDoc=newY.Doc();const yProvider=newLiveblocksProvider(room, yDoc);