Makepad Skills

https://github.com/zhanghandong/makepad-skills
Admin
Agent skills for building cross-platform UI applications with the Makepad framework in Rust,...
Tokens:166,232
Snippets:1,710
Trust Score:9.4
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Handle Audio Devices and Start Recording

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-app-structure/SKILL.md

This example shows how to handle `AudioDevicesEvent` to capture the default input device ID and use it to start audio recording with `cx.use_audio_inputs`. An empty array stops recording.

```rust
impl MatchEvent for App {
    fn handle_audio_devices(&mut self, _cx: &mut Cx, e: &AudioDevicesEvent) {
        // Save default device ID
        self.default_input = e.default_input().into_iter().next();
    }
}

// When starting recording:
if let Some(device_id) = self.default_input {
    cx.use_audio_inputs(&[device_id]);  // Start capture with specific device
}

// When stopping:
cx.use_audio_inputs(&[]);  // Empty = stop all audio input
```

--------------------------------

### Resource Path Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-dsl/references/dsl-syntax-reference.md

Illustrates the correct syntax for referencing resources within the Makepad DSL.

```makepad-dsl
crate_resource("self://resources/icons/icon.svg")   // CORRECT
// dep("crate://self/resources/icon.svg")            // WRONG - old syntax
```

--------------------------------

### Makepad Dock System Complete Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-widgets/references/widget-advanced.md

Defines a complex Dock layout with nested splitters and multiple tabbed panels. This example demonstrates how to structure a multi-panel UI with custom tab appearances and content templates.

```rust
dock := Dock{
    width: Fill
    height: Fill

    // Override tab bar template
    tab_bar +: {
        TabTemplate := IconTab{
            // custom tab appearance
        }
    }

    // Root layout structure
    root := DockSplitter{
        axis: Horizontal
        align: Weighted(0.3)

        // Left panel: tabs
        a: DockTabs{
            tabs: [
                DockTab{name: "Files" template: FilesView}
                DockTab{name: "Search" template: SearchView}
            ]
            selected: 0
            closable: false
        }

        // Right panel: further split
        b: DockSplitter{
            axis: Vertical
            align: Weighted(0.7)

            a: DockTabs{
                tabs: [
                    DockTab{name: "Editor" template: EditorView}
                ]
                selected: 0
            }
            b: DockTabs{
                tabs: [
                    DockTab{name: "Console" template: ConsoleView}
                ]
                selected: 0
            }
        }
    }

    // 2. Content templates (matched by DockTab.template)
    FilesView := View{
        width: Fill height: Fill
        flow: Down
        Label{text: "File list here"}
    }

    EditorView := View{
        width: Fill height: Fill
        Label{text: "Editor content"}
    }

    SearchView := View{
        width: Fill height: Fill
        Label{text: "Search panel"}
    }

    ConsoleView := View{
        width: Fill height: Fill
        Label{text: "Console output"}
    }
}
```

--------------------------------

### Initial Render with on_startup

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-performance/SKILL.md

Use the `on_startup` callback to trigger the initial render of your UI when the application starts.

```rust
ui: Root{
    on_startup: || {
        ui.main_view.render()
    }
    main_window := Window{
        body +: {
            main_view := View{
                on_render: || {
                    // ... dynamic content ...
                }
            }
        }
    }
}
```

--------------------------------

### Makepad Splash: Full-Script Mode Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-splash/references/canvas-splash-patterns.md

Use Full-Script mode when your code starts with 'let', 'fn', or 'mod.'. This mode automatically imports necessary prelude widgets without wrapping your code in a View.

```splash
let state = { count: 0 }
fn tick() { state.count = state.count + 1 }
View{...}
```

--------------------------------

### Complete Hover Button Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-animation/SKILL.md

A complete example of a hoverable button using Makepad's animation system. It includes setup for hover states, color interpolation, and cursor changes.

```rust
use mod.prelude.widgets.*

let HoverCard = RoundedView{
    width: Fill height: Fit
    padding: 16
    new_batch: true
    cursor: Hand
    draw_bg +: {
        instance hover: 0.0
        color: mix(#2a2a3d, #3a3a5d, self.hover)
        border_radius: 8.0
    }
    animator: Animator{
        hover: {
            default: @off
            off: AnimatorState{
                from: {all: Forward {duration: 0.15}}
                apply: {draw_bg: {hover: 0.0}}
            }
            on: AnimatorState{
                from: {all: Forward {duration: 0.15}}
                apply: {draw_bg: {hover: 1.0}}
            }
        }
    }
    title := Label{text: "Hover me" draw_text.color: #fff}
}
```

--------------------------------

### Inline Startup Event

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-splash/references/splash-language-reference.md

Executes code when the application or view starts. Typically used for initial rendering or setup.

```splash
on_startup: ||{
    ui.main_view.render()
}
```

--------------------------------

### Makepad GC Run Status Output Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-performance/SKILL.md

Example of the detailed statistics printed by `mod.gc.run_status()`.

```text
GC 142us: obj[S:1200 A:340 R:89] arr[S:45 A:12 R:3] str[S:890 A:120 R:15] ...
```

--------------------------------

### Complete App Icon Example with Gradients, Groups, and Filters

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-vector/references/vector-reference.md

