@zeix/ui-element
Version:
UIElement - minimal reactive framework based on Web Components
179 lines (157 loc) • 6.52 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduction – UIElement Docs</title>
<meta name="description" content="Overview and key benefits of UIElement">
<link rel="stylesheet" href="assets/main.css">
<script type="module" src="assets/main.js"></script>
</head>
<body>
<header class="content-grid">
<h1 class="content">UIElement Docs <small>Version 0.11.0</small></h1>
<nav class="breakout">
<ol>
<li>
<a href="index.html" class="active">
<span class="icon">📖</span>
<strong>Introduction</strong>
<small>Overview and key benefits of UIElement</small>
</a>
</li>
<li>
<a href="getting-started.html">
<span class="icon">🚀</span>
<strong>Getting Started</strong>
<small>Installation, setup, and first steps</small>
</a>
</li>
<li>
<a href="building-components.html">
<span class="icon">🏗️</span>
<strong>Building Components</strong>
<small>Anatomy, lifecycle, signals, effects</small>
</a>
</li>
<li>
<a href="styling-components.html">
<span class="icon">🎨</span>
<strong>Styling Components</strong>
<small>Scoped styles, CSS custom properties</small>
</a>
</li>
<li>
<a href="data-flow.html">
<span class="icon">🔄</span>
<strong>Data Flow</strong>
<small>Passing state, events, context</small>
</a>
</li>
<li>
<a href="patterns-techniques.html">
<span class="icon">💡</span>
<strong>Patterns & Techniques</strong>
<small>Composition, scheduling, best practices</small>
</a>
</li>
<li>
<a href="examples-recipes.html">
<span class="icon">🍽️</span>
<strong>Examples & Recipes</strong>
<small>Common use cases and demos</small>
</a>
</li>
<li>
<a href="api-reference.html">
<span class="icon">📚</span>
<strong>API Reference</strong>
<small>Detailed documentation of classes and functions</small>
</a>
</li>
<li>
<a href="about-community.html">
<span class="icon">🤝</span>
<strong>About & Community</strong>
<small>License, versioning, getting involved</small>
</a>
</li>
</ol>
</nav>
</header>
<main>
<section class="hero">
<h1>📖 Introduction</h1>
<p class="lead">Enhance server-rendered pages with lightweight, self-contained Web Components. No framework, no hydration issues, no unnecessary complexity.</p>
</section>
<section>
<h2>What is UIElement?</h2>
<p><strong>UIElement</strong> is a lightweight JavaScript library that lets you build interactive Web Components without requiring a full JavaScript framework like React or Vue.</p>
<p>It <strong>works with your existing server-rendered HTML</strong>, enhancing it with stateful, reusable components that hydrate automatically – even when inserted dynamically.</p>
<ul>
<li>✅ <strong>Works with any backend</strong> – No need for a JavaScript-first stack like Next.js.</li>
<li>✅ <strong>No build tools required</strong> – Just drop in components and they work.</li>
<li>✅ <strong>Minimal JavaScript footprint</strong> – Less code over the wire, less complexity.</li>
<li>✅ <strong>Future-proof</strong> – Web Components don’t break with framework updates.</li>
</ul>
</section>
<section>
<h2>Why Use UIElement?</h2>
<p>If you’re looking for a simple, <strong>framework-free way to add interactivity</strong> to your web pages, UIElement is the perfect fit.</p>
<ul>
<li><strong>Enhancing Server-Rendered Pages</strong>: Add client-side behavior to static HTML without worrying about hydration mismatches.</li>
<li><strong>Creating Standalone Web Components</strong>: Build self-contained UI elements that work anywhere — inside any CMS, e-commerce site, or dashboard.</li>
<li><strong>Adding Lightweight Interactivity</strong>: Skip the complexity of React or Vue for simple UI elements like tabs, counters, and interactive lists.</li>
<li><strong>Long-Term Stability</strong>: Web Components outlive JavaScript frameworks release cycles – your components won’t break with each major update.</li>
</ul>
</section>
<section>
<h2>How UIElement Works</h2>
<p>UIElement extends the native <code>HTMLElement</code> class, letting you define <strong>custom Web Components</strong> that manage state with minimal code.</p>
<p>Unlike traditional frameworks that rely on a virtual DOM or dirty-checking, UIElement synchronizes automic pieces of state (signals) directly with the DOM, making fine-grained updates <strong>fast and efficient</strong>.</p>
<h3>Example: Counter Component</h3>
<component-demo>
<div class="preview">
<my-counter count="42">
<p>
Count: <span class="count"></span><br>
Parity: <span class="parity"></span>
</p>
<button type="button" class="decrement">−</button>
<button type="button" class="increment">+</button>
</my-counter>
</div>
<details>
<summary>Source Code</summary>
<lazy-load src="./examples/my-counter.html">
<p class="loading" role="status">Loading...</p>
<p class="error" role="alert" aria-live="polite" hidden></p>
</lazy-load>
</details>
</component-demo>
<ul>
<li>✅ <strong>Zero renders</strong> – Only updates what changes.</li>
<li>✅ <strong>No abstraction over the DOM</strong> – Works with plain HTML.</li>
<li>✅ <strong>Fully self-contained</strong> – Can be used anywhere, even inside CMS templates.</li>
</ul>
<section>
<h2>How UIElement Compares</h2>
<ul>
<li><strong>No Virtual DOM</strong>: Builds upon server-rendered HTML and does only atomic DOM updates, avoiding unnecessary renders.</li>
<li><strong>Minimal Overhead</strong>: Since it adds only a thin layer over native Web Standards, it has minimal bundle size and high performance.</li>
<li><strong>Simple API</strong>: Few, clear concepts (signals, effects, context) allow developers to quickly build interactive components.</li>
</ul>
</section>
<section>
<h2>Next Steps</h2>
<p>Continue to <a href="getting-started.html">Getting Started</a>, or dive into <a href="building-components.html">Building Components</a> to learn more about signals and reactivity.</p>
</section>
</main>
<footer class="content-grid">
<div class="content">
<h2 class="visually-hidden">Footer</h2>
<p>© 2025 Zeix AG</p>
</div>
</footer>
</body>
</html>