KinoElixirDataViewer

Elixir Data Viewer integration with Livebook.

Provides a Kino component for rendering Elixir data structures with:

Syntax Highlighting — Accurate Elixir syntax coloring via lezer-elixir, Tokyo Night theme
Code Folding — Collapse/expand maps, lists, tuples, keyword lists, bitstrings
Line Numbers — Gutter with line numbers and fold indicators
Floating Toolbar — Fold All, Unfold All, Word Wrap, Copy, Search, Filter
Key Filtering — Hide specific key-value pairs by key name

Installation

Add to your Livebook notebook:

Mix.install([
  {:kino_elixir_data_viewer, "~> 0.1.0"}
])

Or add to your Mix project:

def deps do
  [
    {:kino_elixir_data_viewer, "~> 0.1.0"}
  ]
end

Usage

Basic

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

With Options

data = %{
  name: "Alice",
  config: %{
    database: %{host: "localhost", port: 5432},
    secret_key_base: "super_secret"
  }
}

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

Raw String

raw = """
%{
  name: "Alice",
  age: 30,
  roles: [:admin, :user]
}
"""

Kino.ElixirDataViewer.new(raw, raw: true)

Toolbar Customization

# Hide specific toolbar buttons
Kino.ElixirDataViewer.new(data, toolbar: [copy: false, filter: false])

Options

Option	Type	Default	Description
`:raw`	boolean	`false`	Treat input as pre-formatted string
`:inspect_opts`	keyword	see below	Options for `Kernel.inspect/2`
`:fold_level`	integer \| nil	`nil`	Auto-fold regions deeper than this level
`:word_wrap`	boolean	`false`	Enable word wrap by default
`:filter_keys`	list(string)	`[]`	Keys to filter out from view
`:toolbar`	keyword	all `true`	Show/hide toolbar buttons

Default inspect options: [pretty: true, limit: :infinity, printable_limit: :infinity, width: 80]

Toolbar Options

Key	Default	Description
`:fold_all`	`true`	Show "Fold All" button
`:unfold_all`	`true`	Show "Unfold All" button
`:word_wrap`	`true`	Show "Word Wrap" toggle
`:copy`	`true`	Show "Copy" button
`:search`	`true`	Show "Search" button
`:filter`	`true`	Show "Filter" button

Development

# Get dependencies
mix deps.get

# Run tests
mix test

# Build JS assets (requires esbuild in assets/elixir_data_viewer/)
cd assets/elixir_data_viewer && npm install && npm run build

License

MIT