Liveblocks—Collaborative experiences in days, not months

Liveblocks provides developers with a complete toolkit to embed performant collaboration features to your product remarkably fast.

Sign up for free

Building blocks for collaboration

Add collaborative experiences you know and love like text editors, forms, creative tools, and whiteboards with Liveblocks APIs and tools.

Integrations

Integrates deeply with your tech stack

Liveblocks integrates deeply with popular frontend frameworks and libraries, making it easy to embed real‑time collaborative experience into any product.

We researched the best real-time collaborative architecture provider. We decided to go with Liveblocks and rely on everything with them, partly because we met the team and enjoyed working with them and partly because Liveblocks is stable and amazing.
Image of Arcol
Image of Paul O’Carroll
Paul O’CarrollCEO at Arcol
A globe
Liveblocks Platform

The platform for collaborative products

Liveblocks is the world’s most advanced platform for building, hosting, and scaling real-time collaborative products. No maintenance required.

  • WebSocket infrastructure

    Out-of-the-box edge network and reliable connection engine.

  • Zero configuration

    Host and scale to millions. No complex configuration required.

  • Effortless scaling

    Built to handle any traffic on your collaborative experiences.

  • No maintenance required

    Spend your time building, not maintaining infrastructure.

Opensource examples

Add collaborative experiences quickly and flexibly

Liveblocks provides you with powerful open‑source examples that can be used modularly. No upfront costs, unnecessary technical debt, or distracting your developers from focusing on the core product.

Designed for developers

Developer-centric tooling

Liveblocks accelerates developer productivity with developer tools, and analytics to understand how your users are using your product’s collaborative features.

User A
Drag the shapes
User B
Drag the shapes
import { LiveList, LiveObject } from "@liveblocks/client";import {  useStorage,  useMyPresence,  useOthers,} from "./liveblocks.config";
// Pass these to RoomProviderconst initialPresence = { selectedShape: null };const initialStorage = { shapes: new LiveList([ new LiveObject({ x: -60, y: 0, bg: "var(--gradient-color-left)" }), new LiveObject({ x: 60, y: 0, bg: "var(--gradient-color-right)" }), ]),};
// Shape data updating in real-timeconst shapes = useStorage(root => root.shapes);// => [{ x: -60, y: 0, bg: "var(--gradient-color-left)" },// { x: 60, y: 0, bg: "var(--gradient-color-right)" }]
// Share your presence as easily as using a useStateconst [myPresence, setMyPresence] = useMyPresence();setMyPresence({ selectedShape: "shapeId" });
// Get others people presence (cursors,// avatar, name, etc) with a single line of codeconst others = useOthers();
Join the community

Thousands of developers have already tried Liveblocks