### Visualizing Application Trees with Kino.Process.app_tree in Elixir

Source: https://context7_llms

This set of examples shows how to visualize Elixir application trees using `Kino.Process.app_tree`. It starts by showing how to list running applications, then demonstrates rendering a specific application's tree, and finally how to customize the rendering direction.

```Elixir
:application_controller.which_applications()
```

```Elixir
Kino.Process.app_tree(:logger)
```

```Elixir
Kino.Process.app_tree(:logger, direction: :left_right)
```

--------------------------------

### Setting up Supervisors for Kino.Process.sup_tree - Elixir

Source: https://context7_llms

This snippet initializes a `Supervisor` and a `DynamicSupervisor` with a one-for-one strategy. It then starts three child `Agent` processes under the `DynamicSupervisor` to create a sample supervision tree for visualization.

```Elixir
{:ok, supervisor_pid} =
      Supervisor.start_link(
        [
          {DynamicSupervisor, strategy: :one_for_one, name: MyApp.DynamicSupervisor},
          {Agent, fn -> [] end}
        ],
        strategy: :one_for_one,
        name: MyApp.Supervisor
      )

    Enum.each(1..3, fn _ ->
      DynamicSupervisor.start_child(MyApp.DynamicSupervisor, {Agent, fn -> %{} end})
    end)
```

--------------------------------

### Starting a Smart Cell and Retrieving Kino and Source in Elixir

Source: https://context7_llms

This function starts a smart cell defined by a given module (`Kino.SmartCell.Custom`) with initial attributes (`%{"key" => "value"}`). It returns the `Kino.JS.Live` kino instance and the initial source code, enabling interaction and testing.

```Elixir
{kino, source} = start_smart_cell!(Kino.SmartCell.Custom, %{"key" => "value"})
```

--------------------------------

### Creating Select Inputs with Kino.Input.select/3 in Elixir

Source: https://context7_llms

These examples illustrate how to create a new select input using `Kino.Input.select/3`. The first example uses a keyword list for options, while the second uses a list of tuples, demonstrating flexibility in defining value-label pairs.

```Elixir
Kino.Input.select("Language", [en: "English", fr: "Français"])
```

```Elixir
Kino.Input.select("Language", [{1, "One"}, {2, "Two"}, {3, "Three"}])
```

--------------------------------

### Rendering an Autoplaying, Looping Video with Kino.Video in Elixir

Source: https://context7_llms

This example expands on basic video rendering by demonstrating how to use options like `autoplay: true` and `loop: true` with `Kino.Video.new/3`. It reads the video content and then configures the video to start playing automatically and loop continuously once rendered.

```Elixir
content = File.read!("/path/to/video.mp4")
Kino.Video.new(content, :mp4, autoplay: true, loop: true)
```

--------------------------------

### Creating Audio Kino - Kino.Audio.new/3 (Elixir)

Source: https://context7_llms

Demonstrates how to create a new Kino for displaying binary audio using Kino.Audio.new/3. The first example shows basic audio rendering, while the second includes autoplay and loop options.

```Elixir
content = File.read!("/path/to/audio.wav")
    Kino.Audio.new(content, :wav)
```

```Elixir
content = File.read!("/path/to/audio.wav")
    Kino.Audio.new(content, :wav, autoplay: true, loop: true)
```

--------------------------------

### Rendering Supervision Tree by PID with Kino.Process.sup_tree - Elixir

Source: https://context7_llms

This example demonstrates how to render a supervision tree using `Kino.Process.sup_tree/1` by passing the process ID (PID) of the supervisor. This visualizes the hierarchy of supervised processes.

```Elixir
Kino.Process.sup_tree(supervisor_pid)
```

--------------------------------

### Creating a Data Table with Specific Keys - Kino.DataTable - Elixir

Source: https://context7_llms

This example shows how to create a `Kino.DataTable` from process information, explicitly selecting and ordering specific keys (`:registered_name`, `:initial_call`, `:reductions`, `:stack_size`) to be displayed in the table.

```Elixir
data =
      for pid <- Process.list() do
        pid |> Process.info() |> Keyword.merge(registered_name: nil)
      end

    Kino.DataTable.new(
      data,
      keys: [:registered_name, :initial_call, :reductions, :stack_size]
    )
```

--------------------------------

### Creating a Basic Text Download Button - Kino.Download - Elixir

Source: https://context7_llms

This example creates a download button using `Kino.Download.new/1` that, when clicked, generates and downloads a simple text string. The content is produced by the provided anonymous function.

```Elixir
Kino.Download.new(fn ->
      "Example text"
    end)
```

--------------------------------

### Creating a Binary File Download Button - Kino.Download - Elixir

Source: https://context7_llms

This example shows how to create a download button for binary data. It specifies a `filename` of 'data.bin' and customizes the button's display text using the `label` option.

```Elixir
Kino.Download.new(
      fn -> <<0, 1>> end,
      filename: "data.bin",
      label: "Binary data"
    )
```

--------------------------------

### Using a Custom Module Plug with Kino.Proxy.listen - Elixir

Source: https://context7_llms

This example demonstrates how to register a custom module plug, `MyPlug`, with `Kino.Proxy.listen/1`. The module implements the `init/1` and `call/2` functions required by Plug, sending a simple 'hello world!' response for all requests.

