Primer / Live
Storybook

  • Theme

  • Light
  • Dark
  • System

  • Dark tone

  • Dark
  • Dark dimmed
  • Dark high contrast
  • Dark colorblind
  • Dark Tritanopia

  • Light tone

  • Light
  • Light high contrast
  • Light colorblind
  • Light Tritanopia
  • Reset to default

Installation and usage

Install primer_live

  1. Add PrimerLive as a dependency in your Phoenix application's mix.exs: 
    {:primer_live, "~> 0.2.2"}
  2. Run mix.deps get

Add CSS and JavaScript dependencies

You can either use npm, or add the dependencies to the HTML file.

If you plan to use menus, dialogs, or drawers in your project, you will need to include JavaScript dependencies. If not, you may skip the JavaScript imports and hooks.

Option A: Adding dependencies using npm

Add npm library primer-live to your assets/package.json. For a regular project, do: 
{
  "dependencies": {
    "primer-live": "file:../deps/primer_live"
  }
}
If you're adding primer-live to an umbrella project, change the paths accordingly: 
{
  "dependencies": {
    "primer-live": "file:../../../deps/primer_live"
  }
}
Now run the next command from your web app root: 
npm install --prefix assets
If you had previously installed primer-live and want to get the latest JavaScript, then force an install with: 
npm install --force primer-live --prefix assets

To ensure that the assets are installed before your application has started, and before it has been deployed, add "npm install" to the setup and deploy scripts in mix.exs.

For example:

defp aliases do
[
  setup: ["deps.get", "cmd npm --prefix assets install"],
  "assets.deploy": [
    "cmd npm --prefix assets install",
    "esbuild default --minify",
    "phx.digest"
  ]
]
end

Run mix setup to install the npm dependencies.

Add to assets/js/app.js:

import "primer-live/primer-live.min.css";
import { Prompt, Session } from "primer-live";

Also in assets/js/app.js, add Prompt and Session to the hooks:

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: {
    Prompt,
    Session,
    // existing hooks ...
  },
});

Option B: Adding dependencies to the HTML file

Load the dependencies from a content delivery service such as unpkg.

CSS only

Add to root.html.heex:

<link rel="stylesheet" href="https://unpkg.com/primer-live/priv/static/primer-live.min.css" media="all">

CSS and JavaScript

Add to root.html.heex:

<link rel="stylesheet" href="https://unpkg.com/primer-live/priv/static/primer-live.min.css" media="all">
<script src="https://unpkg.com/primer-live/priv/static/primer-live.min.js"></script>

In assets/js/app.js, add global Prompt and Session to the hooks: 

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: {
    Prompt,
    Session,
    // existing hooks ...
  },
});

Usage

To use components, use module PrimerLive:

defmodule MyAppWeb.MyLiveView do
  use MyAppWeb, :live_view
  use PrimerLive

  def render(assigns) do
    ~H"""
      <.button>Click me</.button>
    """
  end

end