# `Kino.Render`
[🔗](https://github.com/livebook-dev/kino/blob/v0.19.0/lib/kino/render.ex#L1)

Protocol defining term formatting in the context of Livebook.

# `t`

```elixir
@type t() :: term()
```

All the types that implement this protocol.

# `to_livebook`

```elixir
@spec to_livebook(t()) :: map()
```

Transforms the given value into a Livebook-compatible output.

For detailed description of the output format see `t:Livebook.Runtime.output/0`.

When implementing the protocol for custom struct, you generally do
not need to worry about the output format. Instead, you can compose
built-in kinos and call `Kino.Render.to_livebook/1` to get the
expected representation.

For example, if we wanted to render a custom struct as a mermaid
graph, we could do this:

    defimpl Kino.Render, for: Graph do
      def to_livebook(graph) do
        source = Graph.to_mermaid(graph)
        mermaid_kino = Kino.Mermaid.new(source)
        Kino.Render.to_livebook(mermaid_kino)
      end
    end

In many cases it is useful to show the default inspect representation
alongside our custom visual representation. For this, we can use tabs:

    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

---

*Consult [api-reference.md](api-reference.md) for complete listing*