Listing Live Features

Live Featuers are Phoenix LiveView components that you can use in your own project. Every feature comes an interactive demo and a description on how to use them. I have made the components with Tailwind and in some cases I have sprinkled some AlpineJS. Every Feature has one or more files and also comes with some tests.

The reason I made them is to speed up development and make it easy for you to build your current or next project with LiveView.

There will be a bunch of free features and eventually I will add some premium features.

Preview

Published 23 Aug

Free

Pretty notifications with LiveView and Alpine

This feature is about displaying in app notifications with Phoenix LiveView, Tailwind and AlpineJS.

Preview

Published 27 Jul

Free

Sortable lists with sortable JS

This feature uses the javascript library sortable js to handle drag and drop sorting. The javascript is initiated with a LiveView hook. The idea is that the as soon the the sorting event is triggered, I send a push event to the component with the list of task ids and the sortorder. In this example, there are also two connected lists and the tasks can be sorted and drag between both lists.

Preview

Published 20 Jul

Free

Basic LiveView form validation

Inline form validation basically comes out of the box if you generate a new LiveView app. However, if you want to try it out or add it afterwards, this feature can show you how you can very easily implement it.

Preview

Published 15 Jul

Free

Simple Typeahead with LiveView and no JS

A simple typeahead that is very easy to implement. Just start with typing a character and LiveView will return a list of matching products. No javascript required.

Preview

Published 13 Jul

Free

Reusable toggleable LiveView buttons

A lot of web apps need some sort of toggle buttons. So I have made a reusable toggleable LiveView buttons. As you can see they can have different kind of content and styling.

Preview

Published 10 Jul

Free

Table Pagination with LiveView

A table with Phoenix LiveView pagination

Preview

Published 09 Jul

Free

Basic Modal with Alpine JS

Basic animated modal with Alpine JS. This feature needs a little help from the JS to get the nice animated effect.

Preview

Published 07 Jul

Free

Calendar Basic

A basic calendar build with Phoenix LiveView.