Rails UI Engineering Articles

Practical guides to build better Rails UI. I share the patterns and approaches I use in my daily work with Hotwire, Tailwind, and modern front-end practices.

Latest articles

  1. User-Specific Content in Turbo Stream Partials
  2. String Inflectors: bring a bit of Rails into JavaScript
  3. Create a macOS-inspired stack UI with Stimulus and Tailwind CSS
  4. Add Konami Codes with Stimulus
  5. Add a multi-step form/wizard to your Rails app

Popular

  1. hotwire

    Stimulus Features You (Didn't) Know

    Stimulus is advertised as a modest JavaScript framework, but packs still quite a few features. Lets explore the lesser known ones.
  2. rails

    Rails' Partial Features You (Didn't) Know

    Rails partials have many lesser known features. From counters to spacer templates! Learn all there is to know about partials.
  3. tailwindcss

    UI Design Tips Using Tailwind CSS for Developers

    Explore some quick tips to level your UI design from okay to great with these Tailwind CSS-based tips.
  4. tailwindcss

    Data-Attributes Magic with Tailwind CSS & Stimulus

    Combine Tailwind data state and Stimulus to create usable UI's easily.

Earlier articles

July 2025

  1. Rails Designers: private community for Rails UI Engineers
  2. Click to reveal feature with Tailwind CSS
  3. Smarter Use of Stimulus' Action Parameters
  4. Auto-pause YouTube Videos with Stimulus
  5. Summer sale: 25% off UI Components and JavaScript for Rails Developers

June 2025

  1. Creating a Simple Embeddable JavaScript Widget (for Your Rails App)
  2. Auto-pause Video Player with Stimulus
  3. Introducing Turbo Transition: create smoother Turbo Streams
  4. Refactoring an if/else hell in JavaScript

May 2025

  1. 10 Modern CSS Features You Want to Use
  2. Rails dom_id helper without exposing the primary id
  3. Create a Markdown-Powered Textarea with Stimulus
  4. Salut Courrier! A New Ruby Gem to Send Emails
  5. Natural Language Parser for Recurring Events using Stimulus
  6. Recurring Calendar Events in Rails
  7. Turbo Drive, Frames, Streams, Morph? What to use?!

