Editing is seamless (the default): no border or fill appears, the text just takes a caret. The task title is an Editable inside an h1: it should look exactly like a heading at rest, tint on hover, and turn editable in place with the caret where you clicked. Shrink the window so the title wraps — editing a wrapped line must not move the badges, the description or the title's own lines. The description is multiline: Enter adds a line, ⌘/Ctrl+Enter saves, and the field grows a line at a time without an inner scrollbar.
Move the invoice workers off the legacy cron scheduler before the November billing run
The card titles turn bleed off: a card's padding is the only room around them, so their box stays inside it. Column names and card titles rename on double click (a single click on a card would open it in a real board), with no tint of their own — the card paints the hover. The column name sits inline before its count badge: renaming must not push the badge or wrap the header. Double-clicking a word selects that word inside the editor.
To do
In progress
Done
A label / value grid where each value is click-to-edit with controls, in the visible field look (editAppearance='field') since this is a form. The pencil only appears on row hover or focus, and swapping it for save / cancel must not widen the row. The slug is invalid (red edit border) and only saves with Enter or ✓ — clicking away cancels (submitMode='enter'), since changing it breaks links; the workspace ID is read-only (no hover, no controls), the billing email is disabled (dimmed, out of the tab order, no controls), and the short name stops at 12 characters. The icon-only buttons are named 'Edit Workspace name' and so on.
Editables inside a real form: Tab onto a field and it starts editing at once (activationMode='focus'). Enter saves and so does leaving the field — so typing a value and clicking Save profile straight away submits it (a blur that cancelled would drop the edit right before the submit). Each one has a name, so the committed values submit with the form — the result line shows what the form sent.
A 220px column with a title made of one unbroken URL and a sentence: both must wrap identically at rest and while editing (overflow-wrap anywhere), and the caret must land on the clicked character on any line. The inline editable inside the sentence bleeds its padding outward, so its text sits exactly where plain text would: one ordinary space on each side, no taller line.
https://status.northwind.example/incidents/2026-10-22-billing-queue-backlog
Shared with the Platform reliability team until the incident review on Friday.
An Editable on a filled primary card: the text, the placeholder and the hover tint must stay readable on the coloured surface. The control buttons use translated labels. Every commit, revert and edit-mode change is logged below from the Astro editable:* events.
Receita por região
Sem descriçãoWaiting for edits…
A centred empty state whose heading is editable: the centred text alignment is inherited by both the preview and the field, so the text doesn't jump to the left when editing starts. The edit border uses passThrough to match the page's accent.
Untitled collection
Name it, then drop files here to start.
A multiline field that saves on blur only (submitMode='blur'): Enter is a newline, ⌘/Ctrl+Enter does nothing, clicking away saves. It may be cleared (revertOnEmpty off) and starts with the caret at the end (selectOnEdit='end'). A trailing empty line must still count — the box grows as soon as you press Enter at the end.