# 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:
## Creating the Project
Start with a new Rust project:
```bash
cargo new hello-guido
cd hello-guido
cargo add guido
```
## The Complete Code
Replace `src/main.rs` with:
```rust,no_run
# extern crate guido;
use guido::prelude::*;
fn main() {
App::new().run(|app| {
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()
.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)
.child(text("Guido")),
)
.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")),
)
},
);
});
}
```
Run it with `cargo run`.
## Understanding the Code
Let's break down each part:
### The Prelude
```rust
# extern crate guido;
# fn main() {
use guido::prelude::*;
# ;
# }
```
The prelude imports everything you need: widgets, colors, layout types, and reactive primitives.
### Surface Configuration
```rust,no_run
# 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.
### Building the View
The view is built using **containers** - the primary building block in Guido:
```rust
# 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:
```rust
# 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
```rust
# 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.
```rust
# 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:
```rust,no_run
# 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?
1. **Signal** - `create_signal(0)` creates a reactive value
2. **Hover state** - `.when_hovered(|s| s.lighter(0.1))` lightens on hover
3. **Pressed state** - `.when_pressed(|s| s.ripple())` adds a ripple effect
4. **Click handler** - `.on_click(...)` increments the counter
5. **Reactive text** - `text(move || format!(...))` updates when the signal changes
## Next Steps
You've built your first Guido application. Continue learning:
- [Running Examples](examples.md) - Explore more complex examples
- [Core Concepts](../concepts/README.md) - Understand the reactive system
- [Building UI](../building-ui/README.md) - Learn styling and layout