Simple, tiny library for building Progressive Web Components

Features

• 🔋 Extremely lightweight: 2.9kB minified & compressed, simple and tiny by design.
• 📈 Progressively enhanced: Renders HTML & CSS first, then hydrates with JavaScript.
• 🫶 Accessible by default: Semantic HTML foundation with no Shadow DOM barriers.
• 🌍 Standards based: Built entirely on native custom elements & web standards.
• ⚡ Reactive updates: Prop and state changes trigger efficient, batched re-renders.
• 🎨 Scoped styles: Simple & clean CSS encapsulation without complex workarounds.
• 🖥️ SSR friendly: Works out of the box, with optional server-side utilities if needed.
• 🧩 Zero dependencies: No runtime dependencies, runs entirely on the web platform.
• 🔓 Zero lock-in: Works with every major framework, or no framework at all.

Usage

To install Elena as a dependency, run:

npm install @elenajs/core

Then import Elena in a web component:

import { Elena } from "@elenajs/core";

class Stack extends Elena(HTMLElement) {
  static tagName = "my-stack";
  static props = ["direction"];

  direction = "column";
}

Stack.define();

See the full documentation at elenajs.com.

Why was Elena created

Elena was created by @arielle after nearly a decade of building enterprise-scale design systems with web components. The recurring pain points were often similar: accessibility issues, server-side rendering, layout shifts, flash of invisible content, React Server Components, too much reliance on client side JavaScript, and compatibility with e.g. third party analytics tools.

Elena was built to solve these problems while staying grounded in web standards and what the platform natively provides. This is how Progressive Web Components were born.

Why should I use Elena

Elena is built for teams creating component libraries and design systems. If you need web components that work across multiple frameworks (such as React, Next.js, Vue, Angular), render HTML and CSS before JavaScript loads, and sidestep common issues like accessibility problems, SSR limitations, and layout shifts, Elena is built for exactly that.

It handles the cross-framework complexity (prop/attribute syncing, event delegation, framework compatibility) so you can focus on building components rather than plumbing.

Next steps

• Start with the Quick Start guide.
• View the Live examples for demos.
• Try Elena in the Playground.
• Read how Elena compares against other web component libraries.
• Browse our FAQ for frequently asked questions.

Provided tools

Elena is a monorepo containing several tools (13 in total!) published to npm under the @elenajs scope. These are the main tools intended for development:

| Package | Description | Version | Stability | | --- | --- | --- | --- | | @elenajs/core | Elena core runtime library. | | | | @elenajs/components | Elena demo web components. | | | | @elenajs/bundler | Elena bundler for component libraries. | | | | @elenajs/cli | Elena CLI for scaffolding web components. | | | | @elenajs/ssr | Elena server-side rendering tools. | | | | @elenajs/mcp | Elena MCP server. | | |

License

Released under the MIT License. Copyright © 2025-2026 Ariel Salminen.