hotwire-patterns

Hotwire Patterns

Iron Laws

1. Keep server-rendered interactions simple before reaching for custom JS.
2. Broadcast after commit when Turbo Stream updates depend on committed state.
3. Keep Stimulus controllers focused on browser concerns, not business rules.
4. Avoid duplicating the same state in DOM, session, cache, and Current without a clear source of truth.
5. Use Turbo Frames for scoped navigation; Turbo Streams for server-driven updates.
6. Progressive enhancement: pages work without JavaScript, enhanced with it.

Overview

Hotwire provides tools for building modern web applications with minimal JavaScript:

• Turbo Drive — Handles page navigation without full reloads
• Turbo Frames — Scoped page updates, independent navigation
• Turbo Streams — Server-driven page changes via WebSocket or HTTP
• Stimulus — JavaScript controllers for progressive enhancement

Quick Decision Guide

Use Case	Tool	Example
Page navigation	Turbo Drive	Click links, instant page loads
Modal/dialog	Turbo Frame	Login modal, settings panel
Independent scrollable area	Turbo Frame	Comments section, sidebar
Real-time updates	Turbo Streams	Notifications, live comments
Form validation	Stimulus	Character counter, date picker
Complex UI interaction	Stimulus	Drag and drop, autocomplete

Turbo Frames

<!-- Frame that updates independently -->
<%= turbo_frame_tag "comments" do %>
  <%= render @comments %>
<% end %>

<!-- Link targets specific frame -->
<%= link_to "Load more", comments_path(page: 2), data: { turbo_frame: "comments" } %>

See Turbo Architecture for Drive, Frames, and Streams.

Turbo Streams

<!-- Broadcast from model -->
<%= turbo_stream_from @post %>

<!-- In view, streams update automatically -->
<%= turbo_frame_tag dom_id(@post) do %>
  <%= render @post %>
<% end %>

# Controller action
class CommentsController < ApplicationController
  def create
    @comment = @post.comments.create!(comment_params)
    
    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to @post }
    end
  end
end