makepad-2.0-app-structure

Name: makepad-2.0-app-structure
Author: ZhangHanDong

743stars87forks

How to install makepad-2.0-app-structure?

zhanghandong/makepad-skills/makepad-2.0-app-structure

$npx -y skills add ZhangHanDong/makepad-skills --skill makepad-2.0-app-structure

Installs into the current project.

Summary

CRITICAL: Use for Makepad 2.0 app structure and Rust integration. Triggers on: makepad app, makepad getting started, app_main!, App::run, MatchEvent, AppMain, handle_event, handle_actions, ScriptVm, from_script_mod, makepad boilerplate, makepad new project, makepad cargo, Cargo.t

Files · 1

View on GitHub

SKILL.md

1	# Makepad 2.0 App Structure Skill
2
3	> Version: makepad-widgets (dev branch) \| Last Updated: 2026-03-03
4
5	## Overview
6
7	A Makepad 2.0 app combines Rust code with Splash scripting. The Rust side handles app lifecycle, event routing, and business logic. The Splash side defines UI structure, templates, and inline interactions.
8
9	## Documentation
10
11	Refer to the local files for detailed documentation:
12	- `./references/app-boilerplate.md` - Complete working app template with Cargo.toml
13	- `./references/rust-splash-integration.md` - Rust ↔ Splash communication patterns
14
15	## IMPORTANT: Documentation Completeness Check
16
17	Before answering questions, Claude MUST:
18	1. Read the relevant reference file(s) listed above
19	2. If file read fails, answer based on SKILL.md patterns + built-in knowledge
20
21	---
22
23	## Minimal App Template
24
25	### Cargo.toml
26
27	```toml
28	[package]
29	name = "my-app"
30	version = "0.1.0"
31	edition = "2024"
32
33	[dependencies]
34	makepad-widgets = { path = "../path/to/makepad/widgets" }
35	```
36
37	### src/app.rs (or src/main.rs)
38
39	```rust
40	use makepad_widgets::*;
41
42	app_main!(App);
43
44	script_mod! {
45	use mod.prelude.widgets.*
46
47	let state = {
48	counter: 0
49	}
50	mod.state = state
51
52	startup() do #(App::script_component(vm)){
53	ui: Root{
54	on_startup: \|\|{
55	ui.main_view.render()
56	}
57	main_window := Window{
58	window.inner_size: vec2(420, 300)
59	body +: {
60	main_view := View{
61	width: Fill height: Fill
62	flow: Down spacing: 12
63	align: Center
64	on_render: \|\|{
65	Label{
66	text: "Count: " + state.counter
67	draw_text.text_style.font_size: 24
68	}
69	}
70	}
71	increment_button := Button{
72	text: "Increment"
73	}
74	}
75	}
76	}
77	}
78	}
79
80	impl App {
81	fn run(vm: &mut ScriptVm) -> Self {
82	crate::makepad_widgets::script_mod(vm);
83	App::from_script_mod(vm, self::script_mod)
84	}
85	}
86
87	#[derive(Script, ScriptHook)]
88	pub struct App {
89	#[live]
90	ui: WidgetRef,
91	}
92
93	impl MatchEvent for App {
94	fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
95	if self.ui.button(cx, ids!(increment_button)).clicked(actions) {
96	script_eval!(cx, {
97	mod.state.counter += 1
98	ui.main_view.render()
99	});
100	}
101	}
102	}
103
104	impl AppMain for App {
105	fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
106	self.match_event(cx, event);
107	self.ui.handle_event(cx, event, &mut Scope::empty());
108	}
109	}
110	```
111
112	---
113
114	## Key Components Explained
115
116	### 1. `app_main!(App)`
117	Registers `App` as the application entry point. MUST be called at module level.
118
119	### 2. `script_mod! { ... }`
120	Defines the Splash script that runs at startup. Contains:
121	- `use mod.prelude.widgets.*` - Import widget definitions
122	- State definitions (`let state = {...}`)
123	- Functions and templates
124	- `startup() do #(App::script_component(vm)){...}` - UI construction
125
126	### 3. `App::run(vm)` - Initialization Order
127
128	CRITICAL: Registration order matters!
129
130	```rust
131	fn run(vm: &mut ScriptVm) -> Self {
132	// 1. Register theme (optional, for light/dark theme)
133	crate::makepad_widgets::theme_mod(vm);
134	script_eval!(vm, { mod.theme = mod.themes.light });
135
136	// 2. Register base widgets
137	crate::makepad_widgets::widgets_mod(vm);
138
139	// 3. Register custom widget modules (if any)
140	// crate::my_widgets::script_mod(vm);
141
142	// 4. Build app from script module
143	App::from_script_mod(vm, self::script_mod)
144	}
145	```
146
147	Simplified (without theme selection):
148	```rust
149	fn run(vm: &mut ScriptVm) -> Self {
150	crate::makepad_widgets::script_mod(vm); // Registers both theme + widgets
151	App::from_script_mod(vm, self::script_mod)
152	}
153	```
154
155	### 4. `#[derive(Script, ScriptHook)]` on App struct
156
157	```rust
158	#[derive(Script, ScriptHook)]
159	pub struct App {
160	#[live]
161	ui: WidgetRef, // The widget tree root
162	}
163	```
164
165	- `Script` - Enables Splash integration (replaces old `Live`)
166	- `ScriptHook` - Enables lifecycle hooks (replaces old `LiveHook`)
167	- `#[live]` - Field settable from DSL
168
169	### 5. `MatchEvent` for Action Handling
170
171	```rust
172	impl MatchEvent for App {
173	fn handle_actions(&mut self, cx: &mut Cx, ac

People who liked this also viewed

6 picks

Type

makepad-2.0-app-structure

743stars87forks

View on GitHub

How to install makepad-2.0-app-structure?

zhanghandong/makepad-skills/makepad-2.0-app-structure

$npx -y skills add ZhangHanDong/makepad-skills --skill makepad-2.0-app-structure

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Makepad 2.0 App Structure Skill
2
3	> Version: makepad-widgets (dev branch) \| Last Updated: 2026-03-03
4
5	## Overview
6
7	A Makepad 2.0 app combines Rust code with Splash scripting. The Rust side handles app lifecycle, event routing, and business logic. The Splash side defines UI structure, templates, and inline interactions.
8
9	## Documentation
10
11	Refer to the local files for detailed documentation:
12	- `./references/app-boilerplate.md` - Complete working app template with Cargo.toml
13	- `./references/rust-splash-integration.md` - Rust ↔ Splash communication patterns
14
15	## IMPORTANT: Documentation Completeness Check
16
17	Before answering questions, Claude MUST:
18	1. Read the relevant reference file(s) listed above
19	2. If file read fails, answer based on SKILL.md patterns + built-in knowledge
20
21	---
22
23	## Minimal App Template
24
25	### Cargo.toml
26
27	```toml
28	[package]
29	name = "my-app"
30	version = "0.1.0"
31	edition = "2024"
32
33	[dependencies]
34	makepad-widgets = { path = "../path/to/makepad/widgets" }
35	```
36
37	### src/app.rs (or src/main.rs)
38
39	```rust
40	use makepad_widgets::*;
41
42	app_main!(App);
43
44	script_mod! {
45	use mod.prelude.widgets.*
46
47	let state = {
48	counter: 0
49	}
50	mod.state = state
51
52	startup() do #(App::script_component(vm)){
53	ui: Root{
54	on_startup: \|\|{
55	ui.main_view.render()
56	}
57	main_window := Window{
58	window.inner_size: vec2(420, 300)
59	body +: {
60	main_view := View{
61	width: Fill height: Fill
62	flow: Down spacing: 12
63	align: Center
64	on_render: \|\|{
65	Label{
66	text: "Count: " + state.counter
67	draw_text.text_style.font_size: 24
68	}
69	}
70	}
71	increment_button := Button{
72	text: "Increment"
73	}
74	}
75	}
76	}
77	}
78	}
79
80	impl App {
81	fn run(vm: &mut ScriptVm) -> Self {
82	crate::makepad_widgets::script_mod(vm);
83	App::from_script_mod(vm, self::script_mod)
84	}
85	}
86
87	#[derive(Script, ScriptHook)]
88	pub struct App {
89	#[live]
90	ui: WidgetRef,
91	}
92
93	impl MatchEvent for App {
94	fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
95	if self.ui.button(cx, ids!(increment_button)).clicked(actions) {
96	script_eval!(cx, {
97	mod.state.counter += 1
98	ui.main_view.render()
99	});
100	}
101	}
102	}
103
104	impl AppMain for App {
105	fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
106	self.match_event(cx, event);
107	self.ui.handle_event(cx, event, &mut Scope::empty());
108	}
109	}
110	```
111
112	---
113
114	## Key Components Explained
115
116	### 1. `app_main!(App)`
117	Registers `App` as the application entry point. MUST be called at module level.
118
119	### 2. `script_mod! { ... }`
120	Defines the Splash script that runs at startup. Contains:
121	- `use mod.prelude.widgets.*` - Import widget definitions
122	- State definitions (`let state = {...}`)
123	- Functions and templates
124	- `startup() do #(App::script_component(vm)){...}` - UI construction
125
126	### 3. `App::run(vm)` - Initialization Order
127
128	CRITICAL: Registration order matters!
129
130	```rust
131	fn run(vm: &mut ScriptVm) -> Self {
132	// 1. Register theme (optional, for light/dark theme)
133	crate::makepad_widgets::theme_mod(vm);
134	script_eval!(vm, { mod.theme = mod.themes.light });
135
136	// 2. Register base widgets
137	crate::makepad_widgets::widgets_mod(vm);
138
139	// 3. Register custom widget modules (if any)
140	// crate::my_widgets::script_mod(vm);
141
142	// 4. Build app from script module
143	App::from_script_mod(vm, self::script_mod)
144	}
145	```
146
147	Simplified (without theme selection):
148	```rust
149	fn run(vm: &mut ScriptVm) -> Self {
150	crate::makepad_widgets::script_mod(vm); // Registers both theme + widgets
151	App::from_script_mod(vm, self::script_mod)
152	}
153	```
154
155	### 4. `#[derive(Script, ScriptHook)]` on App struct
156
157	```rust
158	#[derive(Script, ScriptHook)]
159	pub struct App {
160	#[live]
161	ui: WidgetRef, // The widget tree root
162	}
163	```
164
165	- `Script` - Enables Splash integration (replaces old `Live`)
166	- `ScriptHook` - Enables lifecycle hooks (replaces old `LiveHook`)
167	- `#[live]` - Field settable from DSL
168
169	### 5. `MatchEvent` for Action Handling
170
171	```rust
172	impl MatchEvent for App {
173	fn handle_actions(&mut self, cx: &mut Cx, ac

People who liked this also viewed

6 picks

Type