Home

Awesome

Phoenix LiveView

Actions Status Hex.pm Documentation

Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML.

Visit the https://livebeats.fly.dev demo to see the kinds of applications you can build, or see a sneak peek below:

https://user-images.githubusercontent.com/576796/162234098-31b580fe-e424-47e6-b01d-cd2cfcf823a9.mp4

<br />

LiveView ships by default in new Phoenix applications. After you install Elixir on your machine, you can create your first LiveView app in two steps:

$ mix archive.install hex phx_new
$ mix phx.new demo

If you have an older existing Phoenix app and you wish to add LiveView, see the previous installation guide.

Feature highlights

LiveView brings a unified experience to building web applications. You no longer have to split work between client and server, across different toolings, layers, and abstractions. Instead, LiveView enriches the server with a declarative and powerful model while keeping your code closer to your data (and ultimately your source of truth):

Learning

Check our comprehensive docs to get started.

The Phoenix framework documentation also keeps a list of community resources, including books, videos, and other materials, and some include LiveView too.

Also follow these announcements from the Phoenix team on LiveView for more examples and rationale:

Component systems

When you create a new Phoenix project, it comes with a minimal component system to power Phoenix generators. In case you want to enrich your developer experience, there are several component systems provided by the community at different stages of development:

What makes LiveView unique?

LiveView is server-centric. You no longer have to worry about managing both client and server to keep things in sync. LiveView automatically updates the client as changes happen on the server.

LiveView is first rendered statically as part of regular HTTP requests, which provides quick times for "First Meaningful Paint", in addition to helping search and indexing engines.

Then LiveView uses a persistent connection between client and server. This allows LiveView applications to react faster to user events as there is less work to be done and less data to be sent compared to stateless requests that have to authenticate, decode, load, and encode data on every request.

When LiveView was first announced, many developers from different backgrounds got inspired by the potential unlocked by LiveView to build rich, real-time user experiences. We believe LiveView is built on top of a solid foundation that makes LiveView hard to replicate anywhere else:

Browser Support

All current Chrome, Safari, Firefox, and MS Edge are supported. IE11 support is available with the following polyfills:

$ npm install --save --prefix assets mdn-polyfills url-search-params-polyfill formdata-polyfill child-replace-with-polyfill classlist-polyfill new-event-polyfill @webcomponents/template shim-keyboard-event-key core-js

Note: The shim-keyboard-event-key polyfill is also required for MS Edge 12-18.

Note: The event-submitter-polyfill package is also required for MS Edge 12-80 & Safari < 15.4.

// assets/js/app.js
import "mdn-polyfills/Object.assign"
import "mdn-polyfills/CustomEvent"
import "mdn-polyfills/String.prototype.startsWith"
import "mdn-polyfills/Array.from"
import "mdn-polyfills/Array.prototype.find"
import "mdn-polyfills/Array.prototype.some"
import "mdn-polyfills/NodeList.prototype.forEach"
import "mdn-polyfills/Element.prototype.closest"
import "mdn-polyfills/Element.prototype.matches"
import "mdn-polyfills/Node.prototype.remove"
import "child-replace-with-polyfill"
import "url-search-params-polyfill"
import "formdata-polyfill"
import "classlist-polyfill"
import "new-event-polyfill"
import "@webcomponents/template"
import "shim-keyboard-event-key"
import "event-submitter-polyfill"
import "core-js/features/set"
import "core-js/features/url"

import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
...

Contributing

We appreciate any contribution to LiveView.

Please see the Phoenix Code of Conduct and Contributing guides.

Running the Elixir tests:

$ mix deps.get
$ mix test

Running all JavaScript tests:

$ npm run setup
$ npm run test

Running the JavaScript unit tests:

$ cd assets
$ npm install
$ npm run test
# to automatically run tests for files that have been changed
$ npm run test.watch

or simply:

$ npm run setup
$ npm run js:test

Running the JavaScript end-to-end tests:

$ npm run setup
$ npm run e2e:test

Checking test coverage:

$ npm run cover
$ npm run cover:report

JS contributions are very welcome, but please do not include an updated priv/static/phoenix_live_view.js in pull requests. The maintainers will update it as part of the release process.