Skip to content
Rich, real-time user experiences with server-rendered HTML
Branch: master
Clone or download
chrismccord Merge pull request #98 from cigrainger/master
Fix arg error for configured_signing_salt!
Latest commit 9c82d97 Mar 20, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Add note on sample apps Mar 18, 2019
assets Refactor event handling to top level captures. Mar 20, 2019
config Add live_eex Dec 5, 2018
lib Merge pull request #98 from cigrainger/master Mar 20, 2019
test Refactor event handling to top level captures. Mar 20, 2019
.formatter.exs Make it so 🐥🔥 Oct 19, 2018
.gitignore Add js source Nov 9, 2018
.travis.yml Fix travis Feb 13, 2019 Update js to latest cascading parent child approach Feb 13, 2019
mix.lock Bump ex_doc env Mar 18, 2019
package.json Add package details for npm Mar 13, 2019

Phoenix LiveView

Build Status

Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML. For more information, see the initial announcement.

Note: Currently LiveView is under active development and we are focused on getting a stable and solid initial version out. For this reason, we will be accepting only bug reports in the issues tracker for now. We will open the issues tracker for features after the current milestone is ironed out.


As official guides are being developed, see our existing comprehensive docs and examples to get up to speed:


Currently LiveView is only available from GitHub. To use it, add to your mix.exs:

def deps do
    {:phoenix_live_view, github: "phoenixframework/phoenix_live_view"}

Once installed, update your endpoint's configuration to include a signing salt. You can generate a signing salt by running mix phx.gen.secret 32.

config :my_app, MyAppWeb.Endpoint,
   live_view: [
     signing_salt: "SECRET_SALT"

Update your configuration to enable writing LiveView templates with the .leex extension.

config :phoenix,
  template_engines: [leex: Phoenix.LiveView.Engine]

Next, add the LiveView flash plug to your browser pipeline, after :fetch_flash:

pipeline :browser do
  plug :fetch_flash
  plug Phoenix.LiveView.Flash

Then add the following imports to your web file in lib/my_app_web.ex:

def view do
  quote do
    import Phoenix.LiveView, only: [live_render: 2, live_render: 3]

def router do
  quote do
    import Phoenix.LiveView.Router

Next, expose a new socket for LiveView updates in your app's endpoint module.

defmodule MyAppWeb.Endpoint do
  use Phoenix.Endpoint

  socket "/live", Phoenix.LiveView.Socket

  # ...

Add LiveView NPM dependencies in your package.json.

  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view"

Enable connecting to a LiveView socket in your app.js file.

import LiveSocket from "phoenix_live_view"

let liveSocket = new LiveSocket("/live")

Finally, by convention live views are saved in a lib/my_app_web/live/ directory. For live page reload support, add the following pattern to your config/dev.exs:

config :demo, MyAppWeb.Endpoint,
  live_reload: [
    patterns: [

You can also optionally import the style for the default CSS classes in your app.css file.

@import "../../deps/phoenix_live_view/assets/css/live_view.css";
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.