makepad-core

📁 zhanghandong/makepad-skills 📅 Jan 16, 2026

总安装量

周安装量

#74428

全站排名

安装命令

npx skills add https://github.com/zhanghandong/makepad-skills --skill makepad-core

Skill 文档

Makepad Core Concepts

This category covers the fundamental building blocks of Makepad UI development.

Quick Navigation

Topic	File	Use When
Layout System	Flow, sizing, spacing, alignment	Arranging UI elements
Widgets	Common widgets, custom widgets	Building UI components
Events	Event handling, hit testing, actions	Handling user interaction
Styling	Fonts, text styles, SVG icons	Styling text and graphics

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}`
`dep("crate://...")`	Resource path	`dep("crate://self/logo.png")`

Size Values

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

Module Registration

// In lib.rs
impl LiveRegister for App {
    fn live_register(cx: &mut Cx) {
        makepad_widgets::live_design(cx);

        // Register your modules
        crate::shared::live_design(cx);
        crate::home::live_design(cx);

        // Link theme
        cx.link(live_id!(theme), live_id!(theme_desktop_dark));
    }
}

// In each module's mod.rs
pub fn live_design(cx: &mut Cx) {
    self::home_screen::live_design(cx);
    self::sidebar::live_design(cx);
}

Next Steps

Layout System – Learn how to arrange UI elements
Widgets – Build custom components
Events – Handle user interactions
Styling – Style your UI with fonts and icons

References

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台