Modern, fast, declarative UI library for the Arepy game engine.

---

Documentation: https://scr44gr.github.io/arepy-ui

Source Code: https://github.com/Scr44gr/arepy-ui

---

arepy-ui is a modern UI library for building game interfaces with the Arepy game engine.

Key features:

• Flexbox Layout: Familiar CSS-like layout system that just works.
• Component Library: Ready-to-use UI components (buttons, sliders, inputs, etc.).
• Declarative Markup: Build UIs with HTML-like .aui files and CSS-like .acss stylesheets.
• Theme Support: CSS variables with light/dark theme variants.
• Drag & Drop: Built-in drag and drop system.
• Animations: Tweening system with easing functions.
• High Performance: Cython-accelerated parsing and optimized rendering.

Installation

pip install arepy-ui

With markup system acceleration:

pip install arepy-ui[markup]

Example

Python API

from arepy import ArepyEngine, SystemPipeline
from arepy_ui import UIManager, Node, Text, Button, Style, Color, Unit, JustifyContent, AlignItems

ui_manager: UIManager = None

def setup(game: ArepyEngine):
    global ui_manager
    ui_manager = UIManager.from_engine(game)
    
    ui_manager.set_root(
        Node(
            style=Style(
                width=Unit.percent(100),
                height=Unit.percent(100),
                justify_content=JustifyContent.CENTER,
                align_items=AlignItems.CENTER,
                gap=20,
            ),
            children=[
                Text("Hello, arepy-ui!", font_size=32, color=Color(255, 255, 255)),
                Button("Click me", on_click=lambda: print("Clicked!")),
            ],
        )
    )

def update(game: ArepyEngine):
    ui_manager.update(game.get_delta_time())

def render(game: ArepyEngine):
    ui_manager.render()

if __name__ == "__main__":
    game = ArepyEngine(title="My Game", width=800, height=600)
    world = game.create_world("main")
    world.add_startup_system(setup)
    world.add_system(SystemPipeline.UPDATE, update)
    world.add_system(SystemPipeline.RENDER, render)
    game.set_current_world("main")
    game.run()

Declarative Markup (AUI)

ui.aui

<column class="main">
    <text class="title">Hello, arepy-ui!</text>
    <button class="btn" on-click="greet">Click me</button>
</column>

ui.acss

:root {
    --primary: #6c5ce7;
    --bg: #1a1a2e;
    --text: #ffffff;
}

.main {
    width: 100%;
    height: 100%;
    background: var(--bg);
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.title {
    font-size: 32px;
    color: var(--text);
}

.btn {
    background: var(--primary);
    padding: 12px 24px;
    border-radius: 8px;
    color: var(--text);
}

main.py

from arepy_ui.markup import load_aui

handlers = {"greet": lambda: print("Hello!")}
result = load_aui("ui.aui", handlers=handlers)
ui_manager.set_root(result.root)

Components

Component	Description
Text	Text rendering with custom fonts
Button	Clickable button with hover states
TextInput	Text field with cursor and selection
Checkbox	Toggle with label
Slider	Horizontal/vertical value slider
Select	Dropdown menu
Tabs	Tabbed container
Image	Texture display with fit modes
ScrollView	Scrollable container
ProgressBar	Progress indicator
Canvas	Custom drawing surface
Video	Video playback
ColorPicker	HSV color selection
Draggable	Drag and drop support

Layout System

arepy-ui uses a flexbox-based layout system:

Node(
    style=Style(
        flex_direction=FlexDirection.ROW,
        justify_content=JustifyContent.SPACE_BETWEEN,
        align_items=AlignItems.CENTER,
        gap=10,
        padding=Spacing.all(20),
    ),
    children=[
        Button("Save"),
        Button("Cancel"),
    ],
)

Theme Support

Define CSS variables with theme variants:

/* globals.acss */
:root {
    --bg: #1a1a2e;
    --text: #ffffff;
    --accent: #6c5ce7;
}

:root.light {
    --bg: #ffffff;
    --text: #1a1a2e;
    --accent: #5849c2;
}

Switch themes at runtime:

from arepy_ui.markup import set_theme

set_theme("light")  # Activate light theme
set_theme(None)     # Return to default

Dark and light theme variants

UI Debugger

Built-in visual debugger for inspecting layouts (press F3):

• F3 - Toggle debugger
• F4 - Toggle component bounds
• F5 - Toggle padding visualization
• F6 - Toggle component tree

Examples

Example GIFs coming soon

Run the included examples:

uv run examples/demo_components.py
uv run examples/demo_drag.py
uv run examples/demo_inventory.py
uv run examples/colorpicker_demo.py
uv run examples/markup_demo/main.py

Performance

The markup parser is Cython-accelerated for maximum performance:

pip install arepy-ui[markup]
python -m arepy_ui.markup.build_ext

Falls back to pure Python automatically if Cython isn't available.

Requirements

• Python 3.10+
• Arepy game engine
• numpy (for ColorPicker gradients)

Documentation

Full documentation is available at scr44gr.github.io/arepy-ui

• Getting Started
• Components
• Layout
• AUI Markup

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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