Interaction Patterns

← Overview

Submit / Cancel

The form posts to the server via hx-post. Cancel resets the form using HyperScript.

Modal Open / Close

Button fetches the modal fragment via hx-get and injects it into #modal-container, then opens the DaisyUI dialog. Close button calls dialog.close() via HyperScript.

Live Preview

Textarea posts to the server on every keystroke (debounced 500 ms). The server returns rendered preview HTML.

Preview

Preview appears here…

Append Comment

Form posts a comment; server returns only the new <li> appended via hx-swap="beforeend".

    Submit

    POST /interactions/submit

    hx-post on form, server returns success fragment replacing the form.

    Cancel

    (client only)

    HyperScript resets input fields — zero server round-trips.

    Modal Open/Close

    GET /interactions/modal

    Fetch dialog HTML, inject, call showModal(). Close via dialog.close().

    Preview

    POST /interactions/preview

    hx-trigger="keyup delay:500ms" debounces; server renders preview.

    Comment

    POST /interactions/comment

    hx-swap="beforeend" appends only the new comment item.

    Settings