Skip to content

theblinnk/YakaJS

BranchesTags

Repository files navigation

Hey, this is YakaJS! 👋

npm Version License Size CDN Documentation Features

An illustration showing a variety of differently themed Octocats. Monuments from different cities are indicated in the background like the Space Needle, Berlin Fernsehturm and Transamerica Pyramid.

Yes, we're building a JavaScript library on GitHub. In fact, we've been doing this since we made our first commit and pushed 9,504 lines of pure JavaScript magic 🪄. We've implemented 234 features (that's 56% more than promised!), compressed our code by 56%, and even added voice commands 🎤 (because why not?). But that's just us. We are proud to be building a library for developers, designers, and yes, even robots 🤖 across the internet. Yes, Robots!

🍿 What is YakaJS?

Think jQuery meets modern JavaScript. But with superpowers 🦸. YakaJS is a next-gen JavaScript library that's:

  • 🎤 Voice-Controlled - The ONLY library with built-in voice commands (seriously, try saying "click button" to control your app!)
  • ⚡ Lightning Fast - Batched DOM operations prevent layout thrashing
  • 🎨 Feature-Rich - 234 features including animations, routing, state management, and more
  • 🔒 Secure by Default - Built-in XSS protection, CSRF tokens, and input sanitization
  • 📦 Tiny - Just 151 KB minified (that's 56% smaller than the source!)
  • 🛡️ Never Crashes - Safe-mode chaining with _.safe() prevents those annoying "Cannot read property of undefined" errors
  • 💎 Developer-Friendly - If jQuery and modern frameworks had a baby, it would be YakaJS
  • 📘 TypeScript Ready - Full TypeScript definitions included for type safety and IntelliSense support

Now that we are talking about the important things, ☝️ are you tired of jQuery being outdated? Yes? Want something modern but simple? Okay, you rock! 🎸

🎉 YakaJS is now on npm!

February 14, 2026 — Valentine's Day 💝
if you are a dev girl who reads this... yess! i am (@dill-lk) single too! 💐😄

The day yakajs appeared in node_modules for the first time.
While everyone else was getting flowers, we shipped an npm package. 😂🔥

npm install yakajs

Yes, YakaJS is officially published on npm!
Install it with one command and import it in your projects. Zero dependencies. Full TypeScript support included!

🦦 Contributing to the Ecosystem

We contribute to making the web better by providing tools that are:

  • Simple - No build step required, just add a <script> tag
  • Powerful - Features you won't find in any other single library
  • Open Source - MIT licensed and community-driven
  • Well-Documented - 12 interactive demos with beautiful UI

Here's what makes us unique:

🎤 Voice Commands (Our Viral Feature!)

// Control your app with your voice!
_.voice.listen({
    'click button': () => _('#myButton').click(),
    'show menu': () => _('#menu').show(),
    'scroll down': () => window.scrollBy(0, 100)
});

This is the ONLY JavaScript library with built-in voice commands. No other library has this. Not jQuery. Not React. Not Vue. Just us. 🎉

🚀 And 20 More Premium Features

YakaJS v1.1.0 includes 21 brand-new premium features that make it stand out:

🔥 High-Impact Features

  1. Offline Detection - Know when your users lose connection
  2. Clipboard Read - Async clipboard access made easy
  3. WebSocket Wrapper - Real-time communication simplified
  4. Loading States - Automatic button loading indicators
  5. Native Share API - Share content with one line of code

⚡ Performance Boosters

  1. Batch DOM Updates - No more layout thrashing!
  2. Resource Preloader - Parallel loading for speed
  3. Time Ago - Auto-updating relative timestamps
  4. DOM Diff & Patch - Smart incremental updates

🎨 Premium UI Components

  1. Command Palette - VS Code-style command interface (Ctrl+K)
  2. Virtual Scroll - Handle 10,000+ items smoothly
  3. Onboarding Tour - Guided walkthroughs for users
  4. Lazy Loading - Blur-up image loading

📱 Mobile & PWA

  1. Pull to Refresh - Native mobile gesture
  2. PWA Install - One-click app installation
  3. Shake Detection - Fun gesture recognition

🤖 Unique Features

  1. Voice Commands 🎤 - Already mentioned, but worth repeating!
  2. Image Cropper - Canvas-based cropping
  3. Rich Text Editor - WYSIWYG editing
  4. Element Inspector - Debug tool overlay
  5. Eye Tracking - Experimental webcam gaze tracking

🎨 Try Our Interactive Demos

Want to see YakaJS in action? We've built 12 gorgeous interactive demos with a black noise glassmorphism design:

💡 Pro tip: Open the demos and try the voice commands feature. Just say "show modal" or "start animation" and watch the magic happen! 🪄

📦 Installation

CDN (Easy Mode)

<!-- Just drop this in your HTML and you're good to go! -->
<script src="https://cdn.jsdelivr.net/gh/Yaka-UI-Labs/YakaJS@latest/dist/min.yaka.js"></script>

npm (Cool Kid Mode)

npm install yakajs

Includes TypeScript definitions! The package automatically includes yaka.d.ts for full TypeScript support with IntelliSense, type checking, and autocomplete in your IDE.

import Yaka from 'yakajs';

Yaka('#app').fadeIn(); // Full type safety!

Git Clone (Hacker Mode)

git clone https://github.com/Yaka-UI-Labs/YakaJS.git
cd YakaJS
npm install
npm run build  # Builds all 3 optimized versions + tree folder!

🌲 Tree Folder (Modular Structure)

New in v1.1.0! YakaJS now includes a tree folder with all features organized into separate files:

tree/
├── core/              # Basic methods, attributes, classes, styles
├── dom/               # DOM manipulation and traversal
├── events/            # Event handling and delegation
├── animations/        # Fade, slide, scale effects
├── ui/                # Draggable, sortable, resizable, etc.
├── ajax/              # HTTP, routing
├── validation/        # Form validation
├── security/          # XSS, CSRF protection
├── state/             # State management
└── performance/       # Performance monitoring

⚠️ IMPORTANT: The tree folder is for learning and development only. For production websites, use the minified bundle (dist/min.yaka.js at ~150KB) - it's smaller than most web images!

Tree folder is perfect for:

  • 🔍 Understanding the codebase structure
  • 🛠️ Contributing to specific features
  • 📚 Learning how features are organized
  • 🎯 Code reviews and maintenance
  • 🧪 Creating custom builds (advanced)

The tree folder is automatically generated during npm run build and provides a clear view of all 234 features organized by category. Check out tree/README.md for complete documentation and plugin system details!

🚀 Quick Start (5 Minutes)

<!DOCTYPE html>
<html>
<head>
    <title>My First YakaJS App</title>
</head>
<body>
    <h1 id="title">Hello World!</h1>
    <button id="btn">Click Me 🎉</button>
    
    <!-- Add YakaJS -->
    <script src="https://cdn.jsdelivr.net/gh/Yaka-UI-Labs/YakaJS@latest/dist/min.yaka.js"></script>
    
    <script>
        // That's it! YakaJS is ready via the _ global variable
        
        // Animate the title
        _('#title').fadeIn().css('color', 'purple');
        
        // Add click event
        _('#btn').on('click', () => {
            _('#title').text('You clicked it! 🎊').bounce();
        });
        
        // Try voice commands!
        _.voice.listen({
            'change color': () => _('#title').css('color', 'blue'),
            'reset': () => _('#title').text('Hello World!')
        });
    </script>
</body>
</html>

Run this and say "change color" into your microphone. Mind. Blown. 🤯

📘 TypeScript Support

YakaJS now comes with full TypeScript definitions! Get autocomplete, type checking, and IntelliSense in your IDE:

import Yaka from 'yakajs';

// Full type safety and autocomplete
Yaka('#button')
    .addClass('active')
    .on('click', (e: Event) => {
        Yaka.notify('Clicked!', 'success');
    })
    .fadeIn(300);

// Type-safe utilities
const chunks = Yaka.chunk([1, 2, 3, 4, 5], 2);  // number[][]
const unique = Yaka.uniq([1, 1, 2, 3]);         // number[]

// Form validation with proper types
const result = Yaka('#form').validate({
    email: {
        required: true,
        pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
        requiredMessage: 'Email is required'
    }
});

if (result.valid) {
    console.log('Valid!');
}

📖 Read the full TypeScript guide →

🎯 Why YakaJS?

Because jQuery is Old 👴

jQuery was amazing in 2006. But it's 2026 now. YakaJS gives you the same simplicity with modern features:

// jQuery
$('#element').fadeIn();

// YakaJS (same syntax!)
_('#element').fadeIn();

// But YakaJS can also do this:
_('#element').fadeIn().bounce().swing();

// And this:
_.signal(0); // Reactive state!
_.voice.listen({ 'hello': () => alert('Hi!') }); // Voice control!
_.createRouter(); // SPA routing!

Feature Comparison Table

Feature jQuery YakaJS Notes
DOM Manipulation ✅ ✅ Same syntax!
Animations ✅ Basic ✅ 15+ Effects Bounce, swing, flip3D, etc.
AJAX ✅ ✅ Plus timeout, retry, progress
Events ✅ ✅ Plus delegation improvements
Routing ❌ ✅ Full SPA router
State Management ❌ ✅ Vuex-style store
Reactivity ❌ ✅ Signals & effects
Voice Commands ❌ ✅ UNIQUE!
Command Palette ❌ ✅ Like VS Code
Virtual Scroll ❌ ✅ 10,000+ items
XSS Protection ❌ ✅ Built-in
Bundle Size 87 KB 151 KB More features, only +74%

The Numbers 📊

  • 346 KB source code (10,259 lines)
  • 155 KB minified
  • 151 KB hyper-compressed
  • 56% smaller than source
  • 234 features ready to use
  • 13 interactive demos with examples
  • 21 premium features that no other library has
  • 0 dependencies (just vanilla JavaScript)
  • 100% browser compatible (modern browsers)
  • ⚡ Performance benchmarks - See the speed comparisons
  • 🧪 90+ unit tests - Comprehensive test coverage

⚡ Performance & Testing

Benchmarks

We don't just claim to be fast - we prove it! Check out our interactive benchmarks page to see real performance comparisons between YakaJS, jQuery, and Vanilla JavaScript.

Benchmark Categories:

  • 🎯 DOM Manipulation (selection, creation, append, class manipulation)
  • 🎪 Event Handling (attachment, triggering)
  • 🌐 AJAX/HTTP Operations
  • 🎬 Animation Performance
  • 🛠️ Utility Functions

Run the benchmarks in your own browser to see the results! YakaJS is optimized with batched DOM operations to prevent layout thrashing and ensure lightning-fast performance.

Test Suite

YakaJS includes a comprehensive test suite with 90+ unit tests covering all major features:

  • ✅ DOM Manipulation (20 tests) - Element selection, creation, manipulation
  • ✅ Event Handling (10 tests) - Click, hover, keyboard, delegation
  • ✅ AJAX & HTTP (10 tests) - GET, POST, serialization, error handling
  • ✅ Animations (10 tests) - Fade, slide, custom animations
  • ✅ State Management (10 tests) - Stores, signals, reactivity
  • ✅ Security (10 tests) - XSS protection, CSRF, sanitization
  • ✅ Utilities (20 tests) - Array, object, string operations

Run the tests yourself: Open tests/test-runner.html in your browser for a beautiful interactive test runner with real-time results!

🌟 Feature Highlights

🎨 Rich Animations

// Fade effects
_('#element').fadeIn(500);
_('#element').fadeOut(300);

// Slide effects (all directions!)
_('#element').slideDown();
_('#element').slideUp();
_('#element').slideLeft();
_('#element').slideRight();

// 3D effects
_('#element').flip3D();
_('#element').rotateIn();

// Fun effects
_('#element').bounce();
_('#element').swing();
_('#element').shake();
_('#element').pulse();
_('#element').rubberBand();

// Chain them!
_('#element').fadeIn().bounce().swing();

🎢 Sliders & Carousels (Compete with jQuery!)

YakaJS includes powerful slider and carousel features that rival jQuery libraries like slick, jQuery UI Slider, noUiSlider, Ion.RangeSlider, and more!

Range Sliders

// Basic slider with value display
_('#slider1').slider({
    min: 0,
    max: 100,
    value: 50,
    onChange: (val) => console.log('Value:', val)
});

// Advanced slider with tooltip and custom step
_('#slider2').slider({
    min: 0,
    max: 500,
    value: 100,
    step: 25,
    showTooltip: true,    // Show tooltip above slider
    showValue: true,      // Show value below slider
    onChange: (val) => {
        console.log('Selected:', val);
    }
});

// Volume control example
_('#volume').slider({
    min: 0,
    max: 100,
    value: 80,
    step: 5,
    onChange: (val) => {
        document.querySelector('#volumeDisplay').textContent = `🔊 ${val}%`;
    }
});

Carousels

// Basic carousel with fade transition
_('#carousel1').carousel({
    transition: 'fade',   // 'fade', 'slide', or 'none'
    showDots: true,       // Show dot indicators
    showArrows: true,     // Show navigation arrows
    touch: true           // Enable touch/swipe support
});

// Autoplay carousel (perfect for image galleries)
_('#carousel2').carousel({
    auto: true,           // Auto-advance slides
    interval: 3000,       // 3 seconds between slides
    transition: 'slide',  // Horizontal slide animation
    showDots: true,
    showArrows: true,
    onChange: (index) => {
        console.log('Current slide:', index);
    }
});

// Product showcase with custom controls
_('#product-carousel').carousel({
    auto: true,
    interval: 4000,
    transition: 'fade',
    startIndex: 0,        // Start at first slide
    onChange: (index) => {
        // Update product info, analytics, etc.
        updateProductDisplay(index);
    }
});

// Manual control via API
const carousel = _('#gallery').carousel({ showDots: true });
carousel._carousel.next();  // Go to next slide
carousel._carousel.prev();  // Go to previous slide
carousel._carousel.goTo(2); // Jump to specific slide

Features:

  • ✅ Touch/swipe support for mobile
  • ✅ Fade & slide transitions
  • ✅ Autoplay with pause on hover
  • ✅ Dot indicators & arrow navigation
  • ✅ Keyboard accessibility
  • ✅ Responsive design
  • ✅ Event callbacks
  • ✅ Zero dependencies!

See the full sliders & carousels demo →

🗺️ SPA Routing

const router = _.createRouter();

// Add routes
router.addRoute('/', {
    component: () => '<h1>Home Page</h1>'
});

router.addRoute('/user/:id', {
    component: (params) => `<h1>User ${params.id}</h1>`,
    beforeEnter: async () => {
        // Route guard
        const isAuth = await checkAuth();
        return isAuth;
    }
});

// Navigate
router.navigateTo('/user/42');
router.back(); // Go back
router.forward(); // Go forward

router.init();

⚡ Signals & Reactivity

// Create reactive state
const count = _.signal(0);
const doubled = _.computed(() => count() * 2);

// Auto-update when state changes
_.effect(() => {
    console.log('Count:', count());
    console.log('Doubled:', doubled());
});

count.set(5); // Logs: Count: 5, Doubled: 10
count.update(n => n + 1); // Logs: Count: 6, Doubled: 12

🏪 State Management

// Create a Vuex-style store
const store = _.createStore({
    state: { count: 0 },
    mutations: {
        increment(state) { state.count++; },
        decrement(state) { state.count--; }
    },
    actions: {
        incrementAsync({ commit }) {
            setTimeout(() => commit('increment'), 1000);
        }
    }
});

// Use it
store.commit('increment');
console.log(store.state.count); // 1

store.dispatch('incrementAsync');
// After 1 second: count is 2

// Undo/redo support!
store.undo(); // count is 1
store.redo(); // count is 2

🔐 Security Built-In

// XSS protection
const userInput = '<script>alert("XSS")</script>';
_('#content').html(userInput, true); // Sanitized!

// CSRF tokens
_.csrf.setToken('your-token');
_.post('/api/data', { foo: 'bar' }); // Automatically includes CSRF token

// Input sanitization
const safe = _.security.sanitizeHtml(userInput);
const escaped = _.security.escapeHtml(userInput);

🎯 Command Palette (Ctrl+K)

_.commandPalette([
    {
        title: 'Open Settings',
        action: () => alert('Settings opened!')
    },
    {
        title: 'Toggle Dark Mode',
        action: () => document.body.classList.toggle('dark')
    },
    {
        title: 'Search',
        action: () => window.location.href = '/search'
    }
]);

Press Ctrl+K (or Cmd+K on Mac) and start typing. It's like VS Code but for your web app!

📊 Virtual Scroll

// Render 10,000+ items without lag
const items = Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    name: `Item ${i}`
}));

