Add live cursors for collaborative multiplayer experiences

Copy link to clipboardWhat do we mean by a live cursor?

Live 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 clipboardWhere can I use live cursors?

Live 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 clipboardAdvanced live cursor functionality

You can incorporate more functionality within your live 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 clipboardHow to add live cursors to your product

With Ably, it is easy to add live cursor functionality to an existing product.

Copy link to clipboardStep 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 clipboardStep 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.

• channels.get - to get an existing or create a new channel

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.

• channel.subscribe - to subscribe to messages on a channel

• channel.publish(data) - to publish a message on a channel

Copy link to clipboardStep 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 clipboardDiscover more collaborative features

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

• Avatar stacks

• Typing indicators

• Emoji reactions

• Activity feeds