The Phoenix Files

Phoenix and LiveView applications are awesome on Fly.io! This is the home for Phoenix-oriented content ranging from Ecto to LiveView and more.

By Berenice Medel

A Reusable Multi-Select Component for Phoenix LiveView

Have you ever wanted a feature that lets your users select multiple items from a list, and performs some action on their selection? This is a really common thing to do, and it can be pretty involved to build. What do we do when we don't want to wr...

Read more 

Read more
By Philip Brown

Recognize Digits Using ML in Elixir

Machine learning allows you to solve problems that were once totally unimaginable. The ability for a computer to take an image and tell you what it sees was once only possible in science fiction. Now, it's possible to build machine learning models...

Read more 

Read more
By Berenice Medel

Formatting the User's Local Date-times Using Hooks

ProblemWhen we're developing an application for users around the world, we are bound to hit problems with timezones. Often we decide to store the dates in UTC format to avoid storing the timezone of each user. This brings us to the real problem, ...

Read more 

Read more
By Sophie DeBenedetto

Easy UI Toggling With LiveView JS Commands

LiveView empowers developers to be more productive than ever before by keeping your mind firmly focused on the server, even while you build out rich interactive UIs. But until recently, we were somewhat limited by LiveView's reliance on server-sid...

Read more 

Read more
By Berenice Medel & Chris Nicoll

Loading Indicators for Events With JS.push

ProblemPhoenix/LiveView apps involve a lot of interaction between the client and the server. We want to customize how we indicate to users that our UI is waiting for a server response to some event. Specifically, we'd like to see a general-purpos...

Read more 

Read more
By Mark Ericksen

Exploring Options for Storing Custom Data in Ecto

Ever wanted to store a blob of custom data on a database record? The data we want to store might be complex too, made up of multiple fields and even lists. When the data is stored using Ecto there are several ways we can do it. This article explor...

Read more 

Read more
By Berenice Medel & Chris Nicoll

Pushing Events: With and Without JS.push

LiveView DOM element bindings can be used to send events to the server, as well as issue LiveView JS commands on the client. In another post, we used client-side JS commands to show and hide content in a set of tabs, just by manipulating DOM eleme...

Read more 

Read more
By Sophie DeBenedetto

LiveView Card Components With Bootstrap

You may already be reaching for LiveView components to wrap up the behavior and markup of distinct portions of your LiveView UI. In this post, we’re going to take a single-purpose component that displays book review data in Bootstrap-style card fo...

Read more 

Read more
By Mark Ericksen

Build Simple Reusable Widgets Using Slots

A new feature in LiveView called "slots" can help make your components more composable and reusable. This post is about getting started with slots to build a simple component. ProblemYou have a design element that is used repeatedly in your site....

Read more 

Read more
By Berenice Medel & Chris Nicoll

Client-Side Tabs in LiveView With JS Commands

There are some things it really does make sense for our LiveView to do without calling home. Simple things that the browser doesn't need help with. Things we'd like to see happen instantly, like hiding a modal—maybe even with a transition animatio...

Read more 

Read more
By Mark Ericksen

LiveView Feels Faster With a Delayed Loading Indicator

LiveView is already fast. Couple that with hosting it on Fly.io where the server can be physically closer to your users and you've already got a great experience. However, the default setup for a new LiveView application displays the topbar progre...

Read more 

Read more
By Berenice Medel & Chris Nicoll

Reuse Markup With Function Components and Slots

The ProblemWe'd like a way to reuse code for UI components that are very similar in structure, but carry different content. Imagine we're writing a Phoenix LiveView app that frequently uses modals to display or save information. For a consistent ...

Read more 

Read more