Turbo and Stimulus: Rails' Modern Frontend

Traditional SPA: Browser → JSON API → React → Render
Hotwire: Browser → HTML → Turbo → Update

// No code needed. It just works.
// Turbo intercepts all links and form submissions

<%# Regular Rails link - Turbo handles it automatically %>
<%= link_to "About", about_path %>

<%# Disable Turbo for specific links %>
<%= link_to "Logout", logout_path, data: { turbo: false } %>

<%# Or disable for forms %>
<%= form_with model: @user, data: { turbo: false } do |f| %>

// Listen to Turbo events
document.addEventListener("turbo:load", function() {
  console.log("Page loaded via Turbo");
});

document.addEventListener("turbo:before-fetch-request", function() {
  // Show loading spinner
});

document.addEventListener("turbo:visit", function() {
  // Track page visits
});

<%= turbo_frame_tag "product_list" do %>
  <%= render @products %>
<% end %>

<%# Content loads only when scrolled into view %>
<%= turbo_frame_tag "comments", src: comments_path(@product), loading: :lazy do %>
  <p>Loading comments...</p>
<% end %>

<%# app/views/products/index.html.erb %>
<%= turbo_frame_tag "product_#{product.id}" do %>
  <div class="product">
    <h3><%= product.name %></h3>
    <p><%= product.price %></p>
    <%= link_to "Edit", edit_product_path(product) %>
  </div>
<% end %>

<%# app/views/products/edit.html.erb %>
<%= turbo_frame_tag "product_#{@product.id}" do %>
  <%= form_with model: @product do |f| %>
    <%= f.text_field :name %>
    <%= f.submit "Save" %>
  <% end %>
<% end %>

<%# Links inside frames stay inside the frame %>
<%= turbo_frame_tag "dashboard" do %>
  <h2>Dashboard</h2>
  <%= link_to "Recent Orders", orders_path %>

  <%= turbo_frame_tag "orders_list", src: orders_path %>
<% end %>

<%# Link outside frame targeting a specific frame %>
<%= link_to "Show Product", product_path(@product), data: { turbo_frame: "product_details" } %>

<%= turbo_frame_tag "product_details" do %>
  <!-- Content will be replaced here -->
<% end %>

<%# app/views/posts/create.turbo_stream.erb %>
<%= turbo_stream.append "posts" do %>
  <%= render @post %>
<% end %>

<%= turbo_stream.replace "post_form" do %>
  <%= render "form", post: Post.new %>
<% end %>

# app/controllers/comments_controller.rb
def create
  @comment = @post.comments.create(comment_params)

  respond_to do |format|
    format.turbo_stream do
      render turbo_stream: turbo_stream.append("comments", partial: "comment")
    end
  end
end

<%# app/views/posts/show.html.erb %>
<div id="comments">
  <%= render @post.comments %>
</div>

<%= turbo_stream_from @post, :comments %>

# app/controllers/notifications_controller.rb
def mark_as_read
  @notification = current_user.notifications.find(params[:id])
  @notification.mark_as_read!

  respond_to do |format|
    format.turbo_stream do
      render turbo_stream: [
        turbo_stream.remove(@notification),
        turbo_stream.replace("notification_count", partial: "count")
      ]
    end
  end
end

# app/models/post.rb
class Post < ApplicationRecord
  after_create_commit -> { broadcast_append_to "posts", partial: "posts/post", locals: { post: self } }
  after_update_commit -> { broadcast_replace_to "posts" }
  after_destroy_commit -> { broadcast_remove_to "posts" }
end

# app/channels/posts_channel.rb
class PostsChannel < ApplicationCable::Channel
  def subscribed
    stream_from "posts"
  end
end

<%# app/views/posts/index.html.erb %>
<%= turbo_stream_from "posts" %>

<div id="posts">
  <%= render @posts %>
</div>

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

export default class extends Controller {
  static targets = ["source", "feedback"]
  static values = { timeout: Number }

  copy() {
    const text = this.sourceTarget.textContent
    navigator.clipboard.writeText(text)

    this.feedbackTarget.textContent = "Copied!"
    this.feedbackTarget.classList.add("success")

    setTimeout(() => {
      this.feedbackTarget.textContent = "Click to copy"
      this.feedbackTarget.classList.remove("success")
    }, this.timeoutValue || 2000)
  }
}

