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 Mavo will react to changes to this attribute (e.g. via expressions).

Attribute Purpose Live? Read more
mv-app 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
mv-storage 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
property Names elements that will be saved, edited, or used in expressions. Elements with this attribute are called Properties. Properties
typeof The value of this property element is not 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. Primer
mv-multiple Makes elements repeatable. Only has meaning on property elements. Elements with this attribute are called Collections. Primer

Other attributes

These are attributes you can use to further customize your Mavo app. The Live? column refers to whether Mavo will react to changes to this attribute (e.g. via expressions). “Initially” means that you can use expressions to set the value of that attribute until Mavo uses it, but it will not respond to future changes to the attribute.

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 "null". 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 if using the primary property name fails. Useful to read stored data properly after renaming a property in the HTML.

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-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 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-focus-within Any element is focused or contains an element that is. Shim for :focus-within
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-backend Mavo root Name of the backend (e.g. Github) as a string
--mv-mode Elements with the mv-mode attribute read or edit

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: