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.