Elena + Svelte Example

A minimal example demonstrating how to use Elena web components inside a Svelte 5 application, built with Vite and TypeScript.

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/App.svelte and cover:

• Variants: default, primary, and danger button styles
• Interactive counter: Svelte 5 reactive state ($state) driving Elena button click handlers
• Dynamic attribute binding: cycling through variants reactively via {variant} bindings

Prerequisites

• Node.js v20+
• pnpm v10+

Getting Started

# Install dependencies
pnpm install

# Start the development server
pnpm start

Open http://localhost:5173 in your browser.

Available Scripts

Project Structure

src/
├── main.ts         # Svelte entry point (mounts <App />)
├── App.svelte      # Main component, all Elena examples live here
└── elena.d.ts      # TypeScript declarations for Elena elements
index.html          # HTML shell
vite.config.ts      # Vite configuration
tsconfig.json       # TypeScript configuration

How Elena Web Components Are Used

Import the component and its styles, then use it as a regular template tag:

<script lang="ts">
  import "@elenajs/components/dist/button.js"; // registers <elena-button>
  import "@elenajs/components/dist/button.css"; // button styles
</script>

<elena-button variant="primary" onclick={() => console.log("clicked!")}>Click me</elena-button>

TypeScript Support

src/elena.d.ts bridges Elena's custom elements manifest with Svelte's type system. It extends SvelteHTMLElements so you get full IntelliSense and type-safety in templates without listing each component manually:

import type { CustomElements } from "@elenajs/components";

declare module "svelte/elements" {
  interface SvelteHTMLElements extends CustomElements {}
}

The Svelte for VS Code VSCode extension is required for template type checking. Install it via the Extensions panel, the project's .vscode/extensions.json will prompt you automatically.