Supporting material availability

This catalog copy contains the inline guidance below, but does not include the following supporting paths. They are external prerequisites, not bundled files:

• ./references/splash-tutorial.md

Ask for the original supporting material or an existing installation before using a step that depends on these paths; this catalog does not identify a verified download source for them. Resolve each path relative to that installation, inspect its contents, and verify any applicable license and execution prerequisites. Do not run a command or claim a referenced procedure was followed until its required file exists. Do not fabricate the missing scripts or treat an unrelated file with the same name as equivalent. Independent steps fully documented here can proceed within the user’s authorized scope; report any dependent step as unavailable.

Makepad Splash Skill

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

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

You are an expert at Makepad Splash scripting language. Help users by:

• Writing Splash scripts: Dynamic UI and workflow automation
• Understanding Splash: Purpose, syntax, and capabilities

When to Use

• You need dynamic scripting inside Makepad using Splash.
• The task involves script!, cx.eval, runtime-generated UI, or workflow automation in Makepad.
• You want guidance on Splash syntax and purpose rather than static Rust-only patterns.

Documentation

Refer to the local files for detailed documentation:

• ./references/splash-tutorial.md - Splash language tutorial

IMPORTANT: Documentation Completeness Check

Before answering questions, Claude MUST:

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

What is Splash?

Splash is Makepad's dynamic scripting language designed for:

• AI-assisted workflows
• Dynamic UI generation
• Rapid prototyping
• HTTP requests and async operations

Script Macro

// Embed Splash code in Rust
script!{
    fn main() {
        let x = 10;
        console.log("Hello from Splash!");
    }
}

Execution

// Evaluate Splash code at runtime
cx.eval(code_string); // security-allowlist: Makepad runtime API; require trusted code_string

// With context
cx.eval_with_context(code, context);

Basic Syntax

Variables

let x = 10;
let name = "Makepad";
let items = [1, 2, 3];
let config = { width: 100, height: 50 };

Functions

fn add(a, b) {
    return a + b;
}

fn greet(name) {
    console.log("Hello, " + name);
}

Control Flow

// If-else
if x > 10 {
    console.log("big");
} else {
    console.log("small");
}

// Loops
for i in 0..10 {
    console.log(i);
}

while condition {
    // ...
}

Built-in Objects

console

console.log("Message");
console.warn("Warning");
console.error("Error");

http

// GET request
let response = http.get("https://api.example.com/data");

// POST request
let response = http.post("https://api.example.com/data", {
    body: { key: "value" }
});

timer

// Set timeout
timer.set(1000, fn() {
    console.log("1 second passed");
});

// Set interval
let id = timer.interval(500, fn() {
    console.log("tick");
});

// Clear timer
timer.clear(id);

Widget Interaction

// Access widgets
let button = ui.widget("my_button");
button.set_text("Click Me");
button.set_visible(true);

// Listen to events
button.on_click(fn() {
    console.log("Button clicked!");
});

Async Operations

// Async function
async fn fetch_data() {
    let response = await http.get("https://api.example.com");
    return response.json();
}

// Call async
fetch_data().then(fn(data) {
    console.log(data);
});

AI Workflow Integration

Splash is designed for AI-assisted development:

// Dynamic UI generation
fn create_form(fields) {
    let form = ui.create("View");
    for field in fields {
        let input = ui.create("TextInput");
        input.set_label(field.label);
        form.add_child(input);
    }
    return form;
}

// AI can generate this dynamically
create_form([
    { label: "Name" },

…