Makepad Core Concepts

Fundamental building blocks of Makepad UI development including layout, widgets, events, and styling.

Topic	Description
Layout System	Flow, sizing, spacing, alignment
Widgets	Common widgets, custom widget creation
Events	Event handling, hit testing, actions
Styling	Fonts, text styles, SVG icons

Overview

Makepad is a Rust-based cross-platform UI framework using:

live_design! macro for declarative UI layout
Widget composition with #[derive(Live, Widget)]
Event-driven architecture with typed Actions
GPU-accelerated rendering

Project Structure

my_app/
├── src/
│   ├── app.rs              # Main app entry, event routing
│   ├── lib.rs              # Module declarations, live_register
│   ├── home/               # Feature modules
│   │   ├── mod.rs
│   │   └── home_screen.rs
│   └── shared/             # Reusable widgets
│       ├── mod.rs
│       ├── styles.rs       # Theme, colors
│       └── widgets.rs
└── resources/              # Images, fonts

live_design! Macro

The core of Makepad UI definition:

live_design! {
    use link::theme::*;
    use link::shaders::*;
    use link::widgets::*;
 
    App = {{App}} {
        ui: <Root> {
            main_window = <Window> {
                body = <View> {
                    flow: Down,
                    spacing: 10,
                    padding: 20,
 
                    my_button = <Button> {
                        text: "Click me"
                        draw_bg: { color: #4A90D9 }
                    }
 
                    <Label> { text: "Hello Makepad" }
                }
            }
        }
    }
}

DSL Syntax Reference

Syntax	Purpose	Example
`<Widget>`	Instantiate widget	`<Button> { text: "OK" }`
`name = <Widget>`	Named reference	`my_btn = <Button> {}`
`{{StructName}}`	Link to Rust struct	`App = {{App}} {}`
`flow: Down/Right`	Layout direction	`flow: Down`
`width/height`	Sizing	`width: Fill, height: Fit`
`padding/margin`	Spacing	`padding: {left: 10, top: 5}`

Size Values

Value	Meaning
`Fill`	Fill available space
`Fit`	Fit to content
`Fixed(100.0)`	Fixed size in pixels
`All`	Fill in all directions

Event Handling

fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
    match event.hits(cx, self.view.area()) {
        Hit::FingerDown(_fe) => {
            // Handle click
        }
        _ => {}
    }
}

Resources

Makepad draw source
Robrix - Production example

All Tags

Items tagged with Core Concepts (1)

Makepad Core Concepts