What is Eleva.js?

Eleva is a minimalist, lightweight (~2.5KB gzipped), pure vanilla JavaScript frontend framework crafted for exceptional Developer Experience (DX) and Agent Experience (AX). When developers enjoy building, users enjoy using — Eleva makes it effortless to create beautiful, responsive, and performant User Interfaces (UI) without the complexity, bundle size, or build tool requirements of traditional frameworks.

Unlike React, Vue, or Angular, Eleva:

• Has zero dependencies - No node_modules bloat
• Requires no build step - Works directly in browsers via CDN
• Uses real DOM - No virtual DOM overhead for simple apps
• Provides signal-based reactivity - Fine-grained updates like Solid.js
• Includes TypeScript support - Built-in type declarations
• Is AI-agent-ready - Built-in Agent plugin for LLM integration, action registry, and audit logging
• Is just JavaScript - If it works in vanilla JS, it works in Eleva

Eleva is ideal for developers building performance-critical applications, AI-agent-powered interfaces, data-intensive dashboards (10K+ rows), micro-frontends, or anyone seeking a simpler, AI-ready alternative to React, Vue, or Angular.

Table of Contents

• Eleva.js 🚀
  • What is Eleva.js?
  • Table of Contents
  • Quick Reference
  • Introduction
  • Design Philosophy
  • Best-in-Class Developer Experience (DX) & Agent Experience (AX)
  • Features
  • When to Use Eleva
  • Version Strategy
  • Version Guide
  • Performance
  • Performance Benchmarks
  • Eleva vs. Popular Frameworks
  • Browser Support
  • Installation
  • Usage
    • ES Module Example
    • UMD Example
  • API Reference
    • TemplateEngine
    • Signal
    • Emitter
    • Renderer
    • Eleva (Core)
    • Plugins
      • Core Framework Only (Lightweight)
      • Attr Plugin
      • Router Plugin
      • Store Plugin
  • Development
  • Testing
  • Contributing
  • Sponsor Eleva
  • License
  • Contact

Quick Reference

Minimal Setup (30 seconds)

import Eleva from "eleva";

const app = new Eleva("MyApp");

app.component("Counter", {
  setup: ({ signal }) => ({ count: signal(0) }),
  template: (ctx) => `<button @click="() => count.value++">${ctx.count.value}</button>`
});

app.mount(document.getElementById("app"), "Counter");

API at a Glance

Template Syntax

Quick Rule: ${} needs ctx. — @events and :props don't.

How it works: Use ${ctx.value} to interpolate values into your template. For @events and :props, expressions are evaluated against the component context directly — no ctx. prefix needed. This allows cleaner syntax like :user="userData" instead of :user="${ctx.userData}".

Introduction

Eleva is a lightweight, no-nonsense runtime framework for frontend applications. Built with love for pure vanilla JavaScript, Eleva features a minimal core with essential functionality that can be extended through a powerful plugin system. This approach lets you create highly modular and scalable applications without the overhead of large frameworks. I built Eleva to prove that you don't need heavy frameworks or libraries to build amazing user interfaces-sometimes, the simplest approach is the most powerful.

My Inspiration:
The idea behind Eleva comes from a deep appreciation for native JavaScript. I wanted to create a tool that stays true to the language without introducing new syntax or complexity, making it easy to integrate into your projects.

Core Principles:

• 🌱 Minimalism: Only essential features in the core, keeping the framework lean and focused.
• 🔌 Extensibility: Extend functionality by plugging in your own ideas, such as custom state management, routing, and more.
• 🚀 Performance: Fast, efficient, and designed with modern browsers in mind.
• 🍦 Pure Vanilla: No dependencies, no magic-just plain JavaScript.
• 🔍 Transparent: No hidden layers or abstractions — if it works in vanilla JS, it works in Eleva.

Design Philosophy

Eleva is an unopinionated framework with a minimal core philosophy.

Unlike monolithic frameworks that include everything out-of-the-box, Eleva intentionally provides only essential features in its core, relying on a powerful plugin system for extensibility. This architectural choice means:

• 🔄 Flexibility: Architect your application your way-no rigid structure required.
• 🎯 Native JavaScript: Built using pure vanilla JavaScript, Eleva integrates seamlessly with your existing code without unfamiliar syntax.
• ⚙️ Configurability: Extend Eleva's functionality with a simple API and optional plugins.
• 🆓 Freedom: Decide the best way to implement features without unnecessary constraints.
• 🔍 Transparent: No magic, no hidden abstractions — what you write is what runs.

Core Philosophy

💡 Vanilla JavaScript. Elevated.

Eleva takes plain vanilla JavaScript to the next level. Signals for reactivity. Components for structure. Your JS knowledge stays front and center, not hidden behind abstractions. If it works in vanilla JS, it works in Eleva.

Best-in-Class Developer Experience (DX) & Agent Experience (AX)

Eleva is built on a simple principle: great DX + AX leads to great UX. When developers have intuitive tools — and agents have a first-class integration surface — they build better interfaces. Every aspect of Eleva's design prioritizes your productivity and enjoyment.

Why Eleva's DX Stands Out:

• 🎨 Craftsmanship: Every line of code is written with care, keeping the framework lightweight, efficient, and easy to understand.
• 🛠️ Developer-First: Intuitive API and minimal core mean you spend less time wrestling with the framework and more time perfecting your UI.
• 🌟 No Magic: Pure vanilla JavaScript with no hidden abstractions — debug easily, ship confidently.
• 🏗️ Scales With You: From prototype to production, Eleva grows with your project without added complexity.

"The best UX comes from developers who love their tools — and agents that speak their framework's language." — Eleva's DX + AX philosophy

Features

• 🧩 Component-Based Architecture: Create reusable UI components with a rich context API
• ⚡ Signal-Based Reactivity: Fine-grained reactivity that updates only what's needed
• 🔔 Event Handling: Built-in event emitter for robust inter-component communication
• 📝 Template Parsing: Dynamic interpolation with a custom TemplateEngine (trusted templates only)
• 🔄 DOM Diffing & Patching: High-performance updates without a virtual DOM
• 🔄 Lifecycle Hooks: Complete lifecycle management with before/after mount and update hooks
• 🧹 Automatic Cleanup: Proper cleanup of resources, watchers, and child components on unmount
• 🔌 Plugin System: Extensible architecture with a simple plugin API
• 🎯 Built-in Plugins: Attr for advanced attributes, Router for client-side routing, Store for reactive state management, and Agent for AI/LLM integration (AX)
• 📦 UMD & ES Module Builds: Supports modern build tools and browser environments
• 🤝 Friendly API: A gentle learning curve for both beginners and seasoned developers
• 💎 Tiny Footprint & TypeScript Support: Approximately ~2.5KB gzipped (~6KB minified) with buil