skills.rest
ZhangHanDong
ZhangHanDongCOMMUNITY
Explore all skills by this author →
GitHub

makepad-2.0-widgets

Provides the Makepad 2.0 widget catalog with properties, patterns, and usage rules.

747|87|Updated Jan 10, 2026
Search Tags:#Rust#ui widgets#makepad#widget catalog#cross-platform UI#portallist#splash dsl
One-click install
npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-widgets
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: makepad-2.0-widgets
Source: https://github.com/ZhangHanDong/makepad-skills/tree/main/skills/makepad-2.0-widgets
Command: npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-widgets

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building UIs in Makepad 2.0 requires knowing which widgets exist, their properties, and non-obvious rendering rules (like new_batch for text visibility). This Skill gives the AI a complete widget catalog and critical usage rules so generated Makepad UI code is correct on the first attempt.

Core Features & Use Cases

  • Complete Widget Catalog: Covers containers (View, SolidView, RoundedView), text (Label, H1-H4, TextInput), buttons, toggles, sliders, dropdowns, media (Image, Svg, MapView), lists (PortalList, FlatList), navigation (Modal, PageFlip, StackNavigation), and the Dock system.
  • Critical Rendering Rules: Documents mandatory patterns such as height: Fit on containers, new_batch: true for colored containers with text, and fixed pixel height for MapView.
  • Advanced Patterns: Reference files detail PortalList virtualization with Rust draw loops, Dock tab layouts, custom widget creation with derive macros, and widget action handling from Rust.
  • Use Case: Ask the AI to build a settings screen with a scrollable list, sliders, and toggles in Makepad 2.0, and receive DSL code that follows all layout and batching rules.

Quick Start

Use the makepad-2.0-widgets skill to build a Makepad 2.0 settings page with a ScrollYView containing a TextInput, a Slider, and a Toggle.

Frequently Asked Questions about makepad-2.0-widgets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a scrollable list in Makepad 2.0?▼

Use ScrollYView for simple scrollable content or PortalList for large lists of 100+ items. PortalList virtualizes rendering and requires a Rust draw loop using set_item_range, next_visible_item, and item templates defined with := syntax.

What widgets are available in Makepad 2.0?▼

Makepad 2.0 includes containers (View, SolidView, RoundedView, ScrollYView), text widgets (Label, H1-H4, TextInput, Markdown), buttons, toggles, sliders, dropdowns, media widgets (Image, Svg, MapView), lists (PortalList, FlatList), and navigation widgets (Modal, PageFlip, StackNavigation, Dock).

Why is my text invisible inside a colored View in Makepad?▼

Text becomes invisible when it shares a GPU draw batch with the background quad of a View with show_bg: true. Set new_batch: true on the container to force a separate draw batch so text renders on top of the background.

Does MapView support Fill or Fit height in Makepad 2.0?▼

No, MapView must use a fixed pixel height such as height: 400. Using Fill or Fit causes rendering issues, and the MapView must also be wrapped in a container with new_batch: true.

How do I handle button clicks and input changes in Makepad 2.0?▼

In the Rust handle_event method, iterate over cx.actions() and call methods like clicked(action) on buttons, changed(action) on TextInput, Slider, and CheckBox, or selected(action) on DropDown, accessing widgets via ids! paths.

When should I use PortalList versus FlatList in Makepad?▼

Use PortalList for large lists with 100 or more items because it only renders visible items through a Rust-driven draw loop. Use FlatList for small fixed lists since it renders all children directly without virtualization overhead.

Related Skills

Explore More Software Engineering Skills→
ZhangHanDongZhangHanDong
745

makepad-deployment

Builds, signs, and packages desktop, mobile, and web apps.

Community
Advanced
NNPopovNNPopov
2

bloc

Implement Flutter state management with Bloc and Cubit patterns.

Community
Advanced
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate
SageV1SageV1
1

makepad-event-action

Automate Makepad widget event handling and parent action signaling.

Community
Intermediate