---
title: "Hotwire (Turbo + Stimulus)"
description: "Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire."
canonical_url: "https://codex.republic.se/languages/javascript/hotwire-turbo-stimulus"
section: "Pages"
---

# 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.*

---

- [HTML Over The Wire | Hotwire](https://hotwired.dev/)
- [The speed of a single-page web application without having to write any JavaScript.](https://turbo.hotwired.dev/)
- [A modest JavaScript framework for the HTML you already have.](https://stimulus.hotwired.dev/)

---

## Stimulus Components

- [skatkov/awesome-stimulusjs](https://github.com/skatkov/awesome-stimulusjs)
- [Stimulus-Use](https://stimulus-use.github.io/stimulus-use/#/) - A collection of composable behaviors for your Stimulus Controllers
- [Craft world-class Stimulus controllers with your own styles](https://stimulus-components.netlify.app/)
- [Welcome to Better StimulusJS](https://www.betterstimulus.com)
- [Lightbox](https://www.stimulus-components.com/docs/stimulus-lightbox/) - based on [https://www.lightgalleryjs.com](https://www.lightgalleryjs.com/)

---

## Tutorials

- [151: DHH - Building HEY with Hotwire](https://fullstackradio.com/151)
- [An Introduction To Stimulus.js - Smashing Magazine](https://www.smashingmagazine.com/2020/07/introduction-stimulusjs/)
- [Introduction to the Stimulus Framework](https://code.tutsplus.com/tutorials/introduction-to-stimulus-framework--cms-30563)
- [Writing better StimulusJS controllers](https://boringrails.com/articles/better-stimulus-controllers/)

---

## Tips

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

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

```

```js
// 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:

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

```

```js
// 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)
  }
}

```