Mavo

Attributes & Classes

This is an index of all Mavo attributes and classes, with links to their respective pages in the documentation. New to Mavo? Read the Primer first!

Core attributes

These attributes are crucial. Most Mavo apps need them and elements with them are special.

The Live? column refers to whether changes to the value of this attribute (e.g. via expressions or even custom JavaScript) will have an effect. To keep performance reasonable and Mavo small, Mavo is only monitoring changes in attributes for which this is useful. If your use case requires a certain attribute to be live but it isn’t, let us know and we might make it happen!

Attribute On Purpose Live? Read more
mv-app Mavo root Allows you to assign an id to your app, which is used in a number of places. The element with this attribute is called the Mavo root. Primer
property Names elements that will be saved, edited, or used in expressions. Elements with this attribute are called Properties. Properties
mv-storage Mavo root, properties Tells Mavo where data is stored. It’s used on the Mavo root with any of the accepted values or optionally on individual properties to prevent them from being stored (mv-storage="none"). Storage
typeof Properties The value of this property element is not just an attribute or its text content, but the union of the values of the properties inside it. This is almost always inferred from the structure of your properties and added automatically, but you can use it to force an element to be a group, or to declare the type of the group (e.g. typeof="Person") for better semantic value. Elements with this attribute are called groups, objects, or complex properties.
mv-multiple Properties Makes elements repeatable. Only has meaning on property elements, if there is no property attribute, one will be added automatically with a generated name like "collection". Elements with this attribute are called Collections. Collections

Other attributes

These are attributes you can use to further customize your Mavo app.

The Live? column refers to whether changes to the value of this attribute (e.g. via expressions or even custom JavaScript) will have an effect. To keep performance reasonable and Mavo small, Mavo is only monitoring changes in attributes for which this is useful. “Initially” means that you can use expressions to set the value of that attribute until Mavo uses it, but nothing will happen if it changes after that point. If your use case requires a certain attribute to be live but it isn’t, let us know and we might make it happen!

Attribute On Purpose Live? Read more
mv-attribute Properties, elements with mv-value Override the defaults for which attribute holds the data for this element. For no attribute (element content), specify "none". Properties
mv-source Mavo root If specified, it is used instead of mv-storage for loading data. Useful when you want to read from one location and write to a different location. Same values as mv-storage. Storage
mv-init Mavo root If no data is stored, mv-init will be used to load initial data. Same values as mv-storage. Storage
mv-default Properties Sets the default value. If no value, the default value becomes the property content. Properties
mv-order Collections Values: desc or asc. Controls the order that new items are added to collections. Collections
mv-expressions Change the expression syntax or disable expressions altogether. MavoScript
mv-value Set an element's content to the result of an expression. Expressions Only Expressions
mv-if Remove an element from the DOM if the expression doesn't match and re-add it when it does. Expressions only Expressions
mv-accepts Collections Property names (space separated) of other collections that can move items to this one. Collections
mv-edit Properties Customize how an element is edited by linking to another element, anywhere in the page. Initially Properties
mv-edit-* Properties Any attributes set this way will be copied over to the property's editor. Initially Properties
mv-mode Control whether a property is in read or edit mode independently of the mode of the rest of the Mavo app. Properties
mv-format Mavo root Render and edit only a subset of the remote data, by providing a (slash-separated) path to the data it handles. Initially Formats
mv-autosave Mavo root Save automatically when the data changes. Its value is the number of seconds to throttle saving, or 0 for no throttling (save immediately). The default throttling delay is 3 seconds, used when the attribute is specified without a value. Unless throttling is disabled, The Save button will still be present in the Mavo bar. Initially
mv-bar Mavo root Control which buttons may appear in the toolbar and in what order, or hide the toolbar completely. UI Customization
mv-path Properties Render and edit only a subset of the stored data. Initially
mv-alias Properties If provided, Mavo will read data from this property instead of its real property name. Useful to read stored data properly after renaming a property in the HTML. Migration

Classes

In addition to attributes, you can also use these classes to customize the behavior of your Mavo app.

Name On Purpose
mv-autoedit Mavo root Mavo will start in edit mode (no need to click the Edit button). Useful for apps that are almost always in edit mode, but still need a read mode (if read mode is not needed at all, use mv-mode instead).
mv-fixed Mavo toolbar Style the toolbar as fixed at the top of the screen (always visible).
mv-logged-in Only show element to logged in users.
mv-logged-out Only show element to logged out users.

Generated attributes

These attributes are applied by Mavo on certain elements. You may find them useful for styling or debugging.

Name On Purpose
mv-progress Mavo root Only set when an event is in progress. Its value reflects what event, e.g. "Saving" or "Loading".
mv-clicked Properties that are <button> elements or have a counter class. The number of times the button has been clicked.
mv-permissions Mavo root Space-separated list of permissions (read, edit, add, delete, login, logout, save)
mv-mode Any property mv-mode="edit" is applied on every property when it’s being edited.

Generated classes

These classes are applied by Mavo on certain elements. You may find them useful for styling or debugging.

Name Set on
mv-target-within Any element that matches the CSS :target pseudo-class or contains an element that does.
mv-ui Any (usually generated) controls for triggering Mavo-related actions
mv-empty Properties with no value
mv-deleted Collection items that have been deleted but the deletion is not yet saved.
mv-item-bar Buttons on collection items for deleting, adding, rearranging.
mv-highlight Highlighted collection items (e.g. when hovering over the delete button)
mv-bar Mavo toolbar
mv-editor Element used for editing a property
mv-popup Generated popup for editing an attribute.

CSS Variables

You can use these CSS variables in your CSS (via var(--variable-name)) to further customize the interface. CSS Variables are inherited, so you can also refer to them on any element inside the one they’re set on.

Name Set on Value
--mv-mode Elements with the mv-mode attribute read or edit
--mv-item-left Item bar of simple collections Horizontal distance of item from the left edge of its offset parent in px, e.g. 10px.
--mv-item-top Item bar of simple collections Vertical distance of item from the top edge of its offset parent in px, e.g. 10px.
--mv-item-width Item bar of simple collections Width of item in px, e.g. 100px.
--mv-item-height Item bar of simple collections Height of item in px, e.g. 100px.

Learn More

Mavo is not only about attributes and classes. To learn more about other aspects of Mavo, visit some of the other pages in this documentation: