Hotwire / Turbo ➡️ htmx Migration Guide

The purpose of this guide is to provide common practices for “Hotwire Equivalent” features in htmx.

#Turbo Drive

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 })
})

#Turbo Frames

#Turbo Streams

#Events

document.body.addEventListener('htmx:configRequest', (event) => {
    event.detail.headers['Authorization'] = `Bearer ${token}`
})

#Stimulus