Listing tutorials

Published 01 Jun

How to use Phoenix forms for embedded schema and JSONB

jsonbformsecto

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

formsalpinejsliveview

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 26 Dec - 2020

Bootstrap 5 and Phoenix LiveView

bootstrapformsmodalliveview

Even though a large part of the Phoenix community seem to embrace Tailwind, there are still a lot that prefer Bootstrap CSS framework. And with Boos..

Go to tutorial

Published 23 Sep - 2020

Setup Stripe with Phoenix LiveView

stripepaymentsliveviewforms

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

Published 14 Feb - 2020 - Updated 01 May - 2020

Improving LiveView UX with Phoenix Channels - Tagging part 3

channelsformsliveviewphoenixtagging

In the previous tutorial I set up the tagging interface. It had however a small issue. If I added a tag, it didnt really refocus on the input so I n..

Go to tutorial

Published 13 Feb - 2020 - Updated 01 May - 2020

Tagging interface with Phoenix LiveView and Tailwind - Tagging part 2

formsliveviewphoenixtaggingtailwindtypeahead

In the previous tutorial, I set up the the backend for being able to add tags to products. I have also written a tutorial about adding a LiveView an..

Go to tutorial

Published 05 Feb - 2020 - Updated 01 May - 2020

Nested model forms with Phoenix LiveView

formsliveviewphoenix

I my last article, I set up a relationship between products and variants. But what I didn't go through was to setup a form where you can manage the ..

Go to tutorial

Published 28 Jan - 2020 - Updated 01 May - 2020

Phoenix LiveView and Invalid CSRF token

csrfformsliveviewphoenix

One issue that is common to run into is a CSRF error when posting some sort of form rendered with LiveView. The issue is that a LiveView component i..

Go to tutorial

Published 27 Jan - 2020 - Updated 01 May - 2020

Typeahead with LiveView and Tailwind

formsliveviewphoenixtailwindtypeahead

In this tutorial I want to show how easy it is to do an autocomplete or typeahead without any additional javascript!

Go to tutorial

Published 25 Jan - 2020 - Updated 01 May - 2020

Form validation with Phoenix LiveView

formsliveviewphoenix

One thing that has always been problematic is when providing live form validation for a user that interacts with a form. The problem has always bee..

Go to tutorial