11 min

Htmx headers: Season 3 Recap hx-pod

    • Technology

"We've done them all now"
All headers grouped
===========> REQUEST HEADERS
======> Flags
*HX-Boosted - was it a boosted link
*HX-Request - is it an htmx request
*HX-History-Restore-Request - is it a back button restore request
======> Auto-sent variables
*HX-Current-URL - current url page is at
*HX-Target - id of target if has id
*HX-Trigger-Name - which element triggered it by name
*HX-Trigger - which element triggered it
======> User Variables
*HX-Prompt - user is asked to provide prompt, this is what they typed

============> RESPONSE HEADERS
======> Browser & history commands
*HX-Location - hx-boost reload to page
*HX-Redirect - regular redirect
*HX-Refresh - refresh page
*HX-Push-Url - push url to top bar
*HX-Replace-Url - replace url in top bar
======> override attributes
*HX-Reswap - sets hx-swap value
*HX-Retarget - set hx-target value
*HX-Reselect - set hx-select value
======> Trigger events
*HX-Trigger - trigger an event on client immediately
*HX-Trigger-After-Swap - trigger an event after swapping in html
*HX-Trigger-After-Settle - trigger an event next lifecycle

"We've done them all now"
All headers grouped
===========> REQUEST HEADERS
======> Flags
*HX-Boosted - was it a boosted link
*HX-Request - is it an htmx request
*HX-History-Restore-Request - is it a back button restore request
======> Auto-sent variables
*HX-Current-URL - current url page is at
*HX-Target - id of target if has id
*HX-Trigger-Name - which element triggered it by name
*HX-Trigger - which element triggered it
======> User Variables
*HX-Prompt - user is asked to provide prompt, this is what they typed

============> RESPONSE HEADERS
======> Browser & history commands
*HX-Location - hx-boost reload to page
*HX-Redirect - regular redirect
*HX-Refresh - refresh page
*HX-Push-Url - push url to top bar
*HX-Replace-Url - replace url in top bar
======> override attributes
*HX-Reswap - sets hx-swap value
*HX-Retarget - set hx-target value
*HX-Reselect - set hx-select value
======> Trigger events
*HX-Trigger - trigger an event on client immediately
*HX-Trigger-After-Swap - trigger an event after swapping in html
*HX-Trigger-After-Settle - trigger an event next lifecycle

11 min

Top Podcasts In Technology

All-In with Chamath, Jason, Sacks & Friedberg
All-In Podcast, LLC
Acquired
Ben Gilbert and David Rosenthal
Lex Fridman Podcast
Lex Fridman
Search Engine
PJ Vogt, Audacy, Jigsaw
Hard Fork
The New York Times
TED Radio Hour
NPR