codesnips

erb

erb 
<%= form_with url: autosave_draft_path,
              method: :post,
              local: false,
              data: {
                controller: "autosave",
                autosave_target: "form",

Autosave drafts with Stimulus + Turbo (lightweight)

rails hotwire stimulus
by codesnips 3 tabs
ruby 
class Recipe < ApplicationRecord
  has_many :ingredients, inverse_of: :recipe, dependent: :destroy

  accepts_nested_attributes_for :ingredients,
    allow_destroy: true,
    reject_if: :all_blank

Add/remove nested fields with Stimulus (no cocoon)

rails hotwire stimulus
by codesnips 4 tabs
erb 
<!DOCTYPE html>
<html>
  <head>
    <title>Contacts</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

Turbo Frames modal: load, submit, then close via stream

rails turbo hotwire
by codesnips 4 tabs
erb 
<%# Append is also broadcast from the model; this response scrolls the author's view %>
<%= turbo_stream.append "messages" do %>
  <%= render partial: "messages/message", locals: { message: @message } %>
<% end %>

<turbo-stream action="scroll_to" target="<%= dom_id(@message) %>" behavior="smooth" block="end">

Scroll into view after append using a custom Turbo Stream action

rails hotwire turbo
by codesnips 4 tabs
erb 
<h1>Products</h1>

<%= link_to "New product", new_product_path, data: { turbo_frame: "modal" }, class: "btn" %>

<table id="products">
  <tbody>

Turbo Frame modal that renders server HTML

rails hotwire turbo
by codesnips 4 tabs
erb 
<nav id="main-navbar"
     data-turbo-permanent
     data-controller="navbar"
     data-navbar-menu-open-value="false"
     class="navbar">
  <div class="navbar-inner">

Keep navbar state across Turbo navigations with data-turbo-permanent

rails hotwire turbo
by codesnips 3 tabs
erb 
<%= turbo_stream_from :comments %>

<section class="comments">
  <h2>Discussion</h2>

  <%= turbo_frame_tag "new_comment" do %>

Inline create form that prepends into a list with Turbo Streams

rails hotwire turbo
by codesnips 4 tabs
erb 
<div class="layout" data-controller="sidebar">
  <aside class="sidebar">
    <%= render "shared/sidebar", active: params[:controller] %>
  </aside>

  <main class="content-area">

Scoped navigation inside a sidebar with Turbo Frames

rails hotwire turbo
by codesnips 4 tabs
erb 
<div class="orders-layout" data-controller="drawer">
  <table class="orders">
    <tbody>
      <% @orders.each do |order| %>
        <tr>
          <td><%= order.reference %></td>

Turbo Frames: inline “details drawer” without a SPA router

rails hotwire turbo
by codesnips 4 tabs
ruby 
class CommentsChannel < ApplicationCable::Channel
  def subscribed
    post = find_post
    if post
      stream_for post
    else

Broadcasting New Comments to Subscribers over an ActionCable Channel

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

export default class extends Controller {
  static targets = ["checkbox", "selectAll", "count", "submit"]
  static values = { selectedIds: Array }

Stimulus: bulk selection + Turbo batch action

rails stimulus hotwire
by codesnips 4 tabs
ruby 
class SignupsController < ApplicationController
  def new
    @user = User.new
  end

  def create

Inline form validation feedback via Turbo Streams

rails hotwire turbo
by codesnips 4 tabs