A minimalist and lightweight, pure vanilla JavaScript frontend runtime framework.
Pure JavaScript, Pure Performance, Simply Elegant.
Eleva.js is proudly supported by Canonical - the company behind Ubuntu.
A minimalist, lightweight, pure vanilla JavaScript frontend runtime framework.
Built with love for native JavaScript and designed with a minimal core that can be extended through a powerful plugin system-because sometimes, less really is more! 😊
Stability Notice: This is
v1.0.0-rc.4- The core functionality is stable. Seeking community feedback before the final v1.0.0 release.
Version: 1.0.0-rc.4
Welcome to Eleva! This is my humble, experimental playground for a fresh approach to frontend development. Eleva was born out of my genuine passion for pure vanilla JavaScript-no frameworks, no bloat, just the power of native code. I hope you'll have fun exploring, testing, and contributing to make Eleva even better. 🚀
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:
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:
This unopinionated approach makes Eleva versatile and ideal for developers who want full control over their application's design.
Eleva is built with meticulous attention to detail and a deep passion for pure vanilla JavaScript. Every aspect of its design and architecture is handcrafted with the developer in mind. This makes Eleva not only innovative but also a solid foundation for your projects.
This unique, developer-first approach makes Eleva a standout choice for building high-performance frontend applications without compromising on simplicity or control.
Eleva is ideal for developers seeking a lightweight, flexible, and high-performance solution for building frontend applications. Here are some scenarios where Eleva shines:
I believe in clear versioning that reflects the maturity of the project:
1.2.0-alpha indicate the API is still evolving. Expect frequent updates and share your feedback!1.2.0-alpha) marks a significant update with enhanced inline documentation, improved JSDoc annotations, and a refined mounting context that now includes an emitter property.I follow Semantic Versioning (SemVer):
1.0.0 to 2.0.0).1.1.0 to 1.2.0).1.0.1).-alpha, -beta, or -rc denote unstable releases (e.g., 1.2.0-alpha).Eleva is crafted for performance:
Preliminary benchmarks illustrate Eleva's efficiency compared to popular frameworks:
| Framework | Bundle Size (KB) | Initial Load Time (ms) | DOM Update Speed (s) | Peak Memory Usage (KB) | Overall Performance Score (lower is better) |
|---|---|---|---|---|---|
| Eleva (Direct DOM) | 2 | 0.05 | 0.002 | 0.25 | 0.58 (Best) |
| React (Virtual DOM) | 4.1 | 5.34 | 0.020 | 0.25 | 9.71 |
| Vue (Reactive State) | 45 | 4.72 | 0.021 | 3.10 | 13.21 |
| Angular (Two-way Binding) | 62 | 5.26 | 0.021 | 0.25 | 16.88 (Slowest) |
Detailed Benchmark Metrics Report
⚠️ Disclaimer: Benchmarks are based on internal tests and may vary by project and environment.
Eleva offers a refreshing alternative to frameworks like React, Vue, and Angular:
Note: Eleva isn't trying to replace these giants but provides a lightweight option when you want simplicity and speed. 🌟
Eleva is available on npm. Try it out and share your thoughts!
npm install eleva
Or include it directly via CDN:
<!-- jsDelivr (Recommended) -->
<script src="https://cdn.jsdelivr.net/npm/eleva"></script>
or
<!-- unpkg -->
<script src="https://unpkg.com/eleva"></script>
// Import Eleva (using ES modules)
import Eleva from "eleva";
// Create a new Eleva instance
const app = new Eleva("MyApp");
// Define a component
app.component("HelloWorld", {
// The setup method is optional; if omitted, an empty state is used.
setup({ signal }) {
const count = signal(0);
return {
count,
onMount: ({ container, context }) => {
console.log('Component mounted!');
}
};
},
template: ({ count }) => `
<div>
<h1>Hello, Eleva! 👋</h1>
<p>Count: ${count.value}</p>
<button @click="() => count.value++">Increment</button>
</div>
`
});
// Mount the component and handle the Promise
app.mount(document.getElementById("app"), "HelloWorld")
.then(instance => {
console.log("Component mounted:", instance);
// Later...
// instance.unmount();
});
Interactive Demo: CodePen
Include Eleva via a script tag and use the global variable:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Eleva Example</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/eleva"></script>
<script>
const app = new Eleva("MyApp");
app.component("HelloWorld", {
setup({ signal }) {
const count = signal(0);
return { count };
},
template: ({ count }) => `
<div>
<h1>Hello, Eleva! 👋</h1>
<p>Count: ${count.value}</p>
<button @click="() => count.value++">Increment</button>
</div>
`,
});
app.mount(document.getElementById("app"), "HelloWorld");
</script>
</body>
</html>
Interactive Demo: CodePen
TemplateEngine.parse(template, data)
Replaces {{ expression }} patterns in the template with evaluated values.TemplateEngine.evaluate(expr, data)
Safely evaluates JavaScript expressions within a given context.new Signal(initialValue)
Creates a reactive data holder..value (getter/setter)
Get or update the current value and trigger watchers..watch(callback)
Registers a function to run when the value updates.new Emitter()
Creates an Emitter instance..on(event, handler)
Listen to events..off(event, handler)
Remove event listeners..emit(event, ...args)
Trigger events with additional arguments.new Renderer()
Creates a Renderer instance..patchDOM(container, newHtml):
Updates container content with the new HTML.new Eleva(name, config).use(plugin, options).component(name, definition).mount(container, compName, props)Eleva's plugin system allows you to extend functionality as needed. Plugins are separately bundled from the core framework, ensuring optimal tree-shaking and minimal bundle sizes.
import Eleva from 'eleva';
const app = new Eleva("myApp");
// Core framework only - ~6KB minified
Advanced attribute handling for ARIA, data attributes, boolean properties, and dynamic property detection:
import Eleva from 'eleva';
import { Attr } from 'eleva/plugins';
const app = new Eleva("myApp");
app.use(Attr, {
enableAria: true, // ARIA attribute handling
enableData: true, // Data attribute management
enableBoolean: true, // Boolean attribute processing
enableDynamic: true // Dynamic property detection
});
// Use advanced attributes in components
app.component("myComponent", {
template: (ctx) => `
<button
aria-expanded="${ctx.isExpanded.value}"
data-user-id="${ctx.userId.value}"
disabled="${ctx.isLoading.value}"
class="btn ${ctx.variant.value}"
>
${ctx.text.value}
</button>
`
});
🚀 Advanced client-side routing with multiple modes, navigation guards, reactive state, and component resolution:
import Eleva from 'eleva';
import { Router } from 'eleva/plugins';
const app = new Eleva("myApp");
// Define components
const HomePage = { template: () => `<h1>Home</h1>` };
const AboutPage = { template: () => `<h1>About</h1>` };
const UserPage = {
template: (ctx) => `<h1>User: ${ctx.router.params.id}</h1>`
};
// Install router with advanced configuration
const router = app.use(Router, {
mount: '#app', // Mount element selector
mode: 'hash', // 'hash', 'history', or 'query'
routes: [
{
path: '/',
component: HomePage,
meta: { title: 'Home' }
},
{
path: '/about',
component: AboutPage,
beforeEnter: (to, from) => {
// Navigation guard
return true;
}
},
{
path: '/users/:id',
component: UserPage,
afterEnter: (to, from) => {
// Lifecycle hook
console.log('User page entered');
}
}
],
onBeforeEach: (to, from) => {
// Global navigation guard
return true;
}
});
// Access reactive router state
router.currentRoute.subscribe(route => {
console.log('Route changed:', route);
});
// Programmatic navigation
router.navigate('/users/123', { replace: true });
Bundle Sizes:
Available Plugin Formats:
For Bundlers (Tree-Shaking Supported):
import { Attr, Router } from 'eleva/plugins'const { Attr, Router } = require('eleva/plugins')For CDN (Individual Plugins - Smaller Bundle Size):
<script src="https://unpkg.com/eleva@latest/dist/eleva.umd.min.js"></script><script src="https://unpkg.com/eleva@latest/dist/plugins/attr.umd.min.js"></script><script src="https://unpkg.com/eleva@latest/dist/plugins/router.umd.min.js"></script>Individual Plugin Imports (Best for Tree-Shaking):
import { Attr } from 'eleva/plugins/attr'import { Router } from 'eleva/plugins/router'const { Attr } = require('eleva/plugins/attr')const { Router } = require('eleva/plugins/router')For detailed API documentation, please check the docs folder.
I welcome developers to dive in and experiment with Eleva! Here's how to get started locally:
Clone the Repository:
git clone https://github.com/TarekRaafat/eleva.git
cd eleva
Install Dependencies:
npm install
Run in Development Mode (Watch):
npm run dev
Build for Production without TypeScript Declarations:
npm run build
Generate and Bundle TypeScript Declarations:
npm run build:types
npm run build:types:bundle
Build for Production with TypeScript Declarations:
npm run build:all
I use Jest for testing. Run the test suite with:
npm test
Contributions to tests are very welcome! 🧪
I'd love to have you onboard as a contributor! Whether you're adding new features, squashing bugs, or sharing ideas, your input is invaluable. Please check out CONTRIBUTING for guidelines on getting started.
Eleva is open-source and available under the MIT License.
Note: This is a beta release. I'm still polishing things up, so expect some bumps along the way. Your feedback and contributions will help shape Eleva into something truly amazing. Let's build something great together! 💪✨
v1.0.0-rc.4 🎯 (15-08-2025)
🎯 Attr Plugin (Core Plugin)
🚀 Router Plugin (Core Plugin)
Plugin Naming Convention
import { Attr, Router } from 'eleva/plugins' for better developer experience.Attr.js, Router.js) for clarity.eleva/plugins/attr and eleva/plugins/router.Enhanced Installation Options
import Eleva from 'eleva' for minimal bundle size (~6KB).Plugin System Architecture
Bundle Size Optimization
Import Structure
import Eleva from 'eleva' (core only).import { Attr, Router } from 'eleva/plugins' (all plugins).import { Attr } from 'eleva/plugins/attr' (specific plugin).Documentation Updates
Build System Warnings
Plugin File Organization
AttributeHandlerPlugin.js → Attr.js)..gitignore to remove plugins entry as plugins are now part of the core repository.Core Framework Optimizations
_extractProps method in Eleva core for improved attribute extraction and cleanup.Test Coverage Adjustments
Plugin System Enhancements
use() Method: Updated plugin installation method to support return values from plugin install functions.install() method, which are then returned by the use() method.1. Plugin System Introduction
2. Import Changes
// Old way (still works for core features)
import Eleva from 'eleva';
// New way for advanced features
import Eleva from 'eleva';
import { Attr, Router } from 'eleva/plugins';
const app = new Eleva("MyApp");
app.use(Attr); // For advanced attribute handling
app.use(Router); // For client-side routing
3. Bundle Size Impact
For Framework Users:
For Plugin Developers:
Plugin System Architecture:
Plugin API Enhancements:
install() method.use() Method: app.use(plugin) now returns the plugin's return value or the app instance.Import Paths:
eleva → Core framework onlyeleva/plugins → All plugins bundleeleva/plugins/attr → Attr plugin onlyeleva/plugins/router → Router plugin onlyBundle Structure:
eleva.umd.min.js (~6KB)eleva-plugins.umd.min.js (~15KB)attr.umd.min.js (~2.3KB), router.umd.min.js (~13KB)Build System Enhancements:
1. Core Framework Users (No Changes Required)
// This continues to work exactly as before
import Eleva from 'eleva';
const app = new Eleva("MyApp");
2. Users Needing Advanced Features
// Add plugin imports for advanced functionality
import Eleva from 'eleva';
import { Attr, Router } from 'eleva/plugins';
const app = new Eleva("MyApp");
app.use(Attr); // For advanced attribute handling
// Router plugin returns a router instance
const router = app.use(Router, {
mount: '#app',
routes: [
{ path: '/', component: HomePage },
{ path: '/about', component: AboutPage }
]
});
// Use the returned router instance
router.navigate('/about');
3. CDN Users
<!-- Core framework only -->
<script src="https://cdn.jsdelivr.net/npm/eleva"></script>
<!-- With all plugins -->
<script src="https://cdn.jsdelivr.net/npm/eleva/plugins"></script>
FAQs
A minimalist and lightweight, pure vanilla JavaScript frontend runtime framework.
The npm package eleva receives a total of 30 weekly downloads. As such, eleva popularity was classified as not popular.
We found that eleva demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.