The open source demo app for Supabase Realtime. Open multiplayer.dev in a few browser tabs to see other visitors' cursors, who is online, and a shared chat, all delivered over Realtime.
- Presence – the avatar stack in the top corner shows who is currently online. Realtime tracks each connection and notifies everyone else when someone joins or leaves, even if they drop unexpectedly.
- Broadcast – cursor positions and emoji reactions are sent as short-lived Broadcast messages that fan out to everyone in the room without being stored in the database.
- Broadcast from Database – chat messages are inserted into a Postgres table, and a trigger calls
realtime.sendto broadcast each one to the room. Seemigrate.sqland the Broadcast from Database docs. - Broadcast Replay – the chat channel is private and asks Realtime to replay recent messages, so you see recent history when you join or reconnect. Replayed messages are shown dimmed.
- Authorization – private channels are checked against Row Level Security policies on
realtime.messages. See the Realtime Authorization docs.
-
Create a Supabase project and run
migrate.sqlin the SQL editor to set up the chat table, trigger, and policies. -
Copy
.env.exampleto.env.localand fill in your project URL and API key (find them in your project's API settings). -
Install dependencies and start the dev server:
npm install npm run dev
- Supabase Realtime, with Multiplayer Features – the 2022 launch post for this demo, covering Presence and Broadcast
- Realtime: Broadcast from Database – send database changes to clients with Broadcast
- Realtime: Broadcast Replay – let private channels retrieve earlier messages
- Realtime Authorization docs – secure channels with RLS policies
- Realtime documentation
- Supabase UI Library Realtime components – drop-in components for building features like these: Realtime Cursor, Realtime Avatar Stack, and Realtime Chat