Client-driven interactive widgets for Livebook.

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

Kino renders any data structure that implements the Kino.Render protocol, falling back to the 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 outptus 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 inspect/2.