Hotwire Patterns for Rails

Patterns for building modern, interactive Rails applications with Stimulus and Turbo.

When This Skill Applies

• Creating Stimulus controllers for interactive behaviors
• Implementing Turbo frames for partial page updates
• Using Turbo streams for real-time updates
• Progressive enhancement patterns
• Form enhancements and validations
• Real-time features with ActionCable

Core Philosophy

HTML over the wire: Hotwire sends HTML from the server, not JSON. JavaScript enhances server-rendered HTML rather than replacing it.

• Progressive enhancement: Works without JavaScript, enhanced with it
• Server-first: Business logic stays on the server
• Minimal JavaScript: Just enough JS to make HTML interactive

Quick Reference

Detailed Documentation

• stimulus.md - Stimulus controller patterns
• turbo.md - Turbo frames and streams patterns

Common Patterns

Stimulus Controller Basics

// app/javascript/controllers/toggle_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["content"]
  static classes = ["hidden"]
  static values = { open: { type: Boolean, default: false } }

  toggle() {
    this.openValue = !this.openValue
  }

  openValueChanged() {
    this.contentTarget.classList.toggle(this.hiddenClass, !this.openValue)
  }
}

<div data-controller="toggle" data-toggle-hidden-class="hidden">
  <button data-action="toggle#toggle">Toggle</button>
  <div data-toggle-target="content">Content here</div>
</div>

Turbo Frame Basics

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

<%= link_to "Load more", messages_path(page: 2), data: { turbo_frame: "messages" } %>

Turbo Stream Basics

<%# app/views/messages/create.turbo_stream.erb %>
<%= turbo_stream.prepend "messages", @message %>
<%= turbo_stream.update "message_count", Message.count %>

Integration Tips

Rails View Helpers

<%# Stimulus data attributes %>
<%= tag.div data: { controller: "dropdown", dropdown_open_value: false } do %>
  ...
<% end %>

<%# Turbo frame %>
<%= turbo_frame_tag "user_#{user.id}" do %>
  <%= render user %>
<% end %>

Prevent Turbo on Specific Links

<%= link_to "Download", file_path, data: { turbo: false } %>
<%= link_to "External", "https://example.com", data: { turbo_frame: "_top" } %>