makepad-2.0-splash

Name: makepad-2.0-splash
Author: ZhangHanDong

743stars87forks

How to install makepad-2.0-splash?

zhanghandong/makepad-skills/makepad-2.0-splash

$npx -y skills add ZhangHanDong/makepad-skills --skill makepad-2.0-splash

Installs into the current project.

Summary

CRITICAL: Use for Makepad 2.0 Splash scripting language. Triggers on: splash language, makepad script, script_mod!, makepad scripting, splash 脚本, makepad 2.0 script, mod.state, on_render, script_eval, streaming evaluation, splash syntax, splash vm, let binding, splash functions,

Files · 1

View on GitHub

SKILL.md

1	# Makepad 2.0 Splash Scripting Language
2
3	Splash is Makepad 2.0's core runtime UI scripting language, released February 12, 2026. It replaces the old compile-time `live_design!` macro system with a runtime `script_mod!` macro that enables hot reload, streaming evaluation, and AI-first code generation.
4
5	## Core Concepts
6
7	### Script Structure
8
9	Every Splash script starts with a `use` import and is embedded in Rust via the `script_mod!{}` macro:
10
11	```rust
12	use makepad_widgets::*;
13
14	app_main!(App);
15
16	script_mod! {
17	use mod.prelude.widgets.*
18
19	// let bindings, functions, state, and UI definitions go here
20
21	startup() do #(App::script_component(vm)){
22	ui: Root{
23	main_window := Window{
24	window.inner_size: vec2(800, 600)
25	body +: {
26	// UI content
27	}
28	}
29	}
30	}
31	}
32	```
33
34	### Syntax Rules
35
36	- No commas between properties -- whitespace-delimited
37	- No semicolons -- cleaner syntax optimized for LLM generation
38	- Property assignment: `key: value`
39	- Dot-path shorthand: `draw_bg.color: #f00` (equivalent to `draw_bg +: { color: #f00 }`)
40	- Merge operator: `key +: { ... }` extends parent without replacing
41	- Named children: `name := Widget{...}` (addressable, overridable per-instance)
42	- Let bindings: `let MyTemplate = Widget{...}` (local scope, must be defined before use)
43	- Rust binding: `#(Struct::register_widget(vm))` connects Splash to Rust structs
44	- Debug logging: `~expression` logs value during evaluation
45
46	### State Management
47
48	State is managed via the `mod.state` object and reactive `on_render` callbacks:
49
50	```
51	// Define state
52	let state = { counter: 0 }
53	mod.state = state
54
55	// Reactive rendering -- re-runs when .render() is called
56	main_view := View{
57	on_render: \|\|{
58	Label{ text: "Count: " + state.counter }
59	}
60	}
61	```
62
63	### Event Handling
64
65	Events are handled both inline in Splash and from Rust:
66
67	```
68	// Inline event handlers in Splash
69	add_button := Button{
70	text: "Add"
71	on_click: \|\|{
72	add_todo(ui.todo_input.text(), "")
73	ui.todo_input.set_text("")
74	}
75	}
76
77	// TextInput return key
78	todo_input := TextInput{
79	on_return: \|\| ui.add_button.on_click()
80	}
81
82	// Startup event
83	on_startup: \|\|{
84	ui.main_view.render()
85	}
86	```
87
88	From Rust, use `script_eval!` to execute Splash code:
89
90	```rust
91	impl MatchEvent for App {
92	fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
93	if self.ui.button(cx, ids!(increment_button)).clicked(actions) {
94	script_eval!(cx, {
95	mod.state.counter += 1
96	ui.main_view.render()
97	});
98	}
99	}
100	}
101	```
102
103	### Functions
104
105	```
106	fn tag_color(tag) {
107	if tag == "dev" theme.color_highlight
108	else if tag == "design" theme.color_selection_focus
109	else theme.color_highlight
110	}
111
112	fn add_todo(text, tag) {
113	todos.push({text: text, tag: tag, done: false})
114	ui.todo_list.render()
115	}
116	```
117
118	### Control Flow
119
120	```
121	// If/else
122	if todos.len() == 0
123	EmptyState{}
124	else for i, todo in todos {
125	TodoItem{ label.text: todo.text }
126	}
127
128	// For loops
129	for i, item in array {
130	Label{ text: item.name }
131	}
132
133	// While
134	while condition { ... }
135	```
136
137	### HTTP Requests
138
139	```
140	let req = net.HttpRequest{
141	url: "https://api.example.com/data"
142	method: net.HttpMethod.GET
143	headers: {"User-Agent": "MakepadApp/1.0"}
144	}
145	net.http_request(req) do net.HttpEvents{
146	on_response: \|res\| {
147	let text = res.body.to_string()
148	let json = res.body.parse_json()
149	}
150	on_error: \|e\| { /* handle error */ }
151	}
152	```
153
154	Streaming responses use `is_streaming: true` with `on_stream` and `on_complete` callbacks.
155
156	### HTML Parsing
157
158	```
159	let doc = html_string.parse_html()
160	doc.query("p") // all <p> elements
161	doc.query("#main") // by id
162	doc.query("p.bold") // by class
163	doc.query("div > p") // direct children
164	doc.query("p[0]").text // text content
165	doc.query("a@href") // attribute value
166	```
167
168	### Streaming Evaluation
169
170	Splash's parser supports checkpoint-based incremental parsing, designed for AI/LLM streaming code generation:
171
172	```rust
173	// Rust API for streaming evaluation
174	vm.eval_with_append_source(script_mod, &code, NIL.into())
175	```
176
177	This enables real-time UI updates as code is generated token-by-token, without requiring a complete script before evaluation.
178
179	### Hot Reload & Script Mod Tracking
180
181	Splash scripts support ho

