erb
<div class="search-page">
  <div class="search-header mb-6">
    <h1 class="text-2xl font-bold mb-4">Search Posts</h1>

    <%= form_with url: posts_path,
        method: :get,

Live search with Turbo Frames and debouncing

hotwire turbo stimulus
by Jordan Lee 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

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

  connect() {

Accessible modal dialogs with Stimulus and ARIA

stimulus accessibility ux
by Jordan Lee 2 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["count", "button"]
  static values = {
    url: String,

Optimistic UI updates with Turbo Streams

hotwire turbo stimulus
by Jordan Lee 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["menu", "overlay", "toggle"]

  toggle() {

Mobile-first responsive navigation with Stimulus

stimulus responsive mobile
by Jordan Lee 2 tabs
javascript
import { Controller } from "@hotwired/stimulus"
import { DirectUpload } from "@rails/activestorage"

export default class extends Controller {
  static targets = ["input", "preview", "status"]
  static values = {

Stimulus controller for drag-and-drop file uploads

stimulus javascript file-uploads
by Jordan Lee 2 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
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
ruby
class ApplicationController < ActionController::Base
  helper_method :turbo_native_app?

  private

  def turbo_native_app?

Turbo Native bridge for mobile hybrid apps

hotwire turbo-native mobile
by Jordan Lee 3 tabs
ruby
class ButtonComponent < ViewComponent::Base
  VARIANTS = {
    primary: "bg-blue-600 hover:bg-blue-700 text-white",
    secondary: "bg-gray-200 hover:bg-gray-300 text-gray-900",
    danger: "bg-red-600 hover:bg-red-700 text-white"
  }.freeze

ViewComponent for reusable UI components

rails viewcomponent components
by Jordan Lee 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["field", "status"]
  static values = {
    key: String,

Stimulus controller for autosaving form drafts

stimulus forms ux
by Jordan Lee 2 tabs
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
javascript
import { Controller } from "@hotwired/stimulus"

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

  validateField(event) {

Form validation with Stimulus and server-side errors

stimulus forms validation
by Jordan Lee 2 tabs