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

Ready to run

npx skills add https://github.com/Cupnfish/xilem-skill --skill masonry-widget-system

💬 Prompt for ChatGPT / Claude Chat▼

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.