Listing tutorials

Published 18 Oct

Building a datatable in Phoenix LiveView

liveviewdatatablesortingpagination

To display a static table on webpage that contains a lot of data is a pretty bad user experience. There are popular javascript libraries that implem..

Go to tutorial

Published 14 Oct

Scraping data with Elixir and Floki

flokifinchscrape

In this tutorial I want to show you how to get started with screen scrapinng data from a website with Elixir and Floki. The page I want to scrape co..

Go to tutorial

Published 01 Jun

How to use Phoenix forms for embedded schema and JSONB

ectoformsjsonb

In this tutorial, I want to show you how you can setup form that stores the data in partly the columns in a database but also some of the fields in ..

Go to tutorial

Published 13 May

How to create a custom select with Alpine JS and Phoenix LiveView

alpinejsformsliveview

In this tutorial, I want to go through how to build a custom select field that is used in Tailwind UI. And I will build it with Alpine JS and Phoeni..

Go to tutorial

Published 05 May

How to setup recurring jobs with Oban in Elixir

bambooasyncoban

Oban has proven itself to be the most versatile job processing library in Elixir and Phoenix. Coming from Sidekiq, it feels very familiar and suppor..

Go to tutorial

Published 04 May

How to combine Phoenix LiveView with Alpine.js

phoenixtailwindliveviewalpinejs

No matter how great Phoenix LiveView is, there is still some use case for sprinking some JS in your app to improve UX. For example, tabs, dropdowns,..

Go to tutorial

Published 26 Dec - 2020 - Updated 01 Oct

Bootstrap 5 and Phoenix LiveView

liveviewformsmodalphoenix-1.6esbuildbootstrap

This tutorial is updated for Phoenix 1.6 with Esbuild Even though a large part of the Phoenix community seem to embrace Tailwind, there are still a..

Go to tutorial

Published 23 Dec - 2020

Getting Started with Phoenix and LiveView

liveviewphoenix

This guide to getting started with Phoenix covers getting up and running with Elixir and Phoenix. This is a direct conversion of the Getting started..

Go to tutorial

Published 09 Nov - 2020

Add bulk actions in Phoenix LiveView

bulktableliveview

In this tutorial, I have a list of products. One common feature for a table of records is to perform some sort of bulk actions. As an example in thi..

Go to tutorial

Published 23 Sep - 2020

Setup Stripe with Phoenix LiveView

formsstripepaymentsliveview

In this tutorial, I will go through how I setup Stripe payments with Phoenix and LiveView to make your app prepared for accepting payments. The tuto..

Go to tutorial