Hotwire and Turbo in Rails 8: Building Reactive UIs Without SPA Frameworks (2026)

Why Hotwire Outperforms React for 90% of Web Applications

For years, teams split their web applications into separate Rails API backends and complex React/Redux single-page applications. This introduced dual routing, duplicated models, complex state synchronization bugs, and doubled engineering overhead. Hotwire restores simplicity: the server renders pure HTML fragments and streams them directly into the DOM.

1. Turbo 8 Morphing in Action

Turbo 8 introduces smooth DOM morphing. When a model changes, a standard controller redirect triggers an intelligent DOM diff that only patches mutated elements:

  <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
  <%= yield :head %>

2. Turbo Frames for Scoped Interactions

Deconstruct complex pages into isolated Turbo Frames. Clicking a link or submitting a form inside a frame replaces only that specific frame's contents:

<%= turbo_frame_tag dom_id(project) do %>
  

    
<%= project.name %>
    <%= project.status %>
    <%= link_to "Edit Inline", edit_project_path(project), class: "btn-edit" %>
  
<% end %>

3. Real-Time Multi-User Broadcasts with Turbo Streams

Broadcast updates to multiple active browser sessions using Active Record callbacks without writing custom WebSocket JavaScript:

# app/models/comment.rb
class Comment < ApplicationRecord
  belongs_to :ticket
  # Broadcast new comment instantly to all users viewing the ticket
  broadcasts_to :ticket, inserts_by: :prepend, target: "comments_list"
end

Frequently Asked Questions

What is the difference between Turbo Frames and Turbo Streams?
Turbo Frames update a single targeted container on the page in direct response to a user action (click/submit). Turbo Streams can update, append, prepend, or remove multiple distinct elements anywhere on the page simultaneously, and can be broadcast asynchronously over WebSockets.

Can I use React or Vue alongside Hotwire?
Yes. You can use Hotwire for 90% of your application's pages and mount localized React or Vue components (e.g. an interactive canvas editor or drag-and-drop workflow designer) inside specific Stimulus controllers.

How does Turbo 8 Morphing handle form inputs and scroll position?
Idiomorph compares existing DOM nodes with incoming HTML fragments and mutates attributes in-place. Because DOM elements are not destroyed and recreated, active text focus, cursor positions, and scroll offsets remain completely undisturbed.

Is Hotwire SEO-friendly?
Yes, 100%. Because Hotwire delivers server-rendered HTML on initial request, search engine crawlers (Googlebot, Bingbot) and AI bots parse complete page content without needing JavaScript execution.