From makepad-skills
Migrates Makepad 1.x code to 2.0 by replacing live_design! with script_mod!, angle brackets with curly braces, Live derives/hooks with Script, apply_over! with script_apply_eval!, and renaming lifecycle methods.
npx claudepluginhub zhanghandong/makepad-skills --plugin makepad-skillsThis skill uses the workspace's default tool permissions.
> **Version:** makepad-widgets (dev branch) | **Last Updated:** 2026-03-03
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Version: makepad-widgets (dev branch) | Last Updated: 2026-03-03
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.
Refer to the local files for detailed documentation:
./references/migration-guide.md - Complete migration reference with examples| 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 |
// 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
}
}
}
// OLD
#[derive(Live, LiveHook, Widget)]
pub struct MyWidget { ... }
// NEW
#[derive(Script, ScriptHook, Widget)]
pub struct MyWidget { ... }
// 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)
}
}
// 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, ...) { ... }
}
// 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
}
}
// 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"
});
theme.* prefix, not (THEME_*) syntax:= operator, not =+: not : for extending parent propertiesheight: Fit is MANDATORY on containers (default is 0px, not auto)App::run, not live_register#[source] links to script object (required on some widgets)old/ directory contains archived 1.x code for reference| 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 |
examples/counter and examples/todo for 2.0 patternsheight: Fit - Most invisible UI is caused by missing heighttheme.*new_batch: true - Any View with show_bg and text children needs it