frontend

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

export default class extends Controller {
  static targets = ["form"]
  static values = { delay: { type: Number, default: 250 } }

Debounced live search with Stimulus + Turbo Streams

rails hotwire stimulus
by codesnips 4 tabs
javascript
import { Application } from "@hotwired/stimulus"
import FormSubmitController from "./controllers/form_submit_controller"

const application = Application.start()
application.debug = false

Disable submit button while Turbo form is submitting

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

export default class extends Controller {
  static values = {
    url: String,
    delay: { type: Number, default: 800 },

Stimulus: autosave draft with Turbo-friendly requests

rails stimulus hotwire
by codesnips 3 tabs
json
{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },

Laravel mix/Vite for asset compilation

laravel vite assets
by Carlos Mendez 4 tabs
typescript
import React from "react";

type FallbackProps = {
  error: Error;
  reset: () => void;
};

React Error Boundary + error reporting hook

react frontend error-boundary
by codesnips 3 tabs
erb
<nav class="site-nav" data-controller="preload">
  <ul>
    <li>
      <%= link_to "Dashboard", dashboard_path,
            class: "nav-link",
            data: { turbo_preload: true } %>

Speed up perceived performance with Turbo preload links

rails hotwire turbo
by codesnips 3 tabs
erb
<%# renders a lazy placeholder; real content arrives when scrolled into view %>
<div class="panel-card">
  <h3 class="panel-card__title"><%= title %></h3>

  <%= turbo_frame_tag dom_id(panel, :frame),
        class: "panel-card__body",

Lazy-load heavy panels with IntersectionObserver + Turbo frame

rails hotwire stimulus
by codesnips 3 tabs
ruby
module LayoutlessTurboFrame
  extend ActiveSupport::Concern

  included do
    layout :layout_for_turbo
  end

Render without layout for Turbo Frame requests

rails hotwire turbo
by codesnips 4 tabs
javascript
export const CACHE_VERSION = 'v7';

export const APP_SHELL = '/index.html';

export const PRECACHE_URLS = [
  '/',

Service worker: cache static assets safely

web performance pwa
by codesnips 3 tabs
yaml
web: bin/rails server
css: bin/rails tailwindcss:watch

Tailwind CSS with Rails asset pipeline

tailwind css rails
by Jordan Lee 3 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
typescript
import { z } from "zod";

export const envSchema = z.object({
  VITE_API_URL: z.string().url(),
  VITE_APP_NAME: z.string().min(1).default("my-app"),
  VITE_ENABLE_ANALYTICS: z

Vite env handling: explicit prefixes only

vite frontend env
by codesnips 3 tabs