// docs / Language
Components and state
Props in, events out, state in the middle. Like React, minus the 400 MB.
vcwl
component TodoItem(todo: Todo, compact: Bool = false) {
event toggle(Int)
state editing: Bool = false
let label = todo.title.trim()
item {
checkbox(label: label, checked: todo.done) {
on change(v) {
emit toggle(todo.id)
}
}
}
}
→
Properties are read-only; state changes only in event handlers, and dependent views update in one batch afterwards.
→
if, match and keyed for work inside views: for t in todos key t.id { TodoItem(todo: t) }.
→
Child content goes through slot, named slots and slots that pass values to the content.
→
Routing: routes { "/" => Home() "/about" => About() _ => NotFound() }, with the URL hash or real paths.
Elements
Layout: column, row, grid, stack, box, scroll. Semantics: section, nav, main, article, list, heading... Controls: button, link, input, textarea, checkbox, select, form. Every form control needs a label, and every image an alt: accessibility is a compile error, not a Jira ticket.