DEV Community: Rails Designer

Add newsletter subscriptions to Rails 8 signups

Rails Designer — Fri, 17 Jul 2026 09:30:00 +0000

Users are creating accounts on your new Saas. Yay (and not just family and friends or bots). Yay! Now comes the next step from every marketing handbook: capturing newsletter subscriptions.

This article builds on Add Sign Up to Rails 8’ Authentication.

Add a simple checkbox to let users opt in to product updates during signup. Store their preference using Rails Vault and manage the subscription with Rails Courrier.

First, add Rails Vault and Rails Courrier to your Gemfile:

gem "rails_vault"
gem "rails_courrier"

Rails Vault adds simple and easy settings, preferences and so on to any ActiveRecord model (I recently pushed 1.0.0). Courrier is API-powered email delivery for Ruby apps with support for Mailgun, Postmark, Resend and more. Rails Courrier is the Rails “wrapper” for Courrier. These two gems work really nicely together for this feature.

Run bundle install and generate the Rails Vault migration:

rails generate rails_vault:install
rails db:migrate

It creates a new file app/models/user/subscriptions.rb:

class User::Subscriptions < Vault
  vault_attribute :product_emails_subscribed_at, :datetime

  # Add more subscription types as needed:
  # vault_attribute :marketing_emails_subscribed_at, :datetime
  # vault_attribute :weekly_digest_subscribed_at, :datetime
end

And updates your User model to use this vault:

# app/models/user.rb
class User < ApplicationRecord
+ vault :subscriptions

  has_secure_password
  has_many :sessions, dependent: :destroy
end

This keeps subscription data organized without cluttering your User table. More subscription types can be added later without database migrations.

Now the plumbing is done, add a checkbox to your signup form in app/views/signups/new.html.erb:

<%= form.check_box :product_emails %>
<%= form.label :product_emails, "Subscribe to product updates" %>

Update the Signup model to accept this parameter:

# app/models/signup.rb
class Signup
  include ActiveModel::Model
  include ActiveModel::Attributes

  attribute :email_address, :string
  attribute :password, :string
  attribute :terms, :boolean, default: false
+ attribute :product_emails, :boolean, default: false

  # …existing validations

  def save
    if valid?
      User.create!(email_address: email_address, password: password).tap do |user|
        create_workspace_for user
+       subscribe_to_product_emails user

        send_welcome_email_to user
      end
    end
  end

  private

+ def subscribe_to_product_emails(user)
+   return if !product_emails
+
+   user.create_subscriptions(product_emails_subscribed_at: Time.current)
+
+   Courrier::Subscriber.create email_address
+ end
end


  def signup_params
    # NOTE: new syntax, see PR: https://github.com/rails/rails/pull/51674
- params.expect(signup: [:email_address, :password, :terms])
+ params.expect(signup: [:email_address, :password, :terms, :product_emails])
  end

Create config/initializers/courrier.rb:

Courrier.configure do |config|
  # …

  config.subscriber = {
    provider: "buttondown",
    api_key: Rails.application.credentials.dig(:buttondown, :api_key)
  }
end

Replace "buttondown" with your preferred newsletter provider. Courrier has support for many providers.

Time to test it! Create a new user through the signup form with the product emails checkbox enabled. The subscription gets stored in the Rails Vault and the subscriber gets created in your newsletter service.

All code from this article is available in the Rails 8 Authentication repository.

Questions about subscriptions or newsletter management? Let me know below in the comments.

Permission UI the Rails way

Rails Designer — Fri, 10 Jul 2026 14:30:00 +0000

I’ve built many a SaaS. And most have pricing tiers: the higher the plans the more widgets you can create or features are allowed. Typically there are two ways to approach this:

hide the feature if the customer does not have access;
show all features, to all customers, but guard them with some, optional, upsell.

I have succesfully implementated the latter approach with a helper that quacks like Rails itself.

The helper lets you wrap content and decide what happens when access is denied. Hide it, redirect to a link, render content or render a partial. It’s small but flexible. This is how it looks (added a toggle allowed/denied states):

As always view on GitHub for a ready-to-copy code.

The API is elegant. Let’s look at some examples:

<%= allowed? Current.user.premium? do %>
  <%= link_to "Create project", projects_path %>
<% end %>

When Current.user.premium? is true, the link renders. When false, nothing shows. That’s the default behavior.

But you can do more. Redirect to a link instead:

<%= allowed? Current.user.premium?, redirect_to: upgrade_path do %>
  <%= link_to "Advanced analytics", analytics_path %>
<% end %>

The content becomes a clickable link pointing to your upgrade page.

Show plain text as a fallback:

<%= allowed? Current.user.premium?, render: { plain: "Upgrade to unlock this." } do %>
  <%= button_to "Delete project", project_path, method: :delete %>
<% end %>

Or render HTML:

<%= allowed? Current.user.premium?, render: { html: "Upgrade to the <strong>Pro plan</strong>." } do %>
  <%= button_to "Delete project", project_path, method: :delete %>
