Ratatui Code Editor widget

A code editor widget for Ratatui, built with syntax highlighting powered by Tree-sitter.

Demo

basic usage

Features

🎨 Syntax Highlighting - Powered by Tree-sitter with support for multiple languages
📝 Text Editing - Full text editing capabilities with cursor movement
🖱️ Mouse Support - Mouse clicks, scroll, text selection, words and lines snapping supported
📋 Copy/Paste - Clipboard integration with system clipboard
🔄 Undo/Redo - Full history management for edit operations
🎯 Text Selection - Visual text selection with keyboard and mouse
🌈 Themes - Customizable color themes for syntax highlighting
📱 Responsive - Adapts to terminal window size changes
🔖 Visual Marks - Mark specific regions in the editor
🧩 Emoji/Unicode Aware - Correct widths, cursor, and selection for grapheme clusters (e.g., ❤️)

Syntax Highlighting: Fast, Cached, and Wide-Row Ready

The Ratatui Code Editor features blazing fast syntax highlighting powered by Tree-sitter. Tree-sitter incrementally parses your code in real time, enabling blazing fast, accurate and context-aware highlighting for all supported languages.

Performance Features:

Super Fast: Only the visible portion of the code is highlighted on each render, making even large files feel snappy.
Smart Caching: Highlighting results are cached per visible region, so scrolling and editing are smooth and efficient.
Wide Row Support: Handles long lines and wide code gracefully, ensuring correct highlighting and cursor placement even with complex Unicode or tab characters.

This approach means you get instant, editor-quality highlighting in your terminal, with no lag—even for big files or wide code blocks.

Supported Languages

Rust
Python
JavaScript
TypeScript
C
C++
Go
C#
Java
Html
Css
Yaml
Toml
Json
Bash
Markdown

Quick Start

Add this to your Cargo.toml:

anyhow = "1.0"
crossterm = "0.29"
ratatui = "0.29"
ratatui-code-editor = { git = "https://github.com/vipmax/ratatui-code-editor" }

Basic Usage

use crossterm::{
    event::{self, Event, KeyCode},
    execute,
    terminal::{
        enable_raw_mode, disable_raw_mode, 
        EnterAlternateScreen, LeaveAlternateScreen
    },
};
use ratatui::{Terminal, backend::CrosstermBackend, layout::Position};
use ratatui_code_editor::editor::Editor;
use ratatui_code_editor::theme::vesper;
use std::io::stdout;

fn main() -> anyhow::Result<()> {
    enable_raw_mode()?;
    execute!(stdout(), EnterAlternateScreen)?;
    
    let backend = CrosstermBackend::new(stdout());
    let mut terminal = Terminal::new(backend)?;
    
    let content = "fn main() {\n    println!(\"Hello, world!\");\n}";
    let mut editor = Editor::new("rust", content, vesper());
    let mut editor_area = ratatui::layout::Rect::default();
    
    loop {
        terminal.draw(|f| {
            let area = f.area();
            editor_area = area;
            f.render_widget(&editor, editor_area);
            
            let cursor = editor.get_visible_cursor(&area);
            if let Some((x,y)) = cursor {
                f.set_cursor_position(Position::new(x, y));
            }
        })?;
        
        if let Event::Key(key) = event::read()? {
            if key.code == KeyCode::Esc {
                break;
            }
            editor.input(key, &editor_area)?;
        }
    }
    
    disable_raw_mode()?;
    execute!(stdout(), LeaveAlternateScreen)?;
    Ok(())
}

Examples

Run the included examples to see the editor in action:

# Minimal editor example
cargo run --release --example minimal

# Half-screen editor
cargo run --release --example half

# Split-screen editor
cargo run --release --example split

# Editor
cargo run --release --example editor <filename>

Key Bindings

Navigation

Arrow Keys - Move cursor

Editing

Any printable character - Insert character
Delete - Delete characters
Enter - Insert new line
Tab - Insert tab or spaces
Ctrl+D - Duplicate
Ctrl+X - Cut
Alt+Enter - go to next line
Alt+/ - comment/uncomment

Selection

Shift + Arrow Keys - Select text
Ctrl+A - Select all
Mouse drag - Select text with mouse
Mouse double click - Select word with mouse
Mouse triple click - Select line with mouse

Clipboard

Ctrl+C - Copy selected text
Ctrl+V - Paste from clipboard
Ctrl+X - Cut selected text

History

Ctrl+Z - Undo
Ctrl+Y - Redo

Themes

The editor comes with built-in themes:

vesper - Dark theme default
Custom themes can be created by providing color mappings

let custom_theme = vec![
    ("keyword", "#ff6b6b"),
    ("string", "#4ecdc4"),
    ("comment", "#95a5a6"),
    ("function", "#f39c12"),
];
let editor = Editor::new("rust", content, custom_theme);

Architecture

The editor is built with several key components:

Editor - Main widget that handles rendering and input
Code - Text buffer with Tree-sitter integration for syntax highlighting
History - Undo/redo functionality with edit tracking
Selection - Text selection state management
Theme - Color scheme management

Dependencies

ratatui - Terminal UI framework
tree-sitter - Syntax highlighting parser
ropey - Efficient text buffer
crossterm - Cross-platform terminal manipulation
arboard - Clipboard access
unicode-width, unicode-segmentation - Unicode text width calculation

Contributing

Contributions are welcome! Please feel free to submit issues, feature requests, or pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Built on top of the excellent Ratatui TUI framework
Syntax highlighting powered by Tree-sitter
Awesome list of ratatui crates and applications awesome-ratatui

ratatui-code-editor 0.0.1