Hotwire, Turbo & Action Cable

Hotwire is the Rails 7 default front-end approach: build fast, reactive interfaces by sending HTML over the wire instead of writing a heavy JavaScript single-page app.

Learn Hotwire, Turbo & Action Cable in our free Ruby course — a beginner-friendly interactive lesson with worked examples, a practice exercise and a quick…

Part of the free Ruby course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

By the end of this lesson you'll understand Turbo Drive, Frames, and Streams, push live updates with Action Cable, and add small interactions with Stimulus.

What You'll Learn in This Lesson

1️⃣ Turbo Drive and Turbo Frames

Turbo Drive intercepts links and forms so navigation feels like an SPA with no full reloads. Turbo Frames scope updates to one region — a link inside a frame replaces only that frame.

2️⃣ Turbo Streams, Action Cable, and Stimulus

Turbo Streams send HTML fragments plus an action (append, replace, remove) to change the DOM, and can be broadcast live over a WebSocket with Action Cable .

Stimulus attaches small bits of JavaScript to existing HTML using data attributes.

Your turn. Wrap each todo in a Turbo Frame so editing swaps only that item.

Sketch a real-time messages feature that broadcasts new records to every viewer using Turbo Streams over Action Cable.

📋 Quick Reference — Hotwire

Practice quiz

What is Hotwire?

  • an approach to building reactive apps by sending HTML, not JSON, over the wire
  • a CSS framework
  • a Ruby testing tool
  • a database engine

Answer: an approach to building reactive apps by sending HTML, not JSON, over the wire. Hotwire (HTML Over The Wire) builds modern UIs by sending HTML from the server instead of JSON.

What does Turbo Drive do?

  • stores sessions
  • runs background jobs
  • makes full-page navigation feel like a single-page app by intercepting links and forms
  • compiles Ruby

Answer: makes full-page navigation feel like a single-page app by intercepting links and forms. Turbo Drive intercepts clicks and form submits, swapping the page body for SPA-like navigation without full reloads.

What is a Turbo Frame used for?

  • writing migrations
  • updating just a portion of the page independently
  • encrypting cookies
  • defining database tables

Answer: updating just a portion of the page independently. A turbo_frame_tag scopes updates to one region so only that part of the page changes.

What do Turbo Streams deliver?

  • raw JSON arrays
  • SQL queries
  • CSS rules
  • fragments of HTML with actions like append, prepend, replace, or remove

Answer: fragments of HTML with actions like append, prepend, replace, or remove. Turbo Streams send HTML fragments plus an action telling the browser how to update the DOM.

Which Turbo Stream action adds content to the end of a list?

  • append
  • update
  • remove
  • replace

Answer: append. The append action inserts the fragment at the end of the target element.

Over what transport can Turbo Streams be pushed from the server in real time?

  • a cron job
  • a WebSocket connection via Action Cable
  • FTP
  • plain email

Answer: a WebSocket connection via Action Cable. Turbo Streams can be broadcast over a WebSocket using Action Cable for live updates.

What is Stimulus?

  • a Ruby gem builder
  • a database adapter
  • a CSS preprocessor
  • a modest JavaScript framework that attaches behavior to existing HTML

Answer: a modest JavaScript framework that attaches behavior to existing HTML. Stimulus is a lightweight JS framework that wires controllers to HTML via data attributes.

How does a Stimulus controller connect to markup?

  • through SQL triggers
  • through inline onclick handlers
  • via data-controller and data-action attributes
  • by editing routes.rb

Answer: via data-controller and data-action attributes. Stimulus uses data-controller, data-action, and data-target attributes to bind behavior to HTML.

In Rails 7, Hotwire is best described as:

  • a database tool
  • the default front-end approach
  • a deployment service
  • a deprecated plugin

Answer: the default front-end approach. Hotwire (Turbo plus Stimulus) ships as the default front-end stack in Rails 7.

What is Action Cable?

  • a Rails framework for real-time features over WebSockets
  • a CSS grid system
  • a job scheduler
  • a templating language

Answer: a Rails framework for real-time features over WebSockets. Action Cable integrates WebSockets into Rails, enabling real-time broadcasts like Turbo Stream updates.