Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Introducing Mavo: Create Web Apps Entirely By Writing HTML!

Raise your hand if you ever wanted to:

  • Make a website that non-technical folks (clients? family members?) can edit right in the browser
  • Make a website that presents an editable collection of items (your portfolio?)
  • Upload images to a website you made, right from the browser
  • Make an app to track and/or share an aspect of your life
  • Make a website that lets other people suggest edits to your data
  • Make an app that calculates something and presents the results in a custom way.

You can put your hand down now, it will get tired up there.

1
Image adapted from this excellent Zen Pencils comic2, used with permission. (Large preview3)

What if I told you, that you can do these things (and more!), just with HTML and CSS? No programming code to write, no servers to manage. You can make any element editable and saveable just by adding one HTML attribute to it. In fact, you can store your data locally in the browser, on Github, on Dropbox, or any other service just by changing an HTML attribute.

You can also turn any HTML element into a collection, with customizable controls for adding items, deleting items, and rearranging items via drag and drop. And your website visitors could suggest edits to your data that create Github pull requests behind the scenes, straight from your website.

What if I told you can dynamically display the results of calculations on this data anywhere in your UI with a syntax that is engineered to be easy to read and write, even by non-programmers? And that you can create dynamic, interactive websites with the same processes and hosting providers you use for static websites?

These are only some of the things you can do with Mavo4, the project I’ve been working on for the past two years at MIT CSAIL5 and am excited to release today. Mavo is a language that extends HTML to describe applications that manage, store, and transform data. All you need to do to use Mavo in any HTML page is to include its two files6. Yup, that’s it.

But how does it all work? Let’s look at a few examples.

Editable Homepage Link

Assume we have a run-of-the-mill static homepage, with the following HTML inside <body>:

<main>
<h1>
	<img src="images/photo.jpg" alt="">
	<span>Grumpy Cat</span>
</h1>
<p>
	<strong>Tardar Sauce</strong> (born April 4, 2012), commonly known as <strong>Grumpy Cat</strong>, is a cat, Internet and media personality and actress...
</p>

<div class="links">
	<a class="twitter" href="https://twitter.com/RealGrumpyCat" target="_blank" title="Twitter">🐦</a>
	<a class="facebook" href="https://www.facebook.com/TheOfficialGrumpyCat" target="_blank" title="Facebook">f</a>
	<a class="wikipedia" href="https://en.wikipedia.org/wiki/Grumpy_Cat" target="_blank" title="Wikipedia">W</a>
</div>
</main>

Photos and text taken from Grumpy Cat’s Wikipedia page7.

Which, when styled looks like this:

8
Large preview9

By adding a few Mavo attributes, we can make it editable, and save its data to the cloud via Github (Github is only one of the supported services):

<main mv-app="homepage" mv-storage="https://github.com/mavoweb/data/homepage" mv-plugins="tinymce">
<h1>
	<img property="image" src="images/photo.jpg" alt="">
	<span property="name">Grumpy Cat</span>
</h1>

<p property="description" class="tinymce">
	<strong>Tardar Sauce</strong> (born April 4, 2012), commonly known as <strong>Grumpy Cat</strong>, is a cat, Internet and media personality and actress...
</p>

<div class="links">
	<a property class="twitter" href="https://twitter.com/RealGrumpyCat" target="_blank" title="Twitter">🐦</a>
	<a property class="facebook" href="https://www.facebook.com/TheOfficialGrumpyCat" target="_blank" title="Facebook">f</a>
	<a property class="wikipedia" href="https://en.wikipedia.org/wiki/Grumpy_Cat" target="_blank" title="Wikipedia">W</a>
</div>
</main>

You can see the result in the video below or play with the live demo here10.


>

But how did it work? What did we just do with all these attributes? Here is a breakdown:

  • mv-app="homepage"11 gives our app a name and tells Mavo to be active on this portion of the page.
  • property12 attributes name important elements. By default, these elements will become editable and will be saved. The editing UI is generated based on the type of element, e.g. note that img is edited very differently from <a> or span. Of course, any generated UI is fully customizable.
  • The mv-storage13 attribute tells Mavo where to store the data. Here its value is a (fuzzy) Github URL, so any data and uploads are stored on Github.
  • mv-plugins="tinymce" loads the Mavo TinyMCE plugin14 for rich text editing, and class="tinymce" tells Mavo to edit this element via TinyMCE. Mavo is designed for extensibility, so developers that do know JavaScript can write Plugins15 that extend Mavo’s functionality or even completely change how it works. Using these plugins is as easy as adding an mv-plugins attribute to any element in your page.