<% end %>

And render a partial for complex fallbacks:

<%= allowed? Current.user.premium?, render: "upsell" do %>
  <%= button_to "Advanced settings", settings_path %>
<% end %>

The helper

Here’s the full helper in app/helpers/allowed_helper.rb:

module AllowedHelper
  def allowed?(condition, options = {})
    return yield if condition

    if options[:redirect_to]
      content = capture { yield }

      link_to strip_tags(content), options[:redirect_to]
    elsif options.key?(:render)
      render_options = options[:render]

      if render_options.is_a?(Hash) && render_options.key?(:html)
        render_options[:html].html_safe
      elsif render_options.is_a?(Hash) && render_options.key?(:plain)
        render_options[:plain]
      else
        render({ partial: render_options.to_s }) if render_options.is_a?(String) || render_options.is_a?(Symbol)
      end
    end
  end
end

The logic is straightforward. If the condition is true, render the block. If false, check your options and handle it accordingly.

When you pass redirect_to, it captures the block content, strips HTML tags and wraps it in a link. When you pass render, it supports three formats: plain text, raw HTML or a partial name as a string or symbol.

This helper did, ~10 years ago, not start like this. Over the years, after working on many dozens Rails-based SaaS apps, my aim became to make helpers “quack” more like Rails methods. You’re familiar with render plain:, render html: and partial rendering. This helper just extends that familiar syntax to conditional rendering.

I like it. What do you think of this?

Build a changelog widget (with Perron)

Rails Designer — Mon, 06 Jul 2026 20:30:00 +0000

Changelog widgets, like those from Headway and Beamer, are still a popular way to tell your users about updates to your product. What if you could build one yourself?

Perron, the Rails-based SSG, has a library of production-ready custom elements. One of them, the Embed Content component is perfect for this exact use case. It fetches JSON data, renders it as a list, tracks read state and handles all the UI interactions. You just provide the data.

The result will look like this:

Pretty smooth, right?

Most changelog services lock you into their platform. You pay per seat, deal with their branding and accept their feature set. If you want something simpler or more tailored to your product, you’re stuck building it from scratch.

But here’s the thing: a changelog widget isn’t complicated. It needs to fetch some data, display it nicely, track which items users have read and maybe show a badge with unread counts. That’s it. The Embed Content component is a custom element that fetches JSON from any endpoint, renders items with a template you control, tracks unread state based on a last-read-at timestamp, shows an unread badge automatically and handles open/close toggle states.

You drop it into your HTML, point it at your changelog endpoint and it works. You write the changelog entries in your Perron site (where they are also published. Win-win! 🏆).

Getting Started

First, add the Embed Content component to your project. The setup instructions are straightforward: run the template in your app and the custom element is ready to use.

Next, you’ll need a JSON feed. Perron makes this easy: check out the Perron docs to see how to create a custom template that outputs your changelog items as JSON.

Once your feed is live, drop the Embed Content component into your view:

<embed-content id="changelog-widget" src="https://example.com/changelog.json" limit="5" last-read-at="2026-03-20T00:00:00Z">
  <button aria-label="Toggle changelog">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
    </svg>

    <span badge></span>
  </button>

  <div panel>
    <div header>
      <h2>What's new</h2>
    </div>

    <ul items></ul>
  </div>
</embed-content>

The component reads the src attribute, fetches your JSON and renders each item. The limit attribute controls how many items show. The last-read-at attribute tracks which items are new: anything published after that timestamp gets marked as unread and counted in the badge.

Your feed doesn’t have to come from Perron. The component just needs JSON with title, body, url and published_at fields. You could use a custom Rails endpoint, a headless CMS or any JSON API. The pattern is the same.

The component uses semantic HTML and CSS custom properties, so styling is straightforward. You control the colors, spacing and layout. This pattern works for any feed-like feature: product announcements, status updates, notification centers or feature releases. The Embed Content component handles the hard parts. You focus on your content. ✨

Check out the example repository for the complete example including CSS.

Beam Up: CLI to deploy static sites

Rails Designer — Tue, 30 Jun 2026 07:30:00 +0000

Beam Up is a command-line tool I wanted for some time. Its goal is to make deployments of static sites across various providers simpler from your machine: run one command: beam_up ./output/. ❤️

If you feel generous, head over to the GitHub repo and give it a star! 🌟

Installation and configuration

To install Beam Up, run:

gem install beam_up

Then initialize a configuration file for your chosen provider with:

beam_up init # to start an interactive process, or:
# beam_up init hetzner

This creates a .beam_up.yml file:

provider: netlify
netlify:
  api_token: your_token_here
  project_id: your_project_id

Ready to beam ⚡

Now you can deploy your static site using the super fun beam_up command:

beam_up ./output

Beam Up supports multiple providers including AWS S3, Seal Static, Hetzner, Netlify and Statichost. Oh, and it even works with SFTP (remember those days?!).

