Live cursors

Display the live pointer location of members in a virtual space with this React starter-kit.

What are 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.

What are live cursors

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
View the docs
Where to use live cursors

Live cursors best practices

Too many live cursors can be distracting

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

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,

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,

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,

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 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.

Check it out
Member location

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.

Check it out
Component locking

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.

Check it out
Spaces Integrations: datadog, AWS, React, Lambda, WebHooks, Apache Kafka, AWS SQS, AWS Kinesis

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 integrations

Start building with Ably today

Join more than 900 companies already building with Ably.