mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-27 13:01:03 +00:00
3.2 KiB
3.2 KiB
| layout | title |
|---|---|
| layout.njk | </> Hotwire / Turbo ➡️ htmx Migration Guide |
Hotwire / Turbo ➡️ htmx Migration Guide
The purpose of this guide is to provide common practices for "Hotwire Equivalent" features in htmx.
- htmx is focused on a set of transparent, highly flexible extensions of html to its logical conclusion as a hypertext.
- Hotwire / Turbo is focused on a smooth out of the box experience, but is more opinionated and less flexible.
Turbo Drive
<body hx-boost="true">to enable a Turbo Drive-like experience. See: hx-boost- As with Turbo Drive, if the user does not have javascript enabled, the site will continue to work. See: Progressive Enhancement
hx-boost="false"is equivalent todata-turbo="false"and used to disable boost on specific links or forms. See: Handbook- Redirect after form submission (302, 303, 307, 3xx)
hx-target="body" hx-swap="outerHTML" hx-push-url="true"See: Handbook - Disable buttons on form submission See: Handbook
- Only disable buttons because
<form>does not submit disabled fields. See: MDN: disabled
- Only disable buttons because
addEventListener("submit", (event) => {
event.target.querySelectorAll("button").forEach(node => { node.disabled = true })
})
addEventListener("htmx:afterOnLoad", (event) => {
event.target.querySelectorAll("button").forEach(node => { node.disabled = false })
})
- Or, hyperscript may be used:
_="on submit toggle @disabled <button/> in me until htmx:afterOnLoad"See: Cookbook
Turbo Frames
- Lazy loading:
hx-trigger="load, submit"See: Handbook
Events
- Intercepting or Pausing Events.
htmx:config-requestis equivalent toturbo:before-fetch-requestSee: Handbookhtmx:config-requestis the same ashtmx:configRequestSee: Event Naming
document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['Authorization'] = `Bearer ${token}`
})
- Or, a condition call may be used:
hx-trigger="submit[action(target)]"See: hx-trigger- Does not currently resolve async calls such as
fetch. See: https://github.com/bigskysoftware/htmx/issues/912
- Does not currently resolve async calls such as
- Or, hyperscript may be used:
_="on submit halt the event action(target) trigger ready"hx-trigger="ready"- Will resolve async calls such as
fetch. See: async transparency
- Will resolve async calls such as
Stimulus
- hyperscript is a close analogue and an official companion project to htmx, but the two projects are entirely seperated and can be used exclusively from each other or any other library.