Realtime Cursor

Installation

Set up the Supabase client

This block requires a Supabase client for Vue. If your project already has one, reuse it and update the block's imports to match your client. Otherwise, install the client:

Configure the environment variables described in the Vue client guide before using the block.

Install the block

Introduction

The Realtime Cursors component lets users share their cursor position with others in the same room—perfect for real-time collaboration. It handles all the setup and boilerplate for you, so you can add it to your app with minimal effort.

Features

• Broadcast cursor position to other users in the same room
• Customizable cursor appearance
• Presence detection (automatically joins/leaves users)
• Low-latency updates using Supabase Realtime
• Room-based isolation for scoped collaboration

Usage

The Realtime Cursor component is designed to be used in a room. It can be used to build real-time collaborative applications. Add the <RealtimeCursors /> component to your page and it will render realtime cursors from other users in the room.

<script setup lang="ts">
import RealtimeCursors from '@/components/RealtimeCursors.vue'
</script>
 
<template>
  <div class="w-full min-h-screen">
    <RealtimeCursors roomName="macrodata_refinement_office" username="Mark Scout" />
  </div>
</template>

Props

Further reading

• Realtime Broadcast
• Realtime authorization

Smoother cursors

While our Realtime Cursor component aims to keep things simple and lightweight, you may want to add smoother cursor animations for a more polished experience. Libraries like perfect-cursors can be integrated to add sophisticated interpolation between cursor positions. This is especially useful when dealing with network latency, as it creates fluid cursor movements even when position updates are received at longer intervals (e.g., every 50-80ms). The library handles the complex math of creating natural-looking cursor paths while maintaining performance.