---
title: "The Phoenix Files"
description: "The home for Phoenix-oriented content ranging from Ecto to LiveView and more."
---

# The Phoenix Files

97 pages, newest first. Each link is the page's Markdown twin; the page itself is the same URL without `.md`, ending in `/`.

- [Using AI to Boost Accessibility and SEO](https://fly.io/phoenix-files/using-ai-to-boost-accessibility-and-seo.md)
- [My Favorite new LiveView Feature](https://fly.io/phoenix-files/my-favorite-new-liveview-feature.md)
- [World Page Speed Test – planet-wide elastic scale with FLAME](https://fly.io/phoenix-files/world-page-speed-test-elastic-scale-with-flame.md)
- [How Phoenix LiveView Form Auto-Recovery works](https://fly.io/phoenix-files/how-phoenix-liveview-form-auto-recovery-works.md)
- [Easy at-home AI with Bumblebee and Fly GPUs](https://fly.io/phoenix-files/easy-at-home-ai-with-bumblebee-and-fly-gpus.md)
- [Phoenix Dev Blog – Server logs in the browser console](https://fly.io/phoenix-files/phoenix-dev-blog-server-logs-in-the-browser-console.md)
- [Clustering Elixir From Laptop to Cloud](https://fly.io/phoenix-files/clustering-elixir-from-laptop-to-cloud.md)
- [What if S3 could be a fast, globally synced, Key Value Database? That's Tigris](https://fly.io/phoenix-files/what-if-s3-could-be-a-fast-globally-synced-key-value-database-that-s-tigris.md)
- [Not every Dependency is worth it.](https://fly.io/phoenix-files/not-every-dependency-is-worth-it.md)
- [Making Phoenix LiveView Sing!](https://fly.io/phoenix-files/making-phoenix-liveview-sing.md)
- [Using LLama.cpp with Elixir and Rustler](https://fly.io/phoenix-files/using-llama-cpp-with-elixir-and-rustler.md)
- [Real World ™ Machine Learning on Fly GPU's](https://fly.io/phoenix-files/real-world-machine-learning-on-fly-gpu.md)
- [Abusing LiveView's new Async Assigns Feature](https://fly.io/phoenix-files/abusing-liveview-new-async-assigns-feature.md)
- [Elixir and Phoenix can do it all!](https://fly.io/phoenix-files/elixir-and-phoenix-can-do-it-all.md)
- [ChatGPT doesn't know what day it is?](https://fly.io/phoenix-files/chatgpt-doesnt-know-what-day-it-is.md)
- [Created my Personal AI Fitness Trainer in 2 Days](https://fly.io/phoenix-files/created-my-personal-ai-fitness-trainer-in-2-days.md)
- [LLaMa on a CPUs](https://fly.io/phoenix-files/llama-on-a-cpus.md)
- [Announcing LangChain for Elixir](https://fly.io/phoenix-files/announcing-langchain-for-elixir.md)
- [DIY Lambda](https://fly.io/phoenix-files/diy-lambda.md)
- [Customizing Phoenix Generators](https://fly.io/phoenix-files/customizing-phoenix-generators.md)
- [Streaming Uploads with LiveView](https://fly.io/phoenix-files/streaming-uploads-with-liveview.md)
- [Star-Crossed LiveView Processes](https://fly.io/phoenix-files/star-cross-live-view-processes.md)
- [BEAM Clustering made easy](https://fly.io/phoenix-files/beam-clustering-made-easy.md)
- [Let's search all of Elixir's Packages!](https://fly.io/phoenix-files/let-s-search-all-of-elixir-s-packages.md)
- [Sorting and Deleting many-to-many assocs with Ecto and LiveView](https://fly.io/phoenix-files/cast-assoc-sort-and-delete-options.md): Using Ecto's :sort_param and :delete_param options, along with LiveView, to sort and delete elements within many-to-many association
- [Elixir Docs are Built Different](https://fly.io/phoenix-files/elixir-docs-are-built-different.md): These are not your normal docs, Elixir docs are actually useful!
- [for Can Do More](https://fly.io/phoenix-files/for-can-do-more.md): Learn about all the neat stuff that the `for` construct can do in Elixir!
- [Using Ctrl+Enter to submit a Text Area with LiveView](https://fly.io/phoenix-files/submit-a-form-with-ctrl-enter.md): How to use LiveView Hooks to submit a form using Ctrl+Enter.
- [A LiveView is a Process](https://fly.io/phoenix-files/a-liveview-is-a-process.md): A Phoenix LiveView is a Process, let's discuss what that means!
- [Adding Dialyzer without the Pain](https://fly.io/phoenix-files/adding-dialyzer-without-the-pain.md): This post is about how to add Dialyzer to an existing Elixir project to get the benefits today without being overwhelmed fixing all the legacy problems.
- [Migrating to Verified Routes](https://fly.io/phoenix-files/migrating-to-verified-routes.md): How to migrate from legacy Phoenix routes to the newer Verified Routes in Phoenix 1.7.
- [Speed up your boot times with this one Dockerfile trick](https://fly.io/phoenix-files/speed-up-your-boot-times-with-this-one-dockerfile-trick.md): Optimize your boot times with Docker!
- [Dynamic forms with LiveView Streams](https://fly.io/phoenix-files/dynamic-forms-with-streams.md): Learn how to use to_form/1 and LiveView Streams to create a dynamic list of forms.
- [Taking Control of Map Sort Order in Elixir](https://fly.io/phoenix-files/taking-control-of-map-sort-order-in-elixir.md): The home for Phoenix-oriented content ranging from Ecto to LiveView and more.
- [Loading a structure.sql file on Prod without mix](https://fly.io/phoenix-files/loading-structure-sql-on-prod-without-mix.md): Getting our Elixir application deployed on Fly.io when we have a `structure.sql` file from running `mix ecto.dump` and we don't have all the migrations anymore.
- [Streaming OpenAI responses](https://fly.io/phoenix-files/streaming-openai-responses.md): The home for Phoenix-oriented content ranging from Ecto to LiveView and more.
- [Tensors and Nx, are not just for machine learning](https://fly.io/phoenix-files/tensors-and-nx-are-not-just-for-machine-learning.md): Gentle introduction to using Tensors and Nx in Elixir.
- [Developing after mix ecto.dump](https://fly.io/phoenix-files/developing-after-a-mix-ecto-dump.md): Developing and testing our Elixir application after running `mix ecto.dump` and we don't have all the migrations anymore.
- [Building a Drag-and-Drop List with LiveView and SortableJS](https://fly.io/phoenix-files/liveview-drag-and-drop.md): Learn how to setup SortableJS in your Phoenix LiveView Apps with a practical example.
- [Minimum Viable ChatGPT Plugin](https://fly.io/phoenix-files/minimum-viable-chatgpt-plugin.md): Make your first ChatGPT Plugin with Elixir and Phoenix
- [Phoenix LiveView Zipped Uploads](https://fly.io/phoenix-files/phoenix-liveview-zipped-uploads.md): Exploring zipping up a client's directory in the browser using JSZip and the webkitdirectory feature and unzipping on a Phoenix server using OTP the :zip module.
- [Elixir and Rust is a good mix](https://fly.io/phoenix-files/elixir-and-rust-is-a-good-mix.md): Make your Elixir projects even faster using Rust!
- [Can Phoenix Safely use the Zip Module?](https://fly.io/phoenix-files/can-phoenix-safely-use-the-zip-module.md): OTP includes lots of built-in features. Here we explore the Erlang zip module to discover how safe it is to use directly in our Phoenix applications.
- [Crafting your own Static Site Generator using Phoenix](https://fly.io/phoenix-files/crafting-your-own-static-site-generator-using-phoenix.md): Building your own Static Site Generator using Phoenix and NimblePublisher, the complete guide.
- [Building a Chat App with LiveView Streams](https://fly.io/phoenix-files/building-a-chat-app-with-liveview-streams.md): Building a LiveView powered chat app is easier than ever when using Streams! Sophie DeBenedetto shows us how.
- [Using LiveView's new primitives for accessibility](https://fly.io/phoenix-files/liveview-accessible-focus.md): Discover the new accessibility features in LiveView 0.18 and learn how to use them in your Phoenix LiveView applications with practical examples.
- [Phoenix Dev Blog - Sounds Like a Bug](https://fly.io/phoenix-files/phoenix-dev-blog-sounds-like-a-bug.md): A deeper look into fixing an 8-year old race condition bug with Phoenix, LiveView, and long-polling that teaches us a few things along the way.
- [Resizing Images using Elixir](https://fly.io/phoenix-files/resizing-images-using-elixir.md): Resizing and optimizing images using Elixir!
- [Single File Elixir Scripts](https://fly.io/phoenix-files/single-file-elixir-scripts.md): Experiment and debug with Elixir Scripts!
- [Phoenix Dev Blog - Streams](https://fly.io/phoenix-files/phoenix-dev-blog-streams.md): LiveView's new Streams feature is set to be a game changer and yet easy to use at the same time. Chris McCord writes this dev blog post shinning a light onto this new feature.
- [Phoenix LiveView and SQLite Autocomplete](https://fly.io/phoenix-files/phoenix-liveview-and-sqlite-autocomplete.md): Build a complete Autocomplete Search with Phoenix LiveView and SQLite
- [Pass User Agent info to your LiveView](https://fly.io/phoenix-files/pass-user-agent-info-to-your-liveview.md): Learn how to get an User Agent inside a LiveView.
- [Making a CheckboxGroup Input](https://fly.io/phoenix-files/making-a-checkboxgroup-input.md): Creating a custom core_component input for tagging items using a multi-select checkbox group.
- [Custom styling with LiveView function component attributes](https://fly.io/phoenix-files/customizable-classes-lv-component.md): Using LiveView function components attributes to add new CSS classes to our component's default ones.
- [SQLite3 Full Text Search with Phoenix](https://fly.io/phoenix-files/sqlite3-full-text-search-with-phoenix.md): Using SQLite3 built-in Full Text Search(FTS5) capability with Elixir Ecto.
- [Tag All the Things!](https://fly.io/phoenix-files/tag-all-the-things.md): Add tagging with no extra tables using Postgres array fields and Ecto for an easy an simple solution.
- [Copy to Clipboard with Phoenix LiveView](https://fly.io/phoenix-files/copy-to-clipboard-with-phoenix-liveview.md): Copy to a user's clipboard with Phoenix LiveView.
- [Async processing in LiveView](https://fly.io/phoenix-files/liveview-async-task.md): Use the Task module to perform asynchronous processing on a LiveView.
- [Flying with a Fledgling Phoenix](https://fly.io/phoenix-files/flying-with-a-fledgling-phoenix.md): This is about trying out new Phoenix release candidates and finding what changed so we can apply similar changes to existing projects.
- [Bringing Phoenix Authentication to Life](https://fly.io/phoenix-files/phx-gen-auth.md): This post is about all the magic you can generate with phx.gen.auth and its --live option.
- [Persistent forms with your URL on LiveView](https://fly.io/phoenix-files/persistent-forms-with-your-url-on-liveview.md): Learn how not to lose form data whenever you refresh a LiveView page.
- [Elixir, OpenTelemetry, and the Infamous N+1](https://fly.io/phoenix-files/opentelemetry-and-the-infamous-n-plus-1.md): Using OpenTelemetry with Grafana to debug performance issues in Phoenix LiveView and Elixir.
- [Github Actions for Elixir CI](https://fly.io/phoenix-files/github-actions-for-elixir-ci.md): Setup Github Actions to run Continuous Integration (CI) tests for your Elixir project.
- [Shutting down a Phoenix app when idle](https://fly.io/phoenix-files/shut-down-idle-phoenix-app.md): How to get your Phoenix app to shut down when no one's connected to it.
- [Migrating to LiveView v0.18](https://fly.io/phoenix-files/migrating-to-lv-0-18.md): This post talks about errors that may appear when migrating our projects from LiveView v0.17 to v0.18 and how to deal with them.
- [Plucking the 'A' from PETAL](https://fly.io/phoenix-files/plucking-the-a-from-petal.md): This post asks if we can remove Alpine from our PETAL stack. Can we do everything we need with just LiveView? Let's explore an area we can still improve.
- [Infinitely Scroll Images in LiveView](https://fly.io/phoenix-files/infinitely-scroll-images-in-liveview.md): Infinite scroll in LiveView is pretty neat. Learn how to infinitely scroll images in view without a front-end javascript framework.
- [Testing LiveView forms](https://fly.io/phoenix-files/forms-testing.md): A walk around some functions of the LiveViewTest module that come in handy for testing forms.
- [Live sessions in action](https://fly.io/phoenix-files/live-session.md): A closer look at live_session and different use cases
- [Triggering a Phoenix controller action from a form in a LiveView](https://fly.io/phoenix-files/phx-trigger-action.md): Triggering a controller action using phx-trigger-action from a form in a LiveView
- [Making Tabs Mobile Friendly](https://fly.io/phoenix-files/making-tabs-mobile-friendly.md): Can we make a mobile-friendly tabs component that switches to a SELECT input on narrow screens? Can we do it all client-side without Alpine.js? Let's find out!
- [Phoenix LiveView Tailwind Variants](https://fly.io/phoenix-files/phoenix-liveview-tailwind-variants.md): Custom Tailwind variants for Phoenix LiveView-specific CSS classes
- [Set Up VSCode for Elixir Dev](https://fly.io/phoenix-files/setup-vscode-for-elixir-development.md): Set up Microsoft Visual Studio Code (VS Code) for productive Elixir development.
- [Triggering JS from the server in LiveView: showing a spinner](https://fly.io/phoenix-files/server-triggered-js.md): Get the server to start and stop a spinner with JS commands
- [A reusable Multi-Select component for Phoenix LiveView](https://fly.io/phoenix-files/liveview-multi-select.md): Building a reusable multi-select component using LiveComponent and Phoenix.HTML.Form helpers.
- [Recognize digits using ML in Elixir](https://fly.io/phoenix-files/recognize-digits-using-ml-in-elixir.md): Machine learning allows you to solve once unimaginable problem. Elixir's support for machine learning through Nx and Axon let us do impressive thing while staying in our favorite language.
- [Formatting the user's local date-times using Hooks](https://fly.io/phoenix-files/dates-formatting-with-hooks.md): Converting datetimes from UTC format to the user's local timezone with Hooks
- [Easy UI Toggling with LiveView JS Commands](https://fly.io/phoenix-files/sdeb-toggling-element.md): Show or hide a UI element with a click, using LiveView's JS.toggle utility.
- [Loading indicators for events with JS.push](https://fly.io/phoenix-files/js-push-loading-options.md): 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
- [Exploring Options for Storing Custom Data in Ecto](https://fly.io/phoenix-files/exploring-options-for-storing-custom-data-in-ecto.md): Ever wanted to store a blob of custom data on a database record? When the data is stored using Ecto there are several ways we can do it. This article explores two paths and discusses some of the pros and cons for each approach.
- [Pushing Events: with and without JS.push](https://fly.io/phoenix-files/pushing-events-with-js-push.md)
- [LiveView card components with Bootstrap](https://fly.io/phoenix-files/liveview-bootstrap-card.md): It's clean and easy to make a Bootstrap card component with LiveView. And if you like it so much you want to use it again, you can convert it to a reusable component using slots.
- [Build Simple Reusable Widgets Using Slots](https://fly.io/phoenix-files/build-simple-reusable-widgets-using-slots.md): 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.
- [Client-Side Tabs in LiveView with JS Commands](https://fly.io/phoenix-files/tabs-with-js-commands.md): 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. With the Phoenix.LiveView.JS module, we have an assortment of tidy, composable JS utility commands to easily carry out common client-side tasks without breaking into custom JavaScript.
- [LiveView feels faster with a delayed loading indicator](https://fly.io/phoenix-files/make-your-liveview-feel-faster.md): 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` progress indicator across the top making the page _feel_ like it's not ready. Here's a quick tip to make this so much better.
- [Reuse markup with function components and slots](https://fly.io/phoenix-files/function-components.md): Phoenix Liveview function components make it easy to inject tailored content into a reusable template.
- [Keep LiveViews alive across live redirects](https://fly.io/phoenix-files/live-render-sticky-option.md): When and how to use the live_render's sticky option
- [Passing Unknown Attributes into Your Component](https://fly.io/phoenix-files/passing-unknown-attributes-into-component.md): 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 and get them where you want them. Using assigns_to_attributes helps create reusable and generic components.
- [Restore LiveView State on Startup](https://fly.io/phoenix-files/restore-liveview-state-on-startup.md): Recipe for restoring saved LiveView state in the browser during the LiveView setup process. We take the extra steps to make it reusable.
- [Tailwind Standalone for Phoenix](https://fly.io/phoenix-files/tailwind-standalone.md): Standalone Tailwind CSS library for Elixir
- [Active nav with LiveView](https://fly.io/phoenix-files/liveview-active-nav.md): Keep the active tab highlighted between page views.
- [Saving and Restoring LiveView State](https://fly.io/phoenix-files/saving-and-restoring-liveview-state.md): 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 where you either can't or don't want to store the state on the server. In situations like that, you have the option of storing the state in the user's browser. This post explains how you can use the browser to store state and how your LiveView process can get it back later.
- [Anatomy of an Ecto migration](https://fly.io/phoenix-files/anatomy-of-an-ecto-migration.md): Looking into the anatomy of Ecto migrations to understand when locks are created and how to avoid costly locks.
- [Backfilling Data](https://fly.io/phoenix-files/backfilling-data.md): Safe ways to make bulk data changes like when adding new fields and populating default values.
- [How to migrate Mix Release projects](https://fly.io/phoenix-files/how-to-migrate-mix-release-projects.md): How to run migrations in production deployments when using Elixir Releases.
- [Migration Recipes](https://fly.io/phoenix-files/migration-recipes.md): A collection of Migration Recipes to help change your database in safer ways.
- [Safe Ecto Migrations](https://fly.io/phoenix-files/safe-ecto-migrations.md): Running migrations in production environments without accidentally causing locks or long running operations takes some care and awareness. This guide lays it all out, walks you through it, provides recipes to accomplish common tasks all while avoiding costly and embarrassing system downtime.