Usage from Ruby

Beam Up can also be used within Ruby scripts:

require "beam_up"

BeamUp.deploy! "./output"

Integration with Perron

While Beam Up is designed to work with any SSG (Jekyll, Middleman or Bridgetown), I built it for Perron. With the latest version, you can now simply run bin/rails perron:deploy, it will build your site (bin/rails perron:build) and deploy it: your site will be live in no time. Without any config, it will default to deploy to Seal Static (where an account is created for you on first deploy). Cool, right? 😎

Beam Up is a small, new OSS project made with ❤️ from Rails Designer HQ. If you like it, do star it on GitHub and give it a try on your (next) SSG project.

Build a reusable before/after image slider with Stimulus

Rails Designer — Mon, 29 Jun 2026 07:30:00 +0000

Before and after (image) sliders are great for product showcases, before/after transformations, renovation projects or photo editing results. They’re engaging, interactive, and honestly just fun to use.

Ever thought of building one from scratch? Not complicated at all! In this article, I want to show how to build a simple, reusable Stimulus controller that does just all that. This is how the end result will look like:

As always, the code can be found on GitHub.

It is simple, really

The beauty of this controller is its simplicity. You need three things:

a wrapper element;
two images (before and after), and;
a slider.

That’s it. Here’s it in HTML:

<div data-controller="compare">
  <img data-compare-target="before" src="before.jpg">
  <img data-compare-target="after" src="after.jpg">

  <div data-compare-target="slider"></div>
</div>

The two images are positioned absolutely and the slider sits on top as a draggable handle. The “after” image gets clipped dynamically as you drag.

Here’s that interesting part. It uses clip-path to reveal or hide the after image:

set #position(value) {
  this.positionValue = value
  this.sliderTarget.style.left = `${value * 100}%`
  this.afterTarget.style.clipPath = `inset(0 0 0 ${value * 100}%)`
}

When you drag the slider, it calculates the position relative to the container’s width, then updates both the slider’s left position and the clip-path of the after image. Most of that is done with:

#pointerDown = (event) => {
  if (event.target !== this.sliderTarget) return

  event.preventDefault()

  document.addEventListener("pointermove", this.#pointerMove)
  document.addEventListener("pointerup", this.#pointerUp)
}

Stimulus controllers are meant to be reusable

This controller is a wrapper element plus two images. That’s it. Use cases then are limitless (they generally work great on marketing blogs as well!):

product photography ; show different angles or colors of the same product
photo editing results ; before/after with filters, adjustments, or retouching
UI redesigns ; old interface vs. new interface

You could (should) extend this in several directions. Add keyboard support for accessibility. Include labels (“Before” / “After”) that move with the slider. Add touch support with haptic feedback on mobile.

It is the kind of controller you copy and paste into your projects. Just as it should be.

Building a quiz with Stimulus

Rails Designer — Sat, 13 Jun 2026 07:30:00 +0000

Quizzes are a fun! Well… I do think they are. Always up to learn new things. So how can you create one in with your favorite frameworks? In this article, I want to show how you can build a quiz witg Stimulus. It can be a good starting point for learn about a new customer in your SaaS or as a smart, little marketing tool (keep readers engaged/on your page). 💡

The quiz loads questions from a Rails endpoint, tracks answers in real-time, calculates results and submits them to your server. As always, the code can be found on GitHub.

This will be the result. Time to dust off that good ol’ computer science knowledge… 🤓

Building the data class

Here’s the QuizData class that handles the quiz logic. For this example it lives inside the Stimulus controller, but you can organise it however you want.

class QuizData {
  constructor(questions) {
    this.questions = questions
    this.answers = {}
  }

  answer(questionIndex, selectedOption) {
    this.answers[questionIndex] = selectedOption
  }

  getAnswer(questionIndex) {
    return this.answers[questionIndex]
  }

  correctCount() {
    return this.questions.filter((question, questionIndex) => {
      const answer = this.answers[questionIndex]
      return answer !== undefined && answer === question.correct
    }).length
  }

  result() {
    return this.questions.reduce((accumulate, question, questionIndex) => {
      const answer = this.answers[questionIndex]

      return accumulate + ((answer === question.correct) ? Math.pow(2, this.questions.length - 1 - questionIndex) : 0)
    }, 0)
  }

  get totalQuestions() {
    return this.questions.length
  }

  get isComplete() {
    return Object.keys(this.answers).length === this.totalQuestions
  }

  static default() {
    return new QuizData([
      {
        question: "What is \"Hi\" in binary?",
        options: ["01001000 01101001", "01000111 01101001", "01001000 01110011", "01000001 01101001"],
        correct: 0
      },

      // more questions…
    ])
  }
}

This class provides methods to record answers, checks if all questions are answered and calculate the score and encode results. The result() method is a little bit clever, it encodes which questions were answered correctly as a binary number, making it easy to store and analyze results server-side.

The static default() method provides quiz data if you do not have a remote endpoint so you can use it also outside of a Rails app (in a static site, for example).

The Rails endpoint

Your quiz questions need to come from somewhere. Create a QuizzesController with an index action that returns questions as JSON:

class QuizzesController < ApplicationController
  def index
    render json: {
      questions: [
        {
          question: "What is \"Hi\" in binary?",
          options: ["01001000 01101001", "01000111 01101001", ...],
          correct: 0
        },

        # etc…
      ]
    }
  end

  def create
    Rails.logger.info "Quiz submission: #{params.permit!.to_h}"

    head :ok
  end
end

The index action returns an array of questions with their options and the index of the correct answer. The create action receives the submitted answers, you can process them here however you want (send along, store in DB, etc.).

The Stimulus controller

Now the Stimulus where it all happens 🛏️✨. This controller fetches questions from your endpoint, renders them and handles user interactions. It uses the @rails/request.js library to make clean HTTP requests.

When the controller connects, it fetches the questions:

async connect() {
  this.quiz = await this.#getQuestions()

  this.#render()
}

async #getQuestions() {
  if (this.hasQuestionsEndpointValue) {
    try {
      const response = await get(this.questionsEndpointValue, { responseKind: "json" })

      if (response?.questions?.length > 0) return new QuizData(response.questions)
    } catch (error) {
      console.warn("Failed to load questions from endpoint, using defaults:", error)
    }
  }

  return QuizData.default()
}

