Key insights
- Editable text has to whisper its affordance: a pencil on hover, a soft background tint. With no signal, people file support tickets just to rename a title.
- Keep every pixel in place during the swap. Same font, same size, same padding, with the border going from transparent to accent. One jump and the illusion collapses.
- Enter commits, Escape cancels, and everyone agrees on that. Blur is the contested one: some apps save on click-away, others discard. Pick one rule and never break it.
- Save optimistically: the text updates on screen while the request is still in flight. If the server fails, roll back, keep the draft, and say why.
- Match the editing mode to the cost of a typo. Make every cell editable when mistakes are cheap, or require an explicit Edit action when they are expensive.
Do / Don't
- Do: Signal editability on hover with a pencil icon or a soft background tint.
- Do: Update the UI immediately, then roll back and keep the draft if the save fails.
- Do: Keep font, size, and padding identical between the text and the input.
- Don't: Leave editable text with zero affordance, so users cannot tell it is editable.
- Don't: Change what blur does from one screen to the next (save here, discard there).
