You like HTMX, _HYPERSCRIPT ? Have you seen MAVO JS from Lea Verou?
Tags: mavojs
Published: 2024-02-09 10:23:54

HTMX is an amazing an relatively new  technology.

MavoJS has been around from quite some years now.
I think this library deserves to be recalled.

Yes I know they don't play totally in the same area, but they have the same scope, developping web apps, using no or little Javascript

[https://mavo.io/](https://mavo.io/)

```html
 <link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
<script src="https://get.mavo.io/mavo.js"></script>


<div mv-app="mavoTest">
  <p>Slider value: [strength]/100</p>
  <input type="range" property="strength" title="[strength]%" />
</div>
```

You can play with the example here : [DEMO](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wAEAHihk6Aa0EAnaAF4AOuHgBPSlggR4SwVlklFIHPAAOYVAHoLAcy0ZcDAG7cMZbhYfOMsMGCUWAPgU6YTBYaTITeEEwaVhDYzNLGztPFzcPJxcAKz8QAOELMIiooLpg4OEkMkdBXEcAWgYTE0M0gBUIMG184MEREwCAZTEkCGlBRwYoAFcIVEFqbtk6a3gsAF0LAEYABl3Cwb6RcRMZ6NUTCENpBlWIHRNpbivpVUNliFX1nXgyeBghiW8BWa02AFIdIFKhZqo4ApxIDAEG46FR0AB2VAANgau1QuxAAF9CPQmCx0BhcpweHwvvBWMTSSBGMxWN5fDTePwGehiRsiUA)


Here is a TodoList that can be saved in local storage.
The following HTML code is all you need!!
I left this to your reflections :-)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jfhkdt9693zu9opt458.png)

```html

<link rel="stylesheet" href="https://get.mavo.io/stable/mavo.min.css">
<script src="https://get.mavo.io/stable/mavo.es5.min.js"></script>



<body 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 mv-list>
	<li property="task" mv-list-item>
		<label>
			<input property="done" type="checkbox" />
			<span property="taskTitle">Do stuff</span>
		</label>
	</li>
	<button class="clear-completed" mv-action="delete(task where done)">Clear Completed</button>
</ul>
```

