Phoenix LiveView Examples

May 29, 2019 (originally posted May 18)

LiveView for Phoenix on Elixir is definitely scratching an itch in the world of rich client apps, without having to go full-on client-side framework. Here’s a list of open source projects, some with online demos and other where you can (easily) run the code locally.

Sometimes it’s best to learn by examples, here goes.

Screenshot Description References
Ant Farm A virtual ant farm where every ant was a GenServer process, simulating a basic AI behavior. Originally straightforward, it got much bigger and eventually forgotten. Finally gave the ant farm another go, this time using Elixir only. So I rolled up my sleeves, and surprisingly, four or five hours later I had the ant farm working, and this is how it was done… Concurrent ant farm with Elixir and Phoenix LiveView, Ant Farm Demo, Ant Farm Source
Erlang Observer A port of observer_cli using LiveView. The docs are clear, accurate and provide a very smooth introduction to the capabilities of this interactive server-side rendering way of doing things. Observer Live, Erlang Observer Demo, Erlang Observer Source
Markdown Editor When a client connects to the server they are initially served some HTML content. In our case, what is initially rendered is a textarea prepopulated with some Markdown and the HTML view of that Markdown. However, this is where things get interesting. A websocket connection is opened between the client and the server. The server listens for changes in the textbox, re-renders the HTML, and sends the smallest possible change back to the client which then updates the DOM. Markdown Editor Demo, Markdown Editor Source
Flappy Bird Flappy Bird Clone written in LiveView. Some interesting files: Live “view”, game logic, UI (leex) Flappy Bird Demo, Flappy Bird Source
Breakout A Breakout clone written in pure Elixir, using Phoenix LiveView. Breakout Demo, Breakout Source
Black Jack A Black Jack game Black Jack Source
Hippo Hippopotamuses have been the subjects of various African folktales. According to a San story; when the Creator assigned each animal its place in nature, the hippos wanted to live in the water, but were refused out of fear that they might eat all the fish. After begging and pleading, the hippos were finally allowed to live in the water on the conditions that they would eat grass instead of fish and would fling their dung so that it can be inspected for fish bones. Hippo Demo, Hippo Source
Bear Game A little toy repo to show off a very unnecessarily fast-rendering clock, done with Phoenix LiveView. There’s also a keyboard demo in here, just haven’t had a chance to write it up yet, but it does have a super cute bear 🐻. Bear Game Demo, Bear Game Source
Bear Necessities Another game involving a bear. Bear Necessities Demo, Bear Necessities Source
Milwaukee Property Search A website that allows filtering by some attributes from Milwaukee’s Master Property Record Milwaukee Property Search Demo, Milwaukee Property Search Source
Falling Tiles Simple shares, rotate the fast-dropping puzzle pieces and create solid lines — which then disappear. Rince and Repeat. Falling Tiles Demo, Falling Tiles Source
Wikipedia LiveView Wikipedia LiveView, a little demo to test out some phoenix_live_view features using the SSE provided from the wikimedia Kafka clusters. Wikipedia LiveView Source
Undo A simple pattern for support an undo feature. Undo Source
Logic Simulator Simulating Logic Gates Switches and Lightbulbs. Logic Simulator Source
Doom's Fire DOOM fire animated from server side. Made with Phoenix LiveView. Based on Doom fire algorithm Doom’s Fire Demo, Doom’s Fire Source
SVG Editor SVG Editor SVG Editor Demo, SVG Editor Source
Calculator A simple calculator written in LiveView. Calculator Source
Pixels with Frenemies Simple app to see how easy it would be to expand the demo apps to real-time collaboration. Spoiler: it was easy, in 1 day. Now just select a color and paint the canvas! Pixels with Frenemies Demo, Pixels with Frenemies Source
Load Generator Synthetic load generator + ad-hoc scheduler observer powered by LiveView Load Generator Source
Sea Battle Sea Battle game (require “registration”) Sea Battle Demo, Sea Battle Source
Bluetooth Low Energy Heart Rate Sensor Bluetooth Low Energy Heart Rate Sensor that gets Bluetooth Low Energy’s heart rate sensor data, and presents the results using LiveView. Bluetooth Low Energy Heart Rate Sensor Source
Bike Comapare Bike Comparison tool written in LiveView Bike Source
Adventure Capitalist A very simple implementation of Adventure Capitalist Adventure Capitalist Source
Phoenix Live Examples A collection of examples including: thermostat, snake, autocomplete search, image editor, clock, pacman, rainbow, counter, “top”, CRUD (users), presence Phoenix Live Examples Source
Table Sort Table Sort in LiveView Phoenix Table Sort Source
Table Filter Table Filter in LiveView Table Filter Article, Table Filter Source
Table Editing Table Editing in LiveView Table Editing Source
Elixir Match Elixir Match is an online version of the memory card game. Elixir Match Source, Elixir Match LiveView Commit
Empex Display Manipulating a SVG graphic for the 2019 Empex NY conference Empex SVG Demo, Empex SVG Source
Hangman Impleneting a LiveView UI for Dave Thomas’ DIET implementation of hangman Empex NY conference Hangman Demo, Hangman Source
Towers of Hanoi Impleneting a LiveView UI for the Towers of Hanoi game Towers of Hanoi Demo, Towers of Hanoi Source
LiveView Chat Tracking Users in a Chat App with LiveView, PubSub Presence Chat App Article, Chat App (Elixir School) Source, PHAT Chat Source
Another LiveView Chat Another LiveView Chat Real-Time Chat Demo (Video), Real-Time Chat Source, Based On Source
Search Debounce Phoenix Live View Debounce Phoenix Live View Debounce Article
Blast Blast Game Blast Demo, Blast Source
Kanban Board Kanban Board Kanban Board Demo, Kanban Board Source
Boggle Game (Soup) Boggle Game called Soup Soup Boggle Demo, Soup Boggle Source
Tech Trivia Game Tech Trivia Trivia Demo, Trivia Source
Timer Compared To Node Timer Comparison Node to LiveView Node Timer Demo, LiveView Timer Demo
Rubular Regex Parser Rubular Regex Parser Rubular Source
Displays IMU data using Phoenix LiveView Displays IMU data using Phoenix LiveView IMU Data Demo (Video), IMU Data Source
Calendar Calendar Calendar Source
Kubernetes Dashboard Kubernetes Dashboard Kubernetes Dashboard Demo (Video)
UX Keypad UX Keypad UX Keypad Source
Visualizing Functional Data Structures with LiveView Visualizing Functional Data Structures with LiveView Functional Data Structures Source
TODO App in LiveView TODO App TODO App Source
Conways Game of Life Conways Game of Life Conways Game of Life Demo Conways Game of Life Source

