What it looks like
It looks like a shared document with other people inside it. The top bar shows the title, how many people are online and a stack of round avatars with initials. Small colored arrows move over the text, each with a tag showing a first name; they glide smoothly to their target and fade when the person stays idle for a while. Text selected by each teammate gets a background in their color. Clicking an avatar makes the page follow that person, framed by a border in their color. Pressing slash opens a message bubble that follows your pointer.
You may be looking for this if you asked for something like
- show other people's cursors in the document, like in Figma
- see who is editing with me in real time
- colored arrows with each user's name moving on the screen
- little circles with the initials of who is online at the top
- follow a teammate's view during a review
- send a quick note that shows up at my cursor
- Google Docs style multi-user presence in my app
Also known as
- live cursors
- multiplayer cursors
- real-time presence
- collaborative editing
- presence avatars
- cursor chat
When to use
- Collaborative editors for text, proposals and internal documents
- Review boards where the team needs to see where everyone is
- Live presentations and training where the audience follows the presenter
- Any product that wants to show who is online on the same page
When to avoid
- Projects without a real-time server, since the component only shows the presence you feed it
- Phone-first use, where there is no mouse cursor to share
How to ask your AI
Add live teammate cursors to my collaborative editor: named arrows with smooth motion, colored text selections, avatars to follow someone, cursor chat on the slash key, events ready for my WebSocket and still cursors for people who prefer reduced motion.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Comitiva
How do I connect Comitiva to my server?
Comitiva emits your pointer every 50 milliseconds, your text selection and your chat messages, ready to send over a WebSocket. To show teammates, call updatePeer with name, color, cursor and selection, and removePeer when someone leaves. With simulate turned off, the component shows only real data.
Does Comitiva respect reduced motion settings?
Yes. With reduced motion turned on, Comitiva swaps the simulation for a still scene with teammates in fixed spots, and cursors jump straight to their target without the spring. It notices when the setting changes while the page is open and stops animating when it leaves the screen.
Can I follow someone in Comitiva?
Yes. In Comitiva, clicking a teammate's avatar makes the page scroll by itself to keep their cursor in view, framed by a border in their color. Scrolling, touching the screen or pressing Esc stops following, and the follow event tells your code.
