mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-29 14:04:22 +00:00
b546c5d69d
* Initial commit for migration guide. * Added notes on Turbo Drive, Turbo Frames, Stimulus Simplified hx-boost. Added Hotwire / Turbo migration guide to examples. Simplified language. Less is more. Added Redirect after form submission section. Added references to hotwire docs. Consistency. First pass on Event interception / pausing. Naming convention note. Naming convention notes. Reference to Event Naming in htmx manual. Added hyperscript as an alternative solution to event interception / pausing. Added async notes to Event interception / pausing area. Simplified language. Less words. Added section on disabling buttons during submission. Less words. Event naming consistency. Short is sweet. Updated hyperscript example. Comparing htmx and Hotwire. Revised htmx vs Hotwire / Turbo Revised htmx vs Hotwire / Turbo Revision to htmx vs Hotwire / Turbo Revised htmx vs Hotwire / Turbo * Clarification of kebab case vs camel case.
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.