1. Examples
  2. /
  3. Add live cursors for collaborative multiplayer experiences
2 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, or live mouse cursors, show where other users’ cursors are in a virtual space, such as a digital board. It allows users to see where people are when collaborating online. It gives a sense of togetherness in a digital world.

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

You can incorporate more functionality within your live mouse cursors such as:

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

  • Allowing users to annotate and draw on the board

  • Adding emotions to a cursor

Copy link to clipboard

How to add live cursors to your product

With Ably, 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 one of our SDKs to get started.

Copy link to clipboard

Step 2: Start using Ably Channels and Pub/Sub

Ably Channels

Channel is the unit of distribution of messages. Channels can be used to segment the data. For example, cursors in different boards, different rooms in audience engagement tools etc. Users or their devices can subscribe to a specific or multiple channels.

Ably Pub/Sub Messaging

Pub/Sub is an architectural pattern used to distribute realtime information, such as messages. Messages can be of any format. For Live Cursors, the data will represent a cursor position. Publishing multiple messages allows the cursor to be tracked.

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!

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