Eleva.js - Best DX + AX for Building the Best UX. A lightweight (~2.5KB gzipped) React/Vue/Angular alternative designed for exceptional Developer Experience (DX) and Agent Experience (AX). Vanilla JavaScript, elevated with signals for reactivity, componen
npm install eleva> Version: 1.2.0 | Size: ~6KB min (~2.5KB gzip) | Dependencies: Zero | TypeScript: Yes
>
> Also known as: elevajs, eleva
Best DX + AX for Building the Best UX β Pure JavaScript, AI-Ready, Simply Elegant.



!100% Javascript
!Zero Dependencies




A minimalist, lightweight, pure vanilla JavaScript frontend runtime framework.
_Designed for the best Developer Experience (DX) and Agent Experience (AX) to help you build exceptional User Experiences (UX). Built with love for native JavaScript and a minimal core that can be extended through a powerful plugin system β including built-in AI agent support. Because sometimes, less really is more!_ π
> Stable Release: This is v1.2.0 - The latest stable release of Eleva.js!
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 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.
---
- 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
---
``javascript
import Eleva from "eleva";
const app = new Eleva("MyApp");
app.component("Counter", {
setup: ({ signal }) => ({ count: signal(0) }),
template: (ctx) =>
});
app.mount(document.getElementById("app"), "Counter");
`
| Method | Purpose |
|--------|---------|
| new Eleva(name) | Create app |app.component(name, def)
| | Register component |app.mount(el, name)
| | Mount to DOM |app.use(plugin)
| | Add plugin |signal(value)
| | Reactive state |emitter.on/emit
| | Events |
> Quick Rule: ${} needs ctx. β @events and :props don't.
| Syntax | Use | ctx.? |${expr}
|--------|-----|:-------:|
| | JS value interpolation | β |@click
| | Event handler | β |:prop
| | Pass to child | β |
> 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}".
---
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.
---
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.
> π‘ 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.
---
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:
| DX Feature | How It Helps You Build Better UX |
|------------|----------------------------------|
| Zero Config | Start building immediately β no webpack, no bundlers, no setup |
| Intuitive API | Learn in minutes, master in hours β more time for polishing UI |
| Pure JavaScript | No JSX, no compilation β what you write is what runs |
| Instant Feedback | Signal-based reactivity shows changes immediately |
| TypeScript Built-in | Full autocomplete and type safety out of the box |
| Tiny Bundle | ~2.5KB gzipped means instant page loads for your users |
| Agent-Ready (AX) | Built-in Agent plugin for AI/LLM integration with action registry, audit logging, and permissions |
- π¨ 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
---
- π§© 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 built-in TypeScript declarations
---
Eleva is ideal for developers seeking a lightweight, flexible, and high-performance solution for building frontend applications. Here are some scenarios where Eleva shines:
- β‘ Performance-Critical Applications: 240fps-capable rendering handles everything from simple counters to 10K+ row dashboards (via virtual scrolling).
- π¦ Bundle-Sensitive Projects: At ~2.5KB gzipped with zero dependencies, ideal for embedded widgets, micro-frontends, and mobile-first apps.
- π Unopinionated & Flexible: Architect your application your way with a straightforward API and plugin system.
- π― Developer-Friendly: Stick to pure vanilla JavaScript with familiar syntax and built-in TypeScript support.
- π§ͺ Rapid Prototyping: Start building immediatelyβno build tooling required.
- π Extensible: Easily add features like routing or state management through plugins.
- π Built-in Routing: Advanced client-side routing with navigation guards and reactive state via Router plugin.
- π― Advanced Attributes: Sophisticated attribute handling with ARIA support via Attr plugin.
- πͺ Reactive State Management: Centralized, reactive data store with persistence and namespacing via Store plugin.
- π¦ Module Format Flexibility: Choose from ESM, CommonJS, or UMD formats based on your project's needs.
---
I believe in clear versioning that reflects the maturity of the project:
- Stable Versions: Version 1.0.0 and above follow semantic versioning with full backward compatibility guarantees within major versions.
- Semantic Versioning: Eleva follows semantic versioning strictly to clearly communicate any breaking changes.
---
I follow Semantic Versioning (SemVer):
- π’ Major Version: Breaking changes or major overhauls (e.g., from 1.0.0 to 2.0.0).1.1.0
- π’ Minor Version: New features in a backward-compatible manner (e.g., from to 1.2.0).1.0.1
- π’ Patch Version: Backward-compatible bug fixes and minor improvements (e.g., ).-alpha
- π Pre-release Identifiers: Suffixes like , -beta, or -rc denote unstable releases (e.g., 1.2.0-alpha).
---
Eleva is crafted for performance:
- Lightweight: Approximately ~6KB minified and ~2.5KB gzipped.
- Efficient Reactivity: Signal-based updates ensure only necessary DOM parts are updated.
- Optimized Diffing: Renderer efficiently patches changes without the overhead of a virtual DOM.
- No Bloat: Pure vanilla JavaScript with zero dependencies keeps your project nimble.
- Tree-Shakable: ESM format allows bundlers to eliminate unused code.
- Format-Specific Optimizations: Each module format is optimized for its target environment.
---
Benchmarks using js-framework-benchmark methodology (1,000 rows):
| Framework | Bundle Size (gzipped) | Create 1K Rows (ms) | Partial Update (ms) | Memory (MB)* |
| ----------------------------- | -------------------------- | ----------------------- | ----------------------- | ---------------- |
| Eleva (Direct DOM) | ~2.5KB | ~25 | ~86 | ~0.5 (Chrome) |
| React 19 (Virtual DOM) | ~55KB | 40-70 | 10-20 | 2-5 |
| Vue 3.5 (Reactive) | ~45KB | 25-45 | 5-15 | 2-4 |
| SolidJS 1.9 (Signals) | ~7KB | 35-45 | 5-10 | 1-2 |
| Preact 10 (Virtual DOM) | ~5KB | 45-60 | 10-15 | 2-3 |
| Angular 19 (Signals) | ~62KB | 50-80 | 15-25 | 3-6 |
Eleva's Strengths:
- Smallest bundle size (~2.5KB vs 5-62KB gzipped)
- Competitive initial render (~25ms for 1K rows)
- Zero dependencies and minimal runtime overhead
- Direct DOM diffing without virtual DOM overhead
Performance Tips:
- Use key attribute on list items for optimal diffing
- Eleva excels at initial renders and memory efficiency
- For large lists (10K+ rows), use virtual scrolling for 5.5x less memory and 10x faster creation
- See Large List Performance for detailed patterns and benchmarks
> π‘ Run benchmarks yourself: bun run test:benchmark | Detailed benchmark results
---
How does Eleva compare to popular JavaScript frameworks like React, Vue, Svelte, SolidJS, Preact, and Angular?
| Feature | Eleva 1 | React 19 | Vue 3.5 | Svelte 5 | SolidJS 1.9 | Preact 10 | Angular 19 |
|---------|-----------|----------|---------|----------|-------------|-----------|------------|
| Bundle Size (gzipped) | ~2.5KB | ~55KB | ~45KB | ~3KB* | ~7KB | ~5KB | ~62KB |
| Dependencies | 0 | 3+ | 0 | 0 | 0 | 0 | 10+ |
| Virtual DOM | No | Yes | Yes | No | No | Yes | No |
| Reactivity | Signals | useState/Hooks | Refs/Reactive | Compiler | Signals | useState/Hooks | Zone.js |
| TypeScript | Built-in | Optional | Optional | Built-in | Built-in | Optional | Built-in |
| Build Required | No | Yes | Optional | Yes | Yes | Optional | Yes |
| Learning Curve | Low | Medium | Medium | Low | Medium | Low | High |
| AI/Agent Support | Built-in | No | No | No | No | No | No |
_*Svelte compiles away, so runtime is minimal but build step is required._
Eleva offers a refreshing alternative to frameworks like React, Vue, and Angular:
- Simplicity: No virtual DOM, JSX, or complex state management-just plain JavaScript.
- Modularity: Easily extend via plugins to suit your project's needs.
- Size: A fraction of the size of mainstream frameworks.
- Learning Curve: Familiar syntax and a clear API make it accessible to all developers.
_Note:_ Eleva isn't trying to replace these giants but provides a lightweight option when you want simplicity and speed. π
---
Eleva targets modern evergreen browsers and requires no polyfills.
| Browser | Minimum Version |
|---------|-----------------|
| Chrome | 71+ |
| Firefox | 69+ |
| Safari | 12.1+ |
| Edge | 79+ (Chromium) |
| iOS Safari | 12.2+ |
Not Supported: Internet Explorer, Legacy Edge (< 79)
Why? Eleva uses modern JavaScript features (queueMicrotask, ES6 Classes, async/await) to maintain its tiny footprint. These browsers cover 96%+ of global web traffic.
> π‘ For legacy browser support, use Babel with appropriate polyfills.
---
Eleva is available on npm. Try it out and share your thoughts!
`bash`
npm install eleva
Or include it directly via CDN:
`html`
or
`html`
---
`js
// 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: (ctx) =>
Count: ${ctx.count.value}
});// 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
$3
Include Eleva via a script tag and use the global variable:
`html
Eleva Example
`Interactive Demo: CodePen
---
API Reference
$3
Eleva exposes the core utilities as named exports for direct use and typing:
`javascript
import Eleva, { Signal, Emitter, Renderer, TemplateEngine } from "eleva";
`$3
-
TemplateEngine.evaluate(expr, data)
Evaluates JavaScript expressions within a given context (not sandboxed). Used internally for @events and :props attribute processing.$3
-
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.$3
-
new Emitter()
Creates an Emitter instance.
- .on(event, handler)
Listen to events.
- .off(event, handler)
Remove event listeners (omit handler to remove all listeners for the event).
- .emit(event, ...args)
Trigger events with additional arguments.$3
-
new Renderer()
Creates a Renderer instance.
- .patchDOM(container, newHtml):
Updates container content with the new HTML.$3
-
new Eleva(name)
Create an Eleva instance.
- .use(plugin, options)
Install plugins.
- .component(name, definition)
Register a component.
- .mount(container, compName, props)
Mount a component to the DOM.$3
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.
Plugin Types:
| Type | Source | Installation |
|------|--------|--------------|
| Core Plugins | Bundled with Eleva |
import { X } from "eleva/plugins" |
| External Plugins | Community/Ecosystem | npm install eleva-plugin-x |> Core plugins (Attr, Router, Store, Agent) are official, tested, and documented. External plugins are community-created and installed separately. See Plugin Documentation for details.
> TypeScript: Use
import type { ... } from "eleva" for core types and import { Attr, Router, Store, Agent } from "eleva/plugins" for plugin types β no deep imports needed.#### Core Framework Only (Lightweight)
`javascript
import Eleva from 'eleva';const app = new Eleva("myApp");
// Core framework only - ~6KB minified (~2.4KB gzipped)
`#### Attr Plugin
Advanced attribute handling for ARIA, data attributes, boolean properties, and dynamic property detection:
`javascript
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) =>
});
`π Full Attr Documentation β - Comprehensive guide with ARIA attributes, data attributes, boolean handling, and dynamic properties.
#### Router Plugin
π Advanced client-side routing with multiple modes, navigation guards, reactive state, and component resolution:
`javascript
import Eleva from 'eleva';
import { Router } from 'eleva/plugins';const app = new Eleva("myApp");
// Define components
const HomePage = { template: () =>
};
const AboutPage = { template: () => };
const UserPage = {
template: (ctx) =>
};// 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.watch(route => {
console.log('Route changed:', route);
});
// Programmatic navigation
router.navigate('/users/123', { replace: true });
`π Full Router Documentation β - Comprehensive guide with 13 events, 7 reactive signals, navigation guards, scroll management, and more.
#### Store Plugin
πͺ Reactive state management with centralized data store, persistence, namespacing, and cross-component reactive updates:
`javascript
import Eleva from 'eleva';
import { Store } from 'eleva/plugins';const app = new Eleva("myApp");
// Install store with configuration
app.use(Store, {
state: {
theme: "light",
counter: 0,
user: {
name: "John Doe",
email: "john@example.com"
}
},
actions: {
increment: (state) => state.counter.value++,
decrement: (state) => state.counter.value--,
toggleTheme: (state) => {
state.theme.value = state.theme.value === "light" ? "dark" : "light";
},
updateUser: (state, updates) => {
state.user.value = { ...state.user.value, ...updates };
}
},
// Optional: Namespaced modules
namespaces: {
auth: {
state: { token: null, isLoggedIn: false },
actions: {
login: (state, token) => {
state.auth.token.value = token;
state.auth.isLoggedIn.value = true;
},
logout: (state) => {
state.auth.token.value = null;
state.auth.isLoggedIn.value = false;
}
}
}
},
// Optional: State persistence
persistence: {
enabled: true,
key: "myApp-store",
storage: "localStorage", // or "sessionStorage"
include: ["theme", "user"] // Only persist specific keys
}
});
// Use store in components
app.component("Counter", {
setup({ store }) {
return {
count: store.state.counter,
theme: store.state.theme,
increment: () => store.dispatch("increment"),
decrement: () => store.dispatch("decrement")
};
},
template: (ctx) =>
});// Create state and actions at runtime
app.component("TodoManager", {
setup({ store }) {
// Register new module dynamically
store.registerModule("todos", {
state: { items: [], filter: "all" },
actions: {
addTodo: (state, text) => {
state.todos.items.value = [...state.todos.items.value, {
id: Date.now(),
text,
completed: false
}];
},
toggleTodo: (state, id) => {
const todo = state.todos.items.value.find(t => t.id === id);
if (todo) todo.completed = !todo.completed;
}
}
});
// Create individual state properties
const notification = store.createState("notification", null);
// Create individual actions
store.createAction("showNotification", (state, message) => {
state.notification.value = message;
setTimeout(() => state.notification.value = null, 3000);
});
return {
todos: store.state.todos.items,
notification,
addTodo: (text) => store.dispatch("todos.addTodo", text),
notify: (msg) => store.dispatch("showNotification", msg)
};
}
});
// Subscribe to store changes
const unsubscribe = app.store.subscribe((mutation, state) => {
console.log('Store updated:', mutation.type, state);
});
// Access store globally
console.log(app.store.getState()); // Get current state values
app.dispatch("increment"); // Dispatch actions globally
`π Full Store Documentation β - Comprehensive guide with 10 API methods, persistence options, namespaces, subscriptions, and migration guides.
Bundle Sizes:
- Core framework only: ~6KB minified (~2.4KB gzipped)
- Core + Attr: ~8KB minified (~3.4KB gzipped)
- Core + Router: ~21KB minified (~7.0KB gzipped)
- Core + Store: ~12KB minified (~4.4KB gzipped)
- Core + Agent: ~17KB minified (~5.9KB gzipped)
- Core + All plugins: ~41KB minified (~13.5KB gzipped)
Individual Plugin Sizes:
- Attr: ~2.2KB minified (~1.0KB gzipped)
- Router: ~15KB minified (~4.6KB gzipped)
- Store: ~6KB minified (~2.0KB gzipped)
- Agent: ~11.2KB minified (~3.5KB gzipped)
Available Plugin Formats:
For Bundlers (Tree-Shaking Supported):
- ESM:
import { Attr, Router, Store, Agent } from 'eleva/plugins'
- CJS: const { Attr, Router, Store, Agent } = require('eleva/plugins')For CDN (Individual Plugins - Smaller Bundle Size):
- UMD:
- UMD:
- UMD:
- UMD:
- UMD: Individual Plugin Imports (Smaller Bundle Size):
- ESM:
import { Attr } from 'eleva/plugins/attr'
- ESM: import { Router } from 'eleva/plugins/router'
- ESM: import { Store } from 'eleva/plugins/store'
- ESM: import { Agent } from 'eleva/plugins/agent'
- CJS: const { Attr } = require('eleva/plugins/attr')
- CJS: const { Router } = require('eleva/plugins/router')
- CJS: const { Store } = require('eleva/plugins/store')
- CJS: const { Agent } = require('eleva/plugins/agent')For detailed API documentation, please check the docs folder.
---
Development
I welcome developers to dive in and experiment with Eleva! Here's how to get started locally:
1. Clone the Repository:
`bash
git clone https://github.com/TarekRaafat/eleva.git
cd eleva
`2. Install Dependencies:
`bash
npm install
`3. Run in Development Mode (Watch):
`bash
npm run dev
`4. Build for Production without TypeScript Declarations:
`bash
npm run build
`5. Generate and Bundle TypeScript Declarations:
`bash
npm run build:types
npm run build:types:bundle
`6. Build for Production with TypeScript Declarations:
`bash
npm run build:all
`---
Testing
Eleva has a comprehensive test suite with 100% line coverage:
| Metric | Value |
|--------|-------|
| Total Tests | 1,624 |
| Line Coverage | 100% |
| Test Runner | Bun |
Run the test suite:
`bash
bun test # Run all tests
bun test:coverage # Run with coverage report
bun test:benchmark # Run performance benchmarks
``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.
---
Help keep Eleva lightweight, fast, and free for everyone.
Eleva is a labor of love β built and maintained by a solo developer passionate about pure JavaScript and great developer experience. Your sponsorship directly funds:
| What Your Support Enables | Impact |
|---------------------------|--------|
| Continued Development | New features, performance optimizations, and bug fixes |
| Documentation & Examples | Tutorials, guides, and real-world examples |
| Community Support | Faster issue responses and dedicated help |
| Infrastructure | Hosting, CI/CD, and development tools |
| Long-term Sustainability | Ensuring Eleva remains actively maintained |
- Zero dependencies means Eleva relies solely on community support, not corporate backing
- ~2.5KB gzipped of pure JavaScript serves thousands of developers worldwide
- 100% open source β your sponsorship keeps it free for everyone
- Direct impact β every dollar goes straight to development, not overhead
| Tier | Amount | Benefits |
|------|--------|----------|
| Supporter | $5/month | Name in SPONSORS.md + my sincere gratitude |
| Backer | $10/month | Logo on GitHub README + Supporter benefits |
| Bronze Sponsor | $25/month | Small logo on elevajs.com + Backer benefits |
| Silver Sponsor | $50/month | Medium logo on elevajs.com + Priority issue support |
| Gold Sponsor | $100/month | Large logo on elevajs.com homepage + Direct communication channel |
| Platinum Sponsor | $250/month | Premium placement + Feature request priority + Consulting call |
Using Eleva at work? Consider corporate sponsorship to:
- Ensure long-term maintenance of a dependency your product relies on
- Get priority support for your team's issues
- Influence the roadmap with feature requests
- Show your commitment to open source
Contact: tarek.m.raafat@gmail.com
Be the first to sponsor Eleva and have your logo displayed here!
View all sponsors
> Every contribution matters β whether it's $5 or $500, you're helping ensure Eleva continues to provide the best DX + AX for building the best UX. Thank you for considering supporting this project!
---
Eleva is open-source and available under the MIT License.
---
- Author: Tarek Raafat
- Email: tarek.m.raafat@gmail.com
- Website: tarekraafat.com
---
Note: This is the first official stable release of Eleva.js! The framework is production-ready with a stable API. Your feedback and contributions will help make Eleva even better. Let's build something great together! πͺβ¨
---

---