Listing tutorials

Published 11 Jul - 2020 - Updated 22 May

Create a reusable modal with LiveView Component

liveviewalpinejstailwindphoenixmodal

To reduce duplicity and complexity in your apps, Phoenix LiveView comes with the possibility to use reusable components. Each component can have its..

Go to tutorial

Published 19 Mar - 2020 - Updated 01 May - 2020

Updating LiveView Spring 2020 ed

liveviewphoenix

Due to the hard work of the Phoenix LiveView team, there has been a lot of work done. However, there have been some breaking changes. For example ..

Go to tutorial

Published 09 Mar - 2020 - Updated 01 May - 2020

Setup a supervised background task in Phoenix

phoenixpubsubliveviewotp

There are times when you need to spawn a background process for a longer running task. And especially if you are interacting with an external system..

Go to tutorial

Published 03 Mar - 2020 - Updated 01 May - 2020

Share LiveView state between tabs

liveviewphoenixjavascript

Each LiveView on each tab spawns a separate state. That might or might not be the desired behaviour. In this tutorial, I am going to share state bet..

Go to tutorial

Published 21 Feb - 2020 - Updated 01 May - 2020

Create a Calendar in Phoenix LiveView

calendarliveviewphoenix

In this tutorial I am creating a simple calendar in Phoenix LiveView. The calendar should be able to switch month, highlight current day and select ..

Go to tutorial

Published 15 Feb - 2020 - Updated 01 May - 2020

Create ghost loading cards in Phoenix LiveView

phoenixectoliveview

Unless you already didn't know, when a LieView component is mounted on a page, it runs the mount/2 function twice. One when the page is rendered fro..

Go to tutorial

Published 14 Feb - 2020 - Updated 01 May - 2020

Improving LiveView UX with Phoenix Channels - Tagging part 3

taggingphoenixformschannelsliveview

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

typeaheadformsliveviewphoenixtaggingtailwind

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

phoenixliveviewforms

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 29 Jan - 2020 - Updated 01 May - 2020

Send events from JS to a LiveView component

liveviewcsrfphoenixjavascript

Let say you app uses a javascript library that needs to interact with your app. For example a LiveView component. That is possible with the built in..

Go to tutorial