Eleva is a minimalist, lightweight (6KB) pure vanilla JavaScript frontend framework. It provides React-like component-based architecture with signal-based reactivity, but without the complexity, dependencies, or mandatory build tools of larger frameworks.

Is Eleva production-ready?

Yes! Eleva v1.0.0 is the first official stable release. The framework is production-ready with a stable API and comprehensive test coverage (273 tests, 100% line coverage).

What is the difference between Eleva and React?

Eleva differs from React in several key ways: (1) Eleva is 6KB vs React's 42KB+ bundle size, (2) Eleva has zero dependencies while React has several, (3) Eleva uses signal-based reactivity instead of virtual DOM diffing, (4) Eleva requires no build step and works directly via CDN, (5) Eleva uses template strings instead of JSX.

Does Eleva use Virtual DOM?

No. Eleva uses real DOM manipulation with an efficient diffing algorithm. Instead of maintaining a virtual DOM tree in memory and comparing it to compute changes, Eleva directly patches the real DOM. This approach reduces memory overhead and delivers 240fps-capable performance.

Does Eleva require a build step?

No. Eleva can be used directly via CDN without any build tools, bundlers, or transpilers. Simply include the script tag and start coding. However, you can also use Eleva with bundlers like Vite, Webpack, or Rollup if you prefer.

Can I use Eleva with TypeScript?

Absolutely! Eleva includes built-in TypeScript declarations (.d.ts files) to help keep your codebase strongly typed. No additional @types packages are needed.

What plugins are available with Eleva?

Eleva comes with three powerful built-in plugins: Attr for advanced attribute handling (ARIA, data attributes, boolean attributes), Router for client-side routing with navigation guards and reactive state, and Store for reactive state management with persistence and namespacing.

How does Eleva's reactivity work?

Eleva uses a signal-based reactivity system similar to Solid.js. Signals are reactive containers that hold values. When a signal's value changes, any component or watcher subscribed to that signal automatically updates. This provides fine-grained reactivity without the overhead of virtual DOM diffing.

eleva

Eleva.js - Best DX for Building the Best UX

Version: 1.0.0 Bundle Size: ~6KB minified (~2.3KB gzipped) Dependencies: Zero Language: Pure Vanilla JavaScript TypeScript: Built-in declarations included

100% Javascript

What is Eleva?

Eleva is a minimalist, lightweight (6KB), 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

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.

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

Stable Release: This is the official documentation for Eleva v1.0.0 - the first stable release! 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 →

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 →

Framework Comparison

How does Eleva compare to popular JavaScript frameworks?

Feature	Eleva 1.0	React 19	Vue 3.5	Svelte 5	Angular 19
Bundle Size	~6KB	~44KB	~45KB	~3KB*	~90KB
Dependencies	0	3+	0	0	10+
Virtual DOM	No	Yes	Yes	No	No
Reactivity	Signals	useState/Hooks	Refs/Reactive	Compiler	Zone.js
TypeScript	Built-in	Optional	Optional	Built-in	Built-in
Build Required	No	Yes	Optional	Yes	Yes
Learning Curve	Low	Medium	Medium	Low	High
Component Model	Object-based	JSX/Functional	SFC/Options	SFC	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 (~6KB, 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.3KB 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.3 KB vs 35-90 KB)
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.

Changelog

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

License

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

Getting Started →

This site is open source. Improve this page.