Welcome To Mini


Mini is an incredibly simple way to add lightweight frontend state to your web pages and apps. It works great for ui components and form fields, where you want to change element classes or input values on user interaction.

  • No Build: Just add the file to your page and start building.
  • Learn in 2 minutes: Read the How It Works section below to understand 90% of what you need.
  • 4kb gzipped: Tiny, fast and easy to understand.
  • Performant: Based on Web Components, which your browser is already optimized for.


Getting Started

Add mini to your codebase directly from the CDN.


How It Works


1. Wrap some html in a <ui-state> element

<ui-state>
  <div></div>
</ui-state>


2. Use attributes to set, modify and display state


3. That's It! You've learned Mini

Now you can build hundreds of interactive UI components without leaving your HTML.

Update The Dom Use With
ui-text Sets the inner text of an element <div>, <span>, <p>, etc.
ui-value Sets the value of a form input or textarea <input>, <select>, <textarea>, etc.
ui-checked Sets a checkbox or radio button state <input type="checkbox">,
<input type="radio">
ui-class Sets the class of an element <div>, <span>, <p>, etc.
ui-data-[key] Set a data attribute <div>, <span>, <p>, etc.
ui-aria-[key] Set an aria attribute <div>, <span>, <p>, etc.
ui-[key] Set any attribute Any element you like
Respond To User Interaction
ui-change Use on form elements to listen for changes in their value.
ui-click Triggered when the element is clicked.
ui-clickme Triggered when the element is clicked, but not if the click is on a child element.
ui-clickout Triggered when a click happens outside of the element.
ui-focus Triggered when an input or textarea is focused.
ui-blur Triggered when an input or textarea is blurred.

Read Full Reference




Just A Web Component ⚡️

Mini.js started out as a library. But as we iterated, we realized that our patterns mapped almost perfectly to the web component standard. So we did what any good library author does, and we rewrote it. This gives us...

  • All the benefits of the browser's built-in performance and lifecycle management
  • Incredibly easy to understand. Go read the source.
  • Less than 4kb gzipped




More Mini

Use ui-change to monitor form inputs, and this.value to get their values

Your first name is:

For dropdowns, use ui-change to listen for the select change.

0


Use event to get the current event

You can also access the current event with the event keyword.


Use ui-load to execute code when an element is loaded

Sometimes we want code to be executed as soon as the page, or a specific element on the page, is loaded. 

<ui-state>
  <div ui-load="console.log('I was loaded')"></div>
</ui-state>


Works with all of the browser's "on" events

Browsers already have events for all of the most common user interactions. Mini just makes it easier to use them to update the DOM.

Click Me
Double Click Me




FAQ

What other libraries are similar to Mini?

The most well known library that bears similarity with Mini is Alpine.js. We both set out to solve a similar problem, but with slightly different approaches. There are also several others - the best list is maintained at unsuckjs.com.

When Should I Use Mini?
Use Mini when you want to add sprinkles of behaviour or interactivity patterns to your app, which would be otherwise unwieldy to add using vanilla javascript, but where a full-fledged framework like React would be overkill.

When Should I Not Use Mini?
Mini isn't designed for working with object-based state - for example, looping through and rendering thousands of items in an array onto the page.

Who Made Mini Js?
Mini js was an internal project from Really Good Software, a remote software development agency. Most of the spec was done by Tony (@tonyennis), and most of the code was written by Joeylene (@jorenrui).