Never write on every keystroke. Start a debounce timer when typing pauses, reset it on each key, and commit one clean write after roughly 800ms of silence.
Model the status indicator as a state machine with clear states: typing, saving, saved, offline, error. Users trust the pill more than the feature itself, so never let it read 'Saved' when the write never landed.
When the connection drops, push every edit into a local queue and surface a badge counting what is pending. On reconnect, drain the queue in order, oldest first.
Two tabs on one document means last write wins can silently erase an hour of someone's work. Merge concurrent changes or warn the user, but never overwrite in silence.
Guard the exit. If unsaved work exists, use the browser's beforeunload prompt to intercept the closing tab. One ugly dialog beats an afternoon retyped.
Do / Don't
Do: Debounce writes so one clean save fires after a pause (around 800ms), not on every keystroke.
Do: Queue edits locally while offline and replay them oldest first once the connection returns.
Do: Keep the status honest by mapping it to explicit states and updating it in real time.
Don't: Let the pill show 'Saved' when the change never reached the server.
Don't: Overwrite a concurrent edit silently; merge the changes or warn instead.
Don't: Let a tab close on unsaved work without a confirmation dialog.
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
