eleva

Eleva.js - Best DX for Building the Best UX

Version: 1.1.1

Bundle Size: ~6KB minified (~2.5KB gzipped)

Dependencies: Zero

Language: Pure Vanilla JavaScript

TypeScript: Built-in declarations included

---

What is Eleva?

Eleva is a minimalist, lightweight (~2.5KB gzipped), pure vanilla JavaScript frontend framework crafted for exceptional Developer Experience (DX). When developers enjoy building, users enjoy using — Eleva makes it effortless to create beautiful, responsive, and performant User Interfaces (UI).

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 just JavaScript - If it works in vanilla JS, it works in Eleva

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

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.

“The best UX comes from developers who love their tools.” — Eleva’s DX philosophy

Stable Release: This is the official documentation for Eleva v1.1.1. The framework is production-ready with a stable API. We welcome your feedback and contributions to make Eleva even better.

---

Quick Start

30-Second Setup

// 1. Import
import Eleva from "eleva";

// 2. Create app
const app = new Eleva("MyApp");

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

// 4. Mount
app.mount(document.getElementById("app"), "Counter");

Installation

Method	Command/Code
npm	npm install eleva
CDN (jsDelivr)	<script src="https://cdn.jsdelivr.net/npm/eleva"></script>
CDN (unpkg)	<script src="https://unpkg.com/eleva"></script>
ESM Import	import Eleva from "eleva"
Plugin Import	import { Router, Store } from "eleva/plugins"

API Cheatsheet

Method	Description	Returns
new Eleva(name)	Create app instance	Eleva
app.component(name, def)	Register component	Eleva
app.mount(el, name, props?)	Mount to DOM	Promise<MountResult>
app.use(plugin, options?)	Install plugin	Eleva or plugin result
signal(value)	Create reactive state	Signal<T>
emitter.on(event, fn)	Subscribe to event	() => void (unsubscribe)
emitter.emit(event, data)	Emit event	void

Template Syntax

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

Syntax	Purpose	ctx.?	Example
${expr}	JavaScript value interpolation	Yes	${ctx.user.name}
@event	Event binding	No	@click="handleClick"
:prop	Pass prop to child	No	:user="userData.value"

---

Documentation

Getting Started

Guide	Description
Getting Started	Installation, first component, design philosophy
Cheat Sheet	Quick reference for syntax, signals, templates, events
Glossary	Definitions of key terms and concepts
Core Concepts	Signals, templates, lifecycle hooks, emitter, renderer
Components	Registration, mounting, children, props, styles
Architecture	Data flow diagrams and internal architecture

Advanced Topics

Guide	Description
Plugin System	Creating and using plugins
Best Practices	Patterns, guidelines, and anti-patterns
FAQ & Troubleshooting	Common questions and debugging tips

Plugins

Plugin	Description	Docs
Attr	ARIA, data-*, boolean attributes	View →
Router	Client-side routing & guards	View →
Store	Global state management	View →

Plugin Deep Dive:

• Attr: Features · Patterns · API
• Router: Configuration · Navigation · Guards · Lazy Loading · API
• Store: Core Concepts · Configuration · Patterns · Advanced · API

Examples & Patterns

Resource	Description
Examples	Real-world examples and tutorials
State Patterns	State management patterns
Form Patterns	Form handling patterns
List Patterns	List rendering patterns
Async Patterns	Async data fetching patterns

Migration Guides

From	Guide
React	Migration Guide →
Vue	Migration Guide →
Alpine.js	Migration Guide →
jQuery	Migration Guide →

Custom Plugins

Learn to extend Eleva with your own plugins: Plugin Development Guide →

---

Framework Comparison

How does Eleva compare to popular JavaScript frameworks?

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
Component Model	Object-based	JSX/Functional	SFC/Options	SFC	JSX/Functional	JSX/Functional	Decorators

*Svelte compiles away, so runtime is minimal but build step is required.

When to Use Eleva

Choose Eleva when you need:

• High performance without complexity (~2.5KB gzipped, 240fps capable, handles 10K+ rows)
• Zero build tooling—works directly in browsers via CDN
• Micro-frontends, embedded widgets, or progressive enhancement
• Data-intensive UIs where bundle size and render speed matter
• A simpler, lightweight alternative to React or Vue

Consider other frameworks when you need:

• Extensive ecosystem with mature tooling (React, Vue)
• Large team with established patterns (Angular)
• Built-in SSR/SSG frameworks (Next.js, Nuxt, SvelteKit)
• Compiler-based optimization (Svelte)

---

Developer Experience (DX)

Eleva is built on a simple principle: great DX leads to great UX. When developers have intuitive tools, they build better interfaces.

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
No Hidden Magic	Debug easily with transparent, predictable behavior

DX-First Design Principles

• Predictable — No surprises. The framework behaves exactly as documented.
• Debuggable — Clear error messages and easy-to-trace execution flow.
• Self-Documenting — API names that make sense without checking docs.
• Fast Iteration — Change code, see results instantly. No build delays.
• Familiar Patterns — If you know JavaScript, you know Eleva.

---

Performance

Eleva is built for high-performance applications. With an average render time of 0.011ms, Eleva can theoretically achieve 90,000+ fps for simple updates:

FPS Target	Frame Budget	Eleva Capability	Status
60 fps	16.67ms	~1,500 renders possible	Supported
120 fps	8.33ms	~750 renders possible	Supported
240 fps	4.17ms	~380 renders possible	Supported

Performance Highlights:

• 240fps+ capable - Framework never limits frame rate
• Smallest bundle size (~2.5KB vs 5-62KB gzipped)
• Competitive initial render (~25ms for 1K rows)
• Zero dependencies and minimal runtime overhead
• Automatic render batching - Multiple signal changes = 1 render

View detailed benchmarks →

---

Browser Support

Eleva targets modern evergreen browsers and requires no polyfills for supported environments.

Browser	Minimum Version
Chrome	71+
Firefox	69+
Safari	12.1+
Edge	79+ (Chromium)

Coverage: The supported browsers cover approximately 96%+ of global web traffic.

View full browser support details →

---

Community & Support

Join our community for support, discussions, and collaboration:

Channel	Purpose	Link
GitHub Discussions	General questions, ideas	Discussions
GitHub Issues	Bug reports, feature requests	Issues
Stack Overflow	Technical questions	eleva, eleva.js
Reddit	Community projects	r/elevajs
Discord	Real-time chat	Join
Telegram	Support, feedback	Join

---

Contributing

Contributions are welcome! Whether you’re fixing bugs, adding features, or improving documentation, your input is invaluable.

See the CONTRIBUTING file for guidelines.

---

Sponsor Eleva

Eleva is built and maintained by a solo developer. Your sponsorship helps fund continued development, documentation, and community support.

What Your Support Enables
New features & performance optimizations
Documentation, tutorials & examples
Faster issue responses & community support
Long-term project sustainability

View all sponsors

Sponsorship tiers & benefits

---

Changelog

For a detailed log of all changes and updates, please refer to the Changelog.

---

AI & LLM Resources

Eleva.js provides optimized documentation for AI assistants and Large Language Models:

Resource	Description
llms.txt	Quick reference for AI code generation
llms-full.txt	Comprehensive patterns and examples

These files help AI tools like ChatGPT, Claude, Gemini, and others generate accurate Eleva.js code.

---

License

Eleva is open-source and available under the MIT License.

---

Getting Started →

This site is open source. Improve this page.