2025-06-12

Hotwire (Turbo + Stimulus)

Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.

The framework consists of Turbo (focus on page load and speed) and Stimulus (controllers and logic). You can use one without the other.

Stimulus Components

Tutorials

Tips

Use JSON-data in your data-attributes to pass data from HTML to Stimulus. So, instead of doing this:

<div 
  data-controller="user-profile" 
  data-user-profile-number="8675309"
>
  <p>...</p>
</div>

// controllers/user_profile_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    console.log(this.data.get("number"))
  }
}

You can do this when you need more data:

<div 
  data-controller="user-profile" 
  data-user-profile-user="{ number: 8675309, first_name: 'Jenny' }"
>
  <p>...</p>
</div>

// controllers/user_profile_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    this.user = JSON.parse(this.data.get("user"))
    console.log(this.user.number)
  }
}