ratkit
Comprehensive Rust TUI component library built on ratatui 0.29, providing 21 feature-gated modules (primitives, widgets, services) for building rich terminal applications.
This file provides a complete reference for working with the ratkit codebase. The repository is organized as a single crate at the root level with feature-based modularity. Use this guide to understand component relationships, find APIs, and follow established patterns when implementing new features.
Agent Operating Rules
- Single crate at root: All code is in with 21 feature flags (e.g., , , )
- Enable features explicitly: No default features; add required features to Cargo.toml (e.g.,
features = ["button", "dialog"]
)
- Cross-feature dependencies: Some features auto-enable others (e.g., enables , enables and )
- Use for all operations: Build (), test (), check (), demos ()
- Run examples with flag: Examples require their specific features (e.g.,
--features markdown-preview
)
- Use module-path imports first: Prefer explicit module paths (e.g.,
use ratkit::primitives::button::Button
, use ratkit::widgets::markdown_preview::MarkdownWidget
) because crate-root re-exports are not guaranteed for every type
- StatefulWidget pattern: Complex widgets require separate state structs persisted in app state
- Event loop polling: Services require regular calls in the event loop
- Mouse capture required: Enable crossterm mouse capture for interactive widgets
- Persist widget state: Never create widget state in render loops - store in app struct
- Validate before commits: Run (format + lint + test) before committing
- Verify feature flags: Compilation errors often indicate missing feature flags in Cargo.toml
Environment and Version Constraints
- Rust 1.70+ required (workspace.rust-version in Cargo.toml)
- ratatui 0.29 as the underlying rendering library
- crossterm 0.28 for terminal input/events
- tokio for async runtime
- Single crate at root with 21 feature flags (no workspace members)
- 23 examples in (moved from )
- Optional external deps: notify (file watching), reqwest (ai-chat), pulldown-cmark/syntect (markdown), similar (code-diff)
Quick Task Playbooks
Run an example
- Where to edit: N/A
- Related files:
- Validation:
cargo run --example button_button_demo --features button
Extract smooth-redraw patterns from markdown preview demo
- Where to edit: target app event loop () and draw path ()
- Related files:
examples/markdown_preview_markdown_preview_demo.rs
- Goal: Port the demo's event-pressure controls and redraw strategy into other TUIs
- Validation: Under rapid mouse movement and wheel input, app remains responsive without event backlog
Run with just
- Where to edit: N/A
- Related files:
- Validation: (interactive picker) or , , , etc.
Build with specific features
- Where to edit: (root level)
- Related files: Feature definitions
- Validation:
cargo build --features "button,pane,dialog"
Build all features
- Where to edit: N/A
- Related files: All source files
- Validation:
cargo build --all-features
Run full verification
- Where to edit: N/A
- Related files: All source files
- Validation: (runs fmt-check, lint, test)
Getting Started
toml
# Cargo.toml - enable specific features
[dependencies]
ratkit = { version = "0.2.12", features = ["button", "dialog", "pane"] }
rust
use ratkit::prelude::*;
use ratatui::Frame;
struct MyApp;
impl CoordinatorApp for MyApp {
fn on_event(&mut self, event: CoordinatorEvent) -> LayoutResult<CoordinatorAction> {
match event {
CoordinatorEvent::Keyboard(keyboard) => {
if keyboard.is_escape() {
return Ok(CoordinatorAction::Quit);
}
}
_ => {}
}
Ok(CoordinatorAction::Continue)
}
fn on_draw(&mut self, frame: &mut Frame) {
// Render your UI here
}
}
fn main() -> std::io::Result<()> {
let app = MyApp;
run(app, RunnerConfig::default())
}
Workspace Overview
The ratkit workspace contains a single crate with 21 feature-gated modules organized into:
- Primitives (11 modules): Core UI building blocks in
- button, pane, dialog, toast, statusline, scroll, menu_bar, resizable_grid, tree_view, widget_event, termtui
- Widgets (6 modules): Higher-level composite widgets in
- markdown_preview, code_diff, ai_chat, hotkey_footer, file_system_tree, theme_picker
- Services (4 modules): Background monitoring services in
- file_watcher, git_watcher, repo_watcher, hotkey_service
- Core Runtime (1 module): Application lifecycle in
All modules follow feature-gated compilation. Enable only what you need.
Core Runtime
The core runtime provides the application lifecycle, event routing, and element management for terminal UI applications.
Key Components
- CoordinatorApp trait: Applications implement this to receive events and render
- run() / run_with_diagnostics(): Entry points to start the event loop
- Element trait: Implement for custom widgets that integrate with the coordinator
- RunnerConfig: Configuration for tick rate, layout debounce, mouse capture
Architecture
- Three-region layout: Top, Center, Bottom
- Focus management with stack and traversal
- Mouse routing with z-order hit testing
- Element registry with weak references
UI Primitives
Core UI building blocks for TUI applications, located in
.
Feature Flags
Each primitive has an individual feature flag:
- , , , , ,
- (enables )
- (enables )
Common Patterns
- Builder pattern with and methods
- StatefulWidget pattern for complex state
- Event emission via
- Mouse/keyboard interaction support
MenuBar Layout Contract (updated)
MenuBar::render_with_offset(frame, area, left_offset)
now uses the full available container width for the border:
- The menu bar border should stretch to the right edge of the provided container, while menu items remain left-aligned within the bar
- If available width is zero after offset, rendering exits early and clears
- This behavior was validated with
examples/menu-bar_menu_bar_demo.rs
at fixed 120-column terminal width
Complex Widgets
Higher-level composite widgets in
.
Feature Flags
- - Most complex (syntax highlighting, TOC, themes, selection)
- - VS Code-style diff viewer
- - AI chat interface (requires reqwest, serde)
- - Keyboard shortcut footer
- - File browser with devicons
- - Theme selector with 25+ themes
External Dependencies
| Widget | Dependencies |
|---|
| ai-chat | reqwest, serde, serde_json |
| markdown-preview | pulldown-cmark, syntect, syntect-tui, notify, arboard, dirs |
| code-diff | similar |
| file-system-tree | devicons |
FileSystemTree visual parity notes (Yazi-style)
When adjusting
visuals, keep these conventions to match Yazi-like behavior:
- Prefer
devicons::icon_for_file(...).color
(hex) for file icon colors instead of hardcoded extension maps.
- Parse devicons hex colors into
ratatui::style::Color::Rgb
before rendering.
- Selected row background should use item color (directory rows use dir color; file rows use file color) with black foreground text.
- Keep row content alignment stable between selected and non-selected states (avoid 1-column shifts when drawing decorations).
- Directory selection should use a filled highlight; file selection may use rounded edge glyphs if desired.
Services
Background monitoring services in
.
Feature Flags
- - Watch files/directories for changes
- - Monitor git repository state
- - Combined file + git watching (enables file-watcher and git-watcher)
- - Global hotkey registration and management
Common Dependencies
All watcher services use the
crate for filesystem events.
Usage Cards
CoordinatorApp
- Use when: Building any ratkit TUI application
- Enable/Install: Core runtime, no feature flag needed
- Import/Invoke:
- Minimal flow:
- Define struct implementing
- Implement to handle events
- Implement to render UI
- Call
run(app, RunnerConfig::default())
- Key APIs: , ,
- Pitfalls: Runner takes ownership; wrap shared state in
- Source: ,
run()
- Use when: Starting the main application event loop
- Enable/Install: Core runtime, no feature flag
- Import/Invoke:
use ratkit::{run, run_with_diagnostics};
- Minimal flow:
- Create app implementing
- Create or custom
- Call or
run_with_diagnostics(app, config)
for debug overlay
- Key APIs: , ,
- Pitfalls: Blocks until exit; handles terminal init/cleanup
- Source:
Element
- Use when: Creating custom widgets that integrate with coordinator
- Enable/Install: Core runtime
- Import/Invoke:
- Minimal flow:
- Implement trait for your widget
- Define , , ,
- Register with and region
- Key APIs: , , , , , ,
- Pitfalls: Registry stores weak refs - keep strong refs in app state; return when handling events
- Source:
Button
- Use when: Clickable button with hover states
- Enable/Install:
- Import/Invoke:
- Minimal flow:
- Create
- Call on mouse move
- Call on click
- Render with
- Key APIs: , , , ,
- Pitfalls: State must persist in app struct
- Source:
src/primitives/button/widget.rs
Pane
- Use when: Styled panel container with title/icon/padding
- Enable/Install:
- Import/Invoke:
- Minimal flow:
- Create
- Chain builder methods: , ,
- Render as widget
- Key APIs: , , , ,
- Pitfalls: Padding reduces inner content area
- Source:
src/primitives/pane/mod.rs
Dialog
- Use when: Modal dialogs for confirmation/information
- Enable/Install:
- Import/Invoke:
use ratkit::primitives::dialog::{Dialog, DialogWidget, DialogAction, DialogActionsLayout, DialogWrap, DialogShadow, DialogModalMode};
- Minimal flow:
- Create
Dialog::new(title, message)
or
- Configure layout and visuals with , , , , ,
- Configure actions/keys with , , , , ,
- In event loop, route keys to
dialog.handle_key_event(...)
and react to
- Render with
DialogWidget::new(&mut dialog)
- Key APIs: , , , , , , , , , , , , , ,
blocks_background_events()
- Pitfalls: If you want to control inner body UI (for example a list) instead of dialog actions, remove from dialog keymap and handle it in your app event loop; if you want no action row, set
- Source:
Dialog interaction patterns
- Vertical actions:
.actions_layout(DialogActionsLayout::Vertical)
for stacked action menus
- Horizontal actions:
.actions_layout(DialogActionsLayout::Horizontal)
for classic Yes/No rows
- No actions shown: hides the actions row so dialog body content can be primary
- Custom body widget: implement and pass
.body_renderer(Box::new(...))
to render a selectable list/menu inside dialog chrome
- Blocking modal:
.modal_mode(DialogModalMode::Blocking)
plus blocks_background_events()
to prevent background input handling
- Tab delegation: use / to exclude and route to body-level focus/selection logic
Toast
- Use when: Auto-dismissing notifications
- Enable/Install:
- Import/Invoke:
use ratkit::{ToastManager, ToastLevel};
- Minimal flow:
- Create in app state
- Add toasts via , , ,
- Call before render
- Render with
- Key APIs: , , , ,
- Pitfalls: Must call to remove expired; doesn't auto-expire
- Source:
MenuBar
- Use when: Top-level horizontal navigation with mouse and keyboard selection
- Enable/Install: (auto-enables )
- Import/Invoke:
use ratkit::primitives::menu_bar::{MenuBar, MenuItem};
- Minimal flow:
- Create
MenuBar::new(vec![MenuItem::new("File", 0), ...])
- Optionally set initial selection with
- On mouse move: call ; on click: call or
- Render with or
- Key APIs: , , , , , ,
- Pitfalls: Border fills full container width; do not assume border auto-sizes to label content
- Source:
src/primitives/menu_bar/menu_bar.rs
, examples/menu-bar_menu_bar_demo.rs
TreeView
- Use when: Hierarchical data with expand/collapse/selection
- Enable/Install: (auto-enables widget-event)
- Import/Invoke:
use ratkit::{TreeNode, TreeView, TreeViewState, TreeNavigator};
- Minimal flow:
- Build hierarchy
- Create with render_fn
- Create for selection/expansion
- Use for keyboard handling
- Key APIs: , , ,
- Pitfalls: TreeViewState must persist; TreeNavigator handles all keyboard nav
- Source:
src/primitives/tree_view/
MarkdownWidget
- Use when: Rendering markdown with syntax highlighting, TOC, themes
- Enable/Install:
features = ["markdown-preview"]
(complex dependencies)
- Import/Invoke:
use ratkit::widgets::markdown_preview::{MarkdownWidget, ScrollState, SourceState, ...};
- Minimal flow:
- Create state structs (ScrollState, SourceState, etc.) in app state
- Create
MarkdownWidget::new(content, scroll, source, ...)
- Handle keyboard with
- Render with ratatui
- Key APIs: , , , , ,
.with_frontmatter_collapsed()
, set_frontmatter_collapsed()
,
- Pitfalls: Requires mouse capture enabled; state must persist across renders; frontmatter collapse is section-based (section id ); large markdown with many fenced code blocks can increase first-render time if syntax highlighter initialization is repeated (parser now reuses one per parse call)
- Source:
src/widgets/markdown_preview/widgets/markdown_widget/
Markdown demo variants
- Use when: Choosing markdown content size for preview behavior checks
- Run: (opencode SDK skill markdown) and (ratkit skill markdown)
- Expected behavior: Both variants render with TOC, statusline, hover interactions, and copy support
- Startup profiling: Run
target/debug/examples/markdown_preview_markdown_preview_demo --startup-probe
(with ) to print MARKDOWN_DEMO_READY_MS=<ms>
for repeatable load-time comparisons
- Source:
examples/markdown_preview_markdown_preview_demo.rs
, justfiles/utilities/demo-md.just
FileSystemTree
- Use when: Browsing local files/directories with icons and keyboard navigation
- Enable/Install:
features = ["file-system-tree"]
- Import/Invoke:
use ratkit::widgets::file_system_tree::{FileSystemTree, FileSystemTreeState, FileSystemTreeConfig};
- Minimal flow:
- Create
FileSystemTree::new(root_path)
or
- Persist in app state
- Route nav keys to
handle_navigation_key(...)
- Route filter keys to when filter mode is active
- Key APIs: , , , , ,
- Pitfalls: Keep icon colors sourced from devicons, and preserve selection-row alignment when adding rounded highlight glyphs
- Source:
src/widgets/file_system_tree/widget.rs
, src/widgets/file_system_tree/config.rs
, src/widgets/file_system_tree/state.rs
FileWatcher
- Use when: Detecting file/directory changes
- Enable/Install:
features = ["file-watcher"]
(uses notify crate)
- Import/Invoke:
use ratkit::services::file_watcher::FileWatcher;
- Minimal flow:
- Create or
FileWatcher::for_directory()
- Call
- Poll in event loop
- Get changes with
- Key APIs: , , , ,
- Pitfalls: Must poll regularly; clears queue; debounced (100ms/200ms)
- Source:
src/services/file_watcher/
HotkeyService
- Use when: Centralized hotkey management with scope filtering
- Enable/Install:
features = ["hotkey-service"]
- Import/Invoke:
use ratkit::services::hotkey_service::{Hotkey, HotkeyRegistry, HotkeyScope};
- Minimal flow:
- Create
- Register hotkeys with
Hotkey::new(key, description).scope(scope)
- Set active scope with
- Query with in event loop
- Key APIs: , , ,
- Pitfalls: Uses for scopes; must handle crossterm events separately
- Source:
src/services/hotkey_service/
API Reference
Core Runtime
| Component | Key APIs |
|---|
| CoordinatorApp | , , |
| run | , |
| Element | , , , , , , |
| RunnerConfig | , , |
Primitives
| Primitive | Key APIs |
|---|
| Button | , , , , |
| Pane | , , , , |
| Dialog | , , , , , , |
| Toast | , , , , |
| TreeView | , , , |
| Scroll | calculate_scroll_offset()
|
Services
| Service | Key APIs |
|---|
| FileWatcher | , , , , |
| GitWatcher | , , , |
| RepoWatcher | , , , , |
| HotkeyRegistry | , , , |
Common Pitfalls
Feature Flags
- No default features: Must explicitly enable every feature you use
- Cross-feature deps: enables ; enables and
- Missing feature errors: "unresolved import" usually means missing feature flag
State Management
- StatefulWidget pattern: Complex widgets require persistent state in app struct
- Never create state in render: Always store widget state in app struct
- Weak references: Element registry stores weak refs - keep strong refs in app
Event Handling
- Return values: Return when consuming events, to propagate
- Mouse capture: Must enable crossterm mouse capture for interactions
- Poll services: Must call regularly on watchers
Examples
- Feature flags required: Examples need their specific features:
--features markdown-preview
- Just commands: Use for interactive picker or for specific demos
- Port behavior, not just API calls: Reuse input coalescing and selective redraw patterns from demos, not only widget construction code
Smooth Redraw Patterns (Extracted from Markdown Preview Demo)
Use this section to transfer the demo's responsiveness patterns into other ratkit apps.
Core anti-throttling techniques
-
Coalesce high-rate mouse move events
- Pattern: On , skip handling if last processed move was too recent.
- Demo value: ~24ms guard (
last_move_processed.elapsed() < Duration::from_millis(24)
).
- Effect: Prevents motion events from overwhelming the queue during fast pointer movement.
-
Gate redraws to meaningful state changes
- Pattern: Return
CoordinatorAction::Continue
by default for move events; return only when UI state actually changes.
- Demo behavior: Move events redraw only on
MarkdownEvent::TocHoverChanged { .. }
.
- Effect: Avoids redraw storms and keeps frame pacing stable.
-
Use differential handling for move vs non-move mouse events
- Pattern: Treat clicks/wheel/drag as higher-value events and redraw immediately; aggressively filter move-only noise.
- Effect: Maintains interaction fidelity while reducing unnecessary render pressure.
-
Bound periodic work with moderate tick rate
- Pattern: Configure non-aggressive ticks and use tick handler for lightweight maintenance only.
- Demo value:
RunnerConfig { tick_rate: Duration::from_millis(250), .. }
.
- Effect: Reduces idle churn and avoids periodic tasks competing with interactive redraws.
-
Persist heavy widget state outside draw loop
- Pattern: Store all stateful structs in app state and mutate incrementally in event handlers.
- Demo structures: , , , , , , , , .
- Effect: Prevents reallocation/reparse overhead on each frame and stabilizes render latency.
-
- Pattern: Avoid heavy parsing, file reads, or expensive recomputation in ; do those on state transitions.
- Effect: More predictable frame time and smoother UI under bursty input.
Event-loop blueprint to reuse in other apps
- Keyboard: early-return for non-keydown; map only actionable keys to state changes, then redraw.
- Mouse moved: coalesce by time window; update hover state; redraw only on meaningful diff.
- Mouse non-moved: apply action (click/wheel/selection), then redraw.
- Tick: run lightweight expirations/cleanup; redraw only when cleanup changed visible state.
- Resize: redraw.
Porting checklist (copy into new feature work)
- Add
last_move_processed: Instant
to app state and time-gate move handling.
- Ensure event handlers return unless visible state changed.
- Separate ephemeral notifications/cleanup into tick-driven maintenance.
- Keep widget state persistent and mutate in place.
- Verify smoothness under rapid mouse movement and continuous wheel scrolling.
Optional
Additional Resources
- Examples: 23 examples in
- Just commands: Run for all available commands
- Build: or
cargo build -p ratkit --all-features
- Test:
Version
- Current: 0.2.12
- Rust: 1.70+