Patterns
Proven patterns for building robust Makepad applications.
Widget Patterns
| Pattern | Description |
|---|---|
| Widget Extension | Extend widgets with helper traits |
| Modal Overlay | Popup dialogs and modals |
| Collapsible | Expandable sections |
| List Template | Dynamic lists with iteration |
| LRU View Cache | Cached view recycling |
| Global Registry | Singleton pattern for actions |
| Radio Navigation | Tab/panel selection |
Data Patterns
| Pattern | Description |
|---|---|
| Async Loading | Background data fetching |
| Streaming Results | Incremental data display |
| State Machine | UI state management |
| Theme Switching | Dynamic theming |
| Local Persistence | File-based storage |
Layout Patterns
| Pattern | Description |
|---|---|
| Dock-Based Studio Layout | IDE/studio layouts with resizable panels |
| Row-Based Grid Layout | Dynamic grids with variable columns per row |
| Drag-Drop Reorder | Drag-and-drop widget reordering with visual preview |
Advanced Patterns
| Pattern | Description |
|---|---|
| Tokio Integration | Async runtime architecture |
| Callout Tooltip | Context-aware tooltips |
| Hover Effect | Reliable hover states with instance variables |
Community Patterns
| Pattern | Description |
|---|---|
| Custom 3D Widget | Reusable widget with custom GPU rendering (DrawMesh, geometry) |
See community/ for more community-contributed patterns.
To contribute your own pattern, use the template at 99-evolution/templates/pattern-template.md.
Pattern Selection Guide
For UI State
- Simple toggle: Use widget instance variables
- Multiple states: Use State Machine
- Mutually exclusive: Use Radio Navigation
For Data
- One-time fetch: Use Async Loading
- Incremental display: Use Streaming Results
- Persist settings: Use Local Persistence
For Performance
- Large lists: Use List Template
- Heavy views: Use LRU View Cache
- Background work: Use Tokio Integration
For Layouts
- IDE/studio with resizable panels: Use Dock-Based Studio Layout
- Grid with variable columns per row: Use Row-Based Grid Layout
- Drag-to-reorder widgets: Use Drag-Drop Reorder
- Simple fixed grid: Use View with
flow: Downand nestedflow: Rightrows
For Custom Rendering
- 3D widgets: Use Custom 3D Widget
- Custom geometry: Create GeometryFields implementation with unique instance_id
- Multiple meshes: Use template pattern to share shaders across DrawMesh instances