Livebook: thoughts on Kino Components

This project is an example of how to integrate a javascript based conponent into Livebook.

I had found myself writing an increasing amount of embedded javascript code in this project, which became harder to maintain. By extracting the javascript as an asset it becomes independently testable.

This does mean that I have an Elixir based tool that has more Javascript than Elixir.

This technique allows a livebook component to be implemented only requiring the following elixir code:

defmodule KinoWardley.Output do
use Kino.JS, assets_path: "lib/assets/js"

# docs here...

def new(spec) do, spec)

It also requires the following package function (called as part of project in mix.exs)

defp package do
name: "kino_wardley",
description: "A livebook smartcell that includes a Wardley Map.",
files: ~w(lib lib/assets/js .formatter.exs mix.exs README* LICENSE*,
licenses: ["MIT"],
links: %{"GitHub" => ""}

This is all it takes to wrap the javascript component.

It does require a main.js file in the lib/assets/js folder. Here is the minimal version:

export function init(ctx, spec) {

// Use ctx to do something interesting with the spec
// ctx.root.innerHTML = spec
// console.log(spec)

The spec is the same value as passed to the new.

Hopefully this will make implementing Javascript components in liveview easier. Please keep to minimal dependencies to make your life easier.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s