KinoLiveComponent

This kino allows you to render fully-styled Phoenix function and live components in Livebook.

Installation

def deps do
  [
    {:kino_live_component, ">= 0.0.0", only: :dev}
  ]
end

Usage

In order to use KinoLiveComponent, you must add an endpoint to your router.

We'll be working to make this more ergonomic in the next release.

  if Mix.env() == :dev do
    pipeline :allow_insecure_headers do
      plug(:accepts, ["html"])
      plug(:fetch_session)
      plug(:protect_from_forgery)
      plug(:put_insecure_headers)
    end

    defp put_insecure_headers(conn, _) do
      conn
      |> put_resp_header("access-control-allow-origin", "*")
      |> put_resp_header("content-security-policy", "frame-ancestors *;")
    end

    scope "/kino-live-component", KinoLiveComponent do
      pipe_through([:allow_insecure_headers])

      live("/", Live.Index)
    end
  end

If you use a non-standard asset pipeline or port number or your app.js is bonkers, you might need to set config values or compile separate assets:

config :kino_live_component,
  css_path: "http://localhost:9999/app.css", # default: http://localhost:4000/assets/app.css
  endpoint: "http://localhost:9999/kino-live-component", # default http://localhost:4000/kino-live-component
  js_path: "http://localhost:9999/app.js" # default http://localhost:4000/assets/app.js

Then, connect your Livebook to your running application.

Function components

To create a function component in Livebook:

import Phoenix.Component, only: [sigil_H: 2]

assigns = %{
  content: "I am a function component being rendered in a Phoenix application."
}

~H"""
<div class="p-3 bg-orange-500 text-white">
  <%= @content %>
</div>
""" |> KinoLiveComponent.component()

Live components

map_config = Application.get_env(:mbta_metro, :map)

assigns = %{
  class: "h-96 w-full",
  config: map_config
}

KinoLiveComponent.component(MbtaMetro.Live.Map, assigns)