A comprehensive example demonstrating the creation of an app icon using gradients, filters, groups with transformations, and basic shapes. This snippet showcases advanced vector graphics capabilities in Makepad.

```rust
// Define gradients
let glass_bg = Gradient{x1: 0 y1: 0 x2: 1 y2: 1
    Stop{offset: 0 color: #x556677 opacity: 0.45}
    Stop{offset: 1 color: #x334455 opacity: 0.35}
}
let brain_grad = Gradient{x1: 0.5 y1: 0 x2: 0.5 y2: 1
    Stop{offset: 0 color: #x77ccff}
    Stop{offset: 0.4 color: #x7799ee}
    Stop{offset: 0.75 color: #x8866dd}
    Stop{offset: 1 color: #x9944cc}
}
let brain_glow = RadGradient{cx: 0.5 cy: 0.45 r: 0.45
    Stop{offset: 0 color: #x4466ee opacity: 0.4}
    Stop{offset: 1 color: #x4466dd opacity: 0.0}
}

// Define filter
let icon_shadow = Filter{
    DropShadow{dx: 0 dy: 4 blur: 6 color: #x000000 opacity: 0.5}
}

Vector{width: 256 height: 256 viewbox: vec4(0 0 256 256)
    // Glass background with shadow
    Rect{x: 16 y: 16 w: 224 h: 224 rx: 44 ry: 44
        fill: glass_bg filter: icon_shadow}

    // Brain glow
    Circle{cx: 128 cy: 95 r: 80 fill: brain_glow}

    // Brain paths (scaled and translated group)
    Group{transform: [Translate{x: 36.8 y: 11.4} Scale{x: 7.6 y: 7.6}]
        Path{d: "M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8"
            fill: false stroke: brain_grad stroke_width: 0.35
            stroke_linecap: "round" stroke_linejoin: "round"}
        Path{d: "M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8"
            fill: false stroke: brain_grad stroke_width: 0.35
            stroke_linecap: "round" stroke_linejoin: "round"}
    }

    // Keyboard keys
    Rect{x: 73 y: 190 w: 9 h: 6 rx: 1 ry: 1 fill: #xffffff fill_opacity: 0.18}
    Rect{x: 85 y: 190 w: 9 h: 6 rx: 1 ry: 1 fill: #xffffff fill_opacity: 0.18}
}
```

--------------------------------

### Layout Flow Examples

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-layout/SKILL.md

Demonstrates different flow directions (Down, Right, Overlay) and wrapping behavior for arranging child views. Includes examples for vertical stacks, horizontal rows, stacked overlays, and wrapping layouts.

```rust
use mod.prelude.widgets.*

// Vertical stack (most common)
View{
    width: Fill height: Fit
    flow: Down spacing: 10
    Label{text: "First"}
    Label{text: "Second"}
    Label{text: "Third"}
}

// Horizontal row
View{
    width: Fill height: Fit
    flow: Right spacing: 10
    Label{text: "Left"}
    Label{text: "Center"}
    Label{text: "Right"}
}

// Overlay -- children stacked on top of each other
View{
    width: Fill height: 200
    flow: Overlay
    Image{width: Fill height: Fill fit: ImageFit.Biggest}
    View{
        width: Fill height: Fit
        align: Align{x: 0.5 y: 1.0}
        padding: 10
        Label{text: "Caption overlay" draw_text.color: #fff}
    }
}

// Wrapping flow -- like a tag cloud or grid of cards
View{
    width: Fill height: Fit
    flow: Flow.Right{wrap: true}
    spacing: 8
    padding: 10
    Label{text: "Tag 1" margin: 4}
    Label{text: "Tag 2" margin: 4}
    Label{text: "Tag 3" margin: 4}
    Label{text: "Tag 4" margin: 4}
}
```

--------------------------------

### Complete Widget Action Handling Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-events/SKILL.md

This example demonstrates how to handle actions from multiple widgets within the `handle_actions` method of a `MatchEvent` implementation. It shows conditional logic for buttons, text inputs, check boxes, and drop downs.

```rust
impl MatchEvent for App {
    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
        if self.ui.button(cx, ids!(increment_button)).clicked(actions) {
            script_eval!(cx, {
                mod.state.counter += 1
                ui.main_view.render()
            });
        }

        if let Some(text) = self.ui.text_input(cx, ids!(search_input)).changed(actions) {
            self.perform_search(cx, &text);
        }

        if let Some(checked) = self.ui.check_box(cx, ids!(dark_mode)).changed(actions) {
            self.set_theme(cx, checked);
        }

        if let Some(index) = self.ui.drop_down(cx, ids!(language)).selected(actions) {
            self.change_language(cx, index);
        }
    }
}
```

--------------------------------

### Makepad 2.0 Theme Setup in App::run

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-theme/SKILL.md

Load theme definitions, select the active theme, and then load widget definitions. The theme must be loaded before widgets.

```rust
impl App {
    fn run(vm: &mut ScriptVm) -> Self {
        // Step 1: Load theme definitions (dark, light, skeleton)
        crate::makepad_widgets::theme_mod(vm);

        // Step 2: Select active theme (MUST come before widgets_mod)
        script_eval!(vm, {
            mod.theme = mod.themes.light  // or mod.themes.dark
        });

        // Step 3: Load widget definitions (they reference mod.theme)
        crate::makepad_widgets::widgets_mod(vm);

        // Step 4: Load your app's script_mod
        App::from_script_mod(vm, self::script_mod)
    }
}
```

