Add live cursors for collaborative multiplayer experiences

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.

Click below to try the live cursor demo and to browse through the code that powers it.

Test the demo. Open on multiple browser windows/devices, or share with a friend. See new live cursors instantly appear, move and disappear as soon as a tab is closed.

Live mouse cursors can add value to a range of multiplayer collaboration experiences. Some example use cases are:

• Tracking multiple cursor movements on a digital board

• Showing cursors when annotating during a screen share

• Adding audience engagement functionality using cursors

Live cursors can extend way beyond pointing and showing movement around a space. Tracking the movement of the cursors also presents the opportunity to:

• Replay the ‘drag and drop’ animation for UI components

• Show mouse interaction, such as clicks, mouse drag etc.

• Allow users to annotate and draw on the board

• Add emotions to a cursor

When to use animated cursors vs a users standard cursor

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 original cursor will suffice. Not only will this prevent confusion on “who am I again?” but it also means there are no issues like lag to deal with.

Clear identification of members

When multiple users are active in close proximity it can be difficult to understand who’s who, especially when things are fast moving. In such instances just matching the cursor colour to an avatar is not enough, consider instead the addition of a name and/or avatar to enhance the UX.

Design for different screen sizes

Make sure the cursor position is adjusted to the screen size. This will ensure that whatever a user is pointing to is accurately reflected to everyone on different devices - even if that means adjusting to different layouts.

With the Spaces SDK, it is easy to add live cursor functionality to an existing product.

Visit our sign up page to start using Ably for free. Simply upgrade when you need to ramp up usage past 6M Monthly messages, 200 Peak concurrent channels, 200 Peak concurrent connections. Once you are signed up, download our Spaces and Ably-js SDKs to get started.

Subscribe to live cursor positions

The live cursors feature enables you to track the cursors of members within a space in realtime. Cursor events are emitted whenever a member moves their mouse within a space and need to be subscribed to using: 

• space.cursors.subscribe('update', (event) => { console.log('new cursor event', event) })- Subscribe to live cursors 

Set cursor position

Set the position of a member’s cursor using the set() method. A position must contain an X-axis value and a Y-axis value to set the cursor position on a 2D plane. It may also contain additional information about the cursor, such as the color other members should display it as. Calling set() will emit a cursor event so that other members are informed of the cursor movement in realtime. 

The set() method takes the following parameters:

• position.x- The position of the member’s cursor on the X-axis.

• position.y- The position of the member’s cursor on the Y-axis.

• data- An optional arbitrary JSON-serializable object containing additional information about the cursor, such as a color.

Now all you need to do is implement the UI for the live cursor - and you're ready to go!

Find out more on how to use spaces and build other collaborative functionality - read the docs.

Get hands-on with our live cursor API by testing the demo in realtime - on multiple browsers, or with a friend. You can also browse through the code that powers it.

Discover the other features you could use to deliver a world-class collaborative experience, including:

• Avatar stacks

• Typing indicators

• Emoji reactions

• Activity feeds