Live Cursors in Mobile App: Implementation and Optimization

Developers often underestimate the complexity of live cursors: it seems enough to send coordinates via WebSocket and render them. But in practice, many nuances arise: network latency, different screen resolutions, zooming, and a large number of users. A mistake in any of these makes cursors unusable. We integrate live cursors from scratch or improve an existing implementation. In this article, we break down key technical solutions based on our experience: choosing a protocol (Y.js Awareness or custom WebSocket), coordinate normalization, animation interpolation, and scaling to 50+ participants. You will learn how to avoid typical mistakes and achieve smoothness on mobile devices.

Choice of Protocol: Y.js Awareness or Custom WebSocket

Y.js Awareness Protocol is the optimal solution if the app already uses Y.js for content synchronization. Awareness stores ephemeral states: they are not persisted, not part of the change history, and are automatically removed when a user disconnects.

// Update own cursor position
provider.awareness.setLocalStateField('cursor', {
  x: normalizedX,  // in document coordinates, not screen
  y: normalizedY,
  timestamp: Date.now()
});

// Subscribe to changes in other cursors
provider.awareness.on('change', ({ updated }) => {
  updated.forEach(clientId => {
    if (clientId === provider.awareness.clientID) return;
    const state = provider.awareness.getStates().get(clientId);
    if (state?.cursor) {
      updateRemoteCursor(clientId, state.cursor);
    }
  });
});

If Y.js is not used, we use a custom WebSocket channel with a throttle of 30ms (≈33fps). More frequent updates do not provide noticeable UX improvement but increase traffic. The server side may perform throttling to 50ms per client to save resources.

How Coordinate Normalization Solves the Jumping Problem

Critical point: cursor coordinates must be transmitted in the document coordinate system, not screen. Different users have different zoom levels, screen sizes, and scroll positions. If you transmit screen coordinates, cursors will jump around the screen instead of smoothly following the real position. For example, with zoom 200% for one user and 50% for another, the same screen coordinates correspond to different document points.

Conversion formula: cursorX = (screenX + scrollX) / scale. On the receiving end: displayX = documentX * scale - scrollX. When the recipient's zoom changes, the cursor position is recalculated automatically, eliminating desynchronization.

Ensuring Smoothness with Network Latency

Raw positions from the server are jerky, especially with 100–200ms latency. Interpolation is needed.

In React Native with react-native-reanimated:

const remoteCursorX = useSharedValue(0);
const remoteCursorY = useSharedValue(0);

// When receiving a new position from the server
const updateCursor = (x, y) => {
  remoteCursorX.value = withSpring(x, { damping: 20, stiffness: 300 });
  remoteCursorY.value = withSpring(y, { damping: 20, stiffness: 300 });
};

const animStyle = useAnimatedStyle(() => ({
  transform: [
    { translateX: remoteCursorX.value },
    { translateY: remoteCursorY.value },
  ]
}));

withSpring adds spring interpolation — the cursor smoothly 'catches up' to the real position. Alternative: withTiming with duration: 80 is simpler but less lively.

On Flutter: AnimationController + Tween<Offset> with CurvedAnimation(curve: Curves.easeOut).

On native iOS: UIViewPropertyAnimator with .interruptible option — allows interrupting and restarting animation on new positions without artifacts.

Why Canvas Rendering Is Better Than 50 Separate Views

With 50+ users, rendering each cursor as a separate View creates 50+ views, each with its own animation stream. This loads the GPU and increases memory consumption. Canvas-based rendering draws all cursors in one pass in a single context. On Flutter we use CustomPainter, on React Native — react-native-skia or Canvas from expo-gl. Tests show CPU load reduction of up to 40% with 100 cursors compared to separate Views.

Scaling: 50+ Users

With many users, several problems arise:

Traffic. N users × 33fps × ~50 bytes = at 50 users ~82 KB/s just for cursor updates. Solution: server-side throttling (server forwards updates no more than once per 50ms to each client) + turning off cursors for users outside the viewport.

Rendering. 50 animated views simultaneously on a mobile device is heavy. We use Canvas-based rendering instead of separate Views for each cursor. We draw all cursors in one CustomPainter / SKCanvas / Canvas in a single pass.

Identification. With 50 users, the name under the cursor is unreadable. We show the name only on hover/tap on the cursor; otherwise, only a color dot with an avatar is shown.

Displaying Name and Avatar

The user's name next to the cursor is classic UX. Implementation: a floating label that follows the cursor with a small offset. Problem: when moving to the edge of the screen, the label goes out of bounds. Clamping is needed — if the cursor is closer than X px to the right edge, the label appears on the left side of the cursor.

An avatar instead of a standard pointer is often better than a colored arrow. A circular image 24px in diameter, cached in memory.

Step-by-Step Integration Plan

1. Set up WebSocket channel (Y.js Awareness or custom).
2. Implement coordinate normalization in document space.
3. Animation interpolation with platform-specific tuning.
4. Optimize rendering (Canvas approach for >20 cursors).
5. Load testing (up to 200 concurrent cursors).

What Our Work Includes

• Audit of current architecture and protocol choice (Y.js Awareness / custom WebSocket).
• Implementation on your stack: iOS (Swift + Combine), Android (Kotlin + Compose), Flutter, React Native.
• Animation interpolation with platform-specific tuning.
• Scaling to 100+ users with Canvas rendering.
• Load testing (up to 200 concurrent cursors).
• Documentation and code handover, team training.

Our experience: 5 years developing collaborative mobile apps, more than 20 projects with real-time synchronization. We guarantee correct operation on all target devices and OS versions.

Timeline and Cost

Estimated timeline: from 1 week for a prototype to 3 weeks for a full integration with load testing. Cost is calculated individually — depends on stack complexity and required scalability. Contact us for a project audit. Order a turnkey Live Cursors implementation — get a consultation from an engineer within a day.