--------------------------------

### Widget Instantiation Examples

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-dsl/references/dsl-syntax-reference.md

Shows how to instantiate widgets, including anonymous widgets, named instances, inheriting from registered types, using let bindings for templates, and overriding properties during instantiation.

```makepad-dsl
// Anonymous widget
Label{ text: "Hello" }

// Named instance (addressable)
my_label := Label{ text: "Hello" }

// Inheriting from a registered type
mod.widgets.MyButton = mod.widgets.Button{
    draw_bg +: { color: #f00 }
}

// Let binding template
let MyCard = RoundedView{
    width: Fill height: Fit
    title := Label{ text: "default" }
}

// Instantiation with overrides
MyCard{ title.text: "Custom Title" }
```

--------------------------------

### Start Makepad Studio Remote Server

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-performance/SKILL.md

Launches the Studio remote server for connecting to running applications. Ensure you run this in release mode for accurate performance metrics.

```bash
cargo run -p cargo-makepad --release -- studio --studio=127.0.0.1:8001
```

--------------------------------

### Color Math Examples

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-theme/SKILL.md

Demonstrates color multiplication for opacity and mixing two colors using theme variables.

```rust
theme.color_label_inner_inactive * 0.8
```

```rust
mix(theme.color_w, theme.color_b, 0.5)
```

--------------------------------

### SDF2D Setup

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-shaders/SKILL.md

Initializes the SDF2D object for drawing operations within the viewport.

```rust
let sdf = Sdf2d.viewport(self.pos * self.rect_size)
```

--------------------------------

### Complete Button Animator Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-animation/references/animator-reference.md

Demonstrates a comprehensive Animator setup for a button, including disabled, hover, focus, and time animation groups. It features a three-state hover group (off/on/down) and applies animations to background and text drawing properties.

```rust
animator: Animator{
    disabled: {
        default: @off
        off: AnimatorState{
            from: {all: Forward {duration: 0.}}
            apply: {
                draw_bg: {disabled: 0.0}
                draw_text: {disabled: 0.0}
            }
        }
        on: AnimatorState{
            from: {all: Forward {duration: 0.2}}
            apply: {
                draw_bg: {disabled: 1.0}
                draw_text: {disabled: 1.0}
            }
        }
    }
    hover: {
        default: @off
        off: AnimatorState{
            from: {all: Forward {duration: 0.1}}
            apply: {
                draw_bg: {down: 0.0, hover: 0.0}
                draw_text: {down: 0.0, hover: 0.0}
            }
        }
        on: AnimatorState{
            from: {
                all: Forward {duration: 0.1}
                down: Forward {duration: 0.01}
            }
            apply: {
                draw_bg: {down: 0.0, hover: snap(1.0)}
                draw_text: {down: 0.0, hover: snap(1.0)}
            }
        }
        down: AnimatorState{
            from: {all: Forward {duration: 0.2}}
            apply: {
                draw_bg: {down: snap(1.0), hover: 1.0}
                draw_text: {down: snap(1.0), hover: 1.0}
            }
        }
    }
    focus: {
        default: @off
        off: AnimatorState{
            from: {all: Snap}
            apply: {
                draw_bg: {focus: 0.0}
                draw_text: {focus: 0.0}
            }
        }
        on: AnimatorState{
            from: {all: Snap}
            apply: {
                draw_bg: {focus: 1.0}
                draw_text: {focus: 1.0}
            }
        }
    }
    time: {
        default: @off
        off: AnimatorState{
            from: {all: Forward {duration: 0.}}
            apply: {}
        }
        on: AnimatorState{
            from: {all: Loop {duration: 1.0, end: 1000000000.0}}
            apply: {
                draw_bg: {anim_time: timeline(0.0 0.0  1.0 1.0)}
            }
        }
    }
}
```

--------------------------------

### Property Assignment Examples

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-dsl/references/dsl-syntax-reference.md

Demonstrates various ways to assign properties, including simple values, nested objects, merging, and dot-path shorthand for nested properties.

```makepad-dsl
// Simple values
width: Fill
height: 200
color: #ff0000
visible: true
text: "Hello world"

// Nested objects
draw_bg: DrawQuad{
    color: #f00
}

// Merge (extend parent)
draw_bg +: {
    color: #f00
}

// Dot-path shorthand (equivalent to merge)
draw_bg.color: #f00
draw_text.text_style.font_size: 14
window.inner_size: vec2(800, 600)
```

--------------------------------

### Make HTTP Requests in Rust

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-events/SKILL.md

Illustrates how to initiate an HTTP GET request with custom headers and body using `HttpRequest` and `Cx`.

```rust
let request_id = live_id!(my_request);
let mut req = HttpRequest::new(url, HttpMethod::Get);
req.set_header("Content-Type", "application/json");
req.set_body(body_bytes);
cx.http_request(request_id, req);
```

--------------------------------

### Makepad Splash: Application Startup Handler

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-events/SKILL.md

Defines an on_startup handler at the Root level to trigger initial rendering of the main view when the application starts.

```splash
ui: Root{
    on_startup: ||{
        ui.main_view.render()
    }
    main_window := Window{
        // ...
    }
}
```

--------------------------------

### Draw Batching Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-performance/SKILL.md

Illustrates how Makepad batches draw calls by shader type. Default behavior can lead to text being drawn behind backgrounds.

```text
Draw pipeline (simplified):

Widget tree:          GPU batches (default):

  View (bg shader)      Batch 1: all bg shaders
    Label (text)   -->  Batch 2: all text shaders
  View (bg shader)
    Label (text)        Result: ALL backgrounds draw first,
                                then ALL text draws second
```

--------------------------------

### Makepad 1.x to 2.0 Migration

Source: https://github.com/zhanghandong/makepad-skills/blob/main/CLAUDE.md

Guides users on migrating from Makepad 1.x to 2.0, highlighting changes in live design and hook mechanisms.

```text
User: "How do I migrate from Makepad 1.x to 2.0?"
-> Load: makepad-2.0-migration
-> Answer with live_design→script_mod, LiveHook→ScriptHook changes
```

--------------------------------

### Constructor Value Types

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-dsl/references/dsl-syntax-reference.md

Examples of using constructor functions for common data structures like Inset, Align, and Walk.

```makepad-dsl
Inset{ top: 5 bottom: 5 left: 10 right: 10 }   // padding/margin
Align{ x: 0.5 y: 0.5 }                          // alignment
Walk{ width: 16 height: 16 }                     // icon sizing
```

--------------------------------

### Basic Splash Script Structure

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-splash/references/splash-language-reference.md

Every Splash script must begin with a `use` statement to import widgets. This example demonstrates a simple `View` with a `Label`.

```splash
use mod.prelude.widgets.*

// All widgets (View, Label, Button, etc.) are now available
View{
    flow: Down
    height: Fit
    padding: 20
    Label{text: "Hello world"}
}
```

--------------------------------

### Standard App Boilerplate

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-events/SKILL.md

Example Rust code demonstrating the required structure for a Makepad 2.0 application, including the implementation of the MatchEvent trait and the essential `handle_event` method.

```APIDOC
## Standard App Boilerplate

### Description
This section provides the essential Rust code structure required for a Makepad 2.0 application. It includes the `app_main` macro, the `App` struct with its `run` method, and the implementation of `MatchEvent` and `AppMain` traits.

### Core Structure
```rust
use makepad_widgets::*;

app_main!(App);

script_mod! {
    // ... Splash UI code ...
}

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

#[derive(Script, ScriptHook)]
pub struct App {
    #[live]
    ui: WidgetRef,
}
```

### MatchEvent Implementation
```rust
impl MatchEvent for App {
    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
        // Handle widget actions here
    }
}
```

### AppMain Implementation
```rust
impl AppMain for App {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        self.match_event(cx, event);
        self.ui.handle_event(cx, event, &mut Scope::empty());
    }
}
```

### Critical Note
The `handle_event` method in `AppMain` **must** call both `self.match_event(cx, event)` for dispatching events to `MatchEvent` handlers and `self.ui.handle_event(cx, event, &mut Scope::empty())` for propagating events to widgets.
```

--------------------------------

### Splash HTTP Request Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-splash/SKILL.md

Shows how to make HTTP requests from Splash using the `net.HttpRequest` struct and `net.http_request` function. It includes handling responses with `on_response` and errors with `on_error` callbacks.

```splash
let req = net.HttpRequest{
    url: "https://api.example.com/data"
    method: net.HttpMethod.GET
    headers: {"User-Agent": "MakepadApp/1.0"}
}
net.http_request(req) do net.HttpEvents{
    on_response: |res| {
        let text = res.body.to_string()
        let json = res.body.parse_json()
    }
    on_error: |e| { /* handle error */ }
}
```

--------------------------------

### Line Shape Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-vector/references/vector-reference.md

Defines a straight line segment. Properties include start and end points, stroke color, width, and line cap style.

```rust
Line{x1: 10 y1: 10 x2: 190 y2: 190 stroke: #fff stroke_width: 2 stroke_linecap: "round"}
```

--------------------------------

### PortalList Scrolling API

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-widgets/references/widget-advanced.md

Provides examples of using the scrolling API for PortalList. Includes methods for scrolling to specific items, smooth scrolling, getting scroll position, and enabling tail mode.

```rust
// Scroll to specific item
list.scroll_to_item(cx, item_index);

// Smooth scroll to item
list.smooth_scroll_to_item(cx, item_index);

// Get scroll position
let pos = list.scroll_position();

// Enable tail mode (auto-scroll to bottom)
list.set_tail(cx, true);
```

--------------------------------

### Use `App::from_script_mod` for App Initialization

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-migration/references/migration-guide.md

Application initialization should use `App::from_script_mod(vm, self::script_mod)`.

```rust
App::from_script_mod(vm, self::script_mod)
```

--------------------------------

### Fix Blank Window: Add height: Fit

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-troubleshooting/references/error-solutions.md

Ensure all containers have `height: Fit` to resolve completely blank or empty windows. This is a common pitfall for initial layout setup.

```rust
Container {
  height: Fit
  // ... other properties
}
```

--------------------------------

### FoldHeader Animation Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-animation/references/animator-reference.md