```Elixir
defmodule MyPlug do
      def init([]), do: false
    
      def call(conn, _opts) do
        Plug.Conn.send_resp(conn, 200, "hello world!")
      end
    end

    Kino.Proxy.listen(MyPlug)
```

--------------------------------

### Configuring Livebook Bridge for Kino Tests (Elixir)

Source: https://context7_llms

This snippet shows the necessary setup for testing custom `Kino` components, specifically `Kino.JS.Live` kinos, by mimicking Livebook's communication. It imports `Kino.Test` and configures the `livebook_bridge` in a test module's setup. This allows `Kino.JS.Live` interactions to be simulated during tests.

```Elixir
import Kino.Test

setup :configure_livebook_bridge
```

--------------------------------

### Tracing All Process Messages with Kino.Process.seq_trace - Elixir

Source: https://context7_llms

This example demonstrates how to use Kino.Process.seq_trace/3 to generate a sequence diagram of all messages occurring during the execution of a provided function. It starts an Agent, monitors it, performs asynchronous tasks that interact with the agent, and then stops the agent, capturing all process communications in the trace. The function takes a 0-arity function as its first argument.

```Elixir
Kino.Process.seq_trace(fn ->
  {:ok, agent_pid} = Agent.start_link(fn -> [] end)
  Process.monitor(agent_pid)

  1..2
  |> Task.async_stream(
    fn value ->
      Agent.get(agent_pid, fn value -> value end)
      100 * value
    end,
    max_concurrency: 3
  )
  |> Stream.run()

  Agent.stop(agent_pid)
end)
```

--------------------------------

### Implementing a Multi-Step Wizard with Kino.Screen in Elixir

Source: https://context7_llms

This comprehensive example demonstrates how to build a multi-step wizard using the `Kino.Screen` behaviour in Elixir. It covers state management, rendering different pages based on state, handling form submissions, input validation, and navigation between steps, including a shared layout for all pages.

```Elixir
defmodule MyScreen do
      @behaviour Kino.Screen

      # Import Kino.Control for forms, Kino.Input for inputs, and Screen for control/2
      import Kino.{Control, Input, Screen}

      # Our screen will guide the user to provide its name and address.
      # We also have a field keeping the current page and if there is an error.
      def new do
        state = %{page: 1, name: nil, address: nil, error: nil}
        Kino.Screen.new(__MODULE__, state)
      end

      # The first screen gets the name.
      #
      # The `control/2` function comes from `Kino.Screen` and it specifies
      # which function to be invoked on form submission.
      def render(%{page: 1} = state) do
        form(
          [name: text("Name", default: state.name)],
          submit: "Step one"
        )
        |> control(&step_one/2)
        |> add_layout(state)
      end

      # The next screen gets the address.
      def render(%{page: 2} = state) do
        form(
          [address: text("Address", default: state.address)],
          submit: "Step two"
        )
        |> control(&step_two/2)
        |> add_layout(state)
      end

      # The final screen shows a success message.
      def render(%{page: 3} = state) do
        Kino.Text.new("Well done, #{state.name}. You live in #{state.address}.")
        |> add_layout(state)
      end

      # This is the layout shared across all pages.
      defp add_layout(element, state) do
        prefix = if state.error do
          Kino.Text.new("Error: #{state.error}!")
        end

        suffix = if state.page > 1 do
          button("Go back")
          |> control(&go_back/2)
        end

        [prefix, element, suffix]
        |> Enum.reject(&is_nil/1)
        |> Kino.Layout.grid()
      end

defp step_one(%{data: %{name: name}}, state) do
        if name == "" do
          %{state | name: name, error: "name can't be blank"}
        else
          %{state | name: name, error: nil, page: 2}
        end
      end

      defp step_two(%{data: %{address: address}}, state) do
        if address == "" do
          %{state | address: address, error: "address can't be blank"}
        else
          %{state | address: address, error: nil, page: 3}
        end
      end

      defp go_back(_, state) do
        %{state | page: state.page - 1}
      end
    end

    MyScreen.new()
```

--------------------------------

### Rendering Supervision Tree by Name with Kino.Process.sup_tree - Elixir

Source: https://context7_llms

This snippet shows how to render a supervision tree using `Kino.Process.sup_tree/1` by providing the registered name of the supervisor. This is useful when the supervisor has been started with a global name.

```Elixir
Kino.Process.sup_tree(MyApp.Supervisor)
```

--------------------------------

### Rendering Static HTML with Kino.Shorts (Elixir)

Source: https://context7_llms

This example demonstrates how to display arbitrary static HTML content directly within a Kino notebook using `Kino.Shorts.html/1`. It takes a multi-line HTML string as input and renders it as-is.

```Elixir
html("""
     Look! 

     I wrote this HTML from  Kino ! 
    "\"")
```

--------------------------------

### Listening to Kino.Control Events with Kino.listen/2 in Elixir

Source: https://context7_llms

This example shows how `Kino.listen/2` can be used to consume events from a `Kino.Control` component, specifically a button. It starts a process that inspects each event triggered by the "Greet" button without blocking the main execution.

```Elixir
Kino.Control.button("Greet")
|> Kino.listen(fn event -> IO.inspect(event) end)
```

--------------------------------

### Connecting to Kino.JS.Live and Asserting Initial Data in Elixir

Source: https://context7_llms

This function connects to a `Kino.JS.Live` kino and returns its initial data. The example demonstrates asserting that the returned data matches an expected map (`%{count: 1}`).

