Mini.js makes your DOM interactive by making your JavaScript variables trigger a DOM update whenever their value changes.

You can make any HTML element’s attributes reactive by changing it from attribute to :attribute. While you can make your HTML element’s events trigger updates by changing it from onevent to :event.

Last updated on Feb 29, 2024 by Joeylene.

IN THIS ARTICLE

Installation

Import Mini.js via the script tag:

<script src="<https://cdn.mini-js.com/1.0.6.js>"></script>

After that, you can now use Mini!

Make your HTML interactive:

First, define the initial state:

<script>
  name = 'Arya'
</script>

Make the input’s value be based on what name is:

<input type="text" :value="name" />

Then change name whenever the input changes:

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

Update the paragraph’s inner text whenever name changes:

<p :text="name"></p>

That’s it! Your paragraph is now reactive.

Screen Recording 2024-02-10 at 12.28.02 PM.mov

• script - You can define the initial value of your JS variables in the script tag.
• :value - will update the input’s value attribute based on the evaluated code. It will update whenever a variable that it depends on changes. For checkboxes, it will update the input's checked value.
• :change - the onchange handler that is powered by Mini. Any variables defined in it are tracked and will trigger DOM updates when it changes.
• :text - will update the inner text of an element based on the evaluated code. It will update whenever a variable that it depends on changes.