Collaborative Cursor Room
Open two tabs and watch the other cursor move in real time.
IntermediateWeb appSocial8–16hAI-buildable 5/5no setup
The smallest possible real-time collaboration app, and a genuinely good way to learn the pattern. Everyone in a room broadcasts their cursor position; everyone else renders it with a name label. Once cursors work, the same transport carries anything else you want to sync.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 6
- Joining a room assigns you a name and a colour
- Your cursor position broadcasts to everyone else in the room
- Other participants' cursors render with a trailing name label
- A participant list shows who is currently connected
- Cursors disappear when someone leaves or goes idle
- Cursor updates are throttled rather than sent on every mouse move
The interesting part
- Throttling updates without making remote cursors look jerky
- Cleaning up cursors for participants who disconnect ungracefully
- Keeping coordinates correct across different viewport sizes
Once it works
- Add ephemeral click reactions that everyone sees
- Add a shared text field with last-write-wins
- Interpolate remote cursor movement so it looks smooth at a low send rate
Suggested stack
reacttypescripttailwindsupabase