```Elixir
data = connect(kino)
    assert data == %{count: 1}
```

--------------------------------

### Inspecting Process Information with Kino.Tree in Elixir

Source: https://context7_llms

This example showcases `Kino.Tree.new/1` for inspecting the detailed information of the current Elixir process. `Process.info(self())` retrieves a map containing various process attributes, which `Kino.Tree` then renders as an interactive tree, making it easy to explore.

```Elixir
data = Process.info(self())
Kino.Tree.new(data)
```

--------------------------------

### Viewing an Existing ETS Table - Kino.ETS - Elixir

Source: https://context7_llms

This example shows how to display an existing ETS table, specifically `:elixir_config`, using `Kino.ETS.new/1`. This is useful for inspecting the contents of running ETS tables.

```Elixir
Kino.ETS.new(:elixir_config)
```

--------------------------------

### Rendering Markdown Content with Kino.Shorts (Elixir)

Source: https://context7_llms

This example shows how to render multi-line Markdown content, including headings, paragraphs, and tables, using `Kino.Shorts.markdown/1`. It allows for richer text formatting within the Kino output.

```Elixir
markdown("""
    # Example

    A regular Markdown file.

### Code - Kino.Shorts.markdown/1 (function)

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

### Table - Kino.Shorts.markdown/1 (function)

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

--------------------------------

### Building a Data Export API with Kino.Proxy.listen - Elixir

Source: https://context7_llms

This example shows how to create a data export API endpoint using `Kino.Proxy.listen/1`. It checks the `path_info` to serve 'some data' as a CSV for `/export/data` and a default message for other paths, demonstrating conditional request handling.

```Elixir
Kino.Proxy.listen(fn
      %{path_info: ["export", "data"]} = conn ->
        data = "some data"

        conn
        |> Plug.Conn.put_resp_header("content-type", "application/csv")
        |> Plug.Conn.send_resp(200, data)

      conn ->
        conn
        |> Plug.Conn.put_resp_header("content-type", "application/text")
        |> Plug.Conn.send_resp(200, "use /export/data to get extract the report data")
    end)
```

--------------------------------

### Custom Labeling Process Messages with Kino.Process.seq_trace - Elixir

Source: https://context7_llms

This example demonstrates how to apply custom labels to messages within the sequence diagram using the :message_label option in Kino.Process.seq_trace/3. It traces interactions with an Agent and provides a function that inspects message content to assign a custom label "GET: value" for specific :get calls, otherwise using the default label. This allows for more descriptive diagrams.

```Elixir
{:ok, agent_pid} = Agent.start_link(fn -> [] end)
Process.monitor(agent_pid)

Kino.Process.seq_trace(agent_pid, fn ->
  1..2
  |> Task.async_stream(
    fn value ->
      Agent.get(agent_pid, fn value -> value end)
      100 * value
    end,
    max_concurrency: 3
  )
  |> Stream.run()

  Agent.stop(agent_pid)
end,
message_label: fn(msg) ->
  case msg do
    {:":$gen_call", _ref, {:get, _}} -> {:ok, "GET: value"}
    _ -> :continue
  end
end)
```

--------------------------------

### Listening to Generic Streams with Kino.listen/2 in Elixir

Source: https://context7_llms

This example illustrates `Kino.listen/2` consuming events from a generic Elixir `Stream`. It creates a stream that emits values every 100 milliseconds, takes the first 10 values, and then uses `Kino.listen/2` to print a "Ping" message for each received value.

```Elixir
Stream.interval(100)
|> Stream.take(10)
|> Kino.listen(fn i -> IO.puts("Ping #{i}") end)
```

--------------------------------

### Handling Multiple Endpoints with Plug.Router and Kino.Proxy.listen - Elixir

Source: https://context7_llms

This snippet shows how to integrate `Plug.Router` with `Kino.Proxy.listen/1` to define multiple API endpoints. It uses `get` macros to handle `/hello` and `/echo/:message` paths, demonstrating routing capabilities within a Livebook app.

```Elixir
defmodule ApiRouter do
      use Plug.Router
    
      plug :match
      plug :dispatch
    
      get "/hello" do
        send_resp(conn, 200, "hello from router")
      end
    
      get "/echo/:message" do
        send_resp(conn, 200, String.upcase(message))
      end
    
      match _ do
        send_resp(conn, 404, "oops, not found")
      end
    end
    
    Kino.Proxy.listen(ApiRouter)
```

--------------------------------

### Creating Download Buttons with Kino.Shorts.download/2 in Elixir

Source: https://context7_llms

This snippet provides multiple examples of using `Kino.Shorts.download/2` to create interactive download buttons. It shows how to generate file content dynamically, specify filenames, and customize button labels for various data types like plain text, JSON, and binary data.

```Elixir
download(fn ->
      "Example text"
    end)

    download(
      fn -> Jason.encode!(%{"foo" => "bar"}) end,
      filename: "data.json"
    )

    download(
      fn -> <<0, 1>> end,
      filename: "data.bin",
      label: "Binary data"
    )
```

--------------------------------

### Streaming Markdown Chunks with Kino.Frame in Elixir

Source: https://context7_llms

This example illustrates streaming Markdown content in chunks using Kino.Markdown.new/2 with the :chunk option and Kino.Frame. Each word is rendered as a separate chunk and appended to a Kino.Frame, simulating a real-time display.

```Elixir
frame = Kino.Frame.new() |> Kino.render()

    for word <- ["who", " *let*", " `the`", " **dogs**", " out"] do
      text = Kino.Markdown.new(word, chunk: true)
      Kino.Frame.append(frame, text)
      Process.sleep(250)
    end
```

--------------------------------

### Rendering Mermaid Diagram with Kino.Mermaid in Elixir

Source: https://context7_llms

This example demonstrates how to render a Mermaid diagram using Kino.Mermaid.new/1. It takes a Mermaid diagram definition string as input and displays it as a visual graph.

```Elixir
Kino.Mermaid.new("""
    graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
    """)
```

--------------------------------

### Updating a Dynamic Frame in Kino.Shorts (Elixir)

Source: https://context7_llms

This example demonstrates how to create a dynamic frame using `Kino.Shorts.frame/1` and then update its content iteratively using `Kino.Frame.render/2`. It simulates a simple animation by rendering numbers from 1 to 100 with a short delay between updates.

```Elixir
frame = frame() |> Kino.render()

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

--------------------------------

### Arranging Images in a Grid with Kino.Layout.grid in Elixir

Source: https://context7_llms

This example shows how to create a grid layout of multiple images using Kino.Layout.grid/2. It first iterates through a list of paths to read and create Kino.Image instances, then arranges them into a grid with 3 columns.

```Elixir
images =
      for path <- paths do
        path |> File.read!() |> Kino.Image.new(:jpeg)
      end

    Kino.Layout.grid(images, columns: 3)
```

--------------------------------

### Shorthand Animation with Kino.animate/2 (Elixir)

Source: https://context7_llms

This example shows a shorthand usage of Kino.animate/2 where an integer (e.g., 100ms) is directly passed as the first argument, implicitly creating an interval stream. The callback function then renders a new Markdown frame every specified interval, displaying the current iteration count.

```Elixir
# Render new Markdown every 100ms
Kino.animate(100, fn i ->
  Kino.Markdown.new("**Iteration: `#{i}`**")