This check this.hasQuestionsEndpointValue is added so I can use this controller also outside of a Rails app.

When a user selects an answer, the controller records it and enables the submit button (when all questions are answered):

selectAnswer(event) {
  const optionsContainer = event.target.closest("[data-quiz-question-index]")
  const questionIndex = parseInt(optionsContainer.dataset.quizQuestionIndex, 10)
  const selectedOption = parseInt(event.target.value, 10)

  this.quiz.answer(questionIndex, selectedOption)
  this.submitTarget.disabled = !this.quiz.isComplete
}

When the user submits the quiz, the controller sends the answers and result to your Rails endpoint. For details on how @rails/request.js works and how to make GET and POST requests from a Stimulus controller, check out this article 😊. What is happening is that you’re sending structured data (answers and a calculated result) to your server:

async submit() {
  const payload = {
    answers: this.quiz.answers,
    result: this.quiz.result()
  }

  if (this.hasAnswersEndpointValue) {
    await post(this.answersEndpointValue, {
      body: JSON.stringify(payload)
    })
  }

  this.#showResults()
}

After submission, the controller displays the results and hides the quiz:

#showResults() {
  const correct = this.quiz.correctCount()
  const total = this.quiz.totalQuestions

  const fieldsets = this.element.querySelectorAll("fieldset")
  fieldsets.forEach(fieldset => fieldset.remove())

  this.resultsTarget.innerHTML = `<div>${correct} out of ${total} correct</div>`
  this.submitTarget.hidden = true
}

The HTML view is minimal:

<article data-controller="quiz" data-quiz-questions-endpoint-value="<%= quizzes_path %>" data-quiz-answers-endpoint-value="<%= quizzes_path %>">
  <output data-quiz-target="results"></output>

  <button type="button" data-quiz-target="submit" data-action="quiz#submit" disabled>Submit Quiz</button>
</article>

The controller renders each question as a fieldset with radio buttons. The styling uses modern CSS (oklch color space; see this article, CSS Grid) to create a clean, accessible interface. The CSS isn’t included here, but it handles the layout, hover states and checked states for the radio buttons.

This quiz is a good starting point. You could add pagination to show only a few questions at a time, add a countdown timer that auto-submits when time runs out, send detailed results to an analytics service to track which questions trip up your users, allow retakes so users can compare scores over time or fetch different question sets based on difficulty level.

Meet Mata: live reload for Rack Apps

Rails Designer — Thu, 04 Jun 2026 19:30:00 +0000

I build quite a few sites. For my own products or I help others. Since I released Perron that is my go-to static site generator now. But it was missing one feature for a speedy development cycle: live reload. Not just a page refresh, but more like hot reloading.

Most live reload solutions either require ActionCable (overkill when using Perron) or just do full-page reloads (annoying/too minimal). I wanted something in between.

Meet Mata : a lightweight live reload solution for Rack apps. It uses Server-Sent Events (SSE) and idiomorph.

You can install Mata simply by running bundle add mata --group=development. Then configure the middleware with watch and skip paths. That’s it. No JavaScript bundling. No ActionCable. No WebSockets. Just smart live reloading! ✨

But Mata isn’t just for Perron. It works with any Rack-based framework, like Rails: Sinatra, Hanami or Roda. 🚀 See the GitHub README for set up examples.

Look, mom, no hands:

So why the name? It’s named after the legendary double agent: Mata Hari. 🕵️💃🤓

