What swap styles does hx-swap support?

Summary

innerHTML (the default, replace the target's content), outerHTML (replace the target), textContent, beforebegin, afterbegin, beforeend, afterend, delete (remove the target) and none (no swap, but response headers still apply). Modifiers add timing and scrolling: swap:300ms, settle:300ms, scroll:bottom, show:top, transition:true.

Longer Answer

Match the response to the swap: with beforeend the server returns only the new item; with outerHTML it returns the replacement element. The swap: delay keeps the old element with the htmx-swapping class so a CSS fade-out can run; transition:true uses the View Transitions API.

Key Points

• innerHTML default; outerHTML replaces the element.
• before/after begin/end insert.
• delete and none.
• Modifiers for timing, scrolling, transitions.

Deep dive: htmx Tutorial: Swapping: hx-swap