Ruby on Rails Hotwire: Build Real-Time Rails Apps

Three complementary technologies are together referred to as "hotwire" (HTML Over The Wire):

Turbo Drive grabs clicks and form actions on the fly, swapping out only the parts that change - no full reloads needed. It keeps things snappy by updating bits without restarting everything from scratch.

Turbo frames Rails let you split pages into chunks - each one works on its own, so changes or delayed loading don't mess with the rest. Each piece runs separately, updating alone when needed while everything else stays calm.

Turbo Streams Rails let the server update specific parts of a page - great for things like instant alerts or live changes during teamwork - using signals from the backend instead of waiting for user actions - so everything feels snappy and current without extra code.

On top of that, Stimulus gives you a slim JS setup to add small bits of interaction when necessary - no need for heavy single-page app tools. It keeps things fast while letting features come alive at key spots.

Simplicity: Your application runs in Ruby -the place you know best. Instead of rewriting checks or rules everywhere, keep them once, on the server. That’s what makes it fast.

Performance: Shipping HTML directly can save time compared to using JSON and building elements via JS, particularly with deeply nested layouts.

SEO-Friendly: Because the app creates HTML right on the server, search bots grab your pages fast - no need to run JS. That means better visibility when people hunt online.

Progressive Enhancement: If JavaScript breaks or gets turned off, your app still works — making it more accessible and resilient overall.

At PIT Solutions, we often recommend Hotwire when building scalable Rails platforms because it simplifies development while improving performance.

In this Rails Hotwire tutorial, let's implement a practical example: creating a skill name in a listing page without reloading the entire page. This demonstrates the power of Turbo Frames Rails and Turbo Streams Rails for seamless creation.

Step 1: Set Up the Model

 

class Skill < ApplicationRecord
  validates :name, presence: true, uniqueness: { case_sensitive: false }, length: { maximum: 50 }
end

 

Step 2: Index View Structure

Turbo Frames let you treat parts of your page as independent components. In the skills interface, the form for creating new skills lives in its own frame:

 

<%= turbo_frame_tag "new_skill" do %>
  <%= render "form", skill: @skill %>
<% end %>
<%= render @skills %>
<table class="table table-striped table-hover table-bordered ">
  <thead>
    <tr>
      <th>Name</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody id="table_skills">
    <%= render @skills %>
  </tbody>
</table>

 

Step 3: Create the View Template - Declarative Interactions

Hotwire embraces HTML data attributes for configuration. Here's a skill table row with edit and delete actions:

 

<%= skill.name %>
<% if (current_user) %>
  <%= button_to edit_admin_skill_path(skill), method: :get, data: { turbo_frame: 'new_skill' }, class: 'btn btn-edit' do %>
  <% end %>
  <%= button_to admin_skill_path(skill), method: :delete, data: { turbo_confirm: "Are you sure?" } do %>
  <% end %>
<% end %>

 

The turbo_frame attribute tells Turbo exactly where to place the response. The turbo_confirm attribute adds a confirmation dialog. No JavaScript files to manage, no event listeners to attach—it's all declarative and readable.

Step 4: Create the Create Form

 

<%= form_with(model: [:admin, skill], local: true, html: { class: 'mb-4 d-flex' }) do |form| %>
  <div class="form-group px-3 col-6">
    <%= form.label :name, "Skill Name", class: 'sr-only' %>
    <%= form.text_field :name, class: 'form-control', placeholder: 'Enter skill name' %>
    <%= render 'common/error_messages', errors: skill.errors[:name] %>
  </div>
  <div class="form-group mt-4">
    <%= form.submit class: 'custom-button' %>
  </div>
<% end %>

 

Step 5: Set Up Turbo Stream for Create Action

One of Hotwire's most powerful features is Turbo Streams. Consider a skills management interface where administrators can create, edit, and delete candidate skills. Traditionally, this would require either full page reloads or significant JavaScript to coordinate updates. With Ruby on Rails Hotwire, this becomes effortless.

 