_.virtualScroll('#container', items, {
    itemHeight: 50,
    renderItem: (item) => `<div>${item.name}</div>`
});

🛡️ Never Crash with Safe Mode

// Traditional way - CRASHES if element doesn't exist
$('#nonexistent').hide(); // ERROR: Cannot read property 'hide' of null

// YakaJS way - NEVER CRASHES
_('#nonexistent').safe().hide().fadeIn().bounce();
// Silently skips if element doesn't exist

// Enable debug mode for helpful hints
_.debug = true;
_('#nonexistent').safe().hide(); // Logs: "Warning: No elements found for selector #nonexistent"

🏗️ Build Versions

We provide 3 optimized builds for different use cases:

Version Size Compression Use Case
min.yaka.js 155 KB Standard Development + Debugging
ultra.min.yaka.js 155 KB Aggressive Production
hyper.min.yaka.js 151 KB Maximum Maximum Performance

All builds:

  • ✅ 100% API compatible
  • ✅ Zero features removed
  • ✅ Production tested
  • ✅ Source maps included

Build them all at once:

npm run build

📚 Documentation

🎯 Complete Features List

Want to see ALL 234 features? Check out FEATURES.md - the complete, exhaustive list of every single method, component, and capability in YakaJS!

Quick Feature Overview

