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.

  import KinoLiveComponent.Plug, only: [allow_insecure_connection: 2]

  if Mix.env() == :dev do
    scope "/kino-live-component", KinoLiveComponent do
      pipe_through([:allow_insecure_connection])

      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

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

defmodule MyLiveComponent do
  use Phoenix.LiveComponent

  def render(assigns) do
    ~H"""
    <div class="p-3 bg-blue-200 text-black">
      <%= @content %>
    </div>
    """
  end
end

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

KinoLiveComponent.component(MyLiveComponent, assigns)

Demo

You can see KinoLiveComponent in action by cloning this repo and running the app:

%> git clone [email protected]:anthonyshull/kino_live_component.git
%> cd kino_live_component
%> mix deps.get
%> iex --sname kino-live-component --cookie foobarbaz -S mix phx.server

Connect to Livebook, then in a Livebook cell:

Kino.start_child(KinoLiveComponent.Endpoint)

Write a function or live component (examples above). It will be rendered with the default Tailwind being imported in this app.