Mouse Pointers

The Real-time Mouse Pointers feature enables real-time tracking of participants' cursor movements, allowing seamless collaboration within the same room.

Quickstart

To add the Mouse Pointers component to your application, follow the steps below:

1

Before we start

Before utilizing the Mouse Pointers component, it is essential to initialize a room with a defined name and ID for the participant and the group. You need to have the room variable to add the Mouse Pointers component.

2

Setup your HTML element

The Mouse Pointers component requires an HTML element to display the mouse pointers, this element can be any HTML element on your web page and need to have an ID attribute.

<div id="my-id" width="200" height="100"></div>

3

Add the Mouse Pointers component

To allow the Mouse Pointers to display the mouse pointers into the HTML element created on your web page you need to add the Mouse Pointers component to the room, and use the ID attribute of the element. Like on the following code snippet:

import { MousePointers } from "@superviz/sdk";

const mousePointers = new MousePointers("my-id");
room.addComponent(mousePointers);

4

Next steps

You are now all set! See what else can you do:

Mouse Pointers API Reference

Resources to get you started

We've prepared a few resources to help you get started with the Mouse Pointers component and use it alosing with other components to create a collaborative environment.

How to implement real-time mouse pointers into a web-application using SuperViz React SDK

How to add real-time synchronization to your productivity-tool

Learn how to add real-time synchronization to a React Flow application