🎨 UI Components & Animations (Click to expand)

Animations: fadeIn/Out, slideIn/Out (4 directions), zoomIn/Out, blurIn/Out, bounce, pulse, shake, swing, flip3D, rotateIn/Out, rubberBand

Components: Dropdown, Modal, Tooltip, Popover, Tabs, Accordion, Carousel, Stepper, Breadcrumb, Pagination, Badge, Button, Menu, SelectBox

Interactive: Draggable, Droppable, Resizable, Selectable, Sortable, Swipe Gestures, Infinite Scroll

Progress: Progress bars, Spinners, Skeleton loaders

Pickers: DatePicker, TimePicker, ColorPicker

🛡️ Smart Error Handling
  • Safe-mode chaining with _.safe()
  • Debug mode with _.debug = true
  • Feature detection with _.supports()
  • Graceful degradation
  • Comprehensive HTTP error handling
⚡ Performance Features
  • Signals-based reactivity (_.signal(), _.effect(), _.computed())
  • Intersection Observer for lazy loading
  • Auto-cleanup to prevent memory leaks
  • Memory leak detection with _.detectLeaks()
  • Performance monitoring (FPS, memory, long tasks)
  • Batched DOM updates (no layout thrashing!)
🔐 Security Features
  • XSS Protection (HTML/URL sanitization)
  • CSRF Token management
  • Input sanitization
  • CSP Support with nonce management
  • Content Security Policy helpers
