By Sophie DeBenedetto

Building a Chat App With LiveView Streams

In this post, we'll build out a LiveView chatroom app with the help of LiveView's new streams feature. You can follow along in the open source codebase or skip ahead to play around with the finished product. We'll see how streams seamlessly integr...

By Berenice Medel

Using LiveView's New Primitives for Accessibility

In previous posts, Nolan showed us some ways to improve accessibility in existing web applications using the Phoenix real-time social music app LiveBeats as an example. But what if we could integrate accessibility practices into our app developm...

By Chris McCord

Phoenix Dev Blog - Sounds Like a Bug

I've had my fair share of bug reports over the ~10 year life of maintaining Phoenix. Most are mundane Elixir tweaks, or wrangling some JavaScript issues. The core of Phoenix has been baked for years now, so color me surprised when I found myself s...

By Jason Stiebs

Resizing Images Using Elixir

When building web applications we accept user uploaded images and later want to use them as in our applications. This leads to many questions: What format will their device upload? Which format do we accept? Which format do we use? How many byt...

By Jason Stiebs

Single File Elixir Scripts

Elixir has powerful built in scripting functionality, allowing us to write Elixir to a file—say my_script.exs— and execute it directly by elixir my_script.exs. The vast majority of production Elixir projects will be directly compiled via mix with ...

By Chris McCord

Phoenix Dev Blog - Streams

This is the first installment of the Phoenix development blog where we'll talk about in progress features or day-to-day development updates in between major releases and milestones. What's the Problem?For at least a few years, the Phoenix team ha...

By Jason Stiebs

Phoenix LiveView and SQLite Autocomplete

In our last post we saw an example of how we could use the built-in Full Text Search capability, FTS5, of SQLite3 to create a search index and query it with Ecto. We also know it's fast to query and especially so since it is in memory. Let's see h...

By Lubien

Pass User Agent Info to Your LiveView

Here's a quick recipe. Say your LiveView needs to show something based on the device your user is on such as Mac or Windows. You can parse that from your User Agent header, in fact LiveView already gives you a simple method for that: get_connect_i...

Tag all the things

Part 2

Making a CheckboxGroup Input

UPDATED: This was updated to support clearing a list of tags. The underlying tag functions were updated and a hidden input ensures a value is passed. See the updated gist as well. Phoenix 1.7.0 brings a lot of new things when we run mix phx.gen my...

By Berenice Medel

Custom Styling With LiveView Function Component Attributes

ProblemYou're writing a new function component that has default styling. You've defined default CSS classes in the component's template, but you want it to have the flexibility to add a few others when calling the function. How can we give a comp...

SQLite3 Full Text Search

Part 1

SQLite3 Full Text Search With Phoenix

One of the benefits of SQLite is that you can query lightning quick because your database is colocated next to your server. And a bonus it also comes with built-in Full Text search capabilities! But how does this work with Ecto? In this Series we ...

Tag all the things

Part 1

Tag All the Things!

UPDATED: This was updated to support clearing a list of tags from a UI input component. Whether you link labels to a Github issue, track the different muscle groups strengthened by an exercise, or describe a book by the set of genres that apply to...