Inline edit

INTERACTION / INLINE EDIT

Edit a title in place

Double-click the title, change it, then press Enter or leave the field. Escape cancels. The Rocket recognizes the two title presses even when a parent captures the pointer; it emits request, commit and cancel events. The page owns edit mode, input state and saving.

<rocket-inline-edit data-context-id="card-a">
  <span data-inline-edit-trigger data-inline-edit-value>Title from server</span>
  <input data-inline-edit-input aria-label="Edit title" value="Title from server">
</rocket-inline-edit>

rocket-inline-edit-request → { contextId }
rocket-inline-edit-commit → { contextId, value }
rocket-inline-edit-cancel → { contextId }

The element leaves classes and layout to your CSS; it never submits a request or stores a second copy of the title. See editor behavior ↗ and JSX adapter ↗.