Phoenix LiveView Counter Tutorial for Complete Beginners (updated for 1.7)

When we were figuring out how to use Phoenix LiveView we got stuck a few times.
So in order to save other people time, we created a complete beginners tutorial
that assume no prior experience with Phoenix or LiveView:

Please check it out and share your feedback!
Thanks! :sunny:


Completely updated to Phoenix 1.5.3 + LiveView 0.13.2 (latest versions of both)
Considerably simpler and easier to learn. (credit to the Phoenix team!) :rocket:

*LiveView 0.13.3 :wink:

@Sanjibukai indeed the changelog on master has been updated for the upcoming release :tada:

but at the time of writing, 0.13.3 has not been published to


Given that the tutorial is aimed at complete beginners, we aren’t going to instruct them to use the master LiveView version that has not been released yet.

Once a new version of LiveView is published, we will gladly accept a Pull Request updating the tutorial if necessary. But until then this is the bleeding edge. :+1:


I was just joking… :sweat_smile:
You didn’t have too use such energy with screenshots etc. My bad…
Sorry if you misunderstood…


@Sanjibukai it’s difficult to discern tone from text. Thanks for clarifying you were joking. :slightly_smiling_face:
Anyway, hope everyone finds the tutorial useful. :+1:

1 Like

Updated to: Phoenix 1.5.5 + LiveView 0.14.7 (no breaking changes!) :rocket:


This tutorial was recently fully updated to Phoenix 1.7: Phoenix 1.7 by chargio · Pull Request #104 · dwyl/phoenix-liveview-counter-tutorial · GitHub there were quite a few breaking changes and a lot of new “boilerplate” in the codebase. :thought_balloon:

We would prefer less boilerplate / framework code in our projects as it would require reading for a new joiner in a project and less maintenance. But if the alternative is “magic”, then this is acceptable.

Happy LiveView-ing in 2023 everyone! :tada: