Mavo

Expressions

Expressions let you present the current value of properties in other elements and perform simple computations.

Using Expressions

By default, Mavo expressions are delineated by square brackets, e.g. [5 + 5]. We explored many different syntaxes and found that format to have the best readability. However, if you are concerned about potential false positives, you can change that with the mv-expressions attribute. For example, to switch to a double curly brace syntax (common in many other systems), you can use mv-expressions="{{ }}". To disable expressions in an element and its descendants altogether, use mv-expressions="none".

If you are concerned about the expression content being shown while the page loads, you can use the mv-value attribute instead, and provide a fallback as content.

Example: Using mv-value

mv-value does not require braces or whatever other syntax you have defined, and including them could result in unpredictable behavior.

If your expression contains a mistake, the expression itself will be shown instead of a result. If you’re using mv-value however, its fallback content will be shown instead.

Example: Incorrect expressions

Syntax

Mavo expressions are similar to JavaScript, but much simpler. You can read more about the expression language here. Do not worry if you are more experienced: Mavo expressions can also be made to contain arbitrary JavaScript!

Basics

You can dynamically refer to the value of any property you have defined, anywhere, by putting its name inside brackets (like this: [propertyName]).

Move the slider and check how both expressions are updated:

We can also do math with properties, e.g. divide by 100:

Move the slider and check how both expressions are updated:

If you set a property attribute on an element containing an expression, you can use that property in other expressions too, regardless of whether they come before or after the element.

Making a bare-bones HSL color picker with Mavo expressions:

If you’re just using an element to hold an intermediate result so you can refer to it, we recommend using <meta property="propertyName" content="[expression]" /> which is hidden, both semantically and visually.

Properties whose values are expressions are called “computed properties” and are not saved.

Expression functions

References and simple arithmetic are useful, but not always enough. For this purpose, Mavo defines a number of common math functions you can use inside expressions, such as: pow(base, exponent), round(number, decimals), sqrt(number) and many more.

If what you’re printing contains characters other than letters, numbers and underscores, you will need to use quotes around it, just like in CSS font-family or HTML attributes.

Expressions and groups

If there are groups and there are properties with the same name inside and outside the group, the value closest to your expression will be used, with child (inner) groups having priority over parent (outer) groups.

Example: Grouping & Expressions

Expressions and lists

Using a property with multiple values (i.e. referring to a property inside a list from outside the list) in an expression is not very useful on its own. However, there are functions that help you use such lists of values in interesting ways, such as count(propery), sum(property), average(property) and more.

Try adding and removing elements!

Note that if your expression is inside a list item, any properties inside that item will refer to their current values, whereas if your expression is outside the collection you will get all values.


You can also do math or comparisons with lists. For example, [sum(age + 5)] will add 5 to every age and then sum the result. You can use either symbols (e.g. +, *, >, ==) etc to perform these operations, or their function counterparts.

Conditionals: if() and the mv-if attribute

You can use the if(condition, ifyes, ifno) function to print out different text depending on a condition. The second parameter is optional: If you omit it, nothing will be printed out if the condition is false.

The if() function is very powerful, but can be confusing when all you want is to toggle content. For this, you can also use the mv-if attribute to hide or show content based on the value of an expression. Just like mv-value, mv-if does not require braces or other syntax. Besides readability, mv-if has another benefit: elements hidden with it are completely removed from the page, not just hidden.

mv-value

We’ve seen in the introduction how mv-value can be used to create fallback content for expressions. However, it’s much more powerful than that. When used on a collection, mv-value renders its value on the entire collection, enabling you to create lists of items that depend on other lists.

As a simple example, note how these two lists are synchronized: