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
	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
	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
	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 Clone written in LiveView. Some interesting files: Live “view”, game logic, UI (leex)	Flappy Bird Demo, Flappy Bird Source
	A Breakout clone written in pure Elixir, using Phoenix LiveView.	Breakout Demo, Breakout Source
	A Black Jack game	Black Jack Source
	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
	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
	Another game involving a bear.	Bear Necessities Demo, Bear Necessities Source
	A website that allows filtering by some attributes from Milwaukee’s Master Property Record	Milwaukee Property Search Demo, Milwaukee Property Search Source
	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, a little demo to test out some phoenix_live_view features using the SSE provided from the wikimedia Kafka clusters.	Wikipedia LiveView Source
	A simple pattern for support an undo feature.	Undo Source
	Simulating Logic Gates Switches and Lightbulbs.	Logic Simulator Source
	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 Demo, SVG Editor Source
	A simple calculator written in LiveView.	Calculator Source
	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
	Synthetic load generator + ad-hoc scheduler observer powered by LiveView	Load Generator Source
	Sea Battle game (require “registration”)	Sea Battle Demo, Sea Battle Source
	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 Comparison tool written in LiveView	Bike Source
	A very simple implementation of Adventure Capitalist	Adventure Capitalist Source
	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 in LiveView	Phoenix Table Sort Source
	Table Filter in LiveView	Table Filter Article, Table Filter Source
	Table Editing in LiveView	Table Editing Source
	Elixir Match is an online version of the memory card game.	Elixir Match Source, Elixir Match LiveView Commit
	Manipulating a SVG graphic for the 2019 Empex NY conference	Empex SVG Demo, Empex SVG Source
	Impleneting a LiveView UI for Dave Thomas’ DIET implementation of hangman Empex NY conference	Hangman Demo, Hangman Source
	Impleneting a LiveView UI for the Towers of Hanoi game	Towers of Hanoi Demo, Towers of Hanoi Source
	Tracking Users in a Chat App with LiveView, PubSub Presence	Chat App Article, Chat App (Elixir School) Source, PHAT Chat Source
	Another LiveView Chat	Real-Time Chat Demo (Video), Real-Time Chat Source, Based On Source
	Phoenix Live View Debounce	Phoenix Live View Debounce Article
	Blast Game	Blast Demo, Blast Source
	Kanban Board	Kanban Board Demo, Kanban Board Source
	Boggle Game called Soup	Soup Boggle Demo, Soup Boggle Source
	Tech Trivia	Trivia Demo, Trivia Source
	Timer Comparison Node to LiveView	Node Timer Demo, LiveView Timer Demo
	Rubular Regex Parser	Rubular Source
	Displays IMU data using Phoenix LiveView	IMU Data Demo (Video), IMU Data Source
	Calendar	Calendar Source
	Kubernetes Dashboard	Kubernetes Dashboard Demo (Video)
	UX Keypad	UX Keypad Source
	Visualizing Functional Data Structures with LiveView	Functional Data Structures Source
	TODO App	TODO App Source
	Conways Game of Life	Conways Game of Life Demo Conways Game of Life Source