Hello World

Let’s build a simple status bar to understand the basics of Guido. By the end of this tutorial, you’ll have a working application like this:

Status Bar

Creating the Project

Start with a new Rust project:

cargo new hello-guido
cd hello-guido
cargo add guido

Understanding the Code

Let’s break down each part:

The Prelude

extern crate guido;
fn main() {
use guido::prelude::*;
;
}

The prelude imports everything you need: widgets, colors, layout types, and reactive primitives.

Surface Configuration

extern crate guido;
use guido::prelude::*;
fn main() {
App::new().run(|app| {
    let _surface_id = app.add_surface(
        SurfaceConfig::new()
            .height(32)
            .anchor(Anchor::TOP | Anchor::LEFT | Anchor::RIGHT)
            .background_color(Color::rgb(0.1, 0.1, 0.15)),
        || container(),
    );
});
;
}

The SurfaceConfig defines how the window appears:

Height - 32 pixels tall
Anchor - Attached to top, left, and right edges (full width)
Background color - Dark background for the bar

Note: run() takes a setup closure where you add surfaces. add_surface() returns a SurfaceId that can be used to get a SurfaceHandle for modifying surface properties dynamically, and the surface’s own widgets can read that handle with expect_context::<SurfaceHandle>().

Building the View

The view is built using containers - the primary building block in Guido:

extern crate guido;
use guido::prelude::*;
fn main() {
container()
    .height(fill())
    .layout(
        Flex::row()
            .spacing(8.0)
            .main_alignment(MainAlignment::SpaceBetween)
            .cross_alignment(CrossAlignment::Center),
    )
;
}

This creates a container that:

Fills the available height with fill()
Uses a horizontal flex layout
Centers children vertically with cross_alignment
Spreads children across the space with SpaceBetween

Adding Children

Each section of the status bar is a child container:

extern crate guido;
use guido::prelude::*;
fn main() {
container()
.child(
    container()
        .padding(8.0)
        .background(Color::rgb(0.2, 0.2, 0.3))
        .corners(4.0)
        .child(text("Guido")),
)
;
}

The container has:

Padding - 8 pixels of space around the content
Background - A dark purple-gray color
Corner radius - Rounded corners
Child - A text widget

Text Widgets

extern crate guido;
use guido::prelude::*;
fn main() {
text("Hello World!")
;
}

The text() function creates a text widget. It carries the content and nothing else: colour, size, family and weight are declared on an enclosing container and inherited from the nearest one that sets them.

extern crate guido;
use guido::prelude::*;
fn main() {
container().child(text("Hello World!").font_size(24.0).color(Color::WHITE))
;
}

With nothing declared above it, text is white at 14 logical pixels.

Adding Interactivity

Let’s make it interactive with a click counter. Update your code:

extern crate guido;
use guido::prelude::*;

fn main() {
    App::new().run(|app| {
        let count = create_signal(0);

        app.add_surface(
            SurfaceConfig::new()
                .height(32)
                .anchor(Anchor::TOP | Anchor::LEFT | Anchor::RIGHT)
                .background_color(Color::rgb(0.1, 0.1, 0.15)),
            move || {
                container()
                    .height(fill())
                    .layout(
                        Flex::row()
                            .spacing(8.0)
                            .main_alignment(MainAlignment::SpaceBetween)
                            .cross_alignment(CrossAlignment::Center),
                    )
                    .child(
                        container()
                            .padding(8.0)
                            .background(Color::rgb(0.2, 0.2, 0.3))
                            .corners(4.0)
                            .when_hovered(|s| s.lighter(0.1))
                            .when_pressed(|s| s.ripple())
                            .on_click(move || count.update(|c| *c += 1))
                            .child(text(move || format!("Clicks: {}", count.get()))),
                    )
                    .child(container().padding(8.0).child(text("Hello World!")))
                    .child(
                        container()
                            .padding(8.0)
                            .background(Color::rgb(0.3, 0.2, 0.2))
                            .corners(4.0)
                            .child(text("Status Bar")),
                    )
            },
        );
    });
}

What Changed?

Signal - create_signal(0) creates a reactive value
Hover state - .when_hovered(|s| s.lighter(0.1)) lightens on hover
Pressed state - .when_pressed(|s| s.ripple()) adds a ripple effect
Click handler - .on_click(...) increments the counter
Reactive text - text(move || format!(...)) updates when the signal changes

Next Steps

You’ve built your first Guido application. Continue learning:

Running Examples - Explore more complex examples
Core Concepts - Understand the reactive system
Building UI - Learn styling and layout

Keyboard shortcuts

Guido