Makepad Core Concepts
Fundamental building blocks of Makepad UI development including layout, widgets, events, and styling.
Quick Navigation
| 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
Comments
No comments yet. Be the first to comment!
Related Tools
Makepad Getting Started
makepad.nl
Entry point for Makepad development with Claude. Learn project setup, structure, and available skills for building cross-platform UI applications with Rust.
Skills
Makepad Reference
makepad.nl
Reference materials for Makepad development including troubleshooting common errors, code quality guidelines, and responsive layout patterns for cross-platform apps.
Skills
Makepad Components Gallery
makepad.nl
Quick reference for all Makepad built-in widgets with usage examples. Covers buttons, inputs, sliders, checkboxes, dropdowns, labels, icons, and virtual lists.
Skills
