Henry Kim
Jan 2026
3 tabs
<%= turbo_frame_tag 'modal' %>
import { Controller } from "@hotwired/stimulus"
import { Turbo } from "@hotwired/turbo-rails"
export default class extends Controller {
connect() {
this.onKeyDown = (e) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
if (document.activeElement?.tagName === "INPUT" || document.activeElement?.tagName === "TEXTAREA") return
e.preventDefault()
Turbo.visit("/palette", { frame: "modal" })
}
}
document.addEventListener("keydown", this.onKeyDown)
}
disconnect() {
document.removeEventListener("keydown", this.onKeyDown)
}
}
<%= turbo_frame_tag 'modal' do %>
<div class="fixed inset-0 bg-black/40"></div>
<div class="fixed inset-0 flex items-start justify-center p-6">
<div class="w-full max-w-xl rounded bg-white p-4 shadow">
<%= form_with url: palette_path, method: :post do |f| %>
<%= f.search_field :q, autofocus: true, placeholder: 'Search…', class: 'w-full rounded border p-2' %>
<% end %>
</div>
</div>
<% end %>
3 files · erb, javascript
Explain with highlit
A command palette feels like a SPA feature, but you can do it Hotwire-first: place a turbo_frame_tag 'modal' in the layout and load the palette HTML into it. A small Stimulus controller listens for meta+k and navigates the modal frame to /palette. The palette is just a server-rendered form; submitting it can redirect to the selected URL. This keeps the UI accessible and doesn’t require client-side routing. It also reduces build complexity: no React just for a command palette. The key is to keep the controller careful about focus and not intercept keystrokes in text inputs. I also support Esc to close by navigating the modal frame back to blank.
Related snips
ruby
class CommentsController < ApplicationController
before_action :set_post
def create
@comment = @post.comments.build(comment_params)System test: asserting Turbo Stream responses
rails
hotwire
turbo
by codesnips
4 tabs
ruby
class Post < ApplicationRecord
belongs_to :author, class_name: 'User'
has_many :comments, dependent: :destroy
scope :published, -> { where.not(published_at: nil).where('published_at <= ?', Time.current) }
scope :draft, -> { where(published_at: nil) }ActiveRecord scopes for reusable query logic
rails
activerecord
patterns
by Alex Kumar
1 tab
ruby
module Api
module V1
class UsersController < BaseController
def show
user = User.includes(:profile).find(params[:id])ETags for conditional requests and caching
rails
caching
http-caching
by Alex Kumar
1 tab
ruby
class PostsController < ApplicationController
def index
@posts = Post.includes(:author)
.order(created_at: :desc)
.page(params[:page])
.per(10)Turbo Frames: infinite scroll with lazy-loading frame
rails
turbo
hotwire
by codesnips
4 tabs
ruby
require "csv"
class PeopleCsvStream
include Enumerable
HEADERS = %w[id full_name email signed_up_at plan].freezeResilient CSV Export as a Streamed Response
rails
performance
streaming
by codesnips
3 tabs
erb
<form data-controller="query-sync" data-action="change->query-sync#apply">
<select name="status" class="rounded border p-2">
<option value="">Any</option>
<option value="open">Open</option>
<option value="closed">Closed</option>
</select>Filter UI that syncs query params via Stimulus (no front-end router)
rails
hotwire
stimulus
by Henry Kim
2 tabs
Share this code
Here's the card — post it anywhere.
