v1.5 · open source

Make any app multiplayer.

Presence, multiplayer cursors, shared state, and awareness for any app — over WebRTC, BroadcastChannel, or your own relay, with first-class React, Vue, Svelte, Solid, and Angular bindings.

Read the docs Try the live demo →

$ npm i @roomful/core

The toolkit

Everything multiplayer, in one small package.

Ten collaboration primitives and a transport layer that just works. Compose only what you need — each one is tree-shakeable and typed end to end.

Presence

See who is in the room in real time — names, colors, and any metadata you attach, synced the instant someone joins or leaves.

Cursors

Smooth, labeled multiplayer cursors with built-in interpolation. Mount once and every peer’s pointer broadcasts automatically.

Shared state

Conflict-free shared values with last-write-wins by default, or drop in a full Yjs CRDT document when you need rich merges.

Awareness

Ephemeral per-user signals: who is typing, what they have selected, where they are looking — gone the moment they disconnect.

Events

Fire-and-forget realtime events between peers for reactions, toasts, nudges, and anything that should feel instant.

Viewport sync

Follow a teammate’s scroll and zoom, or flip on present mode to pull everyone to your view — perfect for walkthroughs and reviews.

Locking

Distributed advisory locks so two people never edit the same record at once — claim, hold, and release with automatic cleanup on disconnect.

Laser pointer

Point at anything on screen with a labeled laser beam that fades on its own — ideal for demos, pairing, and guiding attention.

Comments

Anchored, persistent threads that stick to elements in your app, so feedback lives exactly where the work is and survives reloads.

010

History

Per-peer, conflict-free undo and redo over a shared timeline — step back through changes without trampling anyone else’s edits.

011

Any transport

WebRTC peer-to-peer, same-device BroadcastChannel, or a self-hosted WebSocket relay. The same API runs on all three.

Ship in an afternoon

A few lines, fully typed.

Wrap your tree, call a hook, and you have live presence and cursors. The same primitives are Vue composables, Svelte stores, and Solid signals too.

01 Wrap your tree in the provider
02 Call a hook — presence, cursors, state
03 Render live — no backend wiring

@roomful/core Framework-agnostic
@roomful/react Hooks + Provider
@roomful/vue Composables
@roomful/svelte Stores + actions
@roomful/solid Signals + Provider
@roomful/angular Providers + signals
@roomful/next Auth tokens

design-review.tsx

import {
  RoomfulProvider,
  usePresence,
  useCursors,
  useSharedState,
} from '@roomful/react';

function DesignReview() {
  return (
    <RoomfulProvider roomId="design-review" presence={{ name: 'Ada' }}>
      <Canvas />
    </RoomfulProvider>
  );
}

function Canvas() {
  const { others } = usePresence();
  const [zoom, setZoom] = useSharedState('zoom', { initialValue: 1 });

  useCursors(); // live multiplayer cursors, mounted

  return <p>{others.length} teammates exploring at {zoom}×</p>;
}

Transport-agnostic

Start peer-to-peer, scale when you need to.

One API, three transports. Prototype with zero infrastructure, then move to a relay you control without rewriting a line of product code.

Zero backend

WebRTC

Peers connect directly for small rooms. No server to run, no per-seat bill — just open a room and collaborate.

Same device

BroadcastChannel

Sync tabs and windows on one machine with no network at all. Perfect for local-first apps and demos.

Production scale

WebSocket relay

Self-host the open-source relay (Docker or npm) with JWT auth, CORS, and Redis fan-out when you outgrow peer-to-peer.

collaboration primitives

transports, one API

framework bindings

100 %

open source · MIT

Ship presence today.

Install the core package, follow the five-minute quickstart, and have teammates in the same room before your coffee gets cold.

Get started Star on GitHub