Day 12: Click-to-Edit

Welcome to Day 12. This is the “Hello World” of htmx patterns.

The UI

1. User sees “John Doe” (Static).
2. User clicks “Edit”.
3. User sees <input value="John Doe"> and “Save” / “Cancel”.
4. User clicks Save -> Server updates -> UI goes back to Static.

Implementation

Static State (GET /contact/1):

<div hx-target="this" hx-swap="outerHTML">
    <label>Name</label>: John Doe
    <button hx-get="/contact/1/edit">
        Edit
    </button>
</div>

Edit State (GET /contact/1/edit):

<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
    <label>Name</label>
    <input name="name" value="John Doe">
    <button class="btn-primary">Save</button>
    <button hx-get="/contact/1">Cancel</button>
</form>

Notice the pattern? The server returns the entire component HTML in the requested state.

Challenge for Day 12

1. Build a Profile Card.
2. Fields: Name, Bio.
3. Implement the Edit pattern.
4. Add a “Cancel” button in the edit state that fetches the static state again without saving.

Solution:

The Cancel button is just: <button hx-get="/profile/1">Cancel</button> It replaces the form with the original read-only HTML. Simple.

Tomorrow: Tabs & Search.