Inline editing

Edit a value in place, preserve the draft, and wait for application confirmation.

Compact editing

The value and small accent ghost Edit control share a row. Edit replaces them with a small field, Save and ghost Cancel. The field stays in place while you type or wait for a response.

Code

<section data-inline-edit="compact" data-context-id="title-a" class="stack">
  <div class="cluster cluster-compact items-baseline">
    <span data-inline-edit-value>Community gathering</span>
    <a class="button button--small button--ghost button--accent" href="#title-a-panel" data-inline-edit-trigger aria-label="Edit first title">Edit</a>
    <div id="title-a-panel" data-inline-edit-panel>
      <form data-inline-edit-form action="" method="get" class="cluster cluster-compact">
        <label class="visually-hidden" for="title-a-input">First title</label>
        <input id="title-a-input" name="title-a" type="text" value="Community gathering" data-inline-edit-input>
        <button class="button button--small" type="submit" data-inline-edit-save>Save</button>
        <button class="button button--small button--ghost" type="button" data-inline-edit-cancel>Cancel</button>
        <p id="title-a-error" data-inline-edit-error role="alert"></p>
      </form>
    </div>
  </div>
  <p data-inline-edit-status role="status" aria-live="polite" aria-atomic="true"></p>
</section>
Community gathering Edit

Updates elsewhere do not replace this field.

Disclosure editing

Use a disclosure when the labeled form needs more room. Both variants use the same events and application result matching.

Code

<section data-inline-edit data-context-id="title-b" class="stack">
  <h3 data-inline-edit-value>Shared workspace</h3>
  <details data-inline-edit-panel>
    <summary data-inline-edit-trigger>Edit second title</summary>
    <form data-inline-edit-form action="" method="get" class="stack">
      <label for="title-b-input">Second title</label>
      <input id="title-b-input" name="title-b" type="text" value="Shared workspace" data-inline-edit-input>
      <p id="title-b-error" data-inline-edit-error role="alert"></p>
      <div class="cluster">
        <button class="button" type="submit" data-inline-edit-save>Save second title</button>
        <button class="button button--ghost" type="button" data-inline-edit-cancel>Cancel editing</button>
      </div>
    </form>
  </details>
  <p data-inline-edit-status role="status" aria-live="polite" aria-atomic="true"></p>
</section>

Shared workspace

Updates elsewhere do not replace this field.

Edit second title

Keyboard, drafts and application results

Use Edit, Enter, Space or F2 to begin. Save or Enter submits the draft. Escape or Cancel ends editing. Leaving the field keeps your draft and never saves.

This page simulates application results. Without JavaScript, compact editing shows a native form; the disclosure opens one. Submitting reloads this example and saves nothing.

Rejection keeps the entered value and associates the error with the field. Pending and uncertain values remain visible and read-only. Cancel is always a ghost action and does not promise to undo a pending save.

Optional setup

Link /dist/inline-edit.css after /dist/main.css, import createInlineEditor from /dist/inline-edit.js, and attach it to each stable editor root.

import { createInlineEditor } from '/dist/inline-edit.js';
const editor = createInlineEditor({ root });
root.addEventListener('lw-inline-edit-commit', async ({ detail }) => {
  const { contextId, editId, requestId, value, original } = detail;
  // The application returns an authoritative value only after confirmed saving.
  try {
    const result = await applicationSave({ contextId, value, original });
    editor.applyResult({ contextId, editId, requestId, ...result });
  } catch {
    editor.applyResult({ contextId, editId, requestId, outcome: 'unknown' });
  }
});

applicationSave is your application code. Map transport uncertainty to unknown; request completion alone never means saved. Results must match the context, edit and request IDs.

Preserve the root, field and other required nodes during unrelated updates. The controller preserves draft and selection; your application must preserve the focused input during its own DOM updates.

Raw reference examples · Run lifecycle checks · Events and lifecycle contract