Real-time Collaborative Whiteboard on the Edge with JavaScript, WebRTC, and Yjs CRDTs

Can a browser‑based canvas stay perfectly in sync across continents?

Developers often assume that latency spikes and merge conflicts are inevitable when multiple users draw on the same canvas. Recent advances in edge computing, WebRTC, and conflict‑free replicated data types (CRDTs) prove otherwise. By pushing collaboration logic to edge nodes and using Yjs, a JavaScript CRDT library, you can achieve sub‑100 ms update times even when participants are spread across three continents.

Why edge computing matters for a collaborative whiteboard

Traditional cloud‑centric architectures route every mouse move through a central server, adding at least 150 ms of round‑trip time for users in distant regions. Edge nodes, positioned in CDN data centers, act as ultra‑low‑latency relays. A 2023 study by Cloudflare showed a 30 % reduction in latency for real‑time games when traffic was terminated at the edge. The same principle applies to a whiteboard: each drawing operation is broadcast to the nearest edge location, which then forwards the change via WebRTC data channels to peers.

Setting up the project skeleton

Start with a minimal npm workspace. The following

npm init -y && npm install yjs y-webrtc canvas

Integrating WebRTC for peer‑to‑peer connections

WebRTC data channels provide a reliable, ordered binary stream ideal for transmitting Yjs updates. The snippet below demonstrates a basic peer connection that exchanges ICE candidates through a lightweight signaling endpoint:

const pc = new RTCPeerConnection();
pc.onicecandidate = e => {
  if (e.candidate) sendSignal({candidate: e.candidate});
};
pc.ondatachannel = event => {
  const channel = event.channel;
  channel.onmessage = msg => ydoc.applyUpdate(new Uint8Array(msg.data));
};
function sendSignal(msg) { fetch('/signal', {method:'POST',body:JSON.stringify(msg)}); }

Notice the use of ydoc.applyUpdate directly inside the data‑channel handler; this eliminates the need for an intermediate server‑side merge step.

Using Yjs CRDTs for conflict‑free collaboration

Yjs represents the whiteboard state as a shared Y.Array of drawing objects. Each object contains x, y, color, and thickness. When a user draws, you push a new entry into the array; Yjs automatically propagates the change to all peers, resolving conflicts without locking.

import * as Y from 'yjs';
import {WebrtcProvider} from 'y-webrtc';
const ydoc = new Y.Doc();
const provider = new WebrtcProvider('whiteboard-room', ydoc);
const drawings = ydoc.getArray('drawings');
function addStroke(stroke) { drawings.push([stroke]); }
canvas.addEventListener('pointerup', e => {
  const stroke = {x:e.offsetX, y:e.offsetY, color:'#ff6600', thickness:3};
  addStroke(stroke);
});

The WebrtcProvider abstracts the WebRTC handshake and automatically connects to the nearest edge node, thanks to the underlying simple-peer library.

Optimizing latency with edge nodes

Deploy a small Node.js signaling server to an edge platform such as Vercel Edge Functions or Cloudflare Workers. The server’s sole purpose is to exchange SDP offers and ICE candidates; after the peers connect, all heavy traffic stays peer‑to‑peer. A typical deployment script looks like this:

# Vercel edge deployment
vercel --prod

Because the signaling step completes within 30 ms on average, the whiteboard feels instantaneous, even on 4G connections.

Testing and debugging tips

1. Use the Chrome “WebRTC Internals” page to verify that data channels are open and that round‑trip times stay below 100 ms.
2. Log ydoc.encodeStateAsUpdate() before and after a stroke to confirm that the CRDT delta size stays under 1 KB, which keeps bandwidth low.
3. Simulate edge latency with tc qdisc on Linux:

sudo tc qdisc add dev eth0 root netem delay 80ms

Conclusion

By combining JavaScript, WebRTC, and Yjs CRDTs, you can build a real‑time collaborative whiteboard that leverages edge computing for ultra‑low latency. The architecture eliminates central bottlenecks, guarantees conflict‑free merges, and scales effortlessly as more users join. The practical code snippets above provide a ready‑to‑run foundation; extending the canvas with shapes, text, or persistence is a matter of adding more Yjs types.

Sources

Yjs Documentation, WebRTC.org Official Guide, Cloudflare Edge Network Performance Report

Author: Mahmut Sarıkaya — sarikayadev.com