yai

YaiJS

Advanced web components with YEH (Yai Event Hub) - Enterprise-grade tabs with efficient event delegation

Build deeply nested, event-heavy interfaces with constant-time listener delegation and zero manual lifecycle handling. Everything you need in one package.

NPM version Tests License

Why YaiJS?

Real World Usage

YaiJS isn’t just for small components—it powers full-scale production applications.

The privacy-focused browser dashboard and new-tab extension Speedtab completely migrated its core architectural foundation from VueJS to YaiJS[cite: 3, 4]. Instead of relying on a heavy runtime framework, Speedtab utilizes YaiJS and its integrated event hub (YEH) to orchestrate its entire reactive application shell.

By switching to a stateless, attribute-driven architecture, Speedtab handles modular layouts, global navigation routing, and infinite nested notes on a minimal event footprint—drastically reducing extension weight, slashing boot times, and eliminating memory overhead[cite: 3, 4, 5].

Quick Start

CDN (No Build Required)

YaiTabs Live Demo On JSFiddle

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaijs/core@latest/tabs/yai-tabs.css">
</head>
<body>
    <div data-yai-tabs data-theme="default">
        <nav data-controller>
            <button data-tab-action="open" data-open="1">Tab 1</button>
            <button data-tab-action="open" data-open="2">Tab 2</button>
        </nav>
        <div data-content>
            <div data-tab="1">Content 1</div>
            <div data-tab="2">Content 2</div>
        </div>
    </div>

    <script type="module">
        import { YaiTabs } from 'https://cdn.jsdelivr.net/npm/@yaijs/core@latest/dist/yai-bundle.js';
        new YaiTabs();
    </script>
</body>
</html>

NPM Installation

npm install @yaijs/core

import { YaiTabs, YEH } from '@yaijs/core';

const tabs = new YaiTabs({
    defaultBehavior: 'fade',
    autoFocus: true
});

// Or extend YEH directly for custom event orchestration
class AppBus extends YEH {
    constructor() {
        super({ '#app': ['click', 'input', 'change'] });
    }
}

Component Highlights

YEH Event Hub

Complete YEH Documentation →

YaiTabs

Complete YaiTabs Documentation → Live Demo →

Utilities

Complete Documentation →

Event Hub & Hooks

YaiTabs doubles as an application event hub. Add any event type and get automatic hooks:

const tabs = new YaiTabs({
    events: {
        setListener: {
            '[data-yai-tabs]': ['click', 'keydown', 'input', 'change', 'submit']
        }
    }
});

// All events are automatically available as hooks
tabs.hook('eventClick', ({ event, target, container, action }) => {
    console.log('Click action:', action); // Extracted from data-click
});

tabs.hook('eventInput', ({ event, target, container, action }) => {
    console.log('Input action:', action); // Extracted from data-input
});

tabs.hook('tabOpened', ({ detail }) => {
    console.log('Tab opened:', detail.id);
});

Multiple hooks per event:

tabs
    .hook('tabOpened', (ctx) => trackAnalytics(ctx))
    .hook('tabOpened', (ctx) => updateUI(ctx))
    .hook('tabOpened', (ctx) => loadContent(ctx));

Documentation

Live Examples

Browser Support

Resources

Author

This site is open source. Improve this page.