Offscreen - External Connection Status

Custom UI built on the connection state API

iinkTS already shows a built-in connection badge (icon in the top-right corner of the canvas). This example shows how an external consumer can ignore that badge and build its own status panel instead, using canvas.connectionState and canvas.event.addConnectionStateChangedListener.

States: initializing, online-idle, online-working, syncing (reconnecting with strokes queued), offline (reconnecting, nothing queued yet), error (reconnection attempts exhausted).

To see the offline/syncing/error states: open DevTools → Network tab → set throttling to "Offline", write a few strokes, then set it back to "Online" to watch it recover.

Connection status (external panel)

initializing