Mavo: Web Apps Without Programming, Only With HTML/CSS
Mavo allows you to create web apps for storing and editing of data without requiring any programming skills. It's an expansion for HTML and very easy to learn.
Mavo Lets You Create Web Apps Without ProgrammingThis week, Lea officially revealed the project called Mavo. She and the team at the MIT have been working on it for two years. The result is an impressive solution for all HTML exclusives among designers. To gain an impression of the project's options, I recommend a visit to the demo site. Here, you'll be astonished, as Mavo does not only allow you to edit your homepage and make it editable via the frontend. Mavo allows for much more. This way, you could quickly build your todo app, or create a solution for invoicing. Mavo also lets you calculate other things, like the development of interest, for instance. You can also create graphic applications, like a visual editor for SVG paths, or a color picker. Of course, you still need your fantasy. It's simply not held back by your limited coding skills. Apparently, Mavo doesn't come without any effort. You still have to learn it. However, that effort is very limited, as Lea and her team have tried to make the system as legible as possible. From the very beginning, Mavo was designed to be expandable. There are a couple of plugins already, one of them letting you save data in Google Firebase. The TinyMCE is also available as a plugin.
mv-app. As a name
mv-appreceives a clear label that should represent your app. The existence of said attribute enables you to use the other Mavo attributes. In itself,
mv-appdoesn't do anything else. In the next step, the attribute
mv-storagecomes into play. We use it to define where your web apps data will be stored. This could be
local, but a respective URL is an option as well. In Mavo, the elements that are saved are called
property. If you assign this attribute to HTML elements, the contents of said element will be saved. The attribute
propertyalso works outside of forms, making sure that the respective elements become editable. Now, in order to create a database from the input in the
propertyhas the addition
mv-multipleassigned to it. This makes sure that data sets can be added. Without this, even a simple app, like a task manager, would not be possible. The attribute
propertycan also be used to group multiple elements to form a data set. A simple code example could look like this:
<div mv-app="commentform" mv-storage="local"> <label> Email: <input type="email" property="email" value="[email protected]" /> </label> <label> Message: <textarea property="message"> Edit the form and notice how the values persist after you refresh! </textarea> </label> </div>A list could be saved like this:
Hobbies: <ul> <li property="hobby" mv-multiple>Eating</li> </ul>Once you've played around with Mavo for a bit, you'll notice how simple working with the HTML expansions actually is in practice. Before anyone comments asking why they are not working with data attributes, I want to link you to Lea's answer to this exact question.
Sources to Continue Reading:
- Introducing Mavo: Create web apps entirely by writing HTML! | Lea Verou
- Introducing Mavo: Create Web Apps Entirely By Writing HTML! | Smashing Magazine
- A new, approachable way to create Web applications | mavo.io
Hey, thanks for writing about Mavo! Btw your syntax highlighting is broken, and shows the HTML escaped. This may give people the wrong impression, that they need to escape their markup to use Mavo.
Thanks, Lea Verou for this correction. Mavo this is a great article to develop the app.