Show HN: I built a 4kb alternative to React, Vue, etc for building web UIs.
This is a very cool experiment and possiby a tool. I have nothing to comment on custom html elements, binding or flow but templating engines always interested me.<p>I like how your templating language is minimalistic (not embedding whole js syntax inside) and is valid HTML (could be prepared using HTML authoring tools).<p>I have few remarks comming from my expeirinece in wirting and using minimalistic templating engines.<p>--<p>This templates tightly integrate with html and magically interpret the view model values depending on the context they are used in html.<p>I think it could be better to explicitely indicate in place of use that the value will not be used directly.<p>Not<p><pre><code>    &lt;div hidden=&quot;{{hide}}&quot;&gt;
</code></pre>
but<p><pre><code>    &lt;div :hidden=&quot;{{hide}}&quot;&gt; 
    &lt;div _hidden=&quot;{{hide}}&quot;&gt;
    &lt;div :hidden=&quot;hide&quot;&gt;
</code></pre>
This would make it explicit, aria would not need to be an exception and HTML and your syntax would be clearly separated. You could just pass argument through funcion named `hidden` (or `class` or `style`) and even make whole thing pluggable with custom functions that preprocess the argument into the attribute. (Or even multiple attributes if necessary).<p>---<p>Passing current item from `#each` loops into event handlers implicitly is very cool, but you might want to think about what if you have nested loops.<p>Maybe it would be cooler to pass not just the element but sort of `context` object that contains current elements of all nested loops and perhaps some other stuff in the future?<p>Also you might consider passing it not only into event handlers but all functions called from template.<p>Again you could use `:onclick` instead of `onclick` to indicate that there&#x27;s some additional magic happening.<p>---<p>You might want to consider making loop variable optionally anonymous to reduce the noisiness of looping.<p><pre><code>    &lt;!-- #each in people --&gt;
    &lt;li&gt;Hello {{ .name }}&lt;&#x2F;li&gt;
    &lt;!-- &#x2F;each --&gt;
</code></pre>
---<p>You could do form binding though `:name` to indicate that something beyond just usual HTML is happening and allow people to opt-out for some controls by using just `name` instead of `name`.<p>---<p>All of this could easily work with pre-rendering and hydration by not removing `:something` attributes when `something` function is called to do the appropriate magic.