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

Updating the bundled elixir-data-viewer.js

A helper script syncs lib/assets/elixir_data_viewer/build/elixir-data-viewer.js with the latest release published at https://github.com/feng19/elixir-data-viewer/releases, and bumps the @version attribute in mix.exs to match the release tag.

# Update to the latest release
./scripts/update_viewer.sh

# Optional: use a GitHub token to avoid API rate limits
GITHUB_TOKEN=<your_token> ./scripts/update_viewer.sh

Automated weekly sync

The Update elixir-data-viewer GitHub Actions workflow runs every Monday at 02:00 UTC (and can be triggered manually from the Actions tab). When the upstream repository publishes a new release, the workflow will:

1. Run scripts/update_viewer.sh to download the new elixir-data-viewer.js and bump @version in mix.exs.
2. Commit the changes to the default branch as github-actions[bot].
3. Create and push a matching v<NEW_VERSION> tag.

If the upstream release has not changed since the last sync, no commit is made.

License

MIT