Live Cursors

Copy link to clipboardAdd Live Cursors to your application

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?

• 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 clipboardOther Possible Features?

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 clipboardBuilding your Live Cursor

Ably has simple yet powerful APIs to help you to build Live Cursors, enabling multiple users to collaborate efficiently online.

Copy link to clipboardAbly 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

Copy link to clipboardAbly 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 clipboardGetting started: Live Cursors checklist

You'll need to do the following to get started with adding Live Cursors to your application.

• Implement the UI for the Live Cursor

Copy link to clipboardWhat’s Next?

• What's next?

  • Sign up for a free Ably account

  • Download one of our SDKs

  • Explore all other examples