Rails

Introduction

With the release of Rails 7, a powerful shift occurred in how we build modern web applications — thanks to Hotwire, which includes Turbo and Stimulus. Rails now provides a way to build fast, modern frontends without writing complex JavaScript frameworks like React or Angular.

In this guide, we’ll explore:

  • What Hotwire is (Turbo + Stimulus)
  • Why Rails 7 recommends it
  • How to set up and use Hotwire in your Rails 7 project
  • A basic example using Turbo and Stimulus

What is Hotwire?

Hotwire (HTML Over The Wire) is a framework introduced by Basecamp (creators of Rails). It speeds up web applications by replacing JavaScript-heavy frontends with fast HTML streaming.

Hotwire consists of:

  • Turbo: Replaces the need for most JavaScript by speeding up navigation and form submissions.
  • Stimulus: A modest JavaScript framework for handling small interactivity pieces.

Together, they offer a lightweight, server-driven approach to modern web apps.

Why Rails 7 Promotes Hotwire

Rails 7 removes Webpacker by default and tightly integrates Hotwire. Here’s why:

  • Zero configuration for frontend
  • Super-fast page loads with Turbo
  • Less dependency on React or Vue
  • Built-in support with rails new

Hotwire encourages stimulus-driven interactivity over bloated front-end SPAs.

Setting Up Hotwire in Rails 7

1.Create a new Rails 7 project (with Hotwire)

rails new hotwire_demo --css=tailwind

The --css=tailwind part is optional but works well with Turbo.

2.Add Hotwire (Turbo + Stimulus)

Rails 7 comes with Hotwire support out-of-the-box. If you’re adding to an existing app:

bundle add turbo-rails
bundle add stimulus-rails

bin/rails turbo:install
bin/rails stimulus:install

This command:

  • Adds Turbo to application.js
  • Creates controllers/ folder for Stimulus
  • Updates HTML layouts with Turbo tags

Turbo Basics

Turbo has three major components:

Turbo Drive

Automatically intercepts page loads and turns them into AJAX requests — your app feels like a single-page app, but without JavaScript routing.

<%= link_to "Dashboard", dashboard_path, data: { turbo: true } %>

Turbo Frames

Let you replace part of a page instead of the whole page.

<turbo-frame id="user_list">
  <%= render @users %>
</turbo-frame>

Turbo Streams

Push real-time updates to the DOM using ActionCable or response updates.

<%= turbo_stream_from "messages" %>

Stimulus: Add JavaScript Where You Need It

Stimulus lets you sprinkle JS in HTML.

Example: Toggle Button

Create a controller:

bin/rails generate stimulus toggle

In toggle_controller.js:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["content"]

  toggle() {
    this.contentTarget.classList.toggle("hidden")
  }
}

In your view:

<div data-controller="toggle">
  <button data-action="click->toggle#toggle">Toggle</button>
  <div data-toggle-target="content" class="hidden">Hello Stimulus!</div>
</div>

Benefits of Using Hotwire in Rails

  • Lightning-fast UIs without complex JS
  • Tightly integrated with Rails 7
  • Smaller JavaScript bundle size
  • Easier to maintain
  • Faster page navigation and updates

Conclusion

Rails 7 + Hotwire (Turbo & Stimulus) makes building modern web applications simpler and faster. You can achieve SPA-like speed and interactivity without needing a full frontend framework. If you’re tired of the complexity of React/Vue, give Hotwire a try — it may completely change how you build apps.

Looking for more Rails guides? Check out SaasTrail’s advanced Rails guides for practical tips and advanced development patterns.