+++ title = "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 * `` to enable a Turbo Drive-like experience. See: [hx-boost](@/attributes/hx-boost.md) * As with Turbo Drive, if the user has javascript disabled, `hx-boost` will continue to work. See: [Progressive Enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement) * `hx-boost="false"` is equivalent to `data-turbo="false"` and used to disable boost on specific links or forms. See: [Handbook](https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms) * Redirect after form submission (302, 303, 307, 3xx) `hx-target="body" hx-swap="outerHTML" hx-push-url="true"` See: [Handbook](https://turbo.hotwired.dev/handbook/drive#redirecting-after-a-form-submission) * Disable buttons on form submission See: [Handbook](https://turbo.hotwired.dev/handbook/drive#form-submissions) * Only disable buttons because `

` does not submit disabled fields. See: [MDN: disabled](https://developer.mozilla.org/docs/Web/HTML/Attributes/disabled) ```javascript 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, [hx-on](@/attributes/hx-on.md) may be used: * `hx-on:submit= 'event.target.querySelectorAll("button").forEach(node => { node.disabled = true })'` * `hx-on:htmx:afterOnLoad= 'event.target.querySelectorAll("button").forEach(node => { node.disabled = false })'` * Or, [hyperscript](https://hyperscript.org) may be used: `_="on submit toggle @disabled