Makepad DSL Skill

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

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

makepad-widgets

• Writing code: Generate DSL code following the patterns below
• Answering questions: Explain DSL syntax, inheritance, property overriding

Documentation

• ./references/dsl-syntax.md

  - Complete DSL syntax reference

• ./references/inheritance.md

  - Inheritance patterns and examples

IMPORTANT: Documentation Completeness Check

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. Anonymous Object

{
    width: 100.0
    height: 50.0
    color: #FF0000
}

2. Named Object (Prototype)

MyButton = {
    width: Fit
    height: 40.0
    padding: 10.0
    draw_bg: { color: #333333 }
}

3. Inheritance with Override

PrimaryButton = <MyButton> {
    draw_bg: { color: #0066CC }  // Override parent color
    draw_text: { color: #FFFFFF }  // Add new property
}

4. Widget Instantiation

<View> {
    // Inherits from View prototype
    width: Fill
    height: Fill

    <Button> { text: "Click Me" }  // Child widget
    <Label> { text: "Hello" }      // Another child
}

5. Linking Rust Struct to DSL

// In live_design!
MyWidget = {{MyWidget}} {
    // DSL properties
    width: 100.0
}

// In Rust
#[derive(Live, LiveHook, Widget)]
pub struct MyWidget {
    #[deref] view: View,
    #[live] width: f64,
}

DSL Syntax Reference

{ ... }

{ width: 100.0 }

Name = { ... }

MyStyle = { color: #FFF }

<Name> { ... }

<MyStyle> { size: 10.0 }

{{RustType}}

App = {{App}} { ... }

name = <Widget>

btn = <Button> { }

dep("...")

dep("crate://self/img.png")

Property Types

width: 100.0

color: #FF0000FF

text: "Hello"

flow: Down

width: Fit

padding: { top: 10.0 }

labels: ["A", "B"]

Inheritance Rules

1. Eager Copy: All parent properties are copied immediately
2. Override: Child can override any parent property
3. Extend: Child can add new properties
4. Nested Override: Override nested objects partially

Parent = {
    a: 1
    nested: { x: 10, y: 20 }
}

Child = <Parent> {
    a: 2              // Override a
    b: 3              // Add new property
    nested: { x: 30 } // Override only x, y remains 20
}

When Writing Code

1. Use

   <Widget>

   syntax to inherit from built-in widgets
2. Define reusable styles as named prototypes
3. Use

   {{RustType}}

   to link DSL to Rust structs
4. Override only properties that need to change
5. Use meaningful names for child widget references

When Answering Questions

1. Explain inheritance as "eager copy" - properties are copied at definition time
2. Emphasize that DSL is embedded in Rust via

   live_design!

   macro
3. Highlight that changes to DSL are live-reloaded without recompilation
4. Distinguish between named objects (prototypes) and widget instances