Demonstrates how to implement animation for a FoldHeader using its built-in `active` animation group to control the `opened` float property. This setup allows for smooth transitions between open and closed states.

```rust
FoldHeader{
    body_walk: Walk{...}
    animator: Animator{
        active: {
            default: @on
            off: AnimatorState{
                from: {all: Forward {duration: 0.2}}
                apply: {opened: 0.0}
            }
            on: AnimatorState{
                from: {all: Forward {duration: 0.2}}
                apply: {opened: 1.0}
            }
        }
    }
    header: View{ height: Fit ... }
    body: View{ ... }
}
```

--------------------------------

### Makepad Splash: View-Children Mode Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-splash/references/canvas-splash-patterns.md

Use View-Children mode for layouts starting with widget properties or child widgets. This mode wraps your content in a View and defaults to a horizontal flow unless 'flow: Down' is specified.

```splash
flow: Down spacing: 10
Label{text: "Hello"}
Button{text: "Click"}
```

--------------------------------

### App Initialization Order

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-app-structure/SKILL.md

Demonstrates the order of registration for themes, base widgets, custom widgets, and building the app from a script module. This order is critical for correct application startup.

```rust
fn run(vm: &mut ScriptVm) -> Self {
    // 1. Register theme (optional, for light/dark theme)
    crate::makepad_widgets::theme_mod(vm);
    script_eval!(vm, { mod.theme = mod.themes.light });

    // 2. Register base widgets
    crate::makepad_widgets::widgets_mod(vm);

    // 3. Register custom widget modules (if any)
    // crate::my_widgets::script_mod(vm);

    // 4. Build app from script module
    App::from_script_mod(vm, self::script_mod)
}
```

```rust
fn run(vm: &mut ScriptVm) -> Self {
    crate::makepad_widgets::script_mod(vm);   // Registers both theme + widgets
    App::from_script_mod(vm, self::script_mod)
}
```

--------------------------------

### Set Static Theme at App Startup

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-theme/SKILL.md

Illustrates how to set a static theme for the application before widgets load by evaluating a script in `App::run`.

```rust
fn run(vm: &mut ScriptVm) -> Self {
    crate::makepad_widgets::theme_mod(vm);
    script_eval!(vm, {
        mod.theme = mod.themes.light
    });
    crate::makepad_widgets::widgets_mod(vm);
    App::from_script_mod(vm, self::script_mod)
}
```

--------------------------------

### Perform HTTP GET Request

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-splash/references/splash-language-reference.md

Initiates an HTTP GET request and handles the response or errors. Set custom headers as needed.

```splash
let req = net.HttpRequest{
    url: "https://html.duckduckgo.com/html/?q=rust+programming"
    method: net.HttpMethod.GET
    headers: {"User-Agent": "MakepadApp/1.0"}
}
net.http_request(req) do net.HttpEvents{
    on_response: |res| {
        let text = res.body.to_string()
        let json = res.body.parse_json()
        // res.status_code -- HTTP status (200, 404, etc.)
    }
    on_error: |e| {
        // e.message
    }
}
```

--------------------------------

### Perform GET Request for Search Results

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-splash/references/splash-scripting-patterns.md

Initiates a GET request to fetch search results from a URL. Handles the response by parsing HTML and extracting links and snippets. Updates a UI view with the results.

```rust
use mod.prelude.widgets.*

let results = []

fn do_search(query) {
    let req = net.HttpRequest{
        url: "https://html.duckduckgo.com/html/?q=" + query
        method: net.HttpMethod.GET
        headers: {"User-Agent": "MakepadApp/1.0"}
    }
    net.http_request(req) do net.HttpEvents{
        on_response: |res| {
            let doc = res.body.to_string().parse_html()
            let links = doc.query("a.result__a").array()
            let snippets = doc.query("a.result__snippet").array()
            results = []
            for link, i in links {
                results.push({
                    title: link.text
                    url: link.attr("href")
                    snippet: if i < snippets.len() snippets[i].text else ""
                })
            }
            ui.results_view.render()
        }
        on_error: |e| {
            // handle error
        }
    }
}

// ... inside startup() UI definition:
search_input := TextInput{
    width: Fill height: Fit
    empty_text: "Search..."
    on_return: || do_search(ui.search_input.text())
}

results_view := ScrollYView{
    width: Fill height: Fill
    flow: Down spacing: 8
    on_render: ||{
        for i, result in results {
            RoundedView{
                width: Fill height: Fit
                padding: 12 flow: Down spacing: 4
                draw_bg.color: #2a2a3d
                draw_bg.border_radius: 6.0
                new_batch: true
                Label{text: result.title draw_text.color: #4af
                    draw_text.text_style.font_size: 12}
                Label{text: result.snippet draw_text.color: #aaa
                    draw_text.text_style.font_size: 10}
            }
        }
    }
}
```

--------------------------------

### Makepad Application Entry Point

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-app-structure/references/rust-splash-integration.md

The `main.rs` file typically contains the `app_main!` macro, which serves as the entry point for your Makepad application. This macro initializes the framework and starts the application with the specified `App` struct.

```rust
fn main() {
    makepad_widgets::app_main!(App);
}
```

--------------------------------

### Makepad 1.0 App Initialization Pattern

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-migration/references/migration-guide.md

Illustrates the traditional app initialization using `app_main!` and `live_design!` macros. This pattern is common in older Makepad projects.

```rust
use makepad_widgets::*;

app_main!(App);

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

    App = {{App}} {
        ui: <Root> {
            main_window = <Window> {
                body = <View> {
                    // UI here
                }
            }
        }
    }
}

#[derive(Live, LiveHook)]
pub struct App {
    #[live] ui: WidgetRef,
}

impl LiveHook for App {
    fn after_new_from_doc(&mut self, cx: &mut Cx) {
        // initialization
    }
}

impl AppMain for App {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        self.match_event(cx, event);
        self.ui.handle_event(cx, event, &mut Scope::empty());
    }
}
```

--------------------------------

### Slider Actions

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-events/SKILL.md

Query the action state of a Slider widget. Use `.slided()` to get the value when it changes during a slide or text edit. Use `.end_slide()` to get the final value when the slide ends or text is committed.

```rust
// Access: self.ui.slider(cx, ids!(my_slider))
// Returns SliderRef

.slided(actions) -> Option<f64>     // Value changed during slide or text edit
.end_slide(actions) -> Option<f64>  // Slide ended or text committed
.value() -> Option<f64>             // Current value (no actions needed)
```

--------------------------------

### Makepad 2.0 App Initialization Pattern

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-migration/references/migration-guide.md

Demonstrates the new app initialization approach in Makepad 2.0 using `script_mod!` and the `Script` derive. This pattern is recommended for new Makepad projects.

```rust
use makepad_widgets::*; 

app_main!(App);

script_mod!{
    use mod.prelude.widgets.*

    load_all_resources() do #(App::script_component(vm)){
        ui: Root{
            main_window := Window{
                window.inner_size: vec2(800, 600)
                body +: {
                    // UI here
                }
            }
        }
    }
}

impl App {
    fn run(vm: &mut ScriptVm) -> Self {
        crate::makepad_widgets::script_mod(vm);  // Register all widgets FIRST
        // Platform-specific init: vm.cx().start_stdin_service() for macos
        App::from_script_mod(vm, self::script_mod)
    }
}

#[derive(Script, ScriptHook)]
pub struct App {
    #[live] ui: WidgetRef,
}

impl MatchEvent for App {
    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
        // Handle widget actions
    }
}

impl AppMain for App {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        self.match_event(cx, event);
        self.ui.handle_event(cx, event, &mut Scope::empty());
    }
}
```

--------------------------------

### Boolean Value Types

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-dsl/references/dsl-syntax-reference.md

Examples of boolean values for properties like visibility and focus.

```makepad-dsl
visible: true
show_bg: true
clip_x: false
grab_key_focus: true
```

--------------------------------

### State Reference Prefix

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-migration/references/migration-guide.md

State references now require an `@` prefix. For example, `default: off` becomes `default: @off`.

```rust
default: off
```

```rust
default: @off
```

--------------------------------

### AnimatorState Usage Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-animation/references/animator-reference.md

Demonstrates how to define an AnimatorState for animation transitions, specifying duration and applied properties.

```rust
off: AnimatorState{
    from: {all: Forward {duration: 0.3}}
    ease: OutCubic
    apply: {draw_bg: {hover: 0.0}}
}
```

--------------------------------

### Makepad Layout: Fill, Fit, and Fixed Width/Height

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-layout/SKILL.md

Demonstrates different ways to set widget dimensions: Fill for available space, Fit for content size, and fixed pixel values. Use Fill with constraints for bounded filling.

```rust
use mod.prelude.widgets.*

// Fill: takes all available width
View{
    width: Fill height: Fit
    flow: Down
    Label{text: "I stretch to fill the width"}
}

// Fit: shrinks to content
View{
    width: Fit height: Fit
    padding: 10
    Label{text: "I am only as wide as this text"}
}

// Fixed: exact pixel size
View{
    width: 300 height: 200
    Label{text: "I am exactly 300x200 pixels"}
}

// Constrained Fill: fills but within bounds
View{
    width: Fill{min: 200 max: 600} height: Fit
    flow: Down padding: 16
    Label{text: "I fill available space but stay between 200-600px"}
}
```

--------------------------------

### Control Window Visibility in Multi-Window Apps

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-splash/SKILL.md

Demonstrates how to control the visibility of windows in a multi-window Makepad application. Use `configure_window` to show and `resize` to a minimal size (1x1) to effectively hide windows, as `WindowRef` lacks direct close/open methods.

```rust
// Show: configure_window triggers makeKeyAndOrderFront on macOS
let settings = self.ui.window(cx, ids!(settings_window));
settings.configure_window(cx, dvec2(480.0, 560.0), dvec2(500.0, 200.0), false, "Settings".into());

// Hide: resize to 1x1 (no close/minimize on WindowRef)
let capsule = self.ui.window(cx, ids!(capsule_window));
capsule.resize(cx, dvec2(1.0, 1.0));
```

--------------------------------

### Full Network Response Handling Pattern in Rust

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-events/references/event-patterns.md

This snippet shows a complete example of making an HTTP request and handling its response to update UI state. It includes setting up the UI, handling button clicks to initiate the request, and managing success, error, and progress events.

