Introduction

Realtime SDK

Real-time collaboration infrastructure for web applications. Build features like:

Live Presence — See who's online with custom metadata
Cursors — Real-time cursor positions with smooth interpolation
Document Sync — Yjs CRDT for conflict-free collaborative editing
Custom Events — Broadcast arbitrary events to room members

Quick Start

Installation

npm install @realtime-sdk/react
# or
pnpm add @realtime-sdk/react

Basic Usage

import { RealtimeProvider, useRoom, usePresence, useCursors } from '@realtime-sdk/react';
 
function App() {
  return (
    <RealtimeProvider
      endpoint="wss://api.realtimesdk.dev"
      authToken={getToken}
    >
      <CollaborativeEditor />
    </RealtimeProvider>
  );
}
 
function CollaborativeEditor() {
  const room = useRoom('document-123');
  const { others, updatePresence } = usePresence(room);
  const { cursors, updateCursor } = useCursors(room);
 
  return (
    <div onMouseMove={(e) => updateCursor({ x: e.clientX, y: e.clientY })}>
      {cursors.map(cursor => (
        <Cursor key={cursor.id} {...cursor} />
      ))}
      <PresenceList users={others} />
      <Editor />
    </div>
  );
}

Why Realtime?

Predictable Pricing

Unlike MAU-based pricing, Realtime bills on peak concurrent connections (P95). A 5-second visitor doesn't inflate your bill like it would with other providers.

Open Source Friendly

Client SDKs are fully open source. Self-host with Docker or use our managed service.

Framework Support

First-class support for React, with Vue and Svelte coming soon.