Mavo

Primer

Using Mavo

In order to use Mavo, you first need to download or link to its JS and CSS files and include them in your page. If you have never done this before, you could put both in the <head> section, like this:

Defining a mavo app: The mv-app attribute

You enable Mavo functionality on an HTML structure with the mv-app attribute. Its value is a name for your app, which is used by Mavo in various places. The name must be unique to the page, just like an id. The element with that attribute is called the Mavo root.

Note that mv-app doesn’t really do much by itself. You can see how you can use Mavo attributes to do more useful things in the next sections.

The mv-app attribute can be used with or without a value. If the element already has an id, you don't need to repeat it in the mv-app attribute:

If you use mv-app without a value and there is no id or name attribute on the Mavo root, a name such as mavo1, mavo2 etc will be automatically generated. Since the generated name depends on the order of Mavo apps in the page, this means that if you rearrange them, the app names will change, which is flimsy and could lead to data loss. Therefore, it is strongly recommended that you name your Mavo apps.

Storage: The mv-storage attribute

The mv-storage attribute tells Mavo where to store any data. Its value is a valid URL or a keyword, like local.

What will be stored? Elements with a property attribute! We will learn about these in the next section.

Storage

The property attribute

The property attribute tells Mavo which elements are saved. Its value should describe the element, similarly to a id or class attribute.

If the property attribute is used on elements that are not form elements, they are made editable, and Mavo generates (customizable) controls for switching between edit and read mode:

Properties

Collections: The mv-multiple attribute

Let’s assume we have a list of hobbies that we want to make editable. We could add property attributes to every item:

This works, but we cannot add new hobbies or delete existing ones. To do that, we need the mv-multiple attribute, which tells mavo that this element can be multiplied:

Example: Simple list

The mv-multiple attribute goes on the element that will be multiplied, NOT the container of the collection!


We can use property and mv-multiple to create lists of more complex structures with multiple properties.

Example: More complex lists

Note that in the example above, the property attribute on <article> does not actually make the entire <article> element editable, but instead acts as a grouping element. This will always happen when you use the property attribute on elements that contain other properties inside them. Groups have many interesting characteristics when combined with expressions, which we will see next.

Collections

Expressions

You can dynamically refer to the value of any property you have defined, anywhere in your Mavo app, 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:

There are also a number of math functions you can use for more complicated tasks, akin to spreadsheets.


Expressions become very powerful when combined with lists. Try adding and removing items in the list below:

Example: Simple list

Expressions

MavoScript

Learn More

Intrigued? This is just the tip of the iceberg. You can dive deeper by reading more about each Mavo aspect below: