Elena + HTML Example

A minimal example demonstrating how to use Elena in plain HTML.

What is Elena?

Elena is a lightweight (2kB) library for building Progressive Web Components that work natively in the browser. This example uses both @elenajs/core and @elenajs/components, an example component library built on top of Elena.

What This Example Demonstrates

All examples live in src/index.html and cover:

• Variants: default, primary, and danger button styles
• Interactive counter: vanilla JS click handlers driving state
• Dynamic attribute binding: cycling through variants imperatively

Getting Started

Requires Node.js v20+ and pnpm.

pnpm install
pnpm start

This starts a local dev server via @web/dev-server and opens the example in your browser.

How Elena Web Components Are Loaded

The bundle is imported directly from unpkg, no npm install or build step needed:

<script src="https://unpkg.com/@elenajs/components/dist/bundle.js" type="module"></script>
<link rel="stylesheet" href="https://unpkg.com/@elenajs/components/dist/bundle.css" />

This registers all Elena web components globally, making them available as standard HTML tags.

Project Structure

src/
  index.html      # All markup, styles, and interactivity in one file
package.json      # Dev dependencies and start script
README.md         # This file