Building Dynamic Interfaces with Turbo Frames

2 min readMay 19, 2023

Turbo Frames enable you to create reactive elements within your Rails application. You can find the first part of this tutorial here.

Open the app/views/posts/index.html.erb file and replace the posts div with the following code:

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

2. Modify the form in the same file to use a Turbo Frame for updates:

<%= form_with model: Post.new, id: "new_post", data: { turbo_frame: "posts" } do |f| %>
  <%= f.text_field :title %>
  <%= f.submit "Create Post" %>
<% end %>

3. In the app/views/posts/_post.html.erb file, wrap the post content with a Turbo Frame:

<turbo-frame id="<%= dom_id(post) %>">
  <h3><%= post.title %></h3>
</turbo-frame>

4. Restart the Rails server if it’s not running and refresh the http://localhost:3000/posts page. Create a new post, and you'll notice that only the relevant frame is updated, resulting in a smoother and more dynamic user experience.

Enhancing User Experience with Turbo Drive:

Turbo Drive optimizes navigation within your Rails application, reducing page reloads and preserving the application state.

Open the app/views/layouts/application.html.erb file and add the following code within the <head> section:

<%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>

2. Replace the link_to tags in the app/views/posts/index.html.erb file with the following code:

<%= link_to "Home", root_path, data: { turbo_frame: "posts" } %>
<%= link_to "New Post", new_post_path, data: { turbo_frame: "posts" } %>

3. In the app/controllers/posts_controller.rb file, modify the create action as follows:

def create
  @post = Post.create(post_params)
  respond_to do |format|
    format.turbo_stream { render turbo_stream: turbo_stream.append("posts", @post) }
    format.html { redirect_to posts_path }
  end
end

4. Restart the Rails server if needed and navigate through the application. You’ll notice that the content updates happen seamlessly without page reloads.

Unleashing the Power of Stimulus:

Stimulus is a JavaScript framework that enables you to enhance your Rails views with interactive behavior.

Install Stimulus using Yarn:

yarn add stimulus

2. Create a new directory for Stimulus controllers:

mkdir app/javascript/controllers

3. Create a new file app/javascript/controllers/posts_controller.js and add the following code:

import { Controller } from "stimulus"

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

  connect() {
    console.log("Posts Controller connected!")
  }

  updateTitle() {
    this.titleTarget.innerText = "Updated with Stimulus!"
  }
}

4. Open the app/views/posts/index.html.erb file and add the following code to the "Posts" header:

<h1 data-controller="posts" data-action="click->posts#updateTitle" data-target="posts.title">Posts</h1>

5. Start the Rails server and visit http://localhost:3000/posts. When you click on the "Posts" header, the text should update to "Updated with Stimulus!" without a page refresh.

Congratulations! You’ve successfully explored Rails Hotwire, Turbo Streams, Turbo Frames, Turbo Drive, and Stimulus. These powerful tools will enable you to build highly interactive and performant Rails applications.

Remember, this blog post only scratches the surface of what Rails Hotwire can do. Feel free to dive deeper into the documentation and explore the various features and possibilities it offers. Happy coding!

Building Dynamic Interfaces with Turbo Frames

Enhancing User Experience with Turbo Drive:

Unleashing the Power of Stimulus:

Written by Dejan Vujovic