Mavo

A new, approachable way to create Web applications

Mavo helps you turn your static HTML into reactive web applications without a single line of programming code and no server backend.
Developed in the Haystack Group at MIT CSAIL and led by Lea Verou.

Get Mavo

What is Mavo?

Mavo was released publicly on May 16th, 2017 and is currently in beta. Here be dragons, proceed with caution. Play around with it and let us know if you encounter any bugs! Or, if you just like Mavo and want to tell us, we’d love that too! 😊

Approachable

Mavo uses familiar HTML-based syntax and can be used even by people with no programming experience. This is not wishful thinking; it’s published, peer-reviewed research.

Learnable

Mavo’s core functionality can be learned in a few minutes, and is enough to create a vast variety of applications that manage, store, and transform small-scale data.

Flexible

Design your application with the same design freedom and tools as a static webpage. Mavo works with your markup, not against it.

Extensible

Mavo has been designed for extensibility from the ground up. Plugins can modify almost every aspect of its behavior and add new powerful functionality.

Accessible

Mavo apps are keyboard accessible and screen reader friendly out of the box.

Free and Open Source

We created Mavo because we thought that creating Web applications should be easier than it is today. Monetization is not among our priorities.

Mavo at a glance

Editable homepage

To try out editing, log in to Github or watch the video.


			<main mv-app="homepage"
			      mv-storage="https://github.com/mavoweb/data"
			      mv-plugins="tinymce">

			<h1>
				<img property="image" alt="">
				<span property="name">Your Name</span>
			</h1>

			<p property="description" class="tinymce"></p>

			<div class="links">
				<a property class="twitter" title="Twitter">🐦</a>
				<a property class="facebook" title="Facebook">f</a>
				<a property class="wikipedia" title="Wikipedia">W</a>
			</div>

			</main>
		

Simple To-Do list

Watch Video.


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

Editable portfolio

To try out editing, log in to Github or watch the video.


			<main mv-app="portfolio"
			      mv-storage="http://github.com/mavoweb/data/portfolio">
				<header>
					<h1><a href="http://julesmuck.com">muck</a></h1>
				</header>

				<div>
					<a property="painting" mv-multiple mv-attribute="none">
						<img property="image" />
						<p property="name"
						   mv-default="[readable(to(filename(image), '.'))]">
						</p>
					</a>
				</div>
			</main>
		

Learn More More Demos