Learn egui in Neovim — Ep 10: Scroll Area (Log Viewer with Auto-Scroll)

Learn egui in Neovim — Ep 10: Scroll Area (Log Viewer with Auto-Scroll)

In this episode, we build a simple log viewer using egui's ScrollArea to display entries in a scrollable region. The viewer automatically scrolls to the newest log entry with stick_to_bottom(true), and includes a button to add new log lines dynamically, demonstrating how to manage and display growing content in a Rust GUI app.

Code

use eframe::egui::{self, ScrollArea};

struct LogViewerApp {
  logs: Vec<String>,
}

impl Default for LogViewerApp {
  fn default() -> Self {
    Self { logs: vec![] }
  }
}

impl eframe::App for LogViewerApp {
  fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
    egui::CentralPanel::default().show(ctx, |ui| {
      // Button to add new log entry
      if ui.button("Add Log").clicked() {
        let next_index = self.logs.len() + 1;
        self.logs.push(format!("Log entry #{}", next_index));
      }

      // Scrollable area with auto-scroll to bottom
      ScrollArea::vertical()
        .stick_to_bottom(true)
        .show(ui, |ui| {
          // Display each log line with numbering
          for (i, log) in self.logs.iter().enumerate() {
            ui.label(format!("{}: {}", i + 1, log));
          }
        });
    });
  }
}

Key Points

• ScrollArea::vertical() creates a vertically scrollable region for content.
• The stick_to_bottom(true) method ensures the view auto-scrolls to show the newest content.
• Use ui.button("Add Log").clicked() to trigger actions like adding new log entries.
• Numbered log lines are generated using enumerate() combined with format!() for clear display.
• A Vec<String> dynamically stores log entries, growing as the user adds logs.