🗺️ Routing System
  • Full SPA router with parameters
  • Query string support
  • Route guards (beforeEach, afterEach, beforeEnter)
  • Named routes
  • 404 handling
  • History management (back/forward)
🏪 State Management
  • Vuex-style store
  • Mutations and actions
  • Computed properties
  • Undo/redo support
  • Debug logger
  • State persistence
🔮 Modern Browser APIs
  • Web Workers made easy
  • IndexedDB wrapper
  • Service Workers
  • Notifications API
  • Geolocation API
  • File API
  • Fullscreen API
  • Page Visibility API
  • Bluetooth API (experimental)

🤝 Contributing

We'd love your help! Here's how you can contribute:

  1. 🐛 Report Bugs - Open an issue on GitHub
  2. 💡 Suggest Features - Tell us what you'd like to see
  3. 📝 Improve Docs - Help make our docs better
  4. 🔧 Submit PRs - Fork, code, and submit!
  5. ⭐ Star the Repo - Show some love!

Check out our Contributing Guide for more details.

🌍 Community

  • GitHub Discussions - Ask questions, share ideas
  • Discord - Chat with other developers
  • Twitter - Follow @YakaJS for updates

📋 Roadmap

What's coming next? 👀

  • Server-side rendering support
  • React/Vue integration wrappers
  • TypeScript definitions
  • Component library expansion
  • YakaCLI scaffolding tool
  • Custom build generator (choose only features you need)
  • Plugin ecosystem
  • More animations and effects
  • Mobile-first components
  • Accessibility improvements

