class Board < ApplicationRecord
has_many :cards, dependent: :destroy
belongs_to :owner, class_name: "User"
validates :name, presence: true
end
class Card < ApplicationRecord
belongs_to :board, touch: true
# Broadcast a refresh signal to the parent board's stream on any change.
broadcasts_refreshes_to :board
scope :ordered, -> { order(position: :asc, created_at: :asc) }
validates :title, presence: true
end
<%# Opt this page into morph-based refreshes with preserved scroll %>
<%= turbo_refreshes_with method: :morph, scroll: :preserve %>
<%# Subscribe to the same stream Card broadcasts to %>
<%= turbo_stream_from @board %>
<section class="board" id="<%= dom_id(@board) %>">
<header>
<h1><%= @board.name %></h1>
<span class="count"><%= @board.cards.size %> cards</span>
</header>
<ul class="cards">
<% @board.cards.ordered.each do |card| %>
<li id="<%= dom_id(card) %>" class="card">
<span class="card__title"><%= card.title %></span>
<%= button_to "Remove", board_card_path(@board, card),
method: :delete, class: "card__delete" %>
</li>
<% end %>
</ul>
<%# Kept across morphs so an in-progress entry is not wiped out %>
<%= form_with model: [@board, Card.new], data: { turbo_permanent: true, id: "new-card-form" } do |f| %>
<%= f.text_field :title, placeholder: "New card", autofocus: true %>
<%= f.submit "Add" %>
<% end %>
</section>
class CardsController < ApplicationController
before_action :set_board
def create
@card = @board.cards.new(card_params)
if @card.save
redirect_back fallback_location: board_path(@board)
else
redirect_back fallback_location: board_path(@board),
alert: @card.errors.full_messages.to_sentence
end
end
def update
@card = @board.cards.find(params[:id])
@card.update(card_params)
redirect_back fallback_location: board_path(@board)
end
def destroy
@card = @board.cards.find(params[:id])
@card.destroy
redirect_back fallback_location: board_path(@board)
end
private
def set_board
@board = current_user.boards.find(params[:board_id])
end
def card_params
params.require(:card).permit(:title, :position)
end
end
Turbo 8 introduced page refreshes as a first-class Turbo Stream action, and pairing them with DOM morphing lets a full-page reload preserve scroll position, focus, and unchanged nodes instead of blowing the page away. This snippet shows the three pieces that make it work together: the model declaration that broadcasts refresh signals, the view opt-in that switches Turbo from replace to morph, and the controller that mutates records without hand-writing a single stream template.
In Board model, broadcasts_refreshes_to wires the model into the refresh pipeline. Every time a Card is created, updated, or destroyed, Turbo enqueues a refresh broadcast to the parent board's stream (board). Crucially, a page refresh broadcast carries no HTML — it is just a signal telling every subscribed browser "re-request this page and reconcile the DOM". That keeps the payload tiny and sidesteps the classic problem of authoring per-partial stream templates for each mutation. The debounce in Turbo coalesces a burst of these signals so ten rapid edits produce roughly one refresh per client.
In boards/show.html.erb, two lines control the behavior. turbo_refreshes_with method: :morph, scroll: :preserve renders the <meta> tags Turbo reads on load; method: :morph selects idIomorph-based reconciliation and scroll: :preserve keeps the viewport steady. The matching turbo_stream_from @board subscribes the client to the same stream the model broadcasts to, closing the loop.
In CardsController, the actions are deliberately ordinary. create and update just persist and redirect_back — there is no respond_to block spraying turbo_stream responses, because the broadcast plus morph handles cross-client updates and the redirect handles the acting user. The @board lookup scoped through current_user.boards enforces authorization while giving the broadcast its target.
The main trade-off is that morphing re-fetches and re-renders the whole page per refresh, so it favors read-light collaborative screens over huge lists; elements that must survive reconciliation (open menus, form inputs) should carry stable ids and data-turbo-permanent. When those invariants hold, this pattern replaces a pile of stream partials with three declarative lines.
Related snips
class CommentsController < ApplicationController
before_action :set_post
def create
@comment = @post.comments.build(comment_params)System test: asserting Turbo Stream responses
class Post < ApplicationRecord
belongs_to :author, class_name: 'User'
has_many :comments, dependent: :destroy
scope :published, -> { where.not(published_at: nil).where('published_at <= ?', Time.current) }
scope :draft, -> { where(published_at: nil) }ActiveRecord scopes for reusable query logic
module Api
module V1
class UsersController < BaseController
def show
user = User.includes(:profile).find(params[:id])ETags for conditional requests and caching
class PostsController < ApplicationController
def index
@posts = Post.includes(:author)
.order(created_at: :desc)
.page(params[:page])
.per(10)Turbo Frames: infinite scroll with lazy-loading frame
require "csv"
class PeopleCsvStream
include Enumerable
HEADERS = %w[id full_name email signed_up_at plan].freezeResilient CSV Export as a Streamed Response
<form data-controller="query-sync" data-action="change->query-sync#apply">
<select name="status" class="rounded border p-2">
<option value="">Any</option>
<option value="open">Open</option>
<option value="closed">Closed</option>
</select>Filter UI that syncs query params via Stimulus (no front-end router)
Share this code
Here's the card — post it anywhere.
