liveblocks

Integrate real-time collaborative features into React applications using the Liveblocks SDK.

4|Updated Jan 15, 2026

Search Tags:#collaboration #react #real-time #presence #storage #liveblocks #cursors

Ready to run

npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill liveblocks

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: liveblocks
Source: https://github.com/mgd34msu/goodvibes-gemini/tree/main/skills/liveblocks
Command: npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill liveblocks

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @liveblocks/client, @liveblocks/react, @liveblocks/react-comments, @liveblocks/yjs, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables developers to easily integrate real-time collaborative features like presence, cursors, storage, comments, and notifications into their React applications, simplifying the development of multiplayer experiences.

Core Features & Use Cases

Real-time Presence: Track and display user presence, including cursors and selections.
Synchronized Storage: Persist and sync data across clients using conflict-free data types (LiveList, LiveMap, LiveObject).
Comments & Notifications: Implement contextual commenting systems and transient messages.
Yjs & Redux Integration: Seamlessly integrate with Yjs for collaborative editing and Redux patterns.
Use Case: Adding live cursors and shared document editing to a collaborative whiteboard application.

Quick Start

Install the necessary packages by running npm install @liveblocks/client @liveblocks/react.

Frequently Asked Questions about liveblocks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add real-time collaboration features to my React application?▼

To add real-time collaboration to a React application, this Skill facilitates the integration of the Liveblocks SDK, enabling synchronized storage, presence management, live cursors, and contextual comments for multiplayer experiences.

How does presence management work for displaying live cursors?▼

Presence management tracks and displays user states like live cursors and selections across clients in real time. It leverages the Liveblocks client to broadcast user positions and active selections instantly within your React components.

Can I use Yjs for collaborative editing with synchronized storage?▼

Yes, you can integrate Yjs for collaborative editing. The Skill supports Yjs integration to handle synchronized storage and conflict-free data types, allowing multiple users to edit shared documents simultaneously without data conflicts.

Do I need Redux to implement contextual comments and notifications?▼

No, you do not need Redux to implement comments and notifications. While Redux integration is supported, you can directly use the Liveblocks React packages to add contextual commenting systems and transient messages independently.

What's the best way to sync data across clients using conflict-free data types?▼

The best way to sync data across clients is by using Liveblocks' conflict-free data types like LiveList, LiveMap, and LiveObject. This Skill helps you persist and synchronize storage state automatically across all connected React clients.

Are there limitations when building multiplayer experiences with Liveblocks?▼

When building multiplayer experiences with Liveblocks, you must manage real-time presence, synchronized storage, and Yjs integration within React. Limitations include relying on their specific conflict-free data types and client packages for state synchronization.