Stimulus and Turbo (Hotwire) in Ruby on Rails - Step-by-Step Execution

Concept Flow - Stimulus and Turbo (Hotwire)

User interacts with page

↓

Turbo intercepts link/form

↓

Turbo fetches HTML via AJAX

↓

Turbo updates page content

↓

Stimulus controller detects changes

↓

Stimulus runs JS behavior

↓

Page updated dynamically without reload

User actions trigger Turbo to fetch and update HTML dynamically, then Stimulus runs JavaScript behaviors on the updated content.

Execution Sample

Ruby on Rails

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("Hello from Stimulus!")
  }
}

This Stimulus controller logs a message when connected to the page element.

Execution Table

Step	Action	Turbo Behavior	Stimulus Behavior	Page State
1	User clicks a link with data-turbo	Intercepts click, prevents full reload	No action yet	Page stays, no reload
2	Turbo fetches new HTML via AJAX	Loads new HTML fragment	No action yet	Page content ready to update
3	Turbo replaces target element with new HTML	Updates DOM dynamically	Detects new elements	Page content updated without reload
4	Stimulus controller connects to new elements	No action	Runs connect() method, logs message	JS behavior active on new content
5	User submits form with data-turbo	Intercepts submit, sends AJAX request	No action yet	Form submission handled dynamically
6	Turbo updates page with server response	Replaces part of page with new HTML	Stimulus reconnects controllers	Page updated, JS behaviors active
7	User interacts with Stimulus-controlled element	No Turbo action	Stimulus handles event, runs methods	Dynamic interaction without reload
8	End of interaction	No further Turbo actions	Stimulus remains active	Page fully interactive dynamically

💡 User stops interacting or navigates away; Turbo and Stimulus keep page dynamic without full reloads.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 6	Final
Page HTML	Initial full page	Updated with Turbo HTML fragment	Same as Step 3	Updated again with Turbo response	Final updated page
Stimulus Controllers	Connected to initial elements	Disconnected from replaced elements	Connected to new elements	Reconnected after Turbo update	Active and ready
Console Logs	Empty	Empty	"Hello from Stimulus!"	"Hello from Stimulus!" (again if reconnected)	Logs show Stimulus connect calls

Key Moments - 3 Insights

Why does the page not fully reload when clicking a link with data-turbo?

Because Turbo intercepts the link click (see execution_table step 1) and fetches only the needed HTML via AJAX, updating the page dynamically without a full reload.

How does Stimulus know when to run JavaScript on new content?

Stimulus detects when new elements are added to the page by Turbo (step 4 and 6) and automatically connects controllers to those elements, running their connect() methods.

What happens to Stimulus controllers when Turbo replaces part of the page?

Stimulus disconnects controllers from removed elements and reconnects to new elements after Turbo updates the DOM (see variable_tracker and execution_table steps 3-6).

Visual Quiz - 3 Questions

Look at the execution_table, what happens at step 3?

A User submits a form

B Stimulus disconnects all controllers

C Turbo updates the page content dynamically without reload

D Page fully reloads

💡 Hint

Check the 'Turbo Behavior' and 'Page State' columns at step 3 in the execution_table.

At which step does Stimulus run its connect() method and log a message?

A Step 4

B Step 2

C Step 6

D Step 1

💡 Hint

Look at the 'Stimulus Behavior' column in the execution_table for when connect() runs.

If Turbo did not intercept the form submission at step 5, what would happen?

A Stimulus would run connect() again

B The page would reload fully on form submit

C Turbo would update the page dynamically

D Nothing would happen

💡 Hint

Refer to the 'Turbo Behavior' column at step 5 and think about what happens without Turbo interception.

Concept Snapshot

Stimulus and Turbo (Hotwire) work together to make Rails pages dynamic.
Turbo intercepts links and forms to fetch and update HTML without full reloads.
Stimulus runs JavaScript controllers on page elements, connecting automatically after Turbo updates.
This combo creates fast, interactive pages with minimal JavaScript.
Use data-turbo attributes for Turbo and data-controller for Stimulus.
Stimulus connect() runs when elements appear in the DOM.

Full Transcript

This visual execution shows how Stimulus and Turbo (Hotwire) work together in Rails. When a user clicks a link or submits a form with data-turbo, Turbo intercepts the action and fetches new HTML via AJAX instead of reloading the whole page. Turbo then updates the page content dynamically. Stimulus detects these changes and connects its controllers to the new elements, running JavaScript behaviors like logging messages. The execution table traces each step from user interaction to page update and JavaScript activation. Variables like page HTML and Stimulus controllers change state as Turbo updates the DOM and Stimulus reconnects. Key moments clarify why the page does not reload fully, how Stimulus knows to run, and what happens to controllers during updates. The quiz tests understanding of Turbo's interception, Stimulus connection timing, and consequences of missing Turbo interception. The snapshot summarizes the synergy of Turbo and Stimulus for dynamic Rails pages with minimal reloads and JavaScript.