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.

ScreenshotDescriptionReferences
Ant FarmA 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 ObserverA 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 EditorWhen 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 BirdFlappy Bird Clone written in LiveView. Some interesting files: Live “view”, game logic, UI (leex)Flappy Bird Demo
Flappy Bird Source
BreakoutA Breakout clone written in pure Elixir, using Phoenix LiveView.Breakout Demo
Breakout Source
Black JackA Black Jack gameBlack Jack Source
HippoHippopotamuses 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 GameA 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 NecessitiesAnother game involving a bear.Bear Necessities Demo
Bear Necessities Source
Milwaukee Property SearchA website that allows filtering by some attributes from Milwaukee’s Master Property RecordMilwaukee Property Search Demo
Milwaukee Property Search Source
Falling TilesSimple shares, rotate the fast-dropping puzzle pieces and create solid lines — which then disappear. Rince and Repeat.Falling Tiles Demo
Falling Tiles Source
Wikipedia LiveViewWikipedia LiveView, a little demo to test out some phoenix_live_view features using the SSE provided from the wikimedia Kafka clusters.Wikipedia LiveView Source
UndoA simple pattern for support an undo feature.Undo Source
Logic SimulatorSimulating Logic Gates Switches and Lightbulbs.Logic Simulator Source
Doom's FireDOOM fire animated from server side. Made with Phoenix LiveView. Based on Doom fire algorithmDoom’s Fire Demo
Doom’s Fire Source
SVG EditorSVG EditorSVG Editor Demo
SVG Editor Source
CalculatorA simple calculator written in LiveView.Calculator Source
Pixels with FrenemiesSimple 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 GeneratorSynthetic load generator + ad-hoc scheduler observer powered by LiveViewLoad Generator Source
Sea BattleSea Battle game (require “registration”)Sea Battle Demo
Sea Battle Source
Bluetooth Low Energy Heart Rate SensorBluetooth 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 ComapareBike Comparison tool written in LiveViewBike Source
Adventure CapitalistA very simple implementation of Adventure CapitalistAdventure Capitalist Source
Phoenix Live ExamplesA collection of examples including: thermostat, snake, autocomplete search, image editor, clock, pacman, rainbow, counter, “top”, CRUD (users), presencePhoenix Live Examples Source
Table SortTable Sort in LiveViewPhoenix Table Sort Source
Table FilterTable Filter in LiveViewTable Filter Article
Table Filter Source
Table EditingTable Editing in LiveViewTable Editing Source
Elixir MatchElixir Match is an online version of the memory card game.Elixir Match Source
Elixir Match LiveView Commit
Empex DisplayManipulating a SVG graphic for the 2019 Empex NY conferenceEmpex SVG Demo
Empex SVG Source
HangmanImpleneting a LiveView UI for Dave Thomas’ DIET implementation of hangman Empex NY conferenceHangman Demo
Hangman Source
Towers of HanoiImpleneting a LiveView UI for the Towers of Hanoi gameTowers of Hanoi Demo
Towers of Hanoi Source
LiveView ChatTracking Users in a Chat App with LiveView, PubSub PresenceChat App Article
Chat App (Elixir School) Source
PHAT Chat Source
Another LiveView ChatAnother LiveView ChatReal-Time Chat Demo (Video)
Real-Time Chat Source
Based On Source
Search DebouncePhoenix Live View DebouncePhoenix Live View Debounce Article
BlastBlast GameBlast Demo
Blast Source
Kanban BoardKanban BoardKanban Board Demo
Kanban Board Source
Boggle Game (Soup)Boggle Game called SoupSoup Boggle Demo
Soup Boggle Source
Tech Trivia GameTech TriviaTrivia Demo
Trivia Source
Timer Compared To NodeTimer Comparison Node to LiveViewNode Timer Demo
LiveView Timer Demo
Rubular Regex ParserRubular Regex ParserRubular Source
Displays IMU data using Phoenix LiveViewDisplays IMU data using Phoenix LiveViewIMU Data Demo (Video)
IMU Data Source
CalendarCalendarCalendar Source
Kubernetes DashboardKubernetes DashboardKubernetes Dashboard Demo (Video)
UX KeypadUX KeypadUX Keypad Source
Visualizing Functional Data Structures with LiveViewVisualizing Functional Data Structures with LiveViewFunctional Data Structures Source
TODO App in LiveViewTODO AppTODO App Source
Conways Game of LifeConways Game of LifeConways Game of Life DemoConways 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 (Free)

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.

NameURL
TefterPhoenix LiveView Examples
Leandro Cesquini PereiraPhoenix Liveview Collection
Darin WilsonPhoenix LiveView Round-Up: The Story So Far