(oh, I learned while in Indonesia, in Bahasa Indonesia, mata means eye. A fun coincidence, for something that watches your files. 😅)

Already using Mata (you do if you use Perron!)? Give Mata a star on GitHub. ⭐❤️

Building user-customizable themes with Tailwind CSS

Rails Designer — Thu, 28 May 2026 15:30:00 +0000

A little while ago I was asked to to build a “white-label” feature into an existing app. Their customers can now customize the app to match their brand without touching code.

It will look a little something like this:

This article walks through how I build a custom theme system using Tailwind CSS and the OKLCH color space. The basics for this feature I extracted and is available on GitHub.

The approach I took generates an entire color palette from a single value, instead of managing eleven different color stops manually. Sounds complicated? It really is quite simple. Let me show you.

Tailwind allows defining custom colors using the @theme directive (these can then be used normally, e.g. text-brand-500 and bg-brand-50/60). Rather than hardcoding hex values, use CSS variables that change at runtime.

Here is the setup in app/assets/tailwind/application.css:

@import "tailwindcss";

@theme {
  --color-brand-50: oklch(0.99 0.01 var(--color-value));
  --color-brand-100: oklch(0.98 0.02 var(--color-value));
  --color-brand-200: oklch(0.94 0.04 var(--color-value));
  --color-brand-300: oklch(0.86 0.08 var(--color-value));
  --color-brand-400: oklch(0.74 0.14 var(--color-value));
  --color-brand-500: oklch(0.60 0.18 var(--color-value));
  --color-brand-600: oklch(0.52 0.16 var(--color-value));
  --color-brand-700: oklch(0.44 0.14 var(--color-value));
  --color-brand-800: oklch(0.36 0.12 var(--color-value));
  --color-brand-900: oklch(0.26 0.08 var(--color-value));
  --color-brand-950: oklch(0.16 0.04 var(--color-value));
}

Notice the same --color-value variable? By changing this one variable, all eleven shades update automatically. The lightness and chroma values stay consistent (for a harmonious palette). 🌈

Use these colors in your templates like any other Tailwind color:

<nav class="bg-brand-50 border-brand-100">
  <span class="text-brand-600">Custom Theme</span>
</nav>

OKLCH?

But wait… OKLCH? What is that? OKLCH is a modern color space that separates color into three components: lightness, chroma and hue. This makes it a perfect choice for generating color palettes (Tailwind CSS changed to OKLCH internally as well since v4, iirc).

Take the brand-500 color from the example above:

oklch(0.60 0.18 var(--color-value))

So:

0.60 is the lightness. A value of 0 is black, 1 is white. This color is medium brightness.
0.18 is the chroma (or color saturation). Higher values are more vibrant.
var(--color-value) is the hue angle in degrees (0-360). This is what changes when you update the theme and defined initially in the style-element.

The beauty of OKLCH is that lightness and chroma remain constant across the palette. Only the hue changes. This means your brand color can shift from red to blue to green while maintaining the same visual weight and saturation at each shade level.

Setting up the HTML

In your layout, add a style tag with the default theme value:

<head>
  <style data-theme>
    :root { --color-value: 60; }
  </style>
  <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
  <%= javascript_importmap_tags %>
</head>

The default value of 60 is a sorta yellow-green hue. You can change it however you want.

Wiring up the theme controller

I just added this Stimulus controller for this demo (the client’s app worked a bit different).

import { Controller } from "@hotwired/stimulus"

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

  initialize() {
    this.style = document.querySelector('style[data-theme]')
  }

  update(event) {
    const value = event.target.value

    this.style.textContent = `:root { --color-value: ${value}; }`
    this.valueTarget.textContent = value
  }
}

The controller finds the existing style tag marked with data-theme and updates its content. This triggers a cascade: the CSS variable changes, all the brand colors are recalculated and the entire app recolors instantly. ✨

The demo interface

The example includes a simple slider to demonstrate the feature:

<div class="flex items-center gap-4 px-6 py-4 border-b border-brand-200" data-controller="theme">
  <span class="text-sm text-brand-700">Theme</span>
  <input type="range" min="0" max="360" value="60" data-action="theme#update" class="w-32 accent-brand-600">
  <span data-theme-target="value" class="text-sm text-brand-500">60</span>
</div>

<p class="mt-2 p-6 text-brand-900">Move the slider above to change the theme color.</p>

<ul class="flex gap-4 p-6">
  <li class="size-16 rounded-lg bg-brand-50 border border-brand-200"></li>
  <li class="size-16 rounded-lg bg-brand-100 border border-brand-200"></li>
  <li class="size-16 rounded-lg bg-brand-200 border border-brand-200"></li>
  <!-- … all the way to brand-950 -->
</ul>

User-selected themes

While this approach was built for a white-label app, it works equally well for user-customizable themes.

The technique is flexible. You could extend it to store multiple theme variables: primary color, secondary color, accent color. Each would be a separate CSS variable that users can customize independently.

