Phlex on Rails

Build amazing user interfaces in Rails with Phlex 💪

Tired of Rails frontends that feel brittle and messy? Bring back the joy with Phlex. In this course you'll learn how to:

Build ambitious frontends. Snap together fast, complex UIs without getting bogged down by partials, helpers, views, & bloated JS frameworks.
Work with existing Rails apps. Integrate Phlex components at your own pace without rewriting everything.
Level up your architecture. Create self-permitting forms, stateful views, and component-only apps that are easier to test, organize, & scale.

Whether you're leading a team or building your first app, you'll learn how to ship frontends that feel great to use and even better to build.

Purchase video course ▶️ Watch introduction

Meet your guide, Brad Gessler

I built my first large Rails app when I founded Poll Everywhere. What started as a side project grew into a platform used by millions and trusted to handle billions of responses.

As CTO, I led a team of 35 Rails developers, designers, and product managers. You'll learn from the many mistakes I made along the way, so you can build clean, scalable frontends that work for your team and your organization.

Here's the lesson plan 🧑🏻‍💻

Unit 1

Getting started

This course will teach you the tactics and strategies for building user interfaces with Phlex, Rails, and other tools. In addition to the mechanics of Phlex, we’ll take a step back and ask “Why” and “How will this improve the development workflow?”

Introduction

This course will teach you the tactics and strategies for building user interfaces with Phlex, Rails, and other tools.

Why Phlex?

The frontend that ships with Rails starts to become a mess as views grow in complexity and size. This can lead to a tangled web of templates, partials, helpers, and code that is difficult to maintain, extend, and reuse throughout the application.

Why Rails?

Rails is highly productive full-stack framework. There’s ample documentation on “Why”, so I won’t cover it here, but I will cover the question of “Why Rails and Phlex?”

Why components?

Components make it easy to build a more consistent user interface, which ends up feeling much higher quality to your users. Additionally, shipping new features with a library of components is much easier than building everything from scratch or wrestling with various partials.

Unit 2

Component fundamentals

Phlex components are self-contained Ruby classes of a user interface that can be “snapped” together to build a more consistent, higher quality user experience. We’ll explore how you can use the full power of the Ruby programming languages to compose UIs for your Rails application.

Phlex is Ruby

Phlex is just Ruby. The most basic Phlex component looks like this:

Rendering

What happens when a component is rendered? Quite a bit actually. Let’s have a look.

Tags, attributes, & text

Phlex is a lightweight HTML abstraction. Understanding how it maps to the generated HTML tags, attributes, comments, and other entities is foundational to creating quality components. We’ll also cover the built-in security and language server features in Phlex that make it a joy to use Phlex in your favorite code editor.

Blocks, slots, & yielding

One of the most powerful features of Phlex is how well it can handle blocks of content. If you’re familiar with custom HTML elements or other component frameworks, you may have heard this referred to as “slots”.

Inheritance

As you start to accumulating more components in your application, you’ll natrually find yourself wanting to make little tweaks in different areas. There’s several strategies to managing these tweaks including intialization parameters, extended classes, and composition.

Compositions

Inheritance is a useful tool for managing the complexity of Phlex views and components, but it can also lead to tight coupling and make it difficult to reuse components across different contexts. Compositions, on the other hand, offer a flexible and modular approach to building complex views.

Testing

Since Phlex components are Ruby classes, they’re much easier to test.

Unit 3

Existing Rails apps

Phlex components can gradually be built and rolled-out in Rails apps with Erb, Haml, Slim templates and ViewComponents. These videos will show how to install Phlex into an existing Rails app, how to organize view files, and give you a strategy to gradually migrate your views into Phlex components.

Getting Started

The first thing you need to do to get Phlex up and running in your Rails app is to install it.

Components

Phlex provides convenient generators that create new view components in your Rails projects, automatically placing them in the correct directories with proper namespacing.

Rendering from templates

The beauty of Phlex components is that they can be rendered within your existing ERB, Haml, or Slim templates, making it possible to incrementally introduce Phlex into your application without requiring a complete rewrite.

Helpers

One of the more confusing concepts when getting started with Phlex is understanding how helper functions work. Unlike Rails helpers, Phlex helpers don’t leak state, which is beneficial for maintainability, but it does create a slight learning curve for Rails developers.

Staying organized

As your Phlex application grows, maintaining a clean and logical organization becomes crucial for long-term maintainability. This section covers best practices for organizing your components and views to keep your codebase scalable and easy to navigate.

Views

