Mini is a library extension for HTML which lets you add interactivity to your app without needing a full blown frontend framework.

Based on Mini’s git repository’s README.

Last updated on March 17, 2024 by Joeylene.

• Table of Contents

The Idea

• HTML is great because it's easy to learn and extremely accessible. But HTML has shortcomings when it comes to building interfaces with interactivity.
• Lots of libraries have emerged to address these shortcomings - react, vue etc. These libraries are great but they:
  • Have a high learning curve when it comes to code patterns and tooling.
  • Are primarily suited for interfaces with lots of interactivity.
• Mini JS lets you build interfaces with moderate amounts of interactivity without needing a heavyweight, javascript-centered library. Because it follows the same patterns as html, it doesn't require learning lots of new concepts. It's designed to be extremely minimal and learnable within an afternoon.
• The key idea is that if we have 1. A way to set state when an interaction happens (e.g a user clicks a button or types in an input), and 2. A way to update other parts of the UI when those variables change, we can now easily do a range of things we previously couldn't do. Technically vanilla HTML can already do (1), but it can't do (2).

Setting State

State are variables that changes the UI or the DOM that uses it when they get updated.

Note: Only non-objects are supported for reactive state.

Setting Initial State

You can set the initial state of the variables using vanilla JS:

<script type="text/javascript">
  firstName = 'Tony'
  lastName = 'Ennis'
</script>

Syncing the DOM with your state

These are the following attributes that you can use to sync the DOM with your state:

• :value - Set the value of a form input to the result of the evaluated JS code.
• :class - Set the class of a DOM element to the result of the evaluated JS code.
• :text - Set the text content of a DOM element to the result of the evaluated JS code.

<script type="text/javascript">
  firstName = 'Tony'
</script>

<input type="text" :change="firstName = this.value" />

<!-- The innerText of this paragraph changes based on the firstName variable -->
<p :text="firstName"></p>

Triggering DOM Updates / Re-renders