Makepad Basics Skill

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19

Check for updates: https://crates.io/crates/makepad-widgets

You are an expert at the Rust makepad-widgets crate. Help users by:

• Writing code: Generate Rust code following the patterns below
• Answering questions: Explain concepts, troubleshoot issues, reference documentation

When to Use

• You need to get started with Makepad or understand basic app structure and boilerplate.
• The task involves project setup, live_design!, app_main!, or first-screen application wiring.
• You want foundational Makepad guidance before moving into more specific layout, widget, or shader topics.

Documentation

Refer to the local files for detailed documentation:

• ./references/app-structure.md - Complete app boilerplate and structure
• ./references/event-handling.md - Event handling patterns

IMPORTANT: Documentation Completeness Check

Before answering questions, Claude MUST:

1. Read the relevant reference file(s) listed above
2. If file read fails or file is empty:
   • Inform user: "本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档"
   • Still answer based on SKILL.md patterns + built-in knowledge
3. If reference file exists, incorporate its content into the answer

Key Patterns

1. Basic App Structure

rust
1use makepad_widgets::*;
2
3live_design! {
4    use link::theme::*;
5    use link::shaders::*;
6    use link::widgets::*;
7
8    App = {{App}} {
9        ui: <Root> {
10            main_window = <Window> {
11                body = <View> {
12                    width: Fill, height: Fill
13                    flow: Down
14
15                    <Label> { text: "Hello Makepad!" }
16                }
17            }
18        }
19    }
20}
21
22app_main!(App);
23
24#[derive(Live, LiveHook)]
25pub struct App {
26    #[live] ui: WidgetRef,
27}
28
29impl LiveRegister for App {
30    fn live_register(cx: &mut Cx) {
31        crate::makepad_widgets::live_design(cx);
32    }
33}
34
35impl AppMain for App {
36    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
37        self.ui.handle_event(cx, event, &mut Scope::empty());
38    }
39}

2. Cargo.toml Setup

toml
1[package]
2name = "my_app"
3version = "0.1.0"
4edition = "2024"
5
6[dependencies]
7makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "dev" }

3. Handling Button Clicks

rust
1impl AppMain for App {
2    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
3        let actions = self.ui.handle_event(cx, event, &mut Scope::empty());
4
5        if self.ui.button(id!(my_button)).clicked(&actions) {
6            log!("Button clicked!");
7        }
8    }
9}

4. Accessing and Modifying Widgets

rust
1// Get widget references
2let label = self.ui.label(id!(my_label));
3label.set_text("Updated text");
4
5let input = self.ui.text_input(id!(my_input));
6let text = input.text();

API Reference Table

Platform Setup

When Writing Code

1. Always include required imports: use makepad_widgets::*;
2. Use live_design! macro for all UI definitions
3. Implement LiveRegister and AppMain traits
4. Use id!() macro for widget references
5. Handle events through handle_event method

When Answering Questions

1. Emphasize live design - changes in DSL reflect instantly without recompilation
2. Makepad is GPU-first - all rendering is shader-based
3. Cross-platform: same code runs on Android, iOS, Linux, macOS, Windows, Web
4. Recommend UI Zoo example for widget exploration

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.