Pretty cool, right?

Inbound email in Rails apps with Fuik

Rails Designer — Fri, 22 May 2026 07:30:00 +0000

Fuik is a Rails engine for handling webhooks that I launched recently. But it can also be used to process inbound emails! 💡

When working with inbound email in Rails using Action Mailbox, there’s a key requirement: managing EML files and blob storage. Once an email arrives at your domain, your email provider captures it and sends the data to you via webhook. You then extract what you need and process (or store) it. Action Mailbox requires: ActiveStorage ánd ActionMailer.

But what if you don’t have a need for ActiveStorage (including its cloud storage setup) or ActionMailer (because you use Courrier).

Most transactional email providers send their inbound emails as webhooks: Postmark, SendGrid, Mailgun and Mailpace. They all POST the email data to a webhook URL you configure.

Fuik is great at capturing just that: it captures those incoming webhooks, stores them in the database and calls your event class to process them. You see all your webhooks in at /webhooks. You can inspect and copy payloads, pull path accessors and generally debug what’s happening.

It is simple to get started:

bundle add fuik
bin/rails generate fuik:install
bin/rails db:migrate

That’s it. Your app now has /webhooks endpoints ready to receive any webhooks. Now to process inbound emails, let’s look at Postmark as an example (though every provider that sends inbound emails as webhooks wil work).

Postmark lets you receive inbound emails by pointing a MX record to their servers and then configure a webhook URL. When an email arrives, the data is POSTed to you. Let’s see how to process it in your app with Fuik.

Generate the class:

bin/rails generate fuik:provider postmark inbound_email

This creates three files.

Now open app/webhooks/postmark/inbound_email.rb. Postmark sends "To", "From", "Subject", "TextBody", and "HtmlBody". Route emails based on the recipient address:

module Postmark
  class InboundEmail < Base
    def process!
      return if to_email.blank?

      case to_email
      when /replies-.*@/
        message = Message.find_by(email_address: to_email)
        message.replies.create!(
          content: text_content,
          from: from_email
        )
      when /support@/
        SupportTicket.create!(
          from: from_email,
          subject: subject,
          body: text_content
        )
      end

      @webhook_event.processed!
    end

    private

    def to_email = payload["To"]

    def from_email = payload["From"]

    def subject = payload["Subject"]

    def text_content = payload["TextBody"]
  end
end

Postmark doesn’t send an event type in the payload (all inbound webhooks are inbound emails), so you set it statically. Use Fuik’s config (app/webhooks/postmark/config.yml) to extract it:

event_type:
  source: static
  value: inbound_email

Point your Postmark inbound webhook to https://yourdomain.com/webhooks/postmark in their dashboard, and emails start flowing in.

In the repo shared, I also added an example for Sendgrid to show another example how to do this.

Any provider with webhooks

Postmark and SendGrid are just examples. Mailgun, Brevo, Mailpace and others all send structured JSON via webhooks. The pattern is the same. Generate a provider, map the payload fields to your private methods, add your business logic and mark the event as processed.

Check out the example repository with both Postmark and SendGrid set up.

Thoughts, notes and what I read

Rails Designer — Tue, 19 May 2026 07:30:00 +0000

I’ve never used “social” media. Instead, I read a lot on various topics: Rails, web/tech and beyond. Next to the weekly practical article a week on Rails, Hotwire, CSS, SaaS and design I published, I have, since March, started sharing some thoughts and notes. They’re not publicly listed, but accessible via Atom feed only.

I hope to see more platform-independent Twitter-style feeds from others too. Web standards like RSS/Atom are great and don’t lock you into a platform or company. Just linear posts, no ragebaits or shitposting from others (and if so, unsubscribe).

With Perron’s customisable feeds feature, this is super easy to set up. I also created a tiny Raycast extension that makes posting super simple and quick too.

If you have a similar kind of feed, do share it below! 👇

Mine can be found at with here.

Reusable drag-and-drop image preview in Rails

Rails Designer — Thu, 14 May 2026 07:30:00 +0000

Custom elements have been covered here berfore. If you have used Hotwire in Rails, you have already used them. Both <turbo-frame> and <turbo-stream> are custom elements. They are just HTML tags with JavaScript behavior attached.

This article walks through building a drag-and-drop image upload custom element that works great in Rails forms. Starting with a simple avatar and ending with a reusable component that handles both inline and external forms. The code is, as usual, available on GitHub.

So first, why not use a regular file input or a Stimulus controller? The answer is that custom elements are perfect for self-contained components. They work anywhere in your HTML without needing to wire up data attributes or controller targets. Drop the tag in your view and it works. No configuration. No boilerplate.

With Stimulus you write:

<div data-controller="image-upload">
  <input type="file" data-image-upload-target="input" />

  <button data-action="click->image-upload#remove">Remove</button>
</div>

With the custom element I want to explore today, you write:

<image-upload name="user[avatar]" data-preview-image-url="...">
  <button type="button" data-remove-image>Remove</button>
