Petal 🌸

A modern, colourful terminal emulator built with Tauri and React. Features split-pane functionality, customizable themes, and a sleek design inspired by modern UI aesthetics.

Features

• Split Pane Support: Create multiple terminal panes with horizontal and vertical splits
• Light/Dark Themes: Toggle between light and dark themes
• Custom Prompts: Enhanced prompts with ANSI coloring that match the theme
• PowerShell Integration: Currently optimized for PowerShell on Windows
• TUI Application Support: Full support for running terminal-based applications

Screenshots

Light Theme

Dark Theme

Project shown: File Organizer - A tool for organizing files automatically

Four Panes

Tech Stack

Frontend

• React 18 with TypeScript
• Vite for fast development and building
• xterm.js for terminal emulation
• react-mosaic-component for split-pane layout
• Font Awesome for icons

Backend

• Rust with Tauri framework
• portable-pty for cross-platform PTY support
• Base64 encoding for data transmission
• Anyhow for error handling

Installation

Prerequisites

• Node.js (v16 or higher)
• Rust (latest stable)
• PowerShell (Windows) - Currently only PowerShell is supported

Note: This terminal emulator is currently optimized for PowerShell on Windows. Support for other shells (bash, zsh, etc.) and platforms is planned for future releases.

Setup

1. Clone the repository:

   git clone https://github.com/Emmyme/petal-terminal.git
   cd petal-terminal

2. Install dependencies:

   npm install

3. Run in development mode:

   npm run tauri dev

4. Build for production:

   npm run tauri build

Usage

Basic Operations

• New Pane: Click the + button in the top-left corner
• Theme Toggle: Click the theme toggle button to switch between light and dark modes
• Window Controls: Use the custom title bar controls to minimize, maximize, or close

Keyboard Shortcuts

• All standard terminal keyboard shortcuts are supported
• Copy/paste works as expected in each terminal pane

Customization

The application supports theme customization through CSS variables and can be easily extended with new color schemes.

Development

Project Structure

petal-terminal/
├── src/                    # React frontend
│   ├── components/         # React components
│   ├── theme.ts           # Theme definitions and prompt generation
│   └── App.css            # Global styles
├── src-tauri/             # Rust backend
│   ├── src/
│   │   ├── terminal/      # Terminal implementation
│   │   └── main.rs        # Tauri application entry
│   └── Cargo.toml         # Rust dependencies
└── public/                # Static assets

Key Components

• TerminalContainer: Manages the mosaic layout and theme state
• TerminalPane: Individual terminal instances with xterm.js integration
• ShellProcess: Rust-based PTY management for shell processes

License

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

Acknowledgments

• Built with Tauri framework
• Terminal emulation powered by xterm.js
• Split-pane layout using react-mosaic-component
• Icons provided by Font Awesome

---

Made with care for developers who appreciate cute terminals.