hotwire

erb
<div data-controller="disclosure">
  <button type="button" data-action="disclosure#toggle" aria-expanded="false" class="font-medium">
    Advanced
  </button>
  <div data-disclosure-target="panel" class="mt-2 hidden">
    <%= render 'advanced_filters' %>

Collapse/expand UI with Stimulus that survives Turbo swaps

rails hotwire stimulus
by Henry Kim 2 tabs
erb
<nav class="site-nav" data-controller="preload">
  <ul>
    <li>
      <%= link_to "Dashboard", dashboard_path,
            class: "nav-link",
            data: { turbo_preload: true } %>

Speed up perceived performance with Turbo preload links

rails hotwire turbo
by codesnips 3 tabs
erb
<div class="layout">
  <ul class="product-list">
    <% @products.each do |product| %>
      <li class="product-row">
        <%= link_to product.name,
              product_path(product),

Turbo Frames: “details” panel that lazy-loads on click

rails turbo hotwire
by codesnips 4 tabs
ruby
class Comment < ApplicationRecord
  belongs_to :post
  belongs_to :author, class_name: "User"

  has_rich_text :body

Action Text comment form that works inside a Turbo Frame

rails hotwire turbo
by codesnips 3 tabs
ruby
class ProductsController < ApplicationController
  before_action :set_product, only: %i[edit update]

  def index
    @products = Product.order(:name)
  end

Inline edit a table row with Turbo Frames

rails hotwire turbo
by codesnips 4 tabs
erb
<div data-controller="toast" data-toast-timeout-value="2500" class="rounded bg-gray-900 px-3 py-2 text-white">
  <div class="flex items-start justify-between gap-3">
    <div><%= message %></div>
    <button type="button" data-action="toast#close">✕</button>
  </div>
</div>

Stimulus toast auto-dismiss for Turbo-appended notifications

rails hotwire stimulus
by Henry Kim 2 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["bar", "percent", "status"]
  static values = {
    current: { type: Number, default: 0 },

Progress indicators for long-running operations

hotwire stimulus actioncable
by Jordan Lee 3 tabs
ruby
class DocumentsController < ApplicationController
  before_action :set_document, only: :destroy

  def destroy
    @document.discard!

Undo delete with a Turbo Stream “restore” action

rails hotwire turbo-streams
by codesnips 4 tabs
ruby
class ProductsController < ApplicationController
  def index
    @products = Product
      .includes(:category)
      .order(created_at: :desc)
      .page(params[:page])

Fragment caching inside Turbo Frames (fast lists)

rails hotwire turbo
by codesnips 4 tabs
ruby
class SubscriptionsController < ApplicationController
  def new
    @subscription = current_account.subscriptions.new
  end

  def create

Turbo Streams: append server-side validation warnings

rails turbo hotwire
by codesnips 4 tabs
erb
<%# renders a lazy placeholder; real content arrives when scrolled into view %>
<div class="panel-card">
  <h3 class="panel-card__title"><%= title %></h3>

  <%= turbo_frame_tag dom_id(panel, :frame),
        class: "panel-card__body",

Lazy-load heavy panels with IntersectionObserver + Turbo frame

rails hotwire stimulus
by codesnips 3 tabs
erb
<turbo-stream action="set_title">
  <template><%= "Inbox (#{@unread_count})" %></template>
</turbo-stream>

Turbo Streams: update document title with a custom action

rails hotwire turbo
by Henry Kim 2 tabs