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
Related: Agent Messaging Skill and Agent Ops Incident Notifier. Hub: skills.
Comments
No comments yet. Be the first to comment!
Related Tools
Related Insights
Anthropic Subagent: The Multi-Agent Architecture Revolution
Deep dive into Anthropic multi-agent architecture design. Learn how Subagents break through context window limitations, achieve 90% performance improvements, and real-world applications in Claude Code.
Seven AI Coding CLIs, Six Months: No Matter How Strong the Model, Work Needs Supervision
Claude Code, Codex, opencode, pi, omp and DeepSeek Harness all have personalities. After six months of deep use I run a division of labor: pi for the fastest cheapest reviews, omp for complex PRs, DeepSeek Harness on V4 Flash for high-frequency low-cost review, and Claude Code, Qoder and Cursor for writing. No matter how strong the model, work needs supervision — ideally from an independent third party.
Skills + Hooks + Plugins: How Anthropic Redefined AI Coding Tool Extensibility
An in-depth analysis of Claude Code's trinity architecture of Skills, Hooks, and Plugins. Explore why this design is more advanced than GitHub Copilot and Cursor, and how it redefines AI coding tool extensibility through open standards.