Live Cursors

Move your mouse in the area below. Every connected browser sees everyone else's cursor in real-time. Open this page in two side-by-side windows — the active window sends cursor positions, and all other windows render them. Click into each window to make it active and move your cursor.

How it works: Each browser connects to a WebSocket pub/sub channel (/__ws/cursors). Mouse movements are published as JSON messages. Every subscriber receives them and renders colored cursor arrows.

A Rex transform script (_ws/cursors.rex) runs on every message before publishing. The current transform inverts the Y axis — other people's cursors appear mirrored vertically. Edit the script to change the transform in real-time (hot reload works for WebSocket scripts too).

Connecting...

How the pub/sub channel works

The WebSocket endpoint /__ws/cursors is a generic pub/sub channel. Any message sent by a client is broadcast to all other subscribers. The server maintains the channel in an in-memory KV store with automatic cleanup.

/* Any Rex handler can also publish to this channel: */
kv.publish("cursors", json.stringify({x: 100, y: 200, color: "#ff0000"}))

Transform Script

This Rex script runs on every cursor message (_ws/cursors.rex). Try editing it — changes take effect immediately via hot reload:

/* WebSocket transform for the cursors channel.
   Runs on every message before publishing to subscribers.
   Receives: event.data (JSON string)
   Returns: transformed message (string/object) or none to suppress */

msg = json.parse(event.data)

/* Pass through disconnect messages unchanged */
when msg.gone do
  return event.data
end

/* Mirror the y-axis — cursors appear inverted vertically */
y = msg.y
when msg.x and y do
  return json.stringify({
    id: msg.id
    x: msg.x
    y: 1 - y
    color: msg.color
    name: msg.name
  })
end

/* Pass through anything else unchanged */
event.data