From makepad-skills
Catalogs Makepad 2.0 UI widgets for containers, text, buttons, toggles, inputs, and layouts like View, ScrollYView, PortalList, Dock. Includes properties and advanced patterns.
npx claudepluginhub zhanghandong/makepad-skills --plugin makepad-skillsThis skill uses the workspace's default tool permissions.
> **Version:** makepad-widgets (dev branch) | **Last Updated:** 2026-03-03
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Version: makepad-widgets (dev branch) | Last Updated: 2026-03-03
Makepad 2.0 provides a rich set of built-in widgets for building UIs. All widgets are defined in Splash syntax and registered via script_mod!.
Refer to the local files for detailed documentation:
./references/widget-catalog.md - Complete widget list with properties./references/widget-advanced.md - Advanced patterns: PortalList, Dock, custom widgets, MapViewBefore answering questions, Claude MUST:
| Widget | Description | Key Properties |
|---|---|---|
View | Basic container (transparent) | width, height, flow, spacing, padding, align |
SolidView | View with solid background | + show_bg: true, draw_bg.color |
RoundedView | View with rounded corners | + draw_bg.border_radius |
RoundedAllView | All corners same radius | + border_radius shorthand |
GradientXView | Horizontal gradient bg | + draw_bg colors |
GradientYView | Vertical gradient bg | + draw_bg colors |
ScrollXView | Horizontal scrolling | scroll property |
ScrollYView | Vertical scrolling | scroll property |
ScrollXYView | Both-axis scrolling | scroll property |
| Widget | Description | Key Properties |
|---|---|---|
Label | Single/multi-line text | text, draw_text.color, draw_text.text_style.font_size |
H1 - H4 | Heading levels | text (pre-styled) |
P | Paragraph text | text |
TextInput | Editable text field | text, empty_text, password, read_only, numeric_only |
Markdown | Markdown renderer | body |
Html | HTML renderer | body |
LinkLabel | Clickable link text | text, url |
| Widget | Description | Key Properties |
|---|---|---|
Button | Standard button | text |
ButtonFlat | Flat style button | text |
ButtonFlatter | Minimal button | text |
| Widget | Description | Key Properties |
|---|---|---|
CheckBox | Check box | text, active |
Toggle | Toggle switch | text, active |
RadioButton | Radio button | text, active |
| Widget | Description | Key Properties |
|---|---|---|
Slider | Horizontal slider | min, max, step, default, precision |
DropDown | Dropdown select | labels: ["a", "b", "c"] |
| Widget | Description | Key Properties |
|---|---|---|
Image | Image display | source, fit (Stretch/Horizontal/Vertical/Smallest/Biggest/Size) |
Svg | External SVG file renderer | draw_svg.svg (crate_resource/http_resource), animating, draw_svg.color |
Icon | SVG icon (tinted) | draw_icon.svg, draw_icon.color, icon_walk |
Vector | Inline vector graphics | viewbox, Path{d: "..."} |
LoadingSpinner | Loading indicator | color, rotation_speed |
MapView | Map widget | center_lon, center_lat, zoom (MUST use fixed height!) |
| Widget | Description | Usage |
|---|---|---|
Hr | Horizontal rule | Divider line |
Vr | Vertical rule | Vertical divider |
Filler | Flexible space | Push siblings apart (use between Fit siblings only!) |
Splitter | Resizable split | axis: Horizontal/Vertical, a/b children |
FoldHeader | Collapsible section | header + body children |
| Widget | Description | Usage |
|---|---|---|
PortalList | Virtualized list | For large lists (100+ items), only renders visible items |
FlatList | Simple list | For small lists, renders all items |
| Widget | Description | Control |
|---|---|---|
Modal | Modal dialog | .open(cx) / .close(cx) from Rust |
Tooltip | Tooltip popup | Hover-triggered |
PopupNotification | Toast notification | Timed display |
SlidePanel | Sliding panel | slide_from |
ExpandablePanel | Expandable area | open/close |
PageFlip | Page switcher | active_page: page_name |
StackNavigation | Stack nav | push/pop pages |
| Widget | Description |
|---|---|
Dock | Tab container system |
DockSplitter | Dock split panels |
DockTabs | Tab bar |
DockTab | Individual tab |
// WRONG - View defaults to 0px height
View{ flow: Down Label{text: "Invisible"} }
// CORRECT
View{ height: Fit flow: Down Label{text: "Visible"} }
// WRONG - text behind background
RoundedView{ draw_bg.color: #333 Label{text: "Invisible"} }
// CORRECT
RoundedView{ new_batch: true draw_bg.color: #333 Label{text: "Visible"} }
// Named (addressable, overridable)
title := Label{text: "Hello"}
// Static (not addressable)
Label{text: "Hello"}
// Default text is white (#fff) - set color for light backgrounds
Label{text: "Dark text" draw_text.color: #333}
// WRONG
MapView{ width: Fill height: Fill }
// CORRECT
View{ new_batch: true width: Fill height: 400
MapView{ width: Fill height: 400 center_lat: 40.7 center_lon: -73.9 zoom: 14.0 }
}
// WRONG (silently ignored)
Label{ animator: Animator{...} }
// CORRECT - wrap in View
View{ animator: Animator{...} Label{text: "Animated"} }
RoundedView{
width: Fill height: Fit
padding: 16
new_batch: true
draw_bg.color: #2a2a3d
draw_bg.border_radius: 8.0
flow: Down spacing: 8
title := Label{text: "Title" draw_text.color: #fff draw_text.text_style.font_size: 16}
body := Label{text: "Content" draw_text.color: #aaa}
}
View{
width: Fill height: Fit
flow: Down spacing: 4
Label{text: "Email" draw_text.color: #aaa draw_text.text_style.font_size: 11}
email_input := TextInput{
width: Fill height: 36
empty_text: "Enter email..."
}
}
ScrollYView{
width: Fill height: Fill
flow: Down spacing: 4
new_batch: true
on_render: || {
for i, item in items {
ItemTemplate{label.text: item.name}
}
}
}
height: Fit on every container unless you want Fill or fixed pixelsnew_batch: true on any View with background color + text children:= for children you need to reference or overridetheme.color_*) instead of hardcoded colorsPortalList for large lists (virtualizes rendering)ScrollYView for scrollable content areasRoundedView for cards and containers (has border_radius)