Besides editability and persistence, one of Mavo’s cool features when used in conjunction with Github is that you can let visitors log in to send “edit suggestions” to your data, entirely via the same graphical interface you use for editing said data. These “edit suggestions” create pull requests behind the scenes that you can easily approve or reject.

To-Do List Link

At this point, we have demonstrated how Mavo can help get rid of CMSes for very simple websites. However, it can do a lot more. Let’s look at a very different example, a to-do app!

As before, we start with a static HTML mockup:

<main>
	<header>
		<h1>My tasks</h1>
		<p><strong>0</strong> done out of <strong>1</strong> total</p>
	</header>

	<ul>
		<li>
			<label>
				<input type="checkbox" />
				Do stuff
			</label>
		</li>
	</ul>
</main>

Which looks like this after some styling:

16
Large preview17

Can we use Mavo to turn this into a fully functional to-do list? You probably suspect what the answer is by now: Indeed we can! These are the changes we would need to make to our markup:

<main mv-app="todo" mv-storage="local" mv-mode="edit">
	<header>
		<h1>My tasks</h1>
		<p><strong>[count(done)]</strong> done out of <strong>[count(task)]</strong> total</p>
	</header>

	<ul>
		<li property="task" mv-multiple>
			<label>
				<input property="done" type="checkbox" />
				<span property="taskTitle">Do stuff</span>
			</label>
		</li>
	</ul>
</main>

You can see the result in the video below or play with the live demo here18.


>

So, what did we do here?

  • mv-storage="local" tells Mavo to store the data locally in the browser.
  • You already know about property from the previous example. Note that it can also be used to group other properties.
  • mv-multiple19 is the Mavo feature that seems to excite people the most. It converts the element it’s on to an editable collection of items, full with controls to add and delete items, reorder items via drag and drop, and even keyboard shortcuts for all these!
  • mv-mode="edit" tells Mavo that everything should be editable immediately, and does not need a separate read mode.
  • [count(done)] and [count(task)] are expressions20, similar to those you may have used in spreadsheets. Expressions are written in MavoScript, an expression language designed to be readable, forgiving, and easy to use even by non-programmers. Experienced developers can also use JavaScript in Mavo Expressions.

Mavo does not treat HTML as merely a shortcut to JavaScript, but as the primary language for creating web applications. We have done actual user studies21 to prove that Mavo can be successfully used even by people with no programming experience, the results22 of which are published at ACM UIST 2016, one of the top academic venues for Human-Computer Interaction research. Our vision is that JavaScript, server backends, and databases should become the “Assembly of the Web”, mainly needed for specialized or high performance tasks. For everything else, HTML and CSS should suffice.

Mavo Logo23

Want to know more? Go over to mavo.io24, look at the Demos25 and read the Docs26 to understand more about the language.

Is Mavo perfect yet? Far from it. As with every project of this magnitude, there is much more work to be done than what has already been done, in every front. But it’s at a state where it can be useful, and demonstrate our vision for the future of Web development. We hope that others share that vision too, and (why not?) want to help us get there.

