Live cursors
Display the live pointer location of members in a virtual space with this React starter-kit.
Get started with live cursors
What are live cursors? Live cursors show the mouse pointer position of other collaborators. They can be useful to show what someone is currently looking at and their movement around a space. They can take many forms - from the conventional arrow to cursors showing names or avatars.
Advance and enhance
Live cursors can extend way beyond pointing and showing movement around a space. Tracking the movement of the cursors also presents the opportunity to annotate or replay the ‘drag and drop’ animation for UI components.
Where to use live cursors
Live cursors can add value to a range of multiplayer collaboration experiences, especially when used in combination with other collaborative features.
Some example use cases include:
- Project management
- Chat
- CRM
- Slide decks
- Spreadsheets
- Collaborative forms
- Whiteboards
- CMS
Live cursors best practices
Too many live cursors can be distracting
It is important to make sure that live cursors add value - and aren’t a distraction. Consider how many users might collaborate in a single space, and whether providing live cursors will make the UI so busy that their value is lost.
Smooth motion is critical
Jerky movements or having cursors jump around from place to place, will reflect poorly on the entire experience. The movement of cursors has to be smooth and performant.
,Differentiate between a user's own cursor vs others
Ensure it is always very easy for a user to know which cursor is theirs versus those of other users. Not only will this prevent confusion but it also means there are no issues like lag to deal with. The beauty of live cursors is that it shows the movements of others around you. It is not about watching an animated view of your own cursor. The standard desktop cursor will suffice.
,Link the cursor to the avatar profile
When multiple users are active in close proximity it can be difficult to understand who’s who, especially when things are moving quickly. In these cases just matching the cursor colour to an avatar is not enough. Add a name and/or avatar to enhance the UX.
,Accommodate different devices
Whatever a user is pointing to their action must be accurately reflected to everyone regardless of the device used. Make sure the cursor position is adjusted to the screen size - and if necessary adjust to different layouts.
Discover more live demos
A host of collaborative features to enhance your user experience.
Avatar stack
Avatar stacks show all the users collaborating within a shared space. They can help users make informed decisions by indicating the connection state of fellow collaborators.
Member location
Member location is a way to show where fellow collaborators are located within a shared space. This can be useful for understanding what other members are working on.
Component locking
Component locking can be a valuable tool for collaborative applications. A lock displayed over a particular component signals to other members that they are currently being edited.
Integrations, whatever your stack
From Webhooks to Lambdas to stream processors like Kafka, Ably has built integrations for a range of protocols, frameworks, databases and cloud services.
View all integrationsStart building with Ably today
Join more than 900 companies already building with Ably.