Client-driven interactive widgets for Livebook.

Kino is the library used by Livebook to render rich and interactive outputs directly from your Elixir code.

Built-in widgets

Kino renders any data structure that implements the Kino.Render protocol, falling back to the Kernel.inspect/2 representation whenever an implementation is not available. The data structures supported by Kino out of the box are:

VegaLite

VegaLite specifications are rendered as visualizations:

Vl.new(...)
|> Vl.data_from_series(...)
|> ...

Kino.VegaLite

Kino.VegaLite is an extension of VegaLite that allows data to be streamed:

widget =
  Vl.new(...)
  |> Vl.data_from_series(...)
  |> ...
  |> Kino.VegaLite.new()
  |> Kino.render()

Kino.VegaLite.push(widget, %{x: 1, y: 2})

Kino.ETS

Kino.ETS implements a data table output for ETS tables in the system:

tid = :ets.new(:users, [:set, :public])
Kino.ETS.new(tid)

Kino.DataTable

Kino.DataTable implements a data table output for user-provided tabular data:

data = [
  %{id: 1, name: "Elixir", website: "https://elixir-lang.org"},
  %{id: 2, name: "Erlang", website: "https://www.erlang.org"}
]

Kino.DataTable.new(data)

Kino.Image

Kino.Image wraps binary image content and can be used to render raw images of any given format:

content = File.read!("/path/to/image.jpeg")
Kino.Image.new(content, "image/jpeg")

Kino.Markdown

Kino.Markdown wraps Markdown content for richer text rendering.

Kino.Markdown.new("""
# Example

A regular Markdown file.

## Code

```elixir
"Elixir" |> String.graphemes() |> Enum.frequencies()
```

## Table

| ID | Name   | Website                 |
| -- | ------ | ----------------------- |
| 1  | Elixir | https://elixir-lang.org |
| 2  | Erlang | https://www.erlang.org  |
""")

Kino.Ecto

Kino.Ecto implements a data table output for arbitrary Ecto queries:

Kino.Ecto.new(Weather, Repo)

Kino.Frame

Kino.Frame is a placeholder for static outputs that can be dynamically updated.

widget = Kino.Frame.new() |> Kino.render()

for i <- 1..100 do
  Kino.Frame.render(widget, i)
  Process.sleep(50)
end

Also see Kino.animate/3.

User interactions

Kino.Input and Kino.Control provide a set of widgets for entering data and capturing user events. See the respective module documentation for examples.

All others

All other data structures are rendered as text using Elixir's Kernel.inspect/2.

Custom widgets

Kino makes it possible to define custom JavaScript powered widgets, see Kino.JS and Kino.JS.Live for more details.