MikoUI

A modern, cross-platform GUI framework for C++ built on DirectX 11 (Windows) and X11/Wayland (Linux). MikoUI provides a declarative, React-like API for building native desktop applications with a focus on performance and developer experience.

Features

🎨 Modern UI Framework

• Cross-platform: Windows (DirectX 11, Direct2D, DirectWrite) and Linux (X11/Wayland, FreeType)
• Declarative API: React-like component system with builder pattern
• CSS-like styling: Tailwind-inspired utility classes for rapid UI development

🏗️ Architecture

• Component-based: Modular UI components (Button, Div, Avatar, Dialog)
• NodeBuilder system: Declarative UI construction with method chaining
• Event-driven: Modern callback-based event handling
• Renderer abstraction: Platform-agnostic rendering interface

🪟 Window Management

• Borderless windows: Custom title bars with native window controls
• Window modes: Windowed and borderless configurations
• Resize handling: Automatic layout updates on window resize
• Shadow effects: Native drop shadows on supported platforms

🎯 Developer Experience

• Type-safe: Modern C++17 with strong typing
• Macro system: Convenient macros for common operations
• Build system: CMake and Make support with cross-platform builds
• Examples: Complete example applications demonstrating framework usage

Quick Start

Prerequisites

Windows:

• Visual Studio 2019+ or MinGW-w64
• Windows 10 SDK
• CMake 3.16+

Linux:

• GCC 7+ or Clang 6+
• X11 development libraries (libx11-dev, libxext-dev)
• Wayland development libraries (libwayland-dev, wayland-protocols)
• FreeType development libraries (libfreetype6-dev)
• CMake 3.16+

Building

# Clone the repository
git clone https://github.com/arizkami/miko
cd miko

# Build using Make (recommended)
make build

# Or build using CMake directly
mkdir build && cd build
cmake ..
cmake --build .

# Or using Python script
python  Scripts/build.py --config {Debug or Release}

Hello World Example

#include "MikoUI.hpp"

class MyApp : public mikoui::Application {
protected:
    void OnRender() override {
        auto ui = CreateDiv()
            .flex_col()
            .justify_center()
            .items_center()
            .w_full()
            .h_screen()
            .bg_gray_800()
            .child(
                CreateButton("Hello, World!")
                    .bg_blue_600()
                    .text_white()
                    .p_4()
                    .onClick([]() {
                        printf("Button clicked!\n");
                    })
            )
            .build();
            
        SetRootComponent(ui);
    }
};

MIKOUI_REGISTER_APPLICATION(MyApp)
MIKOUI_CONFIGURE_WINDOW_MODE()

API Reference

Core Components

Application

Base class for MikoUI applications with lifecycle management:

class MyApp : public mikoui::Application {
protected:
    void OnInitialize() override;  // Called once during startup
    void OnUpdate() override;      // Called every frame
    void OnRender() override;      // Called for UI rendering
    void OnShutdown() override;    // Called during cleanup
    void OnButtonClick(int id) override; // Button event handler
};

Window Configuration

Configure window behavior and appearance:

// Borderless mode (default)
mikoui::UseBorderlessMode();

// Windowed mode with title bar
mikoui::UseWindowedMode();

// Custom configuration
WindowConfig config = WindowConfig::Borderless();
config.enableResize = true;
config.enableShadow = true;
SetDefaultWindowConfig(config);

UI Components

Button

Interactive button component with icon support:

auto button = CreateButton("Click Me")
    .icon(IconType::Play)
    .bg_blue_600()
    .text_white()
    .p_4()
    .onClick([]() { /* callback */ })
    .build();

Available Icons:

• Play, Pause, Stop - Media controls
• Settings, Home, Menu - Navigation
• Close, Minimize, Maximize - Window controls
• Check, Cross, Plus, Minus - Status icons

Div

Container component for layout and grouping:

auto container = CreateDiv()
    .flex_row()
    .justify_between()
    .items_center()
    .p_8()
    .bg_gray_900()
    .child(/* child components */)
    .build();

Styling System

MikoUI uses a Tailwind-inspired utility class system:

Layout

.flex_row()          // display: flex; flex-direction: row
.flex_col()          // display: flex; flex-direction: column
.justify_center()    // justify-content: center
.justify_between()   // justify-content: space-between
.items_center()      // align-items: center

Sizing

.w_full()           // width: 100%
.h_screen()         // height: 100vh
.w_12()             // width: 48px (12 * 4px)
.h_8()              // height: 32px (8 * 4px)

Spacing

.p_4()              // padding: 16px
.px_8()             // padding-left: 32px; padding-right: 32px
.py_2()             // padding-top: 8px; padding-bottom: 8px
.m_4()              // margin: 16px

Colors

.bg_gray_800()      // background-color: #1f2937
.bg_blue_600()      // background-color: #2563eb
.text_white()       // color: #ffffff
.text_gray_400()    // color: #9ca3af

Event Handling

Button Events

CreateButton("Submit")
    .onClick([this]() {
        // Handle click event
        OnButtonClick(SUBMIT_BUTTON_ID);
    })

Window Events

class MyApp : public mikoui::Application {
protected:
    void OnButtonClick(int buttonId) override {
        switch(buttonId) {
            case CLOSE_BUTTON:
                GetWindow().Close();
                break;
            case MINIMIZE_BUTTON:
                GetWindow().Minimize();
                break;
        }
    }
};

Architecture

Renderer System

MikoUI uses a platform-abstracted renderer:

• Windows: DirectX 11 + Direct2D + DirectWrite
• Linux: X11/Wayland + FreeType + custom rasterization

// Platform detection is automatic
auto renderer = CreateRenderer();
renderer->Initialize(windowHandle);
renderer->BeginDraw();
renderer->FillRectangle(rect, color);
renderer->DrawText(text, rect, color);
renderer->EndDraw();

Component Hierarchy

Application
├── Window (platform-specific)
├── Renderer (platform-abstracted)
└── Component Tree
    ├── Div (container)
    │   ├── Button
    │   ├── Avatar
    │   └── Dialog
    └── Custom Components

Build System

MikoUI supports multiple build configurations:

# Debug build
make debug

# Release build  
make release

# Clean build artifacts
make clean

Platform Support

Windows

• Minimum: Windows 10 (1903+)
• Graphics: DirectX 11 with Direct2D/DirectWrite
• Compiler: MSVC 2019+, MinGW-w64
• Features: Native window controls, Aero effects, DPI awareness

Linux

• Display: X11 and Wayland support
• Graphics: Software rendering with FreeType
• Compiler: GCC 7+, Clang 6+
• Features: Window manager integration, HiDPI support

Examples

The Examples/ directory contains complete sample applications:

• Basic Application: Simple button and event handling
• Layout Demo: Flexbox layout examples
• Component Showcase: All available components
• Window Controls: Custom title bar implementation

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Setup

# Install dependencies (Ubuntu/Debian)
sudo apt install build-essential cmake libx11-dev libwayland-dev libfreetype6-dev

# Build in debug mode
make debug

# Run tests
./build/MikoUI

License

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

Acknowledgments

• Inspired by React and modern web frameworks
• Icon system uses Segoe MDL2 Assets (Windows) and custom icons (Linux)
• Built with modern C++17 standards

---

MikoUI - Modern C++ GUI Framework for Cross-Platform Desktop Applications