Kino.ElixirDataViewer (KinoElixirDataViewer v0.1.4)

Copy Markdown View Source

A kino for rendering Elixir data structures with syntax highlighting, code folding, and the Tokyo Night theme.

Powered by the elixir-data-viewer JavaScript library with lezer-elixir for accurate parsing.

Features

  • Syntax highlighting with Tokyo Night theme
  • Code folding for maps, lists, tuples, keyword lists
  • Line numbers with fold indicators
  • Floating toolbar (fold/unfold, word wrap, copy, filter)
  • Key filtering to hide specific key-value pairs

Examples

Render any Elixir term:

data = %{name: "Alice", age: 30, roles: [:admin, :user]}
Kino.ElixirDataViewer.new(data)

With options:

Kino.ElixirDataViewer.new(data,
  fold_level: 2,
  word_wrap: true,
  filter_keys: ["socket"]
)

You can also pass a pre-formatted string:

Kino.ElixirDataViewer.new("""%{
  name: "Alice",
  age: 30,
  roles: [:admin, :user]
}""", raw: true)

Summary

Types

t()

Functions

new(data, opts \\ [])

Creates a new Elixir Data Viewer kino.

Types

t()

@type t() :: Kino.JS.t()

Functions

new(data, opts \\ [])

@spec new(
  term(),
  keyword()
) :: t()

Creates a new Elixir Data Viewer kino.

Options

  • :inspect_opts - options passed to Kernel.inspect/2 when converting the term to a string. Defaults to [pretty: true, limit: :infinity, printable_limit: :infinity, width: 80].

  • :raw - when true, treats the first argument as an already-formatted string instead of an Elixir term to inspect. Defaults to false.

  • :fold_level - auto-fold regions deeper than this level. E.g., 3 means show levels 1–3 expanded, fold level 4+. 0 or nil means no auto-folding. Defaults to nil.

  • :word_wrap - whether word wrap is enabled by default. Defaults to false.

  • :filter_keys - a list of key names (strings) to filter out from the rendered view. Defaults to [].

  • :toolbar - a keyword list to show/hide individual toolbar buttons. Keys: :fold_all, :unfold_all, :word_wrap, :copy, :search, :filter. All default to true.