Phlex views serve as the main templates for your Rails application, corresponding directly to controller actions. Unlike components, which are reusable UI elements, views represent complete pages or sections that are rendered when users visit specific routes in your application.

Layouts

In Rails applications, layouts are typically defined in seperate files and “wrap” a view via some sort of yield block.

Caching

Phlex is impressively fast, rendering HTML at approximately 1.4 GB/s per core on a MacBook Pro (M3 Max) without performance degradation as you extract more components. Despite this performance, there are still scenarios where view caching can provide additional benefits.

Action Mailer

Phlex components excel at creating email templates, though email styling requires a different approach due to the limitations and inconsistencies of email clients. Unlike web browsers, email clients have varying levels of CSS support, making inline styles the most reliable approach.

Unit 4

Build forms with components

Forms are a critical part of web applications, but they’ve traditionally been difficult to customize in Rails, especially with Phlex. Superform is a powerful form builder library built completely on Phlex that makes it possible to build different types of forms in your apps and use them with ease.

Why Superform?

Forms are a critical part of web applications and traditionally have been difficult to customize in Rails, especially with Phlex. Superform is a powerful form builder library built entirely with Phlex that makes it possible to build different types of forms in your apps and use them with ease.

Getting Started

Install Superform in your Rails application, then customize the ApplicationForm.

Extending forms with inheritance

Superform was built with the understanding that web applications have many different types of forms dependung on context and the user.

Reusing forms

Building inline forms is a great way to get started, but how do you render the same form in multiple places?

Customizing

Generic Superforms are on parity with Rails form helpers, but they really shine when its time to customize fields.

Automatic strong parameters

One of the most powerful things about Superform is it understands the structure of the data being submitted into the form, which means it can automatically permit form parameters based on the structure of the data being submitted.

Unit 5

Phlex and Hotwire

Phlex components encapsulate views and fragments making them a perfect way to organize and compose views in the Turbo stack. Use them with Turbo Frames, Turbo Streams, and Turbo Pagemorphs and create a more responsive user interface.

Overview

Hotwire is a framework for building fast and responsive web applications.

Stimulus ERB to Phlex components

If you’re coming in from an existing Rails application, you may have a lot of Stimulus controllers that you want to convert to Phlex components. In this video, we’ll extract some existing ERB with Stimulus controllers and convert them to Phlex components.

Seperating Stimulus Concerns

How can the Stimulus controller behavior be extracted into a separate component so it can be reused across the application?

Implement Stimulus Component in ERB

Once Stimulus controller behavior is extracted into a separate component, we’ll apply it into an ERB template.

Stimulus Base Component

Basic Stimulus functionality can be extracted into a separate component so it can be reused across the application.

Turbo Frame DOM IDs

Turbo Frames, Streams, and Broadcasts all revolve around having a specific DOM ID so it knows what content to replace on the page. We’ll implement a highly specific dom_id method on components that can be used to identify themselves.

Turbo Broadcast

Integrate Phlex components into your Turbo broadcasts.

Turbo Broadcast Extraction

Since Phlex views are objects, they can be integrated with Turbo Broadcast in a more intuitaive way. Consider this User model that updates an account dashboard with the lastest stats.

Turbo Pagemorphs

I always recommend starting with Turbo Pagemorphs before bothering with Turbo Streams or Turbo Frames. Turbo Pagemorphs are the simplest way to add interactivity to your Rails application. They also work best with components.

Unit 6

Styling with CSS & utility frameworks

Components work great with CSS utility Frameworks, like Tailwind CSS. We’ll install Tailwind CSS in a Rails app and integrate it with Phlex components

Overview

Styling components is a bit different than styling entire pages of CSS. Generally speaking, you want the styling rules to be co-located with the component. That means you can either see the CSS inside of the component or are using utility classes, like Tailwind or DaisyUI, to define the look and feel of each component.

Composition

Before we dive into the specifics of CSS, its worth learning the parts of Phlex that make it easier to compose styles.

Tailwind CSS

Strategies for using inheritance and composition for dealing with slightly different variations of a component.

DaisyUI

Add DaisyUI to your project to move even faster, then refine components later.

Unit 7

Pure Phlex Rails apps

Go all-in on Phlex and build a Rails app completely out of Phlex components. You might not take it this far, but seeing it in action is a great way to understand how layouts, views, controllers, and components work together to create elegant UIs.

Overview

Build Rails applications using nothing but Phlex components. No ERB, Haml, or Slim templates. No partials, templates, or helpers.

Install Superview

Let’s install Superview and configure a controller to work with Phlex views for actions.

Views in controllers

