Presence

Track user presence in real-time applications with Convex backend integration for live user status, typing indicators, and activity monitoring.

Installation

npm install @convex-dev/presence

About Presence

It can be tricky to implement presence efficiently, without any polling and without re-running queries every time a user sends a heartbeat message. This component implements presence via Convex scheduled functions such that clients only receive updates when a user joins or leaves the room.

The most common use case for this component is via the usePresence hook, which takes care of sending heartbeart messages to the server and gracefully disconnecting a user when the tab is closed.

Benefits

Use cases

how to show online users in Convex app

The @convex-dev/presence component provides APIs to track and display online users in real-time. It automatically updates presence status when users join or leave your application, enabling you to build live user lists and activity indicators.

add typing indicators to chat app Convex

This presence component handles typing indicators by tracking user activity states in real-time. You can set user status to 'typing' and automatically clear it after inactivity, giving you the foundation for responsive chat experiences.

track user activity in collaborative editor

The component enables tracking multiple users editing the same document simultaneously. It provides presence data for cursor positions, active selections, and user focus states that collaborative editors require.

Convex real-time user status tracking

With @convex-dev/presence, you get automatic user presence management that handles connection states, heartbeat monitoring, and cleanup when users disconnect. This eliminates the complexity of building presence systems from scratch.

Frequently asked questions

How does the Convex presence component handle user disconnections?

The @convex-dev/presence component automatically detects when users disconnect or close their browsers and removes their presence data. It uses heartbeat mechanisms and connection monitoring to ensure presence information stays accurate without manual cleanup.

Can I track presence across multiple rooms or channels?

Yes, the presence component supports scoped presence tracking where users can be present in multiple rooms simultaneously. Each presence context is isolated, allowing you to track user activity in different parts of your application independently.

What user data can I store with presence status?

The @convex-dev/presence component lets you store custom metadata alongside presence status, such as user names, avatar URLs, cursor positions, or activity states like typing. This data is synchronized in real-time across all connected clients.

Does presence tracking work with Convex authentication?

The presence component integrates with Convex's authentication system to associate presence data with authenticated users. It can also support anonymous presence tracking for users who are not logged in but still need to appear as active participants.

Links