How to
Add live cursors
After setting up a presence tracker with the Liveblocks plugin, you might want to take things further and show where users are on the page in real time. That’s where live cursors come in.
With live cursors, you can:
3. Add an ID to
In the designer, go to the 
- Track user movement: See where each user’s cursor is as they navigate the page.
- Show collaborative editing positions: Visualize where users are making edits in real-time.
- Enhance collaborative experiences: Provide real-time visual feedback for multiple users working on the same document.
What We’ll Build
This tutorial covers how we set up live cursors in the demo app. You can check out the full setup in the tutorial demo editor, or try it yourself in the live demo.
1. Set up Your App and Plugin for Presence
First, you’ll need to complete the presence tracker tutorial to set up the Liveblocks plugin and database. Once that’s done, copy the page and prepare it for adding live cursors.
2. Expose HTML Elements in Bubble
To track cursor positions, we need to expose HTML elements in Bubble. Go to the Settings tab, under the General section, and check the option toExpose the option to add an ID attribute to HTML elements.
3. Add an ID to Group User
In the designer, go to the Group User element and add an ID attribute. Choose any prefix (e.g., cursor), and append it with Current cell's text. This will allow the plugin to track each user’s cursor uniquely. We’ll use this prefix later in the Liveblocks - enter room action.
4. Modify the Workflow to Track Cursors
Now, head to the Workflows tab. In theLiveblocks - enter room action, update the following settings:
- Set
Enable positiontoyes. - Set
HTML ID prefixto the prefix you chose in step 3 (e.g.,cursor).
Hide default cursors as is.
5. Test It Out
Preview the page and open it in multiple tabs. You’ll notice that as users move their cursors around the page, their avatars will follow the cursor movements.