Mavo

A new, approachable way to create Web applications

Create complex, reactive, persistent web applications by just writing HTML & CSS, without a single line of JavaScript and no server backend.
Developed in the Haystack Group at MIT CSAIL and led by Lea Verou.

Get Mavo

What is Mavo?

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 mv-list>
						<li property="task" mv-list-item>
							<label>
								<input property="done" type="checkbox" />
								<span property="taskTitle">Do stuff</span>
							</label>
						</li>
						<button mv-action="delete(task where done)">
							Clear Completed
						</button>
					</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 mv-list>
						<a property="painting" mv-list-item mv-attribute="none">
							<img property="image" />
							<p property="name"
							   mv-default="[readable(to(filename(image), '.'))]">
							</p>
						</a>
					</div>
				</main>

Learn More More Demos