DEV Community

artydev
artydev

Posted on

You like HTMX, _HYPERSCRIPT ? Have you seen MAVO JS from Lea Verou?

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/

 <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>
Enter fullscreen mode Exit fullscreen mode

You can play with the example here : DEMO

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


<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>
Enter fullscreen mode Exit fullscreen mode

You can play with it here : Todo

Here is a nice article from Dmitry Sharabin on css TRICKS

Top comments (2)

Collapse
 
leob profile image
leob

Looks nice - I think HTMX is a bit more generic and powerful though ...

Collapse
 
artydev profile image
artydev • Edited

Hy Leob,
I think they serve different purpose.
Mavo is best at developing web apps.
HTMX is best at dealing with data and more server side oriented.
But I can be wrong...