skills.rest
Cupnfish
CupnfishCOMMUNITY
Explore all skills by this author →
GitHub

Masonry Widget System

Construct and render Masonry widget trees for Xilem UI.

Updated Jan 14, 2026
Search Tags:#ui#layout#rust#masonry#widget-system#xilem
One-click install
npx skills add https://github.com/Cupnfish/xilem-skill --skill masonry-widget-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Masonry Widget System
Source: https://github.com/Cupnfish/xilem-skill/tree/main/03-masonry
Command: npx skills add https://github.com/Cupnfish/xilem-skill --skill masonry-widget-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Masonry provides the foundational widget toolkit and layout engine for building reactive UI in Xilem, enabling composable widgets and a clear rendering pipeline.

Core Features & Use Cases

  • Widget trait contract: defines how widgets receive events, layout, paint, and manage children.
  • Pass-based rendering: per-frame passes (mutate, on_xxx_event, anim, update, layout, compose, paint, accessibility) to keep UI in sync.
  • Built-in widgets & patterns: common widgets like Label, Button, TextInput, Flex, Grid, plus extensibility for custom widgets.
  • Architecture & patterns: support for composing widgets, layout strategies, and rendering stack with Vello/wgpu.
  • Use Case: build a simple UI with a Button and Label, then extend with custom Masonry widgets.

Quick Start

Create a basic widget tree using a Label inside a Button and render it within a Masonry-based UI.

Frequently Asked Questions about Masonry Widget System

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

FAQPage Schema
How does the Masonry widget system handle UI rendering in Xilem?▼

The Masonry widget system drives Xilem UI rendering through structured per-frame passes, executing mutate, event, layout, paint, and accessibility phases sequentially to keep composable widget trees synchronized.

How do I build a reactive UI using built-in Masonry widgets?▼

Build reactive UIs by composing widget trees using built-in Masonry elements like Label, Button, TextInput, and Flex, defining event handling and layout via the Widget trait within Xilem.

Can I create custom widgets using the Masonry Widget trait?▼

Yes, the Masonry Widget trait provides explicit extension points to implement custom widgets, defining how they receive events, manage children, handle layout, and paint using Vello and wgpu backends.

Does Xilem support cross-platform rendering backends for Masonry widgets?▼

Xilem supports cross-platform rendering for Masonry widgets by integrating Vello and wgpu into the architecture, ensuring consistent layout and painting operations across different platforms.

What is the best way to structure layout management for a Rust UI?▼

Structure Rust UI layout management using Masonry's pass-based architecture, separating layout, compose, and paint phases so widgets like Flex and Grid resolve spatial constraints efficiently before rendering.

Why does my Xilem UI not update when changing widget states?▼

Xilem UI updates require proper pass execution. Ensure custom Widget implementations correctly trigger mutate, update, and anim passes during the per-frame cycle to synchronize the frame rendering.

Related Skills

Explore More Software Engineering Skills→
CupnfishCupnfish

Xilem Built-in Views

Compose Xilem UI layouts with built-in views for text, inputs, and visuals.

Community
Intermediate
hafley66hafley66
1

egui-performance-ceiling

Quantify egui immediate-mode rendering performance ceilings per frame.

Community
Intermediate
quantruong158quantruong158

angular-signals

Implement signal-based reactive state management in Angular v20+.

Community
Intermediate
tranceetrancee

ratatui

Generate immediate-mode terminal UI layouts for Rust and Kotlin Multiplatform.

Community
Advanced