April 2025

  1. Enhanced debugging for Stimulus
  2. Sanitize your strings in JavaScript like a Rails developer
  3. JavaScript for Rails Developers is out now
  4. Console Utilities You (Didn't) Know
  5. Beyond translations in Stimulus: formatting dates, time and currency

March 2025

  1. Touch Events (swipe) using Stimulus
  2. Translations in Stimulus Controllers
  3. JavaScript for Rails Developers is Coming Soon
  4. Using the Keyboard with Stimulus
  5. Build a Notion-like editor with Rails, part 2

February 2025

  1. Create an Animated Counter in Stimulus
  2. Introducing Rails Vault: simple to add settings to any Active Record model
  3. How to Send Requests from Stimulus Controllers
  4. Build a Notion-like editor with Rails

January 2025

  1. Multiple component variants with Tailwind
  2. Rails link_to_if and link_to_unless
  3. Free Icon Libraries for Rails Apps
  4. Introducing Rails Stats
  5. Use cases for Turbo's Custom Events
  6. How to order attributes on HTML elements

December 2024

  1. The Best of 2024 from Rails Designer (number 1 won't surprise you 🤪)
  2. Use Tailwind CSS with Your Rails Forms
  3. Announcing Stimulus FX
  4. Rails Icons 1.0.0 is here
  5. Simple accordion without JavaScript
  6. Advanced Stimulus: Custom Action Options
  7. Why Disconnect in Stimulus Controllers

November 2024

  1. Stimulus Features You (Didn't) Know
  2. Spacer Components introduced in ViewComponent 3.20
  3. Inline Unsupported Browser Warning (using Rails 7.2 feature)
  4. Inheritance with Stimulus Controller
  5. Don't expose primary id's with Rails' dom_id
  6. Announcing: Build a SaaS with Ruby on Rails
  7. Rails' Partial Features You (Didn't) Know
  8. Mathematical and Optically alignment in (visual/UI) design
  9. Store UI State in localStorage with Stimulus
  10. Use Action Cable with Your Main PostgreSQL Database

October 2024

  1. Hotwire and Stimulus Tools You Need to Know
  2. Basic Autocomplete Without JavaScript using Datalist
  3. Tailwind CSS Patterns
  4. Broadcast Turbo Streams without Redis
  5. New: Rails Development Tool
  6. How do Turbo Streams Work (behind the scenes)
  7. Changing CSS as You Scroll with Stimulus
  8. Announcing JavaScript for Rails Developers
  9. Rails UI Components Library Tips and Tricks
  10. Smooth Transitions with Turbo Streams
  11. S3 Alternatives for Rails' ActiveStorage
  12. ActiveStorage Direct Upload with Stimulus

September 2024

  1. Drag & Drop Images with Preview using Stimulus Outlets
  2. Conditionally Style Turbo Frame Content
  3. Fix Any CSS Z-index Issue With This One Trick
  4. Create a Resizable Navigation with Stimulus
  5. Connected and Disconnected Target Callbacks with Stimulus
  6. Building Nested Forms in Rails with Stimulus
  7. Refactor Stimulus.js Controllers to Use Change Callbacks

August 2024

  1. Launch a Turbo Modal with URL Params Using Stimulus
  2. Tidy up your Rails code with `inquiry`
  3. Better Inline Validation for Rails Forms (with ViewComponent or partials)
  4. Introducing: Beautiful Layouts for Your Rails App
  5. When to Use call, erb_template, or html.erb in Rails ViewComponents?
  6. Nested Forms With Turbo (without dependencies)
  7. Nested Layouts with Ruby on Rails
  8. Preview an Image Before Upload with Hotwire/Stimulus
  9. New Rails Designer Tool: beautiful Tailwind CSS gradients
  10. From Partials (and Helpers) to Embracing ViewComponent in Rails

July 2024

  1. Use CSS' `only-child` instead of `if/else` logic
  2. Inline Save and Add Another with Rails and Hotwire
  3. 5 UI Components Libraries for Ruby on Rails (updated for 2025)
  4. Add a “X is writing…” with Rails and Turbo
  5. Create a String to Color Helper with Ruby
  6. Rails Designer V1 is here!
  7. Add a custom Tailwind CSS class for reusability and speed
  8. UI Design Tips Using Tailwind CSS for Developers
  9. When to use `link_to` and `button_to` in Rails

June 2024

  1. How to add “Save and add another” feature to Rails apps
  2. How to Create an Undo Action with Rails
  3. How Layouts Work in Rails
  4. How to disable Rails Form's `.field_with_errors`
  5. Update a Progress Bar using Turbo Streams (using Custom Actions)
  6. PayPal is Now Accepted

May 2024

  1. Lesser Known Rails Helpers to Write Cleaner View Code
  2. Communicating between Stimulus Controllers using Outlets API
  3. Customize the Turbo Progress Bar
  4. Inline SVG Icons in Your Rails App
  5. Custom Confirm Dialog For Turbo and Rails
  6. Simple Preferences to Any Resource for Rails
  7. How to Create a Stimulus Toggle Class Controller
  8. How to Add Disabled State to Buttons with Turbo & Tailwind CSS
  9. New in Rails Designer: the Command Menu Component

April 2024

  1. How to Work with Forms inside Forms in Rails
  2. Hidden Gems of Tailwind CSS
  3. ViewComponent over Turbo Stream Broadcasts
  4. Hello 100 Rails Designers!
  5. Introducing Rails Icons: One Gem to Rule Them All
  6. Guide to Slots in Rails' ViewComponent
  7. Easy Peasy Form Validation Errors with Rails Turbo Frames (modals)

March 2024

  1. Data-Attributes Magic with Tailwind CSS & Stimulus
  2. How to Toggle Multiple CSS Classes with Stimulus
  3. How to Properly Structure Stimulus Controller
  4. Custom Meta Titles in Rails Apps: A Quick Guide
  5. Make Your Rails App Future Proof: Move From React to Hotwire
  6. How to implement and customize Rails Flash Messages (notifications)
  7. Why choose ViewComponent over Rails partials
  8. Conditionally Add CSS Classes to Your Views and Components
  9. Conditionally Add CSS Classes in Your Stimulus Controllers

February 2024

  1. How to add a skeleton UI to Rails with Turbo
  2. How to add Hotkeys to your Rails App with Stimulus
  3. Favicons in Rails Apps (updated for 2025)
  4. The missing UI Components Library for Rails: Introducing Rails Designer
  5. Missing Styles from Tailwind CSS in ViewComponent?

January 2024

  1. How to create Modals with Rails and Hotwire (and Tailwind CSS)
  2. Quicktips for ViewComponent with Tailwind CSS/Hotwire