(vf, yk, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2017/05/comic.gif
  2. 2 http://zenpencils.com/comic/98-alan-watts-what-if-money-was-no-object/
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2017/05/comic.gif
  4. 4 http://mavo.io
  5. 5 http://csail.mit.edu/
  6. 6 http://mavo.io/docs/primer/#using-mavo
  7. 7 https://en.wikipedia.org/wiki/Grumpy_Cat
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-Introducing-Mavo-preview-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-Introducing-Mavo-preview-opt.png
  10. 10 https://mavo.io/demos/homepage
  11. 11 http://mavo.io/docs/primer/#mv-app
  12. 12 http://mavo.io/docs/primer/#property
  13. 13 http://mavo.io/docs/primer/#mv-storage
  14. 14 https://plugins.mavo.io/plugin/tinymce
  15. 15 https://plugins.mavo.io
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-Introducing-Mavo-preview-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-Introducing-Mavo-preview-opt.png
  18. 18 https://mavo.io/demos/todo
  19. 19 http://mavo.io/docs/primer/#mv-multiple
  20. 20 http://mavo.io/docs/primer/#expressions
  21. 21 http://dl.acm.org/citation.cfm?id=2984551
  22. 22 http://dl.acm.org/citation.cfm?id=2984551
  23. 23 https://mavo.io
  24. 24 https://mavo.io
  25. 25 https://mavo.io/demos
  26. 26 https://mavo.io/docs/primer

↑ Back to top Tweet itShare on Facebook

Lea is currently busy doing research in Human-Computer Interaction at MIT CSAIL. She has previously written an advanced CSS book for O’Reilly (CSS Secrets) and worked as a Developer Advocate at W3C. She has a long-standing passion for open web standards, and is one of the few Invited Experts in the CSS Working Group. Lea has also started several popular open source projects and web applications, such as Prism, Dabblet and -prefix-free and maintains a technical blog at lea.verou.me. Despite her academic pursuits in Computer Science, Lea is one of the few misfits who love code and design equally.

  1. 1

    This is an amazing work. I like how you thought about the struggles of the content authors and the developers developing the site… and then re-invented a solution to help those needs. Looking forward to try this!

    Do you have any plans of having an rest api where you could tap into the data and write in another site? So using Mavo as a backend application?

    4
    • 2

      Mavo can work with any REST API, including custom ones on your own server. It’s not something that can be done via HTML, but for JS developers writing a custom storage backend is very easy (check out the existing ones for an example — documentation coming soon!)

      11
  2. 3

    Joel Davies

    May 16, 2017 4:07 pm

    Intriguing? So access control is via Github or Dropbox?

    Is it possible to provide access control without displaying the Mavo bar?

    Is it possible to edit meta data?

    2
    • 4

      > So access control is via Github or Dropbox?

      Yes (or any other supported service).

      > Is it possible to provide access control without displaying the Mavo bar?

      Yes, in a number of ways!
      1. You can use ?login in the URL (e.g. via a link).
      2. You can remove any default styling from the Mavo bar and style it as you wish, as described here: http://mavo.io/docs/ui/#bar
      3. You can hide the login button via the mv-bar attribute, as described here: http://mavo.io/docs/ui/#bar Then you can use your own, with a class of mv-login. Note that then you need to manage when it should be hidden.

      > Is it possible to edit meta data?

      What kinds of metadata?

      2
      • 5

        I think he means the attributes on the header. Or for example the or other elements that are not visible

        0
  3. 6

    Wow! Mavo looks promising and I love the simplicity. Will have a go with it too.

    7
  4. 7

    What an excellent idea. Love the similarities to React, Angular, and especially Vue.js.

    One question: can you configure Mavo to use a .js file in the same directory (simplicity) to store the JSON for the app’s data?

    Scenario: for multi-user access not requiring login/security

    1
    • 8

      Thanks!
      You can configure Mavo to use any file, and JSON is the default format.
      Not sure I understand the part about multi-user access and how it relates to the location of the data file. Could you please elaborate?

      1
      • 9

        Sure. I’d like to use this on our intranet, using “mymavo.js” on our local web server, as the read/write data source.
        I’m able to use:

        However, despite reading the data from the .js file, neither Mavo (no Mavo toolbar), nor any CSS loads. (change this to mv-storage="local" and all works.)

        2
  5. 12

    Hi Lea! Great work, it looks very promising and I really do enjoy every demo!
    One question:
    Is there the possibility to create data which you can use with dropdowns or autocompletion later on?

    1
    • 13

      Hey, thanks! I’m not sure I understand the question, you mean have autocomplete when you’re editing a property? (if so, yes, but I’ll wait for confirmation that this is what you’re asking before I go into describing how to do it)

      1
      • 14

        Hi Lea!
        Sorry for my bad explanation.
        Yes and NO :)
        Yes, because autocompletion of a property is one goal.

        The other goal is, that you can write into a datasource and use this datasource for the autocomplete field afterwards.

        Like using your todolist, saving new items (todos) and use the data of this todolist for autocompletion in another area of a Mavo “App”.
        Thanks for your kindness and your support!
        Still impressed with Mavo!

        1
        • 15

          Yes, you use a <datalist id=”foo” mv-value=”unique(propertyName)”> where propertyName is the property with the values that you want to use in the autocomplete. Then on the property you want to use the autocomplete on, use mv-edit-list=”foo” (or whatever id you placed on the <datalist>. Makes sense?

          2
  6. 16

    Brendan Sparrow

    May 17, 2017 12:22 am

    Amazing work 🙌 I love the pull requests through Git.

    4
  7. 17

    Fascinating stuff! Just wondering: How did you come up with the name “Mavo”?

    2
    • 18

      It’s named after my late mother, Maria Verou, but I thought it sounded cool too (I wrote a script that generated subsets of her name and picked the one that sounded coolest). It also means “Introduction” in Hebrew.

      11
  8. 19
  9. 20

    Lea, why not to use HTML valid properties, I meant `data-*`? See errors https://validator.w3.org/nu/?doc=https://mavo.io/demos/homepage/
    You can do better then popular JS frameworks breaking web, ignoring standards.

    0
  10. 24

    Could be a nice addition for frontend developers who need a quick way to knock up litte dynamic websites. Or for rapid prototyping.

    But the average user would already be overwhelmed with getting a simple static “Hello World!” to their own site on the net. Just because you don’t need JavaScript it does not make that task any easier. Not to mention creating a visually pleasing design with HTML and CSS in the first place.

    But again, for quickly adding dynamic features to your static websites this could be great.

    0
  11. 26

    Neha sharma

    May 17, 2017 2:04 pm

    Thanks for sharing the information.

    0
  12. 27

    Good research idea! But, it is far from been the future of the web development. Creating more abstraction does not work every time. We need to be more carefull about this misconception.

    Best of luck and good job!

    -6
    • 28

      Abstraction is the reason you don’t have to learn assembly to create the simplest of apps and that you can use a mouse and click on things instead of having to type commands. You use a ton of abstractions every day, you’re just more used to them so you don’t think of them as abstractions.

      7
  13. 29

    This looks great! I use your Contrast Ratio tool all the time, and for some reason only today chose to click through to your personal site. I’m glad I did or I wouldn’t have discovered this amazing tool. Absolutely awesome work, well done!

    3
  14. 30

    mv-default=”[readable(to(filename(image), ‘.’))]
    Where can I find documentation for this expression:
    mv-default=”[readable(to(filename(image), ‘.’))]
    ?

    0
  15. 32

    Hi,
    it would be interesting what options do i have for save data without github or dropbox. The documentation says i can save my content in an other element. But how can i save that element? A Mavo forum for questions would be very helpfull.

    thanks :)

    6
  16. 33

    Tony Arslan

    May 24, 2017 4:31 pm

    Nice! I already have an application that will benefit from Mavo. Thanks.

    0
  17. 34

    Mary Chariskou

    May 26, 2017 9:45 pm

    Hi Lea!
    I had a conversation last week about editable newsletters
    Do you think that with Mavo we can create editable newsletters?

    1
  18. 35

    Hi Lea

    I was thinking this could replace WordPress for simple brochure sites,

    what’s the chance it has a built in login/out system?

    1
  19. 36

    I’ve always preffered making static sites over making CMS sites but sites need to be editable by clients – which makes this such an exciting prospect!
    I am curious though, because all the editing happens on the front-end, what are the performance implications of MAVO compared to a decent CMS?

    0
  20. 37

    Looks great! The only thing i am wondering about is user management. How do you make sure only you (or people you give access), can edit the content? Not finding any info about that… Thanks in advance!

    -1
  21. 38

    Thanks for sharing useful information

    0
  22. 39

    @Vera – did you see TiddlyWiki?
    ( tiddlywiki.com and discussion forum https://groups.google.com/forum/#!forum/tiddlywiki )

    0
  23. 40

    Mavo is late to the game so I’ll stick with Tiddlywiki

    Tiddlywiki – A full-on, single HTML file (serverless, works from your desktop/tablet/phone) and doesn’t require you to write (or learn!) a single html tag.

    tiddlywiki.com
    https://groups.google.com/forum/#!forum/tiddlywiki

    0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top