- Examples
- /
- Add live cursors for collaborative multiplayer experiences
Add live cursors for collaborative multiplayer experiences
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.
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.
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

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

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.
How to add live cursors to your product
With the Spaces SDK, it is easy to add live cursor functionality to an existing product.
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.
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:
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.
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!
Next steps
Find out more on how to use spaces and build other collaborative functionality - read the docs.
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.
Discover more collaborative features
Discover the other features you could use to deliver a world-class collaborative experience, including:
Recommended Articles

Add an avatar stack for live collaborative experiences
Spaces: Ably's realtime collaboration SDK to help you build and deploy avatar stacks, and other features, which support shared live experiences online.

How to implement a typing awareness indicator
Discover how to add a realtime typing indicator to your live chat, or other collaborative experiences, using Ably APIs and SDKs.

Activity Feeds: Explanation, benefits and how to get started
Discover what activity feeds and streams are, their use cases and benefits, and how to use Ably APIs and SDKs to set up an activity feed.