```rust
use makepad_widgets::*

app_main!(App);

script_mod! {
    use mod.prelude.widgets.*

    let state = {
        loading: false
        data: ""
        error: ""
    }
    mod.state = state

    startup() do #(App::script_component(vm)){
        ui: Root{
            on_startup: ||{
                ui.content_view.render()
            }
            main_window := Window{
                window.inner_size: vec2(600, 400)
                body +: {
                    width: Fill height: Fill
                    flow: Down spacing: 12
                    padding: 20

                    fetch_button := Button{
                        text: "Fetch Data"
                    }

                    content_view := View{
                        width: Fill height: Fill
                        flow: Down
                        on_render: ||{
                            if state.loading {
                                Label{text: "Loading..." draw_text.color: #888}
                            } else if state.error != "" {
                                Label{text: "Error: " + state.error draw_text.color: #f44}
                            } else if state.data != "" {
                                Label{text: state.data}
                            } else {
                                Label{text: "Click Fetch to load data" draw_text.color: #888}
                            }
                        }
                    }
                }
            }
        }
    }
}

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

#[derive(Script, ScriptHook)]
pub struct App {
    #[live]
    ui: WidgetRef,
    #[rust]
    active_request: Option<LiveId>,
}

impl MatchEvent for App {
    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
        if self.ui.button(cx, ids!(fetch_button)).clicked(actions) {
            // Show loading state
            script_eval!(cx, {
                mod.state.loading = true
                mod.state.error = ""
                ui.content_view.render()
            });

            // Fire HTTP request
            let request_id = live_id!(fetch_data);
            let req = HttpRequest::new(
                "https://api.example.com/data",
                HttpMethod::Get,
            );
            cx.http_request(request_id, req);
            self.active_request = Some(request_id);
        }
    }

    fn handle_http_response(
        &mut self,
        cx: &mut Cx,
        request_id: LiveId,
        response: &HttpResponse,
    ) {
        if Some(request_id) != self.active_request {
            return;
        }
        self.active_request = None;

        let body = String::from_utf8_lossy(&response.body).to_string();
        script_eval!(cx, {
            mod.state.loading = false
            mod.state.data = #(body)
            ui.content_view.render()
        });
    }

    fn handle_http_request_error(
        &mut self,
        cx: &mut Cx,
        request_id: LiveId,
        err: &HttpError,
    ) {
        if Some(request_id) != self.active_request {
            return;
        }
        self.active_request = None;

        let message = err.message.clone();
        script_eval!(cx, {
            mod.state.loading = false
            mod.state.error = #(message)
            ui.content_view.render()
        });
    }

    fn handle_http_progress(
        &mut self,
        cx: &mut Cx,
        request_id: LiveId,
        progress: &HttpProgress,
    ) {
        if Some(request_id) != self.active_request {
            return;
        }
        let loaded = progress.loaded;
        let total = progress.total;
        log!("Download progress: {} / {} bytes", loaded, total);
    }
}

impl AppMain for App {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        self.match_event(cx, event);
        self.ui.handle_event(cx, event, &mut Scope::empty());
    }
}

```

--------------------------------

### Circle Shape Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-vector/references/vector-reference.md

Defines a circular shape. Properties include center coordinates, radius, fill, and stroke.

```rust
Circle{cx: 50 cy: 50 r: 40 fill: #08f}
```

--------------------------------

### String Value Types

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-dsl/references/dsl-syntax-reference.md

Shows examples of string literals, including multi-line strings using newline characters.

```makepad-dsl
text: "Hello world"
body: "Line 1\nLine 2"
empty_text: "Placeholder"
```

--------------------------------

### Control Modal Visibility from Rust

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-widgets/references/widget-advanced.md

Provides Rust code examples for opening and closing a modal dialog using its ID.

```rust
// Open modal
self.modal(id!(modal)).open(cx);

// Close modal
self.modal(id!(modal)).close(cx);
```

--------------------------------

### Run Application Through Studio

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-performance/SKILL.md

A JSON command to instruct Makepad Studio to run a specific application. Replace 'makepad-example-myapp' with your application's name.

```json
{"Run":{"mount":"makepad","process":"makepad-example-myapp","args":[]}}
```

--------------------------------

### Ellipse Shape Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-vector/references/vector-reference.md

Defines an elliptical shape. Properties include center coordinates, x-radius, y-radius, fill, and stroke.

```rust
Ellipse{cx: 100 cy: 50 rx: 80 ry: 40 fill: #0f8}
```

--------------------------------

### Rust: Running the App

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-app-structure/SKILL.md

Provides commands for running a Makepad application in development, with hot reload, and in release mode.

```bash
# Development
cargo run -p my-app

# Development with hot reload (Splash changes apply without recompilation)
cargo run -p my-app -- --hot

# Release
cargo run -p my-app --release

# With cargo-makepad for mobile/web
cargo makepad run -p my-app
```

--------------------------------

### Spacing Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-layout/SKILL.md

Illustrates how to apply uniform spacing between child elements in a vertical layout. The `spacing` property defines the gap.

```rust
View{
    flow: Down spacing: 12
    Label{text: "12px gap below me"}
    Label{text: "12px gap above and below me"}
    Label{text: "12px gap above me"}
}
```

--------------------------------

### View Properties Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-dsl/SKILL.md

Properties are separated by whitespace or newlines, and no commas are needed between sibling properties within a view definition.