Articles

Below are a variety of articles on LiveView from mange perspectives.

Videos

Chris McCord Keynote: ElixirConf 2018 (LiveView Sneak Peak)

Chris McCord Keynote: ElixirConf 2018 (LiveView Sneak Peak)

Chris McCord Keynote: ElixirConf EU 2019 (LiveView Released)

Chris McCord Keynote: Code Sync 2019 (LiveView Released)

How to Create a Counter with Phoenix LiveView

How to Create a Counter with Phoenix LiveView

How to Create a Todo List with Phoenix LiveView

How to Create a Todo List with Phoenix LiveView

Integrating Phoenix LiveView

Integrating Phoenix LiveView

Live Coding LiveView w/ Bruce Tate

Live Coding LiveView w/ Bruce Tate

Getting Started With Phoenix LiveView 3 Parts (Elixircasts)

Getting Started With Phoenix LiveView Part 1 (Free)

Getting Started With Phoenix LiveView Part 2 (Subscription)

Getting Started With Phoenix LiveView Part 3 (Subscription)

Setup Phoenix Live View

Setup Phoenix Live View

Phoenix Live View in action

Phoenix Live View in action

Audios

Other Curated Lists

List of Lists is fun. Here are a few other places where LiveView lists are being maintained.

Name URL
Tefter Phoenix LiveView Examples
Leandro Cesquini Pereira Phoenix Liveview Collection
Darin Wilson Phoenix LiveView Round-Up: The Story So Far
v0.7.2