Docs / Build
View models and data binding
A view model is the data an artboard shows and reacts to. Your app reads and writes it through the runtime; inside the file, bindings connect it to properties of shapes and to state machine conditions.
Properties
| Kind | For |
|---|---|
| Number | Progress, scores, angles, sizes |
| Bool | On and off |
| String | Values for your app |
| Color | Themes and accents |
| Enum | One of a set of names |
| Trigger | Events, like a state machine trigger |
| Image | Swapping the picture an image fill shows |
Binding
Bind a property to a shape's position, scale, rotation, opacity, colors or layout numbers. A formula can convert on the way (clamp(x, 0, 100) / 100), and smoothing eases changes over time. Conditions in a state machine can compare properties directly.
Text
A text can show properties through a template, with number formatting (a progress of 42.3 shown as "42%"). Bound texts can shrink to fit or limit their lines.
Lists and nesting
Properties can be grouped into nested view models and lists. A repeater draws one copy of its template for each item of a list.