Rust · WebAssembly · Tailwind · WebGL
Write a template. Ship Rust and WebAssembly.
Weft is a UI framework with a small template language, Tailwind built in, 3D and charts in the same markup, pages prerendered at build, and an accessibility tree your tests can read.
cargo add weftNine apps, nine kinds of site
Each one is a standalone Weft app with its own look, real content and the tests to keep it accessible. Pick a feature to see where it's used.
9 apps
Product launch
Vela Halo
A running shoe on a PBR stage with real shadows. Scroll or press ← → to turn it; three colourways re-dress it.
Grouped stateConditional stepsTyped props & variantsTimersDOM events & fieldsprevent()3D & PBRScroll motion
Shop
Kiln & Co.
A ceramics studio's shop: shelves and pieces as routes, filters as declarations, a basket shared across pages and a CSV receipt.
List comprehensionsapp/ routingGrouped stateTyped props & variantsFileDownloadScroll motion
Magazine
Margins
Long reads loaded from Markdown at build time, letters loaded in the browser, drop caps and a reading-progress bar.
List comprehensionsapp/ routingGrouped stateConditional stepsTyped props & variantsloadScroll motion
Live data app
Nimbus
Real weather from Open-Meteo: search any place, then the next 24 hours and the week, under a sky shader that follows the weather.
List comprehensionsGrouped stateloadRequestsDOM events & fieldsprevent()Charts
Web app
Tally
A keyboard-first sprint board: drag cards between columns, move them with the arrow keys, quick-add with priorities and tags.
List comprehensionsGrouped stateConditional stepsTyped props & variantsDOM events & fieldsprevent()
Dashboard
Gridline
A renewables grid's control room: readings that tick every two seconds, stacked generation, a fleet table, alarms and CSV export.
List comprehensionsGrouped stateTyped props & variantsTimersDOM events & fieldsprevent()ChartsFileDownload
Council services
Northvale
Plain language, high contrast: a permit form that checks each step, bin days by suburb and forms to download.
Grouped stateConditional stepsloadFileDownload
Charity
Tidewater
An ocean charity in a documentary style: a donation form, a globe of where it works and stories that scroll sideways.
Grouped stateConditional stepsload3D & PBRChartsScroll motion
Game
Neon Memory
A 3D memory game: one mesh per tile, timers for the clock and the reveal, and full keyboard play.
Grouped stateTimersDOM events & fieldsprevent()3D & PBR
Which example shows what
| Feature | Vela Halo | Kiln & Co. | Margins | Nimbus | Tally | Gridline | Northvale | Tidewater | Neon Memory |
|---|---|---|---|---|---|---|---|---|---|
| app/ routing | |||||||||
| Grouped state | |||||||||
| Conditional steps | |||||||||
| List comprehensions | |||||||||
| Typed props & variants | |||||||||
| load | |||||||||
| Requests | |||||||||
| Timers | |||||||||
| DOM events & fields | |||||||||
| prevent() | |||||||||
| 3D & PBR | |||||||||
| Charts | |||||||||
| FileDownload | |||||||||
| Scroll motion |
Small language, whole apps
State, derived values and handlers sit at the top of a template. Handlers are pure transitions, so the template is the whole story of what a page does. These come straight from the examples.
on wheel = turn <- turn + event.deltaY * 0.3, spinning <- false, prevent()
every frame when spinning = turn <- turn + event.delta * 0.012
div(tabindex: 0, @wheel: wheel, @keydown: key) {
scene3d(background: current.floor, fog: 0.15) {
directionalLight(position: [4, 5, 1.5], cast-shadow: true)
group(rotation: [0, turn, 0]) {
model(src: "models/halo.glb", cast-shadow: true) {
meshPhysicalMaterial(map: current.map, normal-map: "models/halo-normal.jpg")
}
}
}
}