erb

javascript
import { Controller } from "@hotwired/stimulus"

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

  connect() {

Toast notifications with Stimulus and Tailwind

stimulus ux notifications
by Jordan Lee 3 tabs
erb
<div id="projects">
  <% projects.each do |project| %>
    <% cache project do %>
      <%= render project %>
    <% end %>
  <% end %>

Fragment caching inside Turbo Frames (fast lists)

rails hotwire turbo
by Henry Kim 2 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
<%= turbo_frame_tag 'audit_log', data: { controller: 'lazy-frame', lazy_frame_src_value: audit_log_project_path(@project) } do %>
  <div class="py-6 text-gray-500">Scroll to load audit log…</div>
<% end %>

Lazy-load heavy panels with IntersectionObserver + Turbo frame

rails hotwire stimulus
by Henry Kim 2 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
ruby
module CollectionCacheKey
  extend ActiveSupport::Concern

  def cache_key_for(scope)
    relation = scope.respond_to?(:all) ? scope.all : scope
    model = relation.klass

Deterministic Cache Keys for Collections

rails caching activerecord
by codesnips 3 tabs
erb
<div id="articles">
  <%= render @articles %>
</div>

<% if @next_page.present? %>
  <%= turbo_frame_tag 'next_page', src: articles_path(page: @next_page), loading: :lazy do %>

Infinite scrolling list using lazy Turbo Frames

rails hotwire turbo
by Henry Kim 2 tabs
ruby
class ApplicationController < ActionController::Base
  layout -> { turbo_frame_request? ? false : 'application' }
end

Render without layout for Turbo Frame requests

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

export default class extends Controller {
  static targets = ["input", "results"]
  static outlets = ["results-list"]
  static values = {

Stimulus outlets for inter-controller communication

stimulus javascript architecture
by Jordan Lee 3 tabs
erb
<div id="save_state" class="text-xs text-gray-500">Not saved yet</div>

Turbo Streams: inline “saved” indicator that updates on autosave

rails hotwire turbo
by Henry Kim 2 tabs
erb
<div id="image_preview">
  <%= render 'images/preview', record: @profile %>
</div>

Preview Active Storage uploads after attach using Turbo Streams

rails hotwire turbo
by Henry Kim 3 tabs
erb
<%= turbo_refreshes_with method: :morph, scroll: :preserve %>

<div class="posts-index">
  <div class="sticky top-0 bg-white border-b" id="search-bar">
    <%= form_with url: posts_path, method: :get, data: { turbo_frame: "_top", turbo_action: "morph" } do |f| %>
      <%= f.search_field :q,

Morphing page updates with Turbo Morphing

hotwire turbo morphing
by Jordan Lee 2 tabs