People who liked this also viewed

6 picks

Type

makepad-2.0-splash

743stars87forks

View on GitHub

How to install makepad-2.0-splash?

zhanghandong/makepad-skills/makepad-2.0-splash

$npx -y skills add ZhangHanDong/makepad-skills --skill makepad-2.0-splash

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Makepad 2.0 Splash Scripting Language
2
3	Splash is Makepad 2.0's core runtime UI scripting language, released February 12, 2026. It replaces the old compile-time `live_design!` macro system with a runtime `script_mod!` macro that enables hot reload, streaming evaluation, and AI-first code generation.
4
5	## Core Concepts
6
7	### Script Structure
8
9	Every Splash script starts with a `use` import and is embedded in Rust via the `script_mod!{}` macro:
10
11	```rust
12	use makepad_widgets::*;
13
14	app_main!(App);
15
16	script_mod! {
17	use mod.prelude.widgets.*
18
19	// let bindings, functions, state, and UI definitions go here
20
21	startup() do #(App::script_component(vm)){
22	ui: Root{
23	main_window := Window{
24	window.inner_size: vec2(800, 600)
25	body +: {
26	// UI content
27	}
28	}
29	}
30	}
31	}
32	```
33
34	### Syntax Rules
35
36	- No commas between properties -- whitespace-delimited
37	- No semicolons -- cleaner syntax optimized for LLM generation
38	- Property assignment: `key: value`
39	- Dot-path shorthand: `draw_bg.color: #f00` (equivalent to `draw_bg +: { color: #f00 }`)
40	- Merge operator: `key +: { ... }` extends parent without replacing
41	- Named children: `name := Widget{...}` (addressable, overridable per-instance)
42	- Let bindings: `let MyTemplate = Widget{...}` (local scope, must be defined before use)
43	- Rust binding: `#(Struct::register_widget(vm))` connects Splash to Rust structs
44	- Debug logging: `~expression` logs value during evaluation
45
46	### State Management
47
48	State is managed via the `mod.state` object and reactive `on_render` callbacks:
49
50	```
51	// Define state
52	let state = { counter: 0 }
53	mod.state = state
54
55	// Reactive rendering -- re-runs when .render() is called
56	main_view := View{
57	on_render: \|\|{
58	Label{ text: "Count: " + state.counter }
59	}
60	}
61	```
62
63	### Event Handling
64
65	Events are handled both inline in Splash and from Rust:
66
67	```
68	// Inline event handlers in Splash
69	add_button := Button{
70	text: "Add"
71	on_click: \|\|{
72	add_todo(ui.todo_input.text(), "")
73	ui.todo_input.set_text("")
74	}
75	}
76
77	// TextInput return key
78	todo_input := TextInput{
79	on_return: \|\| ui.add_button.on_click()
80	}
81
82	// Startup event
83	on_startup: \|\|{
84	ui.main_view.render()
85	}
86	```
87
88	From Rust, use `script_eval!` to execute Splash code:
89
90	```rust
91	impl MatchEvent for App {
92	fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
93	if self.ui.button(cx, ids!(increment_button)).clicked(actions) {
94	script_eval!(cx, {
95	mod.state.counter += 1
96	ui.main_view.render()
97	});
98	}
99	}
100	}
101	```
102
103	### Functions
104
105	```
106	fn tag_color(tag) {
107	if tag == "dev" theme.color_highlight
108	else if tag == "design" theme.color_selection_focus
109	else theme.color_highlight
110	}
111
112	fn add_todo(text, tag) {
113	todos.push({text: text, tag: tag, done: false})
114	ui.todo_list.render()
115	}
116	```
117
118	### Control Flow
119
120	```
121	// If/else
122	if todos.len() == 0
123	EmptyState{}
124	else for i, todo in todos {
125	TodoItem{ label.text: todo.text }
126	}
127
128	// For loops
129	for i, item in array {
130	Label{ text: item.name }
131	}
132
133	// While
134	while condition { ... }
135	```
136
137	### HTTP Requests
138
139	```
140	let req = net.HttpRequest{
141	url: "https://api.example.com/data"
142	method: net.HttpMethod.GET
143	headers: {"User-Agent": "MakepadApp/1.0"}
144	}
145	net.http_request(req) do net.HttpEvents{
146	on_response: \|res\| {
147	let text = res.body.to_string()
148	let json = res.body.parse_json()
149	}
150	on_error: \|e\| { /* handle error */ }
151	}
152	```
153
154	Streaming responses use `is_streaming: true` with `on_stream` and `on_complete` callbacks.
155
156	### HTML Parsing
157
158	```
159	let doc = html_string.parse_html()
160	doc.query("p") // all <p> elements
161	doc.query("#main") // by id
162	doc.query("p.bold") // by class
163	doc.query("div > p") // direct children
164	doc.query("p[0]").text // text content
165	doc.query("a@href") // attribute value
166	```
167
168	### Streaming Evaluation
169
170	Splash's parser supports checkpoint-based incremental parsing, designed for AI/LLM streaming code generation:
171
172	```rust
173	// Rust API for streaming evaluation
174	vm.eval_with_append_source(script_mod, &code, NIL.into())
175	```
176
177	This enables real-time UI updates as code is generated token-by-token, without requiring a complete script before evaluation.
178
179	### Hot Reload & Script Mod Tracking
180
181	Splash scripts support ho

People who liked this also viewed

6 picks

Type