Create tabbed interfaces without JavaScript frameworks
Learn how to build accessible tab navigation using hyperscript's class manipulation
and event delegation. Perfect for organizing content into sections!
show/hideadd/remove classesevent delegation
Product Features
📋 Product Overview
LokaScript is a modern, TypeScript-powered implementation
of the hyperscript language with 100% pattern compatibility.
Built for developers who want the simplicity of declarative HTML
attributes combined with the power of a complete programming language.
✨ Zero dependencies • 📦 Tiny bundle size • 🚀 Lightning fast
⚡ Key Features
🎯 100% Pattern Coverage: All 77 hyperscript patterns implemented
📘 TypeScript Support: Full type safety and IntelliSense
🔧 Enhanced Commands: Extended functionality beyond standard hyperscript
🎨 Modern API: Clean, intuitive interface for developers
🧪 Well Tested: Comprehensive test suite with 440+ passing tests
💰 Pricing
Open Source - FREE Forever!
LokaScript is completely free and open source under the MIT license.
No restrictions, no limits, no paid tiers.
✅ Unlimited projects
✅ Commercial use allowed
✅ Full access to all features
✅ Community support
✅ Regular updates
💬 Support & Community
Need help? We've got you covered!
📚 Documentation: Comprehensive guides and examples
💡 GitHub Issues: Report bugs or request features
👥 Community: Join our growing community
📧 Email: Direct support for critical issues
The Code
Tab Buttons:
<button class="tab active"_="on click
remove .active from .tab
add .active to me
remove .active from .tab-content
add .active to #overview">
Overview
</button>
Tab Content:
<div id="overview"class="tab-content active">
Content for Overview tab
</div>
<div id="features"class="tab-content">
Content for Features tab
</div>
remove .active from .tab - Deactivates all tab buttons
add .active to me - Activates the clicked tab
remove .active from .tab-content - Hides all content panels
add .active to #overview - Shows the corresponding content
Key Concepts:
Class Management: Use .active class to control state
CSS Selectors: Target multiple elements with class selectors
Self-reference:me refers to clicked element
Sequential Commands: Execute multiple state changes in order
Advanced Tab Patterns:
<!-- Keyboard navigation -->
<div class="tabs"_="on keydown[key=='ArrowRight']
get next .tab
if it exists then click it end
on keydown[key=='ArrowLeft']
get previous .tab
if it exists then click it end">
<!-- Auto-switch tabs -->
<button _="on click
repeat 3 times
wait 2s
get next .tab or first .tab
click it
end">
Auto Demo
</button>
<!-- Tab with URL hash -->
<button _="on click
remove .active from .tab
add .active to me
set window.location.hash to '#overview'">
Overview
</button>
Common Use Cases:
Product Pages: Features, specs, reviews sections
Settings Panels: Account, privacy, notifications
Documentation: API reference, guides, examples
Dashboards: Analytics, reports, activity feeds
Forms: Multi-step forms with sections
Accessibility Tips:
Use role="tablist", role="tab", and role="tabpanel"
Add aria-selected="true/false" to active/inactive tabs