BlinkUI: A SwiftUI-Inspired Terminal UI Framework

BlinkUI is an experimental terminal UI framework that brings SwiftUI's declarative syntax and component-based architecture to terminal applications. Build beautiful, interactive terminal UIs using familiar SwiftUI-like patterns.

[!WARNING]
This is an experimental project, currently in active development. While functional, it's not yet recommended for production use. Feedback and contributions are welcome!

Features

• SwiftUI-like Syntax: Write terminal UIs using familiar declarative syntax
• Rich Component Library: Built-in components like Text, Button, HStack, VStack, and ZStack
• Color support: Simple but effective foreground and background color support
• State Management: Support for @State, @Binding, and @Environment property wrappers
• Focus Engine: Keyboard navigation between interactive elements (Tab/Shift+Tab)
• View Modifiers: Padding, borders, and frame customization
• Layout System: Flexible layout engine for component positioning

Quick Example

import BlinkUI
struct Main: App {
@State var isSelected: Bool = false
var body: some View {
    VStack(spacing: isSelected ? 1 : 0) {
        Text("This is your last chance. After this, there is no turning back.")
        if !isSelected {
            HStack {
                Button(action: { isSelected = true }) {
                    Text("Blue pill").color(.blue)
                }
                Button(action: { isSelected = true }) {
                    Text("Red pill").color(.red)
                }
            }
        } else {
            Text("The Matrix is everywhere. It is all around us.")
                .padding(.horizontal, 2)
                .padding(.vertical, 1)
                .color(.yellow)
                .backgroundColor(.black)
        }
    }
}

}
// Run the app
let engine = AppEngine(app: Main())
engine.run()

Components and Features

Base Views

Text

Text with simple word wrapping logic

Button

Interactive buttons with customizable labels and actions.

HStack

VStack

ZStack

Color

Set foreground and background colors for text components using the color and backgroundColor modifiers.

Text("Hello, World!")
    .color(.red) // Sets foreground color
    .backgroundColor(.blue) // Sets background color

View Modifiers

Powerful modifiers to customize your components:

Frame

Control the dimensions and alignment of your components.

Padding

Add space around your components for better layout control.

Border

Add beautiful borders with different styles.

Focus Engine

Navigate through interactive elements using keyboard (Tab/Shift+Tab).

State Management

Reactive state management with property wrappers (@State, @Binding, @Environment).

Under Development

• 🚧 Word wrapping
• 🚧 Advanced layouts
• 🚧 Performance optimization
• 🚧 Testing framework
• 🚧 Buffer management
• 🚧 Cross-platform support (Windows/Linux)
• 🚧 Hyperlink support
• 🚧 Documentation and examples

Getting Started

Coming Soon: Installation and usage instructions will be added as the project stabilizes.

Contributing

This project is open for experimentation and learning. If you're interested in terminal UI frameworks or SwiftUI internals, feel free to take a look at the code and provide feedback.

Technical Details

The framework consists of over 2,000 lines of code implementing:

• Custom ViewBuilder for declarative syntax
• Node-based layout system
• State management system
• Focus engine for accessibility
• Terminal rendering engine

TODO: A detailed technical blog post about the implementation and learnings is planned.

Why This Project?

BlinkUI started as a deep dive into understanding SwiftUI's architecture. Instead of just reading about SwiftUI or building another todo app, I decided to challenge myself by recreating its core concepts for terminal applications. This hands-on approach provided invaluable insights into:

• How declarative UI frameworks actually work under the hood
• The complexities of state management and data flow
• The challenges of building a layout engine from scratch
• Real-world application of property wrappers and function builders