Have an idea? Let us know!

👓 Appendix

Additional Resources

Browser Support

YakaJS works in all modern browsers:

  • ✅ Chrome/Edge (latest)
  • ✅ Firefox (latest)
  • ✅ Safari (latest)
  • ✅ Opera (latest)
  • ⚠️ IE11 (not supported - use polyfills if needed)

Performance Stats

Our performance optimizations mean:

  • 56% smaller than source code
  • Batched DOM operations prevent layout thrashing
  • Lazy loading for better initial load times
  • Tree-shakable (with module bundlers)
  • CDN cached for instant delivery

License

MIT License - see LICENSE file for details

Free to use in personal and commercial projects! 🎉

🙌 Credits

Built with ❤️ by the Yaka UI Labs team and amazing contributors.

Special thanks to:

  • The jQuery team for inspiration
  • The open source community
  • Early adopters and testers
  • Coffee ☕ (lots of it)

🎊 Fun Facts

  • 📝 10,259 lines of code - That's a lot of JavaScript!
  • 🎤 First library with voice commands - We checked. It's true!
  • ⚡ 234 features - More than you'll probably ever need
  • 🎨 13 interactive demos - Each one prettier than the last
  • 🏆 56% compression - We're really good at making things small
  • 🤖 Robot-friendly - If you're a bot reading this, hi! 👋
  • 🪐 Solar system ready - Okay, we haven't tested this one yet