<div data-controller="clipboard" data-clipboard-timeout-value="3000">
  <code data-clipboard-target="source">
    rails new myapp
  </code>

  <button data-action="click->clipboard#copy">
    Copy
  </button>

  <span data-clipboard-target="feedback">Click to copy</span>
</div>

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

export default class extends Controller {
  static targets = ["field", "error"]

  validate() {
    const field = this.fieldTarget
    const error = this.errorTarget

    if (field.value.length < 3) {
      error.textContent = "Must be at least 3 characters"
      error.classList.add("visible")
      field.classList.add("invalid")
    } else {
      error.textContent = ""
      error.classList.remove("visible")
      field.classList.remove("invalid")
    }
  }
}

<div data-controller="form-validation">
  <input
    data-controller-target="field"
    data-action="input->form-validation#validate"
    type="text"
  >
  <span data-controller-target="error" class="error"></span>
</div>

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

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

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

<div data-controller="toggle">
  <button data-action="click->toggle#toggle">
    Show Details
  </button>

  <div data-controller-target="content" class="hidden">
    More information...
  </div>
</div>

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

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

  connect() {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.loadMore()
      }
    })

    observer.observe(this.sentinelTarget)
  }

  loadMore() {
    this.dispatch("load")
  }
}

<div data-controller="infinite-scroll">
  <div id="posts">
    <!-- Existing posts -->
  </div>

  <div data-infinite-scroll-target="sentinel">
    Loading more...
  </div>
</div>

<%# app/views/products/index.html.erb %>
<%= form_with url: products_path, method: :get, data: { turbo_frame: "search_results" } do |f| %>
  <%= f.text_field :query, placeholder: "Search products...",
    data: { action: "input->search#search" } %>
<% end %>

<%= turbo_frame_tag "search_results", src: products_path(query: params[:query]) do %>
  <!-- Results will load here -->
<% end %>

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

export default class extends Controller {
  search(event) {
    const frame = document.getElementById("search_results")
    frame.src = `/products?query=${event.target.value}`
    frame.reload()
  }
}

# app/controllers/likes_controller.rb
def create
  @post = Post.find(params[:post_id])
  @post.likes.create(user: current_user)

  respond_to do |format|
    format.turbo_stream do
      render turbo_stream: turbo_stream.replace("like_#{@post.id}", partial: "like")
    end
  end
end

<%# app/views/posts/_like.html.erb %>
<div id="like_<%= post.id %>">
  <% if current_user&.liked?(post) %>
    <%= button_to "Unlike", like_path(post), method: :delete, data: { turbo: true } %>
  <% else %>
    <%= button_to "Like", likes_path(post_id: post.id), data: { turbo: true } %>
  <% end %>
  <span><%= post.likes.count %> likes</span>
</div>

# app/models/notification.rb
class Notification < ApplicationRecord
  after_create_commit do
    broadcast_prepend_to "notifications_#{user_id}",
      partial: "notifications/notification",
      locals: { notification: self }
  end
end

<%# app/views/layouts/application.html.erb %>
<%= turbo_stream_from "notifications_#{current_user.id}" %>

<div id="notifications">
  <%= render current_user.notifications.unread %>
</div>

<%= csrf_meta_tags %>

// Instead of DOMContentLoaded
document.addEventListener("turbo:load", function() {
  // Your code here
});

// For re-initializing after navigation
document.addEventListener("turbo:before-cache", function() {
  // Clean up before caching
});

<%# Disable Turbo for specific forms %>
<%= form_with model: @user, data: { turbo: false } do |f| %>

<%# Or use local: true for old behavior %>
<%= form_with model: @user, local: true do |f| %>

<%# Make sure IDs match %>
<%= turbo_frame_tag "comments" do %>
  <!-- Content -->
<% end %>

<%# Update from controller %>
<%= turbo_stream.replace "comments", partial: "comments" %>

// Preload links
document.addEventListener("turbo:click", function(event) {
  // Show loading indicator
});

<%# Cache frame content %>
<%= turbo_frame_tag "expensive_content", src: expensive_path, loading: :lazy %>

<%# Load content only when needed %>
<%= turbo_frame_tag "dashboard_stats", src: stats_path, loading: :lazy do %>
  <div class="spinner">Loading...</div>
<% end %>

# Rails 7 includes Hotwire by default
rails new myapp --javascript=importmap

# Generate a Stimulus controller
rails generate stimulus clipboard

# Add Turbo Frames
<%= turbo_frame_tag "list" do %>

# Add Turbo Streams
<%= turbo_stream.append "comments" do %>