MicroUI makes DOM manipulation and event handling simple and efficient. Modern ES6+ features in just 18.6KB minified (5.2KB gzipped).
Only 18.6KB minified (5.2KB gzipped) - 6x smaller than jQuery while providing comprehensive functionality.
Zero dependencies, no frameworks. Built with native JavaScript APIs for maximum compatibility and performance.
Built with ES6+ features like Promises, async/await, and Web Animations API.
Familiar jQuery-like syntax with modern improvements and better error handling.
Optimized for mobile devices with touch-friendly event handling and responsive design.
Comprehensive test suite with 72+ tests ensuring reliability and stability across all features.
// Via jsDelivr CDN (Latest)
<script src="https://cdn.jsdelivr.net/gh/lam0819/MicroUI@latest/dist/microui.min.js"></script>
// Via jsDelivr CDN (Specific Version)
<script src="https://cdn.jsdelivr.net/gh/lam0819/[email protected]/dist/microui.min.js"></script>
// Download from GitHub Releases
// https://github.com/lam0819/MicroUI/releases// DOM Selection
const element = MicroUI.$('#my-element');
const elements = MicroUI.$$('.my-class');
// Event Handling
MicroUI.on('click', '.button', function() {
MicroUI.addClass(this, 'clicked');
});
// AJAX Requests
MicroUI.ajax('/api/data')
.then(data => console.log(data))
.catch(error => console.error(error));Explore comprehensive examples including basic usage, advanced features, and interactive playground
| Feature | MicroUI | jQuery | Vanilla JS |
|---|---|---|---|
| Bundle Size | 18.6KB | 87KB | 0KB |
| Modern Syntax | ✅ ES6+ | ❌ ES5 | ✅ Native |
| Promise Support | ✅ Native | ❌ Custom | ✅ Native |
| Animation API | ✅ Web Animations | ❌ CSS Only | ✅ Native |
| Learning Curve | Easy | Easy | Steep |
| Browser Support | Modern | IE6+ | Modern |
// Selection
MicroUI.$('selector') // Single element
MicroUI.$$('selector') // Multiple elements
// Classes
MicroUI.addClass(el, 'class')
MicroUI.removeClass(el, 'class')
MicroUI.toggleClass(el, 'class')
MicroUI.hasClass(el, 'class')
// Content
MicroUI.html(el, 'content')
MicroUI.text(el, 'content')
MicroUI.append(el, 'content')// Event Delegation
MicroUI.on('event', 'selector', handler)
MicroUI.off('event', 'selector', handler)
MicroUI.once('event', 'selector', handler)
// Custom Events
MicroUI.trigger(el, 'customEvent', data)
// DOM Ready
MicroUI.ready(callback)// AJAX
MicroUI.ajax(url, options)
MicroUI.get(url, data)
MicroUI.post(url, data)
// Animations
MicroUI.fadeIn(el, duration)
MicroUI.fadeOut(el, duration)
MicroUI.slideUp(el, duration)
MicroUI.slideDown(el, duration)
MicroUI.animate(el, keyframes, options)