Your example would look like this:
export component Hello inherits Rectangle {
in property <string> text: "World";
width: 500px; height: 500px;
background: #505050;
border-width: 1px; border-color: blue;
drop-shadow-blur: 15px; drop-shadow-color: #0008;
VerticalLayout {
alignment: center; spacing: 12px;
Text { text: "Hello, \{root.text}!"; font-size: 20px; color: white; horizontal-alignment: center; }
HorizontalLayout {
alignment: center; spacing: 8px;
for c in [#f00, #0f0, #00f, #ff0, #000, #fff]: Rectangle { width: 32px; height: 32px; background: c; }
}
}
}
More on why we chose a DSL vs code in Rust: https://slint.dev/blog/domain-specific-language-vs-imperativ...