A terminal user interface proof of concept with advanced features including IME support, emoji rendering, Sixel graphics, and a terminal-based web browser.

This project demonstrates advanced terminal UI capabilities in Rust, including:

• Japanese IME (Input Method Editor) support
• Proper emoji and Unicode rendering
• Sixel protocol for pixel-perfect graphics
• Terminal-based web browser with Chrome DevTools Protocol support

This is a Cargo workspace containing three crates:

The core terminal UI application with:

• Japanese IME support with proper focus handling
• Accurate emoji width calculation for monospace fonts
• Flex layout system using yoga-rs
• Sixel rendering capabilities
• vim-like rich display features

A rendering engine for terminal graphics:

• Pixel-level drawing with Sixel protocol
• Component-based architecture
• Layout engine with flexbox support
• Text rendering with font support
• Image rendering capabilities

A lightweight terminal-based web browser featuring:

• HTML5 parsing with html5ever
• DOM tree implementation
• JavaScript engine integration (QuickJS)
• Layout engine using Taffy (Flexbox/Grid)
• Chrome DevTools Protocol (CDP) server
• Puppeteer/Playwright compatibility

# Clone the repository
git clone https://github.com/mizchi/tui-poc.git
cd tui-poc

# Run the main TUI application
cargo run

# Run the terminal browser
cargo run -p browser -- navigate https://example.com

# Start CDP server for browser automation
cargo run -p browser -- serve --port 9222

# Run examples
cargo run --example sixel_demo
cargo run --example flex_image_demo

cargo run -p browser -- navigate https://example.com
# Or with a local file
cargo run -p browser -- navigate file:///path/to/file.html

const browser = await puppeteer.connect({
  browserWSEndpoint: "ws://127.0.0.1:9222"
});

• Rust 1.70+
• For Sixel features: Sixel-capable terminal (WezTerm, mlterm, foot, xterm with Sixel support)
• For Japanese input: Japanese IME
• For browser features: Internet connection for HTTP(S) URLs

• Proper handling of Japanese IME composition
• Grapheme-based cursor movement
• Focus management with screenshot tools

• Correct width calculation for emoji in monospace fonts
• Support for emoji variation selectors (VS16)
• Zero-width joiner (ZWJ) sequence handling

• Direct pixel manipulation in terminal
• Image rendering alongside text
• Component-based rendering system

• HTML parsing and DOM manipulation
• Basic JavaScript execution
• Terminal-based rendering of web content
• Chrome DevTools Protocol implementation

Detailed documentation is available in the docs/ directory:

• Architecture Overview
• Implementation Details
• Headless Browser Implementation

• Helix Editor Analysis
• Rust TUI Libraries Comparison
• IME Integration Strategy

• Building TUI Applications
• Flex Layout and Images
• Sixel Pixel Rendering

• Emoji width detection may vary by terminal and font
• Sixel support depends on terminal emulator
• Browser CSS support is minimal
• JavaScript DOM APIs are limited

• Complete CSS engine implementation
• Full JavaScript DOM API support
• WebSocket support
• Storage APIs (localStorage, sessionStorage)
• More CDP protocol coverage
• Plugin system for extensibility

This is a proof of concept project. Feel free to explore and experiment with the code.

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

• Inspired by Helix Editor for terminal UI patterns
• Uses lightpanda-io/browser as reference for browser implementation
• Built with Ratatui for terminal UI framework