Elixir Data Viewer

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

Basic Usage

Render any Elixir data structure with syntax highlighting:

data = %{
  name: "Alice",
  age: 30,
  roles: [:admin, :user],
  settings: %{
    theme: "dark",
    notifications: true
  }
}

Kino.ElixirDataViewer.new(data)

With Code Folding

Auto-fold deeply nested structures:

deep_data = %{
  users: [
    %{
      name: "Alice",
      profile: %{
        address: %{street: "123 Main St", city: "Springfield"},
        preferences: %{theme: "dark", language: "en"}
      }
    },
    %{
      name: "Bob",
      profile: %{
        address: %{street: "456 Oak Ave", city: "Shelbyville"},
        preferences: %{theme: "light", language: "fr"}
      }
    }
  ]
}

Kino.ElixirDataViewer.new(deep_data, fold_level: 2)

Key Filtering

Hide sensitive or noisy keys:

conn_data = %{
  method: "GET",
  path: "/api/users",
  status: 200,
  secret_key_base: "super_secret_value_here",
  assigns: %{current_user: "Alice"},
  socket: "#Port<0.80>"
}

Kino.ElixirDataViewer.new(conn_data, filter_keys: ["secret_key_base", "socket"])

Word Wrap

Enable word wrap for data with long strings:

log_entry = %{
  message: "This is a very long log message that contains detailed information about what happened during the request processing pipeline including all intermediate steps and their results",
  timestamp: "2024-01-15T10:30:00Z",
  level: :info
}

Kino.ElixirDataViewer.new(log_entry, word_wrap: true)

Raw String Input

Pass a pre-formatted Elixir string directly:

raw = """
%{
  name: "Alice",
  nested: %{
    key: :value,
    list: [1, 2, 3]
  }
}
"""

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