Building Rails apps entirely from Phlex starts from the controllers. Consider the following Rails controller that renders a list of blog posts for a blog.

Superform

Phlex, Superform, and Hotwire is the most productive and concise ways to build CRUD applications in Rails. In this video, we’ll cover how Superform can be used in Rails to eliminate Strong Parameters freeing you up to focus on building UI.

Extracting Superviews

Embedding views directly in controllers is a powerful way to build or prototype user interfaces for applications, but it’s not for everybody. Some developers like to keep views in the ./app/views folder, so let’s look at how that can be done in a 100% Phlex Rails application.

Layouts

In the last video, we ended up with a controller that rendered inline views that looks like this:

Invest in yourself 🤗

Pay once for lifetime access to the video course. No subscription required.

Purchase video course for $379 $329

Launch pricing: 13% off to help you start building better Rails UIs today. 🚀

Ship fast, quality UIs in Rails with Phlex and Hotwire. No React, no build step, no client-side bloat
Build self-permitting, reusable forms with full control over markup and behavior using Superform
Gradually upgrade existing Rails apps with Phlex components at your own pace
Replace tangled ERB, Haml, or Slim views with clean, composable Phlex components
Create component-only Rails apps that eliminate templates, partials, and helpers
See how components improve architecture, reusability, speed, and testability
7+ hours of video across 45 lessons in 7 focused units
Lifetime access to all future updates and lessons

Launch discount 🤘🚀

Join the early wave of developers pushing Rails frontends forward. $50 off launch pricing.

$249
Seed supporter

The first 50 people who order will get to work with Brad to shape the direction of the course.

Completed July 2025
$289
Early adopter

Get emails as soon videos are published and give feedback on the course.

Completed October 2025
$329
Launch

The course will be discounted for the grand opening! Get a $50 discount off the full price of the course.
Purchase video course
$379
Mainstream

Course is fully published and full price.

Custom team workshops ⛹️‍

Bring consistency, speed, and confidence back to your Rails frontend

Rails apps often evolve into a mix of UI patterns and frameworks. The result is uneven quality, slower releases, and teams that hesitate to make changes. Phlex gives teams a unified way to build UI in Rails. It improves consistency, reduces friction when shipping updates, and helps engineers deliver high-quality interfaces faster.

The workshop starts with your goals for product quality and delivery speed. We work with your engineering leadership to design a plan around your codebase and coach your team through shipping reliable, maintainable UI with Phlex.

Leadership kickoff to align on product and delivery goals
Custom training plan based on your existing stack
Hands-on instruction and team coaching sessions
Follow-ups to reinforce progress and maintain momentum
Lifetime access to all workshop materials and recordings

Let's plan a workshop together

Frequently asked questions

Do I have to buy one course per person?

Yes. If you think about it, you're not really buying a video. What you're buying is the ability to level up and ship faster, higher-quality code. If there are 3 people on your team who are interested in the course, you'd purchase 3 courses. If 2 more people join the team, you can buy more from account management.

When you check out, select the number of courses you'd like to buy for people on your team with the "Quantity" drop-down. Crafting these videos is time-consuming and costs real money. Your support means I can make even more of these videos. 🙏

Do you do team workshops?

I sure do! Email somebody@beautifulruby.com and let's start talking about your goals and objectives so we can structure workshops, coaching sessions, and lesson plans that will move your product or organization forward.

What if I'm not satisfied with the course?

First, please share what could be improved. If you're still not satisfied, you can get a refund.

Are there discounts?

I get it—$379 is easier to spend when it comes out of a training budget or is a business expense. If you're a student, or if that's not you, reach out to somebody@beautifulruby.com and let's talk.

Can I get a receipt?

Of course! You'll need it for your expense reports or tax documentation. After you pay for the course, you should receive a receipt by email. You can also request one at any time from account management or reach out.

What does "lifetime access" mean?

You'll always be able to access this website to watch videos. If, for some reason, the website needs to be taken down, you'll be offered a downloadable format that you can store on your own device.

Who is this course for?

This course is perfect for anyone who wants to build maintainable, testable, and reusable Rails frontends using Phlex components.

Rails developers frustrated by tangled ERB, Haml, or Slim views
Frontend engineers looking to adopt component-driven UI patterns in Rails
Team leads and architects seeking scalable, consistent UI abstractions
Full-stack developers aiming to streamline collaboration between backend, UI, and design
Beginners eager to learn modern Rails UI development best practices

Checkout in minutes

Use Apple Pay, Amazon Pay, or your credit card to order this course and we'll email you the receipt.

Purchase video course for $379 $329