Quick Start
Get real-time collaboration running in your React app in under 5 minutes.
1. Install
terminal
$ bun add @waits/lively-client @waits/lively-react @waits/lively-server
2. Start the server
server.ts
import { LivelyServer } from "@waits/lively-server";
const server = new LivelyServer({ port: 1999 });
server.start();
Run with bun run server.ts — the WebSocket server starts on port 1999.
3. Wrap your app
app.tsx
import { LivelyProvider, RoomProvider } from "@waits/lively-react";
function App() {
return (
<LivelyProvider serverUrl="ws://localhost:1999">
<RoomProvider roomId="my-room">
<YourApp />
</RoomProvider>
</LivelyProvider>
);
}
4. Use the hooks
Show who's online:
who-is-here.tsx
import { useOthers } from "@waits/lively-react";
function WhoIsHere() {
const others = useOthers();
return <div>{others.length} others online</div>;
}
Share cursor position:
cursors.tsx
import { useMyPresence } from "@waits/lively-react";
const [me, update] = useMyPresence();
// Call update({ cursor: { x, y } }) on mousemove
Sync shared state:
counter.tsx
import { useStorage, useMutation } from "@waits/lively-react";
const count = useStorage(root => root.get("count"));
const increment = useMutation((root) => {
root.set("count", root.get("count") + 1);
}, []);