Makepad-skills makepad-2.0-migration

install

source · Clone the upstream repo

git clone https://github.com/ZhangHanDong/makepad-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ZhangHanDong/makepad-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/makepad-2.0-migration" ~/.claude/skills/zhanghandong-makepad-skills-makepad-2-0-migration && rm -rf "$T"

manifest: skills/makepad-2.0-migration/SKILL.md

source content

Makepad 1.x to 2.0 Migration Skill

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

Overview

Makepad 2.0 is a fundamental architecture shift from compile-time static DSL to runtime scripting. Migration involves syntax changes, derive macro updates, lifecycle method renames, and new patterns for state management.

Documentation

Refer to the local files for detailed documentation:

```
./references/migration-guide.md
```
- Complete migration reference with examples

Quick Syntax Mapping Table

Makepad 1.x	Makepad 2.0	Notes
`live_design! { ... }`	`script_mod! { ... }`	Core macro change
`<Widget> { ... }`	`Widget{ ... }`	No angle brackets
`Key = Value`	`Key: value`	Colon, not equals
`(THEME_COLOR)`	`theme.color_*`	Theme namespace
`live_body: { ... }`	`body +: { ... }`	Merge operator
`#[derive(Live)]`	`#[derive(Script)]`	Derive macro
`#[derive(LiveHook)]`	`#[derive(ScriptHook)]`	Lifecycle hooks
`#[derive(Widget)]`	`#[derive(Widget)]`	Unchanged
`before_apply()`	`on_before_apply()`	Method rename
`after_apply()`	`on_after_apply()`	Method rename
`apply_over!()`	`script_apply_eval!()`	Runtime updates
`DefaultNone`	`Default`	Enum default
`LiveRegister`	`WidgetRegister`	Widget registration
`live_register()`	`register_widget(vm)`	Registration method
`LiveId`	`LiveId`	Unchanged

Step-by-Step Migration

Step 1: Replace Macro

// OLD
live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*;

    App = {{App}} {
        ui: <Root> { ... }
    }
}

// NEW
script_mod! {
    use mod.prelude.widgets.*

    startup() do #(App::script_component(vm)){
        ui: Root{
            // ... UI definition
        }
    }
}

Step 2: Update Derives

// OLD
#[derive(Live, LiveHook, Widget)]
pub struct MyWidget { ... }

// NEW
#[derive(Script, ScriptHook, Widget)]
pub struct MyWidget { ... }

Step 3: Update App::run

// OLD
impl LiveRegister for App {
    fn live_register(cx: &mut Cx) {
        makepad_widgets::live_design(cx);
    }
}

// NEW
impl App {
    fn run(vm: &mut ScriptVm) -> Self {
        crate::makepad_widgets::script_mod(vm);
        App::from_script_mod(vm, self::script_mod)
    }
}

Step 4: Rename Lifecycle Methods

// OLD
impl LiveHook for MyWidget {
    fn before_apply(&mut self, cx: &mut Cx, ...) { ... }
    fn after_apply(&mut self, cx: &mut Cx, ...) { ... }
}

// NEW
impl ScriptHook for MyWidget {
    fn on_before_apply(&mut self, cx: &mut Cx, ...) { ... }
    fn on_after_apply(&mut self, cx: &mut Cx, ...) { ... }
}

Step 5: Update DSL Syntax

// OLD - angle brackets, equals signs
<View> {
    width: Fill, height: Fill
    show_bg: true
    draw_bg: { color: (THEME_BG) }

    title = <Label> {
        text: "Hello"
        draw_text: { color: #fff }
    }
}

// NEW - curly braces, colons, theme namespace
View{
    width: Fill height: Fill
    show_bg: true
    draw_bg.color: theme.color_bg_app

    title := Label{
        text: "Hello"
        draw_text.color: #fff
    }
}

Step 6: Replace apply_over with script_eval

// OLD
self.label(id!(title)).apply_over(cx, live! {
    text: "New text"
});

// NEW
script_eval!(cx, {
    ui.title.set_text("New text")
});
// OR
script_apply_eval!(cx, self.ui, {
    title.text: "New text"
});

Key Breaking Changes

No commas between properties (whitespace-delimited)
No semicolons anywhere in Splash
No angle brackets for widget types
Theme constants use
```
theme.*
```
prefix, not
```
(THEME_*)
```
syntax
Named children use
```
:=
```
operator, not
```
=
```
Merge operator is
```
+:
```
not
```
:
```
for extending parent properties
height: Fit
is MANDATORY on containers (default is 0px, not auto)
Registration happens in
```
App::run
```
, not
```
live_register
```
Field attribute
```
#[source]
```
links to script object (required on some widgets)
Old
old/
directory contains archived 1.x code for reference

Common Migration Mistakes

Mistake	Symptom	Fix
Still using `live_design!`	Compile error	Replace with `script_mod!`
Using `<Widget>` syntax	Parse error	Use `Widget{}`
Using `Key = Value`	Property not applied	Use `Key: value`
Using `(THEME_COLOR)`	Unknown token	Use `theme.color_*`
Missing `height: Fit`	Container invisible (0px)	Add `height: Fit`
Using `Live` derive	Compile error	Use `Script`
Using `before_apply`	Method not found	Use `on_before_apply`
Using commas between props	Parse error	Remove commas

Best Practices for Migration

Start with examples - Study
```
examples/counter
```
and
```
examples/todo
```
for 2.0 patterns
Migrate one widget at a time - Don't try to convert everything at once
Check the old/ directory - Compare old vs new widget implementations
Test
height: Fit
- Most invisible UI is caused by missing height
Use theme variables - Replace all hardcoded theme colors with
```
theme.*
```
Add
new_batch: true
- Any View with
```
show_bg
```
and text children needs it