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 to data-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

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-request is equivalent to turbo:before-fetch-request See: Handbook
- htmx:config-request is the same as htmx:configRequest See: 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
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

🔗Stimulus

hyperscript is a close analogue and an official companion project to htmx, but the two projects are entirely separated and can be used exclusively from each other or any other library.