Inline edit

Editing a value right where it sits: click the text, it becomes an input, you type, it saves. No separate edit form.

click the text and it turns into a fieldedit-in-placeclick to editinplace editingeditable textdouble click to renameediting without opening a formno save button editing

See it

Live demo coming soon

What it is

Inline edit turns a displayed value into its own input: click the project title, it becomes a text field with the cursor in it, you type, it saves, and it renders back as text. Renaming a file in Finder, editing a Linear issue title, and typing into a Google Sheets cell are all the same move.

Reach for it when values are small, independent, and edited often. It removes the whole round trip of open form, change one field, submit, close. For anything with validation across multiple fields, or an edit people should be able to abandon wholesale, a real form beats it.

Gotcha: nothing about plain text says 'you can edit me', so add a hover affordance (a faint field outline, a pencil on hover) or people will never find it. Then decide your save semantics up front and keep them consistent: Enter commits, Escape reverts to the original value, blur usually commits. Save optimistically but keep a visible failure path, because a silently lost rename is worse than a slow one. For screen readers the resting state should be a real button that swaps in a labelled input and moves focus to it.

Ask AI for it

Make this field inline editable: render it as text with a transparent border that turns into a faint outlined input background on hover, so it reads as editable. Clicking (or pressing Enter on the focused text) swaps in an input pre-filled with the current value, auto-focused with the text selected, sized so the layout does not shift. Enter and blur commit, Escape restores the original value and exits. Save optimistically, show a small inline spinner while in flight, and on failure roll back the value and show an inline error with a retry. Expose the resting state as a button so keyboard and screen reader users can enter edit mode.

You might have meant

data gridwysiwyg editorcontextual formatting toolbartoggle switch