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...

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...

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....

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...

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...

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 ...

By Berenice Medel

Keep LiveViews Alive Across Live Redirects

ProblemYou are building a website for listening to your favorite songs. You want to play or pause the current song while you are adding songs to your playlist or even editing your profile. You create a LiveView to handle the player controls and s...

By Mark Ericksen

Passing Unknown Attributes Into Your Component

On your LiveView page, you are using a custom component. You want to be able to pass HTML attributes into the component, but the component doesn't know anything about the attributes being passed! You need a way to pass arbitrary attributes through...

By Mark Ericksen

Restore LiveView State on Startup

You are storing some LiveView state in the browser. You want to retrieve that saved state as early as possible to improve the user experience. How can you do that? ProblemThe approach in Saving and Restoring LiveView State waits for the LiveView ...

By Chris McCord

Tailwind Standalone for Phoenix

Tailwind v3 was just released with some great new additions. One such feature is a new "standalone" tailwindcss CLI that includes pre-built binaries for all major platforms. This enables all of Tailwind's great features without the dependency on n...

By Berenice Medel

Active Nav With LiveView

One of the most important challenges when we are developing a new website is to give the user a great navigation experience, the user must know where they are and what navigation options they have at their disposal within the website. For this we ...

By Mark Ericksen

Saving and Restoring LiveView State

There are multiple ways to save and restore state for your LiveView processes. You can use an external cache like Redis, your database, or even the browser itself. Sometimes there are situations, like I described previously, where you either can't...