<%= turbo_stream.prepend "table_skills", partial: "skill", locals: { skill: @skill } %>
<%= turbo_stream.update "new_skill", partial: "form", locals: { skill: Skill.new } %>
<%= turbo_stream.prepend "flash", partial: "layouts/messages" %>

 

Step 6: Controller Actions

With Hotwire, the controller action remains remarkably straightforward:

 

class Admin::SkillsController < ApplicationController
  before_action :set_skills, only: [:index, :create, :edit, :update]
  def index
    @skill = Skill.new
  end
  def create
    @skill = Skill.new(skill_params)
    respond_to do |format|
      if @skill.save
        format.html { redirect_to admin_skills_path, notice: 'Skill was successfully created.' }
        format.turbo_stream { flash.now[:notice] = "Skill was successfully created." }
      else
        format.html { render :index, status: :unprocessable_entity }
      end
    end
  end
  private
  def skill_params
    params.require(:skill).permit(:name)
  end
  def set_skills
    @skills = Skill.paginate(page: params[:page], per_page: 10)
  end
end

 

The beauty here is progressive enhancement. The same endpoint handles both traditional HTML requests and Turbo Stream updates. If JavaScript fails or is disabled, the application still works perfectly through standard redirects.

That's all! The Turbo Frame shows a form where you can enter a new skill name as the page loads. The new talent shows at the top of the list automatically after you click "Submit". All of this is accomplished without requiring a complete page reload or creating a single line of custom JavaScript.

Turbo Frames Rails: Clicking the edit button makes Turbo grab the request, then it scans the response for a matching turbo_frame_tag. Once found, just that section updates while everything else stays put.

Turbo Streams Rails: Submitting the form triggers a response from the controller - this stream handles several tasks at once, like adding up top, changing content, swapping elements, or taking things out across the page.

Progressive Enhancement: Your application is still available even if JavaScript is deactivated because the forms continue to function through conventional full-page refreshes.

While Hotwire is powerful, keep these best practices in mind:

Use Turbo Frames Strategically: Break large pages into frames only where independent loading makes sense. Too many frames can hurt performance.

Cache Partials Aggressively: Since you're rendering HTML on the server, fragment caching becomes even more valuable:

 

<% cache skill do %>
  <% turbo_frame_tag dom_id(skill) do %>
  <% end %>
<% end %>

 

Monitor Cable Connections: WebSocket connections consume server resources. Monitor your Action Cable connection count in production.

Dramatically Less JavaScript

Modern JavaScript frameworks can easily exceed several megabytes. Ruby on Rails Hotwire typically adds less than 50KB to your page. Users get faster initial loads, and you maintain far less code.

Server-Side Rendering Benefits

Every response is HTML rendered on the server. This means:

• Search engines can crawl your content naturally
• Accessibility features work out of the box
• All users see the same rendered output
• No hydration mismatches or loading states

Real-Time Updates Without WebSockets

Turbo Streams provide immediate feedback without maintaining persistent connections. When a form submits successfully, the server returns a Turbo Stream that updates multiple parts of the page simultaneously. Background jobs can trigger updates. It feels real-time but uses standard HTTP.

The Rails Developer Experience

If you know Rails in web development, you already know Hotwire. Forms are still Rails forms:

No separate component library. No state management. No build configuration. It's just Rails, enhanced.

Testing remains equally straightforward. Your existing controller and integration tests work unchanged.

Ruby on Rails Hotwire changes how we see Rails when building today’s apps. Rather than handling split frontend backend setups, it lets you craft lively interfaces straight from server-rendered HTML. That way, things stay fast without extra complexity.

Faster builds, easier updates, one app that handles stress and works everywhere - that’s what happens. Once you start using Hotwire, you’ll see how plain HTML from the server, mixed with almost no JS on the browser, solves problems you once needed heavy scripting for.

Begin with tiny steps - use Turbo Frames on a current page, then slowly bring in Turbo Streams. Before long, you’ll see how old-school server-generated HTML feels fresh again, especially when mixed with live updates.