How to Start Integrating API into a Mobile App?

The request goes out, the response doesn't come, timeout — 30 seconds. The user stares at the spinner. No network — mobile card in the subway. Or the network is there, but the server returns 200 with an HTML error page instead of JSON — and the app crashes on JSONDecoder.decode(). We see such cases on every second project. So integrating API into a mobile app is not just calling an endpoint, but designing a reliable network layer: error handling, caching, offline mode, certificate pinning. Order an audit of your current network layer — we will evaluate the project in 1 day. Our team guarantees a thorough analysis and provides a detailed roadmap.

Standard libraries like URLSession and OkHttp provide basic HTTP clients, but for production you need retries with exponential backoff, status code validation, typed deserialization, and network state monitoring. Without this, the app loses data and users. We have been doing mobile development for 5 years and implemented more than 30 projects with API integration on iOS, Android, and Flutter — from startups to enterprise solutions.

How to Choose a Protocol for API Integration?

REST remains the standard for most projects. But when a profile screen needs 5 fields out of 40, GraphQL eliminates over-fetching and reduces traffic by 30–60%. gRPC is justified for thousands of requests per minute (trading, IoT) — binary serialization is 3–5 times faster than JSON. WebSocket is the only choice for real-time without polling (messages, notifications).

Practical example: For a fintech app, we replaced REST (40 fields) with GraphQL — response size dropped from 12 KB to 2.5 KB, screen render time decreased by 70%. Traffic savings were significant. Our certified iOS and Android developers have deep experience with all these protocols — you can rely on proven solutions.

How to Ensure Reliable Connection and Offline-First?

Users lose network in the subway, elevator, tunnel. A mobile app must work without internet — at least in read-only mode. We implement the offline-first pattern:

1. On screen open, first show data from the local cache (Core Data / Room).
2. Simultaneously perform a network request, update UI after response.
3. If network is unavailable — show cached data and a 'no connection' label.
4. When network is restored, automatically synchronize changes.

For HTTP response caching we use URLCache (iOS) and OkHttp Cache (Android) with Cache-Control support. For structured data — SwiftData / Room. NWPathMonitor / ConnectivityManager.NetworkCallback monitor network state and trigger updates.

REST and Client Library Selection

Alamofire (iOS) — de facto standard for Swift projects. On top of URLSession it adds request chaining, response validation, automatic retry, certificate pinning via ServerTrustManager. AF.request() with .validate() returns an error for any status code outside 200–299. Without .validate(), Alamofire considers 404 and 500 as successful responses. With Swift Concurrency — async version via serializingDecodable.

Retrofit (Android) — annotation-based HTTP client on top of OkHttp. An interface with annotations compiles into implementation. @GET, @POST, @Path, @Query, @Body — declarative API description. OkHttp under the hood: connection pooling, transparent gzip, HTTP/2 multiplex. HttpLoggingInterceptor — logging in debug builds. Authenticator — automatic token refresh on 401.

Ktor (KMM/Flutter) — multiplatform HTTP client. On iOS it works via Darwin engine (URLSession), on Android — via OkHttp. Single code for both platforms with KMM architecture.

GraphQL: When REST Falls Short

REST returns a fixed structure. A profile screen needs name, avatar, email — the server sends 40 fields. Over-fetching. GraphQL solves this: the client requests exactly the needed fields. This is critical for mobile where traffic and parsing time are real constraints. Apollo iOS and Apollo Kotlin generate typed classes from schema: schema.graphql + query files → strict types at compile time. Subscriptions via WebSocket — real-time without polling. Limitation: GraphQL is harder to cache at the HTTP level. Apollo uses a normalized in-memory cache InMemoryNormalizedCache — requests with overlapping data update the cache without duplication.

WebSocket: Real-Time Without Extra Traffic

Polling (setInterval every 5 seconds) — battery and traffic waste. WebSocket is a persistent bidirectional connection. iOS: URLSessionWebSocketTask (native, iOS 13+). Android: OkHttp WebSocket. Mandatory reconnect handling: on onFailure — exponential backoff (1s → 2s → 4s → 8s → max 60s). Socket.IO is an overlay with automatic reconnect, but for new projects native WebSocket is preferable (fewer dependencies).

gRPC: For High-Load Services

gRPC with protobuf — binary serialization: smaller size, faster parsing. grpc-swift for iOS, grpc-kotlin for Android. The protobuf schema compiles to typed classes. Streaming (server-side, client-side, bidirectional) is a native feature. Application threshold: high request frequency (trading, IoT) or critical latency. For regular CRUD, REST is simpler to debug and monitor.

Certificate Pinning and Security

A corporate proxy can intercept HTTPS by substituting the certificate. Certificate pinning prevents this: the app accepts only a specific certificate or public key. Alamofire: ServerTrustManager with PinnedCertificatesTrustEvaluator. OkHttp: CertificatePinner with SHA-256 hash. Apple's App Transport Security documentation recommends pinning certificates for sensitive data. Operational complexity: on certificate rotation, older app versions stop working. Solution — pinning to the CA public key or support multiple pins with a grace period.

What Is Included in the Work

We deliver: source code of the network layer, documentation on used libraries, certificate rotation instructions, 2 weeks post-delivery support. Our experience guarantees that the solution will be stable and maintainable.

Timeline and Cost

Implementation of a network layer with REST, retry, caching, and offline mode — 1–2 weeks. Adding GraphQL or WebSocket — another 1–2 weeks. gRPC — 2–3 weeks, including code generation. The cost is calculated individually after analyzing the API and offline behavior requirements. We will evaluate the project in 1 day — contact us for a consultation. Get a reliable API integration with guaranteed quality.