</image-upload>

The component creates its own file input. It finds the form automatically. It handles drag-and-drop, preview rendering and removal. All wrapped in a clean, semantic HTML tag.

Lets get started, by creating the custom element in app/javascript/components/image-uploads.js:

class ImageUpload extends HTMLElement {
  #img = null;
  #input = null;

  connectedCallback() {
    this.#img = this.#image();
    this.#input = this.#fileInput();

    this.#load(this.#img);
    this.#dragAndDropListeners();
    this.#removeButtonListener();
    this.#clickToSelectListener();
  }
}

customElements.define('image-upload', ImageUpload);

The connectedCallback runs when the element is added to the page. It sets up the image element, creates the file input, loads any existing image and wires up all the event listeners.

The component creates an <img> tag if one does not already exist (only if the data-preview-image-url attribute is present):

#image() {
  if (!this.hasAttribute('data-preview-image-url')) return null;

  const img = document.createElement('img');
  this.insertBefore(img, this.firstChild);

  return img;
}

This means you do not need to add an <img> tag to your HTML. If you want to show an existing image, just add the data-preview-image-url attribute with the image URL.

Now it gets interesting. The component creates a hidden file input and appends it to the form , not to the component itself:

#fileInput() {
  const name = this.getAttribute('name');

  if (!name) {
    console.error('image-upload requires a "name" attribute');
    return null;
  }

  const input = document.createElement('input');
  input.type = 'file';
  input.name = name;
  input.accept = 'image/*';
  input.style.display = 'none';

  const formId = this.getAttribute('form');
  const form = formId ? document.getElementById(formId) : document.querySelector('form');

  if (form) {
    form.appendChild(input);
  } else {
    this.appendChild(input);
  }

  input.addEventListener('change', event => this.#fileSelected(event));

  return input;
}

This is crucial. The file input must be part of the form for Rails to receive it in the params. The component looks for a form in two ways: if a form attribute is present, it uses that ID to find the form. Otherwise, it finds the first form in the DOM. Use it inside a form (it finds the form automatically) or outside a form (pass the form ID via the form attribute).

When a file is selected (either via click or drag-and-drop), the component renders a preview:

#fileSelected(event) {
  const imageFile = event.target.files[0];

  if (imageFile) this.#process(imageFile);
}

#process(file) {
  if (this.#img) this.#render(file);
}

#render(file) {
  const reader = new FileReader();

  reader.onload = (event) => {
    this.#img.src = event.target.result;
  };

  reader.readAsDataURL(file);
}

The FileReader converts the file to a data URL which is displayed in the image element. The user sees the preview immediately.

The component listens for drag-and-drop events and adds a visual indicator:

#dragAndDropListeners() {
  this.addEventListener('dragover', event => this.#dragOver(event));
  this.addEventListener('dragleave', event => this.#dragLeave(event));
  this.addEventListener('drop', event => this.#drop(event));
}

#dragOver = (event) => {
  event.preventDefault();
  event.stopPropagation();

  this.setAttribute('data-drag-active', '');
}

#dragLeave = (event) => {
  event.preventDefault();
  event.stopPropagation();

  this.removeAttribute('data-drag-active');
}

#drop = (event) => {
  event.preventDefault();
  event.stopPropagation();

  this.removeAttribute('data-drag-active');

  const files = event.dataTransfer.files;
  const imageFile = Array.from(files).find(file => file.type.startsWith('image/'));

  if (imageFile) this.#process(imageFile);
}

When the user drags a file over the component, it sets a data-drag-active attribute. Style this with CSS to show visual feedback like a blue border or background color.

The component finds a button with data-remove-image and wires it up:

#removeButtonListener() {
  const removeButton = this.querySelector('[data-remove-image]');

  if (removeButton) removeButton.addEventListener('click', () => this.#remove());
}

#remove() {
  this.#input.value = '';

  if (this.#img) this.#img.removeAttribute('src');
}

When clicked, it clears the file input and removes the image preview. For has_one_attached in Rails, submitting an empty file input removes the attachment.

Using the component

Here is the avatar example inside a form:

<%= form_with(model: user) do |form| %>
  <div>
    <%= form.label :avatar, style: "display: block" %>
    <image-upload name="user[avatar]" data-preview-image-url="<%= url_for(@user.avatar) if @user.avatar.attached? %>">
      <button type="button" data-remove-image>Remove</button>
    </image-upload>
  </div>

  <div>
    <%= form.label :email_address, style: "display: block" %>
    <%= form.text_field :email_address %>
  </div>

  <div>
    <%= form.submit %>
  </div>
<% end %>

And here is the header example outside the form:

<image-upload name="user[header]" form="user_form" data-preview-image-url="<%= url_for(@user.header) if @user.header.attached? %>">
  <button type="button" data-remove-image>Remove</button>
</image-upload>

<%= form_with(model: user, id: "user_form") do |form| %>
  <!-- form fields -->