You can play with it here : [Todo](https://flems.io/#0=N4IgtglgJlA2CmIBcBWALAOgMwCYA0IAzvAgMYAu8UyIGAFuWLCAaQPYB2hbCN7ssAIYAHYtQKFSAJx7MkAbQAMeRQF0CAMwgJCyeaA6CwiJLQZMWIdh0o2aAHQ6PHAHlgQOAawAEUkgF57InIATx06eHhyIO86Pw1AkAZyUSQAejSAcyiMMEEANzYMCDY0wnJBACMENLzC3I8MUkJCIIA+V0kpCGFyb0IpUkTk1Izs8lyCopKyiur4WqmMeEIUBo4MACtWkDaXMuke8g6nU9dKtigQ7zB8gFoRYUTyS7YY27vytilBbMTYNikQSwd73MCXeCJKgQaK7ZwcFwRQRQeBSE72ciIgCMbQAstcKoRPIR9nQcc5McI9uUZBxMm15OwAK42AAUUE48AAlKp9jTOPTvByOPBvGwmX02BpvC5+XSGcy2YTPDy+eRaYKXhVYPsqa40kiUWj4S4mbAbvd3OV0Zj3N5hDJhKjQs9BETQXcreQ7jD4GAbRi3FUSAHopiPMIJfbHc6QolhfAYqEnYlSBFSJ4LgAPGJpUOBwjCQQcaNsJ1SF1BZUAFRhCHaABE2P1yEyNBo+UWOKH9kJKiGKb2IDaXJUJS8S6QhC1UwhBFI7uwwMIEJQoB7BBQShx4yQovBWcrvAB3CJ+IWcrntADCc6k3mvbGXq6o+zH5AnJ32ZvRp0sxDIcht10UwcCwVA7hwJBFBAABfPADCMExaG2SxrFscgaDghCQEMYwaCaFo0M4DCaAAAQ0Ei7g0TdRWARxvG8SibGooxtBCJBvCCXF508VFvAAMRIWEAG4GP6QZOIBIFYFZbjeP4oTYFhLk8G8JkpFk+SpD4hclImY8pQ0IIuRE7xYPhC4rm8eiS3tZEoA8TJOKxP0xLsypN08TIZBZKBOI02SIDATI0kMy4MGEOkuW8ABiNB4BweBFHgdzGMoLNvWBCBMg4TjSHgGxUTSpiSJcxRFAAUm8AAJEh8iiCAgW8AA5eAmXgNTCGLQhPlRCANBK-hvk409fTMiyPMua4ACobPExi8ikTIPE4xQSsYosYCctaNtKliaMgWAOO8DwzxhPbmO9QgIAAL3gTizv68g9vcEU7giHKGEejhzpehbvGGqQfr+ibxKs65BHmuz0vgTK7hRdgfiAzhOI4TkwdOMi7mPeBKk8GE7j4kINB+YxCG8dUesoqQwGhxjSafenGO8HG8YJ70qa4GmwE4mQKkoVkAA4UUyUyAa5wgeb5tgBYPEX4DFibzPhMjidJpCKclnnmcZunbJZ1ncfxwnte+XnfFlwRBYVpWJZ+bnzZluXhdF0zzJVqbrLNZnNrYG6Uby3wSGtiAGr226fQ4FEsxcvbHMLIQTuqQFPD2vIsxx6ByDoTicBSsA9q2xy6TztyAaWlag9cunBAlZssHLmHvAuKQjTuF5hDubpMgYbvkQgJlCHKqrvBwSq9tb9uLg-J9PXgDRvR+Ryh5c6qsQqieAezT46GRNhjzz4Qs28LBj7HxRz+qLy1MUbw74ANkvk-YqFwQ0CgRRpQ8Yh-ubzyMw+XFNHTisV2waAXutAGV1Ph3Qet4LE+ct7NwylldwuUpILxep7Q2EN1KwCQEgfsNNOot2mvgwhghF78QNobQGJFCrkE4gAcmYXtP2AdtycSqNwWAEpUoA3SmWXagjfBfSYffdhZDZ4Wygc3RiCBF4iPkd4SOHgY6cTuFiKRADvK+RAadX6z0dFsEzoQPeHJD6GNBqItmJtOYOylk7S2Ls7hYDdlIs2tNnbWwPG4jxtjjYcweBwYKodUaU0cTrRQGA0AU1IEySoTU7j9luhAVErIYk4BQLfDAWJcloDUliDAKBxYqOLGEwOnEvF0xiXEwGiTkmpPSVITJGBsm5PyffWJRSSnu0mrg8hZpKHUPvLQw2djgk1J8YLHAASVHTJcb41kczFb9PBuQpAaZ4AZioN4AA1N4eQDoyyxn8DWOs8BVC+32tdUICBHraiantVBCMdnfHCUHN68AO5xHFL3PaQNOI+UECEdOEBM7zGjnccEKJOJgDNEBFcYKcEszwVs9MfEoAHKOSc8sLoLnkAQKoeQHxYWQiCNCWE1y2iGMjBMD4VLvg3NhvDRGHyqnWOMaivBEYJSEMmYTPl3oVy0ToDwI0NyYHlDCPAmE2VSCAp4CNOKABOdV4LIUIGheS+FiKejHUxoxXlHB6UCvBJHUVBVxWwEleM25nx7lyqeYqgGQK1UaorhClJ2qoAwohHq5SBqUUDLIdZd8E5cj3Ach3N0Ph7XFx2t4dpfpk0oCbobSuHgO7CIQRmtF3x27L0HsPZNjdC7b0LaiFy59eHQF8JkTymTb4tu6TgMpuCvJAL8qAoWKBSD5yht8+cdwQWOUYayZaTbsk5LHigWdM7clYFUg26d861KLrnbOxQXIO0FrMRYg+a0EHnynYIFZ66t0bsvTE0phjf6326TXNtqa7gxOfdfDMSqATAxPHQcaEs4bXUPVYu+Wjz5YlPY289yh76ttvXuhmVFcbiM4hcW1gKNLcF-cINgHhKBSEulRG690XJIKNWG64EbOBRoeDAJA4qGpjO3l2-Rfr3UfLpKlHl5DqMbA+A5JAm4gINRuTvcx+9QNPtTTE8tq6YPwdyULGKP8oiT1Y8Av1YTshowxjx6ytLDQ0IBgnUVydpJpwrvOKuZdamn3zay4Dknj3gZPmfE+n7LPNzLJuGEJ0MCqqIyxEj8DEFVQo8a8hhn4DIn4oZrELKHUod7hIjeci6EOpC5xNAm8pEwMOuxEGxjRE+dIH5ziGAH4Rco94aLsX7y0uEIlrNHAc3CAq+mwu+mqNRdKrLYzzdTNJzQxZ9O1ns2d04uWoL104GcUIHkAQFG8EYDrjnRcJEZCwEIGpFbJyfIrApvayAWrCp+t1TcfVyLlvkNo76MAKT5y0aZBAG5uHOERPKKHV1zdcP4dRHceADUbClrW2wPapXysIO8AAQmCrhisxY-6Zu9VC87AbLtBuu5Wtu1bJGe0cO4Y5MYKxxmVNc2hQ3QWcQ0AgLMJVsq5R9JQMApaCpFUIxs3HC4Z4vAtpBk+UA3QRGxWe1kKAul9qKSgLAuTSklS9I62VumRRDWVb+2KigsRYBKtKubCCSl+C66GoneKznk9oyiF82KE0OSTdgNyqLTck4JXG65fYSBSrp3HAGibS7JqShW5uLWKtyfSyzfLbFjqcR4jpRSwk1J1VgA1ICzU2odS6j1Pq3RBoE42FOGLC4lwrn3Db8GGme3eHRqrrnRoVcCLsu6zzuuATWz5uIkqLW2suRKfm157LkZcPUtHVE3ySqQ9CBVqr4kElSGw5xP7HOKNNDvBt58peGNsCYzcifJ1tF57SDNWK-RxSDHgDxYQwgnIAFUABKAAZfwMqECEUIJMJr-49xbk4CBEAWI0BoBIBYAoBwSqCwRAA)

Here is a nice article from [Dmitry Sharabin](https://css-tricks.com/let-mavo-shine-in-building-interactive-web-applications/) on css TRICKS