🚀 Get Started Now!

# Clone and try it yourself
git clone https://github.com/Yaka-UI-Labs/YakaJS.git
cd YakaJS

# Install dependencies
npm install

# Build
npm run build

# Open demos
open demos/index.html

Or just add this to your HTML and start coding:

<script src="https://cdn.jsdelivr.net/gh/Yaka-UI-Labs/YakaJS@latest/dist/min.yaka.js"></script>

"Tell me more, I can't get enough!"

🤫 Psst! Check out our interactive demos to see everything in action. And don't forget to try the voice commands - just say "hello" and watch what happens! 😉

Oh, and by the way - we're always looking for talented, passionate developers to contribute. Got ideas? Found a bug? Want to add a feature? Join us! 🙌

📚 Documentation

📖 Complete Documentation Hub - Your gateway to all YakaJS docs!

Want to dive deeper? We've got 116 KB of comprehensive documentation (maintained by @dill-lk):

🏆 Most comprehensive JavaScript library documentation available!

Made with ❤️ and lots of ☕ by @dill-lk and Yaka UI Labs

⭐ Star us on GitHub if you like YakaJS! ⭐

About

Next-Gen JavaScript Library — More powerful than jQuery, simpler to write. 150+ features including voice commands, AI integration & state management. Zero dependencies. Zero plugins. Just one file. 🚀

yaka.js.org

Topics

js jquer jslibrary yakajs

Resources

Readme

License

MIT license

Contributing

Contributing
Activity
Custom properties

Stars

2 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases 1

v1.1.0 Latest
Feb 14, 2026

Packages

 
 
 

Contributors

Languages