<% end %>

The form="user_form" attribute associates the component with the form by ID. The file input gets appended to that form and submits with it.

Custom elements work anywhere in your HTML without needing to wire up data attributes or controller targets. I’ve been enjoying custom elements more and more and for really contained examples like this one, or for static sites built with Perron I think they are wonderful tool to have.

Adding edit, delete and reposition for nested forms in Rails with Stimulus

Rails Designer — Thu, 07 May 2026 07:30:00 +0000

In a previous article, I explored building nested forms with Stimulus. But what about when you need to edit existing questions, remove ones you no longer need or reorganize them? Let’s extend that foundation by adding: editing, deleting and repositioning questions using drag-and-drop.

This article builds directly on the previous setup, so make sure you have that in place before continuing (check out the repo for the full code base). The reposition logic is inspired by this article to create a Kanban board.

First, update the migration to include a unique index:

class AddPositionToQuestions < ActiveRecord::Migration[8.1]
  def change
    add_column :questions, :position, :integer, null: false
    add_index :questions, [:survey_id, :position], unique: true
  end
end

I like the positioning gem for this, make sure to set it up correctly.

Editing questions is really just vanilla Rails stuff, update the SurveysController with edit and update actions. It will save the question’s content alongside the survey models (I recently wrote how you can do this without using accepts_nested_attributes_for).

Now the more interesting part is the logic to reposition questions. Let’s go over the related parts. Add a RepositionController that stores the new position after drag-and-drop.

class RepositionController < ApplicationController
  def update
    resources.each_with_index do |resource, index|
      resource.update!(position: params[:new_position].to_i + index)
    end
  end

  private

  def resources
    resource_class.where(id: Array(params[:ids]))
  end

  def resource_class
    request.path.split("/")[1].singularize.classify.constantize
  end
end

Next is to updates your routes to include the new action:

Rails.application.routes.draw do
+ resources :questions, only: %w[destroy] do
+ collection do
+ patch :reposition, controller: "reposition", action: "update"
+ end
+ end
end

Update the nested-fields controller to support question removal.

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
+ remove(event) {
+ const field = event.target.closest("[data-sortable-id-value]");
+ const destroyInput = field.querySelector('input[name*="_destroy"]');

+ if (destroyInput) {
+ destroyInput.value = "1";

+ field.hidden = true;
+ } else {
+ field.remove();
+ }
+ }
}

The remove() method checks if there’s a _destroy hidden field (for existing records). If so, it sets the value to “1” and hides the field. For new records without this field, it simply removes the element from the DOM.

Sortable Stimulus controller

Create a new Stimulus controller (this is mostly copied verbatim from the Kanban board article I mentioned) for drag-and-drop functionality:

// app/javascript/controllers/sortable_controller.js
import { Controller } from "@hotwired/stimulus"
import { Sortable } from "sortablejs"
import { patch } from "@rails/request.js"

export default class extends Controller {
  static values = { endpoint: String };

  connect() {
    Sortable.create(this.element, {
      group: "questions",
      animation: 150,
      easing: "cubic-bezier(1, 0, 0, 1)",
      ghostClass: "opacity-50",
      selectedClass: "selected",
      onEnd: (event) => this.#updatePosition(event)
    });
  }

  async #updatePosition(event) {
    const items = event.items?.length > 0 ? event.items : [event.item];
    const ids = items.map(item => item.dataset.sortableIdValue);

    await patch(this.endpointValue, {
      body: JSON.stringify({
        ids: ids,
        new_position: event.newIndex + 1
      })
    });
  }
}

This controller uses SortableJS and @rails/request.js to enable drag-and-drop.

Update the edit view

Create the edit view ( app/views/surveys/edit.html.erb ):

<h1>Edit Survey</h1>

<%= form_with model: @survey, data: {controller: "nested-fields"} do |form| %>
  <div>
    <%= form.label :name %>

    <%= form.text_field :name %>
  </div>

  <ul data-nested-fields-target="fields" data-controller="sortable" data-sortable-endpoint-value="<%= reposition_questions_path %>">
    <%= form.fields_for :questions do |question_form| %>
      <li data-sortable-id-value="<%= question_form.object.id %>">
        <%= question_form.hidden_field :_destroy %>

        <%= question_form.label :content, "Question" %>
        <%= question_form.text_area :content %>

        <%= button_tag "Remove", type: :button, data: { action: "nested-fields#remove" } %>
      </li>
    <% end %>
  </ul>

  <div>
    <!-- … -->
  </div>
<% end %>

Key points in this view:

The <ul> has both nested-fields and sortable controllers
Each <li> has data-sortable-id-value for drag-and-drop tracking
The _destroy hidden field marks questions for deletion
The template includes the _destroy field for new questions too

And there you have it. A complete nested forms solutions for Rails with Stimulus that includes adding new questions, deleting and reposition them. From here it is straight-forward to add nested answers too!