Examples

Setup

Mix.install([
  {:kino, "~> 0.5.1"},
  {:kino_lab, "~> 0.1.0-dev", github: "jonatanklosko/kino_lab"}
])

Kino.YouTube

To embed a YouTube video, provide the YouTube URL in the format https://www.youtube.com/watch?v={id} or https://youtu.be/{id}.

Kino.YouTube.new("https://www.youtube.com/watch?v=2OHFgjuy3DI")

Kino.Kroki

Kroki exposes a unified API for rendering various diagram types. Let’s see some examples!

Kino.Kroki.nwdiag("""
nwdiag {
  network dmz {
    address = "210.x.x.x/24"

    web01 [address = "210.x.x.1"];
    web02 [address = "210.x.x.2"];
  }
  network internal {
    address = "172.x.x.x/24";

    web01 [address = "172.x.x.1"];
    web02 [address = "172.x.x.2"];
    db01;
    db02;
  }
}
""")

Kino.Kroki.svgbob(~S"""
                         .--->  F
A       B      C  D     /
*-------*-----*---*----*----->  E
         \            ^ \
          v          /   '--->  G
           B --> C -'
""")

Kino.Kroki.packetdiag("""
packetdiag {
  colwidth = 32;
  node_height = 72;

  0-15: Source Port;
  16-31: Destination Port;
  32-63: Sequence Number;
  64-95: Acknowledgment Number;
  96-99: Data Offset;
  100-105: Reserved;
  106: URG [rotate = 270];
  107: ACK [rotate = 270];
  108: PSH [rotate = 270];
  109: RST [rotate = 270];
  110: SYN [rotate = 270];
  111: FIN [rotate = 270];
  112-127: Window;
  128-143: Checksum;
  144-159: Urgent Pointer;
  160-191: (Options and Padding);
  192-223: data [colheight = 3];
}
""")

Visit the Kroki website for more examples.

> Tip: Livebook supports Mermaid diagrams directly in Markdown via mermaid > code snippets.

Kino.CameraProcessor

This kino accesses the web camera, streams frames to the server to process them with your Elixir code, then renders it back into the page. It supports multiple users as well!

Kino.CameraProcessor.new(fn binary ->
  binary
  # |> magic()
end)

Now we can bring in our favourite image processing library and do the magic.