turbo-streams

ruby
class Comment < ApplicationRecord
  belongs_to :post
  belongs_to :author, class_name: 'User'

  # Automatically broadcast changes to all subscribers of this post
  after_create_commit -> { broadcast_append_to post, target: "comments" }

Turbo Stream broadcasts for real-time collaboration

hotwire turbo-streams actioncable
by Jordan Lee 3 tabs
ruby
class DashboardWidget < ApplicationRecord
  broadcasts_refreshes
end

Broadcasts refreshes for complex pages (less target wiring)

rails hotwire turbo
by Henry Kim 2 tabs
ruby
class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

Turbo Streams fallback to HTML for older clients

rails hotwire turbo-streams
by codesnips 4 tabs
erb
<%= turbo_frame_tag dom_id(flag) do %>
  <tr class="flag-row">
    <td class="flag-name"><%= flag.name %></td>
    <td class="flag-env"><%= flag.environment %></td>
    <td class="flag-state">
      <span class="badge badge--<%= flag.enabled? ? 'on' : 'off' %>">

Admin “quick toggle” with Turbo Streams and a single partial

rails hotwire turbo
by codesnips 4 tabs
javascript
import * as Turbo from "@hotwired/turbo";

function metaContent(name) {
  const el = document.querySelector(`meta[name="${name}"]`);
  return el ? el.getAttribute("content") : null;
}

Attach custom headers to Turbo fetch requests (stimulus-free)

rails hotwire turbo
by codesnips 3 tabs
erb
<h1>Create your account</h1>

<%= render "error_summary", record: @user %>

<%= form_with model: @user, url: signups_path do |f| %>
  <div class="field">

Update an error summary area via turbo_stream.update

rails hotwire turbo
by codesnips 3 tabs
erb
<%= tag.div id: dom_id(comment), class: "comment", data: { controller: "comment" } do %>
  <div class="comment__body">
    <%= comment.body %>
  </div>

  <footer class="comment__meta">

Use dom_id everywhere to keep Turbo replacements deterministic

rails hotwire turbo
by codesnips 4 tabs
erb
<%= turbo_stream.prepend 'items' do %>
  <%= render @item %>
<% end %>

<turbo-stream action="reset_form" target="new_item_form"></turbo-stream>

Custom Turbo Stream action: reset a form after success

rails hotwire turbo
by Henry Kim 3 tabs
ruby
module TurboResponder
  extend ActiveSupport::Concern

  private

  def respond_with_turbo(resource, on_success:, partial:, notice: nil)

A reusable respond_to block for turbo_stream + html

rails hotwire turbo
by codesnips 3 tabs
erb
<%= turbo_stream_from [current_member, :notifications] %>

<div id="notification_badge">
  <%= render 'notifications/badge', count: current_member.notifications.unread.count %>
</div>

Notifications dropdown that live-updates with Turbo Streams

rails hotwire turbo
by Henry Kim 2 tabs
ruby
class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

Turbo Streams: Create with prepend + HTML fallback

rails turbo hotwire
by codesnips 4 tabs
javascript
import { StreamActions } from "@hotwired/turbo"

StreamActions.flash = function () {
  const container = document.getElementById("flashes")
  if (!container) return

Turbo Streams: custom action for flash messages

rails turbo hotwire
by codesnips 3 tabs