end)
```

--------------------------------

### Rendering Markdown Content with Kino.Markdown in Elixir

Source: https://context7_llms

This example shows how to render multi-line Markdown content, including headings, code blocks, and tables, using Kino.Markdown.new/1. The entire Markdown string is passed as an argument to the function.

```Elixir
Kino.Markdown.new("""
    # Example

    A regular Markdown file.

### Code - Kino.Markdown (module)

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

### Table - Kino.Markdown (module)

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

--------------------------------

### Rendering Supervision Tree with Custom Direction using Kino.Process.sup_tree - Elixir

Source: https://context7_llms

This example illustrates how to customize the rendering direction of the supervision tree using `Kino.Process.sup_tree/2` by passing the `:direction` option, such as `:left_right`, to change the layout of the visualization.

```Elixir
Kino.Process.sup_tree(MyApp.Supervisor, direction: :left_right)
```

--------------------------------

### Asynchronous Event Handler Registration with Async/Await in JavaScript

Source: https://context7_llms

This JavaScript `init` function shows an alternative way to register an event handler asynchronously using `async/await`. Similar to the `fetch.then` approach, events are buffered until the handler is registered, allowing for setup operations before event processing begins.

```JavaScript
export async function init(ctx, data) {
  const response = await fetch(data.someUrl);

  ctx.handleEvent("update", (payload) => {
    // ...
  });
}
```

--------------------------------

### Reading Select Input - Kino.Shorts.read_select/3 (Elixir)

Source: https://context7_llms

Demonstrates how to use Kino.Shorts.read_select/3 to render a select input. The first example uses atom keys with string labels, while the second uses integer values with string labels. This function expects a list of {value, label} tuples.

```Elixir
read_select("Language", [en: "English", fr: "Français"])
```

```Elixir
read_select("Language", [{1, "One"}, {2, "Two"}, {3, "Three"}])
```

--------------------------------

### Stateful Event Listening with Kino.listen/3 in Elixir

Source: https://context7_llms

This example demonstrates the stateful `Kino.listen/3` function. It initializes a counter to 0 and increments it each time a button is clicked, printing the updated count. The callback returns `{:cont, new_counter}` to continue listening with the updated state.

```Elixir
button = Kino.Control.button("Click")

    Kino.listen(button, 0, fn _event, counter ->
      new_counter = counter + 1
      IO.puts("Clicks: #{new_counter}")
      {:cont, new_counter}
    end)
```

--------------------------------

### Displaying Tabular Data with Kino.Shorts.data_table/2 in Elixir

Source: https://context7_llms

This example demonstrates how to render tabular data using `Kino.Shorts.data_table/2`. It takes a list of maps, where each map represents a row, and displays it as an interactive data table, simplifying the visualization of structured information.

```Elixir
import Kino.Shorts

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

    data_table(data)
```

--------------------------------

### Handling Asynchronous File Form Submissions with Kino.Control.form - Elixir

Source: https://context7_llms

This example illustrates how to create a form with a file input and process its asynchronous submissions. It sets up a form with a file upload and a submit button, then listens for form submission events to extract the uploaded file's path and inspect its content.

```Elixir
form = Kino.Control.form([file: Kino.Input.file("File")], submit: "Send")
```

```Elixir
form
|> Kino.Control.stream()
|> Kino.listen(fn event ->
  path = Kino.Input.file_path(event.data.file.file_ref)
  content = File.read!(path)
  IO.inspect(content)
end)
```

--------------------------------

### Broadcasting Events to All Clients in Kino.JS.Live (Elixir)

Source: https://context7_llms

This example illustrates broadcasting an event to all connected clients using `Kino.JS.Live.Context.broadcast_event/3`. The event, identified by a string name (e.g., 'new_point') and a map of data, will be dispatched to the registered JavaScript callback on every client. This is ideal for real-time updates affecting all users.

```Elixir
broadcast_event(ctx, "new_point", %{x: 10, y: 10})
```

--------------------------------

### Rendering Custom Structs with Tabs in Livebook (Elixir)

Source: https://context7_llms

This example shows how to render a custom `Graph` struct using tabs, combining a visual Mermaid representation with the default inspect output. It creates a `Kino.Mermaid` instance for the graph and a `Kino.Inspect` instance for the raw data, then uses `Kino.Layout.tabs` to present them side-by-side. This provides both a visual and a detailed textual view of the data.

```Elixir
defimpl Kino.Render, for: Graph do
  def to_livebook(graph) do
    source = Graph.to_mermaid(graph)
    mermaid_kino = Kino.Mermaid.new(source)
    inspect_kino = Kino.Inspect.new(graph)
    kino = Kino.Layout.tabs(Graph: mermaid_kino, Raw: inspect_kino)
    Kino.Render.to_livebook(kino)
  end
end
```

--------------------------------

### Rendering HTML with Embedded JavaScript - Kino.HTML - Elixir

Source: https://context7_llms

This example shows how to render HTML content that includes an embedded <script> tag. The JavaScript within the script block is executed globally, allowing for interactive elements like a button click handler.

```Elixir
Kino.HTML.new("""
     Click 

     
      const button = document.querySelector("#button");

      button.addEventListener("click", (event) => {
        button.textContent = "Clicked!"
      });
     
    """)
```

--------------------------------

### Merging and Consuming Event Streams with Kino.Control.stream in Elixir

Source: https://context7_llms

This example illustrates how to merge multiple input sources (button, checkbox, interval) into a single event stream using Kino.Control.stream/1. The merged stream is then consumed and inspected using Kino.listen/2 to process events from various controls.

```Elixir
button = Kino.Control.button("Hello")
input = Kino.Input.checkbox("Check")
interval = Kino.Control.interval(1000)

[button, input, interval]
|> Kino.Control.stream()
|> Kino.listen(fn event ->
  IO.inspect(event)
end)
```

--------------------------------

### Assigning Key-Value Pairs in Kino.JS.Live.Context (Elixir)

Source: https://context7_llms

This example demonstrates how to use `Kino.JS.Live.Context.assign/2` to store multiple key-value pairs in the server's state. It takes the current context and a keyword list of assignments, returning an updated context. This is useful for maintaining custom state across callback invocations.

```Elixir
assign(ctx, count: 1, timestamp: DateTime.utc_now())
```

--------------------------------

### Asserting Kino.JS.Live Broadcast Event (Elixir)

Source: https://context7_llms

This example demonstrates how to use `assert_broadcast_event` to verify that a `Kino.JS.Live` kino broadcasts a specific event within a timeout. It checks if the `kino` broadcasts an event named 'bump' with a payload of `%{by: 2}`. This is crucial for testing interactive `Kino` components.

```Elixir
assert_broadcast_event(kino, "bump", %{by: 2})
```

--------------------------------

### Implementing a Plain Code Editor Kino.SmartCell

Source: https://context7_llms

This comprehensive example defines `KinoDocs.SmartCell.Plain`, a custom smart cell that functions as a plain code editor. It includes the Elixir backend logic for handling source updates and mapping to attributes, along with embedded JavaScript for client-side UI interaction and CSS for styling the textarea. It demonstrates the full lifecycle of a smart cell, from initialization to event handling and synchronization.

```Elixir
defmodule KinoDocs.SmartCell.Plain do
  use Kino.JS
  use Kino.JS.Live
  use Kino.SmartCell, name: "Plain code editor"

  @impl true
  def init(attrs, ctx) do
    source = attrs
```

--------------------------------

### Asserting Kino Output to Specific Client (Elixir)

Source: https://context7_llms

This example shows how to use `assert_output_to` to verify that a `Kino` component sends a specific output directly to a named client within a timeout. It checks if the output `{:markdown, "_hey_"}` is sent to 'client1'. This is important for testing multi-client or targeted output scenarios.

```Elixir
assert_output_to("client1", {:markdown, "_hey_"})
```

--------------------------------

### Filtering Process Messages by PID with Kino.Process.seq_trace - Elixir

Source: https://context7_llms

This example illustrates how to filter the sequence diagram to show only messages sent to or received by specific PIDs using Kino.Process.seq_trace/3. It initializes an Agent and then traces only the interactions involving that agent_pid during the execution of the provided function. The agent_pid is passed as the first argument to seq_trace.

```Elixir
{:ok, agent_pid} = Agent.start_link(fn -> [] end)
Process.monitor(agent_pid)

Kino.Process.seq_trace(agent_pid, fn ->
  1..2
  |> Task.async_stream(
    fn value ->
      Agent.get(agent_pid, fn value -> value end)
      100 * value
    end,
    max_concurrency: 3
  )
  |> Stream.run()

  Agent.stop(agent_pid)
end)
```

--------------------------------

### Dynamically Updating a Kino Frame in Elixir

Source: https://context7_llms

This example shows two ways to dynamically update a Kino.Frame. The first method uses a for loop to sequentially render updates with a delay. The second method demonstrates updating the frame using Kino.listen/2 with a scheduled task, allowing for background updates of the rendered content.

```Elixir
frame = Kino.Frame.new() |> Kino.render()

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

```Elixir
frame = Kino.Frame.new() |> Kino.render()

Kino.listen(50, fn i ->
  Kino.Frame.render(frame, i)
end)
```

--------------------------------

### Rendering ANSI Formatted Text as Terminal Output in Elixir

Source: https://context7_llms

This example shows how to render text with ANSI escape codes, simulating terminal output. It formats a list with a color atom and string into a binary using `IO.ANSI.format()` and `IO.iodata_to_binary()`, then passes it to `Kino.Text.new/2` with the `terminal: true` option. This is useful for displaying logs or console-like output.

```Elixir
[:green, "Hello!"]
|> IO.ANSI.format()
|> IO.iodata_to_binary()
|> Kino.Text.new(terminal: true)
```

--------------------------------

### Emitting Events for Subscribed Processes in Kino.JS.Live (Elixir)

Source: https://context7_llms

This example shows how to emit an event from a `Kino.JS.Live` instance using `Kino.JS.Live.Context.emit_event/2`. The event, represented by a map, can be consumed by other Elixir processes subscribed via `Kino.Control` functions like `Kino.Control.stream/1`. This enables inter-process communication within the Elixir application based on Kino events.

```Elixir
emit_event(ctx, %{event: :click, counter: 1})
```

--------------------------------

### Sending Events to a Specific Client in Kino.JS.Live (Elixir)

Source: https://context7_llms

This example demonstrates sending an event to a single, specific client using `Kino.JS.Live.Context.send_event/4`. It requires the context, the client's `origin` identifier, an event name, and event data. This function is useful for targeted updates or responses to individual client actions, ensuring only the relevant client receives the message.

```Elixir
send_event(ctx, origin, "new_point", %{x: 10, y: 10})
```

--------------------------------

### Updating State with a Function in Kino.JS.Live.Context (Elixir)

Source: https://context7_llms

This example illustrates how to update an existing key in the `Kino.JS.Live.Context` state using `Kino.JS.Live.Context.update/3`. It takes the context, the key to update, and an anonymous function that receives the current value of the key and returns the new value. This provides a functional way to modify state based on its current content.

```Elixir
update(ctx, :count, &(&1 + 1))
```

--------------------------------

### Styling Keyboard Event Test UI with CSS

Source: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

This CSS snippet provides basic styling for the HTML elements used in the keyboard event example. It uses flexbox for layout, sets padding for child divs, and defines specific widths and display properties for the textarea and other components to ensure a clean and functional user interface.

```CSS
.fx {
  -webkit-display: flex;
  display: flex;
  margin-left: -20px;
  margin-right: -20px;
}

.fx > div {
  padding-left: 20px;
  padding-right: 20px;
}

.fx > div:first-child {
  width: 30%;
}

.flex {
  -webkit-flex: 1;
  flex: 1;
}

#test-target {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
```

--------------------------------

### Initializing and Listening to Keyboard Events with Kino.Control.keyboard in Elixir

Source: https://context7_llms

This snippet demonstrates how to create a keyboard control widget, listen to its events using Kino.listen/2, and subscribe to events in a separate process using Kino.Control.subscribe/2. It covers handling keyup, keydown, and status events.

```Elixir
keyboard = Kino.Control.keyboard([:keyup, :keydown, :status])
```

```Elixir
Kino.listen(keyboard, fn event ->
  ...
end)
```

```Elixir
Kino.Control.subscribe(keyboard, :keyboard)
```

--------------------------------

### Handling Proxy Requests with Basic Function Plug using Kino.Proxy.listen - Elixir

Source: https://context7_llms

This snippet demonstrates how to register a simple function plug with `Kino.Proxy.listen/1`. The function receives a `Plug.Conn` and uses `Plug.Conn.send_resp` to send a basic 'hello' response, handling all incoming proxy requests.

```Elixir
Kino.Proxy.listen(fn conn ->
      Plug.Conn.send_resp(conn, 200, "hello")
    end
```

--------------------------------

### Rendering a Video with Kino.Video in Elixir

Source: https://context7_llms

This snippet demonstrates how to display a video using `Kino.Video.new/2`. It reads the binary content of an MP4 file from a specified path and then passes the content along with its type (`:mp4`) to the `Kino.Video.new` function. This creates a basic video player element.

```Elixir
content = File.read!("/path/to/video.mp4")
Kino.Video.new(content, :mp4)
```

--------------------------------

### Rendering an Image with Kino.Shorts (Elixir)

Source: https://context7_llms

This snippet illustrates how to render an image from its binary content using `Kino.Shorts.image/2`. It reads an image file from a specified path and then displays it, requiring both the image content and its MIME type.

```Elixir
content = File.read!("/path/to/image.jpeg")
    image(content, "image/jpeg")
```

--------------------------------

### Arranging Outputs into Tabs - Kino.Shorts.tabs/1 (Elixir)

Source: https://context7_llms

Illustrates how to use Kino.Shorts.tabs/1 to organize multiple outputs into a tabbed interface. It imports Kino.Shorts and defines sample data, then displays a table and raw data in separate tabs.

```Elixir
import Kino.Shorts

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

    tabs(Table: data_table(data), Raw: data)
```

--------------------------------

### Initializing Mermaid.js Component in Kino.JS

Source: https://context7_llms

This JavaScript code defines the 'init' entrypoint for a Kino.JS component that renders Mermaid graphs. It initializes the Mermaid library and uses 'mermaid.render' to convert a graph definition into SVG, which is then injected into the component's root element. It also binds event listeners if provided by Mermaid.

```javascript
import mermaid from "mermaid";

mermaid.initialize({ startOnLoad: false });

export function init(ctx, graph) {
  mermaid.render("graph1", graph, (svgSource, bindListeners) => {
    ctx.root.innerHTML = svgSource;
    bindListeners && bindListeners(ctx.root);
  });
}
```

--------------------------------

### Client-Side JavaScript for Custom Kino HTML Rendering

Source: https://context7_llms

This JavaScript function, `init(ctx, html)`, serves as the entry point for a custom `Kino.JS` component on the client side. It receives a context object (`ctx`) and data (`html`) from the Elixir backend. The function's purpose is to take the provided `html` string and directly set it as the inner HTML of the kino's root DOM element (`ctx.root`).

```JavaScript
export function init(ctx, html) {
  ctx.root.innerHTML = html;
}
```

--------------------------------

### Rendering Audio with Kino.Shorts.audio/2 in Elixir

Source: https://context7_llms

This snippet illustrates how to use `Kino.Shorts.audio/2` to render an audio file directly within a Kino notebook. It shows importing the `Kino.Shorts` module and reading the content of a WAV file to be displayed as an audio player.

```Elixir
import Kino.Shorts
    content = File.read!("/path/to/audio.wav")
    audio(content, :wav)
```

--------------------------------

### Managing UI State and Theme Preferences in JavaScript

Source: https://esbuild.github.io/

This snippet initializes UI modes and OS preferences from local storage, providing default values if none are found. It attaches event listeners for click events on 'switcher' elements to update mode and OS preferences, persisting them in local storage. Additionally, it implements scroll event handling to highlight navigation links based on the user's scroll position and manages theme switching, allowing users to toggle between light/dark themes and respecting system preferences.

```JavaScript
de3=localStorage.getItem("mode3")||"cli",l.mode2=localStorage.getItem("mode2")||"js",l.os2=localStorage.getItem("os2")||T,c.theme=localStorage.getItem("theme")}catch(t){l.mode3="cli",l.mode2="js",l.os2=T,c.theme=null}L.classList.add("has-js"),addEventListener("click",function(t){if(t.target.parentElement&&t.target.parentElement.className==="switcher"){var o=t.target.className;if(/^(cli|js|go)\[23\]$/.test(o)){for(var m=t.target.offsetTop-r.scrollTop,d=o==="cli3"?3:2;d<=3;d++)l["mode"+d]=o.slice(0,-1),localStorage.setItem("mode"+d,o.slice(0,-1));var h=t.target.offsetTop-r.scrollTop;r.scrollTop+=h-m}if(/^(unix|windows)2$/.test(o)){var m=t.target.offsetTop-r.scrollTop;l.os2=o.slice(0,-1),localStorage.setItem("os2",o.slice(0,-1));var h=t.target.offsetTop-r.scrollTop;r.scrollTop+=h-m}}}),addEventListener("DOMContentLoaded",function(){function t(){for(var a,u,g,n=0;n<v.length;n++){var e=v[n];if(e.getBoundingClientRect().top>10)break;e.tagName==="H2"?(a=e,u=g=null):e.tagName==="H3"?(u=e,g=null):g=e}for(var n=0;n<v.length;n++){var e=v[n];e.tagName!=="H4"&&i("nav-"+e.id).classList.toggle("current",e===(u||a))}var e=g||u||a;f=location.pathname+(e?"#"+e.id:""),p===null&&(p=setTimeout(o,300))}function o(){p=null,location.pathname+location.hash!==f&&history.replaceState(null,"",f)}var m=i("menutoggle"),d=i("shadow"),h=i("menu"),S=s.querySelector("nav");m.addEventListener("click",function(){h.scrollTop=0,S.classList.add("open")}),d.addEventListener("click",function(a){S.classList.remove("open")});var f,p=null,v=s.querySelectorAll("h2,h3,h4");addEventListener("scroll",t,{passive:!0}),addEventListener("load",t);function y(){return E.matches?"light":"dark"}function I(a){localStorage.setItem("theme",a),c.theme=a}addEventListener("storage",function(){c.theme=localStorage.getItem("theme")}),i("theme").addEventListener("click",function(){var a=y();I(c.theme===a?null:a)});var E=matchMedia("(prefers-color-scheme: dark)");function k(){c.theme!==y()&&I(null)}try{E.addEventListener("change",k)}catch(a){E.addListener(k)}})();
```

--------------------------------

### Creating a Basic Text Kino in Elixir

Source: https://context7_llms

This snippet demonstrates the simplest way to create a new text kino using `Kino.Text.new/1`. It takes a string as input and displays it as a text element. No specific dependencies beyond the `Kino` library are required.

```Elixir
Kino.Text.new("Hello!")
```

--------------------------------

### Registering a Custom Kino.SmartCell Module in Elixir

Source: https://context7_llms

This snippet shows how to register a custom smart cell module with Livebook using `Kino.SmartCell.register/1`. This step is crucial for Livebook to discover and make the custom cell available for use, and it is typically performed during application startup, for example, in `application.ex`.

```Elixir
Kino.SmartCell.register(KinoDocs.CustomCell)
```

--------------------------------

### Asynchronous Event Handler Registration with Fetch.then in JavaScript

Source: https://context7_llms

This JavaScript `init` function demonstrates registering an event handler asynchronously after a `fetch` operation completes. Incoming events are buffered until `ctx.handleEvent` is called, ensuring no events are missed even if the handler is not immediately available.

```JavaScript
export function init(ctx, data) {
  fetch(data.someUrl).then((resp) => {
    ctx.handleEvent("update", (payload) => {
      // ...
    });
  });
}
```

--------------------------------

### Listening with Integer Shorthand for Stream.interval/1 using Kino.listen/2 in Elixir

Source: https://context7_llms

This snippet shows a shorthand for `Kino.listen/2` where an integer is passed directly, which is equivalent to `Stream.interval/1`. It sets up a listener that prints "Ping" every 100 milliseconds, demonstrating a concise way to create periodic events.

```Elixir
Kino.listen(100, fn i -> IO.puts("Ping #{i}") end)
```

--------------------------------

### Creating a Basic Data Table - Kino.DataTable - Elixir

Source: https://context7_llms

This snippet demonstrates how to create a basic interactive data table using `Kino.DataTable.new/1` from a list of maps. It allows for quick preview and sorting of tabular data.

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

    Kino.DataTable.new(data)
```

--------------------------------

### Displaying Data as Tree View - Kino.Shorts.tree/1 (Elixir)

Source: https://context7_llms

Demonstrates using Kino.Shorts.tree/1 to display an arbitrarily nested data structure, in this case, the process information of the current self process, as a tree view.

```Elixir
import Kino.Shorts
    tree(Process.info(self()))
```

--------------------------------

### Creating a Button Widget for Event Handling - Elixir

Source: https://context7_llms

Creates a new button widget with the label 'Hello'. This snippet is a prerequisite for demonstrating various event listening mechanisms.

```Elixir
button = Kino.Control.button("Hello")
```

--------------------------------

### Handling Binary Payloads in Elixir Kino.JS.Live

Source: https://context7_llms

This Elixir module demonstrates sending and receiving binary data via `Kino.JS.Live`. It shows how to construct a binary payload `{:binary, info, binary}` for initial connection data and how to handle incoming binary events, echoing back a modified binary payload.

```Elixir
defmodule KinoDocs.Binary do
  use Kino.JS
  use Kino.JS.Live

  def new() do
    Kino.JS.Live.new(__MODULE__, nil)
  end

  @impl true
  def handle_connect(ctx) do
    payload = {:binary, %{message: "hello"}, <<1, 2>>}
    {:ok, payload, ctx}
  end

  @impl true
  def handle_event("ping", {:binary, _info, binary}, ctx) do
    reply_payload = {:binary, %{message: "pong"}, <<1, 2, binary::binary>>}
    broadcast_event(ctx, "pong", reply_payload)
    {:noreply, ctx}
  end

  asset "main.js" do
    """
    export function init(ctx, payload) {
      console.log("initial data", payload);

      ctx.handleEvent("pong", ([info, buffer]) => {
        console.log("event data", [info, buffer])
      });

      const buffer = new ArrayBuffer(2);
      const bytes = new Uint8Array(buffer);
      bytes[0] = 4;
      bytes[1] = 250;
      ctx.pushEvent("ping", [{ message: "ping" }, buffer]);
    }
    """
  end
end
```

```JavaScript
export function init(ctx, payload) {
  console.log("initial data", payload);

  ctx.handleEvent("pong", ([info, buffer]) => {
    console.log("event data", [info, buffer])
  });

  const buffer = new ArrayBuffer(2);
  const bytes = new Uint8Array(buffer);
  bytes[0] = 4;
  bytes[1] = 250;
  ctx.pushEvent("ping", [{ message: "ping" }, buffer]);
}
```

--------------------------------

### Creating Tabbed Layout with Kino.Layout.tabs in Elixir

Source: https://context7_llms

This snippet demonstrates how to organize different kinos into a tabbed interface using Kino.Layout.tabs/1. It creates a sample dataset and displays it in two tabs: one as a Kino.DataTable and another showing the raw data.

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

    Kino.Layout.tabs([
      Table: Kino.DataTable.new(data),
      Raw: data
    ])
```

--------------------------------

### Creating a JSON File Download Button - Kino.Download - Elixir

Source: https://context7_llms

This snippet demonstrates creating a download button for a JSON file. The content is generated by encoding a map to JSON, and the `filename` option is used to suggest 'data.json' for the downloaded file.

```Elixir
Kino.Download.new(
      fn -> Jason.encode!(%{"foo" => "bar"}) end,
      filename: "data.json"
    )
```

--------------------------------

### Creating a Basic Button Control - Elixir

Source: https://context7_llms

Demonstrates the creation of a simple button control using `Kino.Control.button/1`. This button can then be rendered in a Livebook cell to allow user interaction.

```Elixir
button = Kino.Control.button("Hello")
```