```makepad-2.0-dsl
View{
    width: Fill
    height: Fit
    flow: Down
    spacing: 10
    padding: 15
}
```

--------------------------------

### Makepad Theming for Self-Contained Styles

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-design-judgment/references/design-philosophy.md

Illustrates the correct approach to styling in Makepad using themes, contrasting it with incorrect cascading styles.

```text
Wrong (trying to cascade):
  "Set a global font that all labels inherit"

Correct (using themes):
  mod.themes defines theme variables
  Each widget references theme.font_xxx, theme.color_xxx
  No cascade — explicit reference to shared tokens
```

--------------------------------

### Todo List: Before Optimization (Batching)

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-performance/references/optimization-guide.md

This code demonstrates the 'before' state of a Todo List where text might be invisible due to batching issues. It defines a basic TodoItem and a list of tasks.

```rust
let TodoItem = RoundedView{
    width: Fill height: Fit
    padding: 12
    draw_bg.color: #2a2a3d
    draw_bg.border_radius: 6.0
    label := Label{text: "task" draw_text.color: #ddd}
}

View{
    flow: Down height: Fit spacing: 4 padding: 16
    TodoItem{label.text: "Buy groceries"}
    TodoItem{label.text: "Fix bug"}
    TodoItem{label.text: "Write tests"}
}
```

--------------------------------

### Parse HTML String

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-splash/references/splash-language-reference.md

Call `.parse_html()` on any string to get a queryable HTML document. This is the entry point for HTML manipulation.

```rust
let doc = html_string.parse_html()
```

--------------------------------

### Rectangle Shape Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-vector/references/vector-reference.md

Defines a rectangular shape with optional rounded corners. Properties include position, dimensions, fill, and stroke.

```rust
Rect{x: 10 y: 20 w: 100 h: 50 rx: 5 ry: 5 fill: #f80 stroke: #fff stroke_width: 1}
```

--------------------------------

### Correct Host-Level Wrappers in App Code

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-troubleshooting/SKILL.md

Demonstrates the correct placement of UI content within the Root{} and Window{} wrappers in the app's script_mod! block.

```rust
script_mod!{
    use mod.prelude.widgets.*
    load_all_resources() do #(App::script_component(vm)){
        ui: Root{
            main_window := Window{
                window.inner_size: vec2(800 600)
                body +: { 
                    // UI content goes HERE
                    View{ height: Fit Label{text: "Hello"} }
                }
            }
        }
    }
}
```

--------------------------------

### Polling Timer Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-events/references/event-patterns.md

Set up an interval timer to poll a remote resource every 30 seconds. This is useful for periodic updates.

```rust
#[derive(Script, ScriptHook)]
pub struct App {
    #[live] ui: WidgetRef,
    #[rust] poll_timer: Timer,
    #[rust] active_request_id: Option<LiveId>,
}

impl MatchEvent for App {
    fn handle_startup(&mut self, cx: &mut Cx) {
        // Start polling every 30 seconds
        self.poll_timer = cx.start_interval(30.0);
        self.poll_remote(cx);
    }

    fn handle_timer(&mut self, cx: &mut Cx, event: &TimerEvent) {
        if self.poll_timer.is_timer(event).is_some() {
            self.poll_remote(cx);
        }
    }
}
```

--------------------------------

### Mutable Variable Example

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-shaders/references/shader-reference.md

Shows how to declare and use mutable variables in shaders. The 'color' variable is updated based on a hover condition.

```rust
let mut color = self.color
if self.hover > 0.5 { color = self.color_hover }
```

--------------------------------

### Makepad Batch Boundary Visualization with new_batch

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-performance/references/optimization-guide.md

Demonstrates how `new_batch: true` creates distinct draw boundaries within a widget tree, ensuring that draw commands are processed in separate groups for correct layering.

```rust
RoundedView{ new_batch: true draw_bg.color: #1e1e2e    <-- Batch 1 START
    Label{text: "Title"}                                     bg + text contained
    Hr{}
    View{ new_batch: true show_bg: true                 <-- Batch 2 START
        draw_bg.color: #2a2a3d
        Label{text: "Item 1"}                                bg + text contained
    }
    View{ new_batch: true show_bg: true                 <-- Batch 3 START
        draw_bg.color: #2a2a3d
        Label{text: "Item 2"}                                bg + text contained
    }
}

```

--------------------------------

### Use `register_widget` for Widget Registration

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-migration/references/migration-guide.md

Widget registration now uses the `#(Widget::register_widget(vm))` syntax.

```rust
#(Widget::register_widget(vm))
```

--------------------------------

### Override Get Color for DrawSvg

Source: https://github.com/zhanghandong/makepad-skills/blob/main/skills/makepad-2.0-shaders/references/shader-reference.md

Overrides the `get_color` function for `DrawSvg` to apply a dynamic color mix based on SVG time.

```rust
// Override get_color (e.g. on DrawSvg)
draw_svg +: {
    svg: crate_resource("self:resources/scene.svg")
    get_color: fn() {
        let base = self.eval_gradient();
        let t = self.svg_time;
        return mix(base, vec4(1.0, 0.0, 0.0, 1.0), sin(t) * 0.5 + 0.5);
    }
}
```
Tokens:
Raw