stimulus

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

  validates :body, presence: true, length: { maximum: 5_000 }

Declarative model broadcasts with broadcasts_to (Rails 7)

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

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

  connect() {

Stimulus: autofocus the first invalid field after Turbo update

rails stimulus hotwire
by codesnips 3 tabs
css
.confirm-dialog {
  border: none;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 26rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);

Stimulus: resilient confirmation for destructive actions

rails stimulus hotwire
by codesnips 3 tabs
erb
<div class="layout" data-controller="viewport">
  <%= turbo_frame_tag "master", class: "master-pane" do %>
    <h1>Products</h1>
    <ul class="product-list">
      <% @products.each do |product| %>
        <li>

Turbo Frames: conditional frame navigation for mobile vs desktop

rails hotwire responsive
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
ruby
class ApplicationController < ActionController::Base
  before_action :authenticate_user!

  rescue_from ActionController::InvalidAuthenticityToken do
    handle_unauthenticated(reason: :csrf)
  end

Turbo Streams: partial page auth failure handling

rails turbo hotwire
by codesnips 3 tabs
ruby
# Controller responding with Turbo Stream
class PostsController < ApplicationController
  def create
    @post = Post.new(post_params)

    if @post.save

Hotwire Turbo for SPA-like user experiences

ruby rails hotwire
by Sarah Mitchell 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["parent", "child"]
  static values = {
    options: Object,

Stimulus controller for dependent select dropdowns

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

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

  connect() {

Custom confirm dialog with Stimulus (better than window.confirm)

rails hotwire stimulus
by codesnips 3 tabs
erb
<%= turbo_frame_tag 'modal' %>

Keyboard shortcut “command palette” modal (Hotwire-first)

rails hotwire stimulus
by Henry Kim 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
<div class="dashboard">
  <header class="dashboard__header">
    <h1>Overview</h1>
    <p class="muted">Real-time metrics update as they load.</p>
  </header>

Server-rendered skeleton UI for slow frames

rails hotwire turbo
by codesnips 4 tabs