1. Examples
  2. /
  3. Add live cursors for collaborative multiplayer experiences
4 min readUpdated Mar 3, 2023

Add live cursors for collaborative multiplayer experiences

Copy link to clipboard

What do we mean by a live cursor?

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.

Copy link to clipboard

Test the Spaces live cursor implementation in realtime!

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.

Copy link to clipboard

Where can I use live mouse cursors?

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

Copy link to clipboard

Advanced live cursor functionality

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

Copy link to clipboard

Building live cursors

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.

Copy link to clipboard

How to add live cursors to your product

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

Copy link to clipboard

Step 1: Sign up to Ably for free

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.

Copy link to clipboard

Step 2: Start, streaming live cursor positions

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: 

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.

Copy link to clipboard

Step 3: Implement the UI

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.

Copy link to clipboard

Don’t forget to try out the Spaces live cursor implementation!

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.

Copy link to clipboard

Discover more collaborative features

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

Join the Ably newsletter today

1000s of industry pioneers trust Ably for monthly insights on the realtime data economy.
Enter your email