Weave.js

Users Pointers

Showcase the position of the users mouse pointer on the canvas

Users pointers plugin on use on the Weave.js showcase

Introduction

This plugin displays real-time cursors or pointers for all connected users on the canvas. Each pointer is typically labeled with the user's name or avatar, allowing collaborators to see where others are pointing, clicking, or working in real time.

This plugin enhances awareness and coordination in multi-user sessions, making collaboration feel more intuitive and dynamic. It integrates with Weave.js's presence system and updates instantly as users move their mouse or interact with the canvas.

Usage

Import the Plugin

Start by importing the plugin:

import { WeaveUsersPointersPlugin } from "@inditextech/weave-sdk";

Register the Plugin

Then register the plugin on the Weave class instance.

const instance = new Weave({
  ...
  plugins: [
    ...,
    new WeaveUsersPointersPlugin(), 
  ]
})

You can also customize the pointer visual style and font style. For more information check the WeaveUsersPointersPlugin plugin API.

Use the plugin

Once the plugin is registered if more than one users are connected to the room, the instance user will be able to see the other users pointers, and the others users can see theirs.