makepad-splash

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Makepad Splash Skill

Makepad Splash 技能

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

版本： makepad-widgets（开发分支）| 最后更新： 2026年1月19日

检查更新：https://crates.io/crates/makepad-widgets

你是Makepad Splash脚本语言的专家。为用户提供以下帮助：

编写Splash脚本：动态UI与工作流自动化
理解Splash：用途、语法及功能

Documentation

文档

Refer to the local files for detailed documentation:

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

请参考本地文件获取详细文档：

```
./references/splash-tutorial.md
```
- Splash语言教程

IMPORTANT: Documentation Completeness Check

重要提示：文档完整性检查

Before answering questions, Claude MUST:

Read the relevant reference file(s) listed above
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
If reference file exists, incorporate its content into the answer

在回答问题前，Claude必须：

阅读上述列出的相关参考文件
如果文件读取失败或文件为空：
- 告知用户："本地文档不完整，建议运行
```
/sync-crate-skills makepad --force
```
  更新文档"
- 仍需基于SKILL.md的格式和内置知识进行回答
如果参考文件存在，需将其内容融入回答中

What is Splash?

什么是Splash？

Splash is Makepad's dynamic scripting language designed for:

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

Splash是Makepad的动态脚本语言，专为以下场景设计：

AI辅助工作流
动态UI生成
快速原型开发
HTTP请求与异步操作

Script Macro

脚本宏

rust

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

rust

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

Execution

执行方式

rust

// Evaluate Splash code at runtime
cx.eval(code_string);

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

rust

// Evaluate Splash code at runtime
cx.eval(code_string);

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

Basic Syntax

基础语法

Variables

变量

splash

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

splash

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

Functions

函数

splash

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

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

splash

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

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

Control Flow

控制流

splash

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

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

while condition {
    // ...
}

splash

// 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

splash

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

splash

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

http

splash

// 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" }
});

splash

// 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

splash

// 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);

splash

// 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

组件交互

splash

// 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!");
});

splash

// 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

异步操作

splash

// 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);
});

splash

// 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

AI工作流集成

Splash is designed for AI-assisted development:

splash

// 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" },
    { label: "Email" },
    { label: "Message" }
]);

Splash专为AI辅助开发设计：

splash

// 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" },
    { label: "Email" },
    { label: "Message" }
]);

Use Cases

使用场景

Rapid Prototyping: Quickly test UI layouts without recompilation
AI Agents: Let AI generate and modify UI dynamically
Configuration: Runtime configuration of app behavior
Scripted Workflows: Automate repetitive tasks
Plugin System: Extend app functionality with scripts

快速原型开发：无需重新编译即可快速测试UI布局
AI Agent：让AI动态生成和修改UI
配置管理：应用行为的运行时配置
脚本化工作流：自动化重复性任务
插件系统：通过脚本扩展应用功能

When Answering Questions

回答问题时的注意事项

Splash is for dynamic/runtime scripting, not core app logic
Use Rust for performance-critical code, Splash for flexibility
Splash syntax is similar to JavaScript/Rust hybrid
Scripts run in a sandboxed environment
HTTP and timer APIs enable async operations

Splash用于动态/运行时脚本，而非核心应用逻辑
性能关键型代码使用Rust，灵活性需求使用Splash
Splash语法类似JavaScript与Rust的混合风格
脚本运行在沙箱环境中
HTTP和timer API支持异步操作