@zeix/ui-element

<!doctype 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 class=""> <context-router> <header class="content-grid"> <h1 class="content"> UIElement Docs <small>Version 0.13.3</small> </h1> <section-menu> <nav> <h2 class="visually-hidden">Main Menu</h2> <ol> <li> <a href="index.html"> <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="components.html"> <span class="icon">🏗️</span> <strong>Components</strong> <small>Anatomy, lifecycle, signals, effects</small> </a> </li> <li> <a href="styling.html"> <span class="icon">🎨</span> <strong>Styling</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="examples.html"> <span class="icon">🍽️</span> <strong>Examples</strong> <small>Common use cases and demos</small> </a> </li> <li> <a href="blog.html"> <span class="icon">📜</span> <strong>Blog</strong> <small>Latest articles and updates</small> </a> </li> <li> <a href="api.html"> <span class="icon">📚</span> <strong>API Reference</strong> <small>Functions, types, and constants</small> </a> </li> <li> <a href="about.html"> <span class="icon">🤝</span> <strong>About</strong> <small>License, versioning, getting involved</small> </a> </li> </ol> </nav> </section-menu> <card-callout class="content danger" hidden> <p class="error" role="alert" aria-live="polite"></p> </card-callout> </header> <main class="content-grid"><section-hero> <h1 id="introduction"> <a name="introduction" class="anchor" href="#introduction"> <span class="permalink">🔗</span> </a> 📖 Introduction </h1> <div> <p class="lead"><strong>Web development doesn't need to be complicated</strong>. UIElement lets you create reactive Web Components that enhance your existing HTML.</p> <module-toc> <nav> <h2>In this Page</h2> <ol> <li><a href="#what-is-uielement">What is UIElement?</a></li> <li><a href="#philosophy-design-goals">Philosophy & Design Goals</a></li> <li><a href="#why-choose-uielement">Why Choose UIElement?</a></li> <li><a href="#next-steps">Next Steps</a></li> </ol> </nav> </module-toc></div> </section-hero> <section> <h2 id="what-is-uielement"> <a name="what-is-uielement" class="anchor" href="#what-is-uielement"> <span class="permalink">🔗</span> </a> What is UIElement? </h2> <p>UIElement is a lightweight TypeScript library (approximately 4kB gzipped) that brings signal-based reactivity to Web Components. It serves as a thin layer between standard web technologies and modern reactivity patterns, empowering you to:</p> <ul> <li>Transform ordinary HTML elements into reactive components</li> <li>Bind UI updates directly to state changes with minimal boilerplate</li> <li>Create reusable component patterns without complex abstractions</li> <li>Progressively enhance server-rendered content with client-side interactivity</li> </ul> <module-codeblock language="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> <p class="meta"> <span class="language">js</span> </p> <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#88846F">// Transform HTML into reactive components with minimal code</span></span> <span class="line"><span style="color:#A6E22E">component</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'hello-world'</span><span style="color:#F8F8F2">, { name: RESET }, (</span><span style="color:#FD971F;font-style:italic">el</span><span style="color:#F8F8F2">, { </span><span style="color:#FD971F;font-style:italic">first</span><span style="color:#F8F8F2"> }) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> [</span></span> <span class="line"><span style="color:#A6E22E"> first</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'span'</span><span style="color:#F8F8F2">, </span><span style="color:#A6E22E">setText</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'name'</span><span style="color:#F8F8F2">)),</span></span> <span class="line"><span style="color:#F8F8F2">])</span></span> <span class="line"></span></code></pre> <basic-button class="copy"> <button type="button" class="secondary small"> <span class="label">Copy</span> </button> </basic-button> </module-codeblock> <p>UIElement augments what the platform already provides. It leverages the Web Components standard while adding just enough convenience functions to make reactive UI behaviors easy to implement.</p> </section> <section> <h2 id="philosophy-design-goals"> <a name="philosophy-design-goals" class="anchor" href="#philosophy-design-goals"> <span class="permalink">🔗</span> </a> Philosophy & Design Goals </h2> <h3 id="html-first-approach"> <a name="html-first-approach" class="anchor" href="#html-first-approach"> <span class="permalink">🔗</span> </a> HTML-First Approach </h3> <p>UIElement assumes you start with semantic HTML and want to enhance it with behavior:</p> <module-codeblock language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> <p class="meta"> <span class="language">html</span> </p> <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F8F8F2"><</span><span style="color:#F92672">hello-world</span><span style="color:#F8F8F2">></span></span> <span class="line"><span style="color:#F8F8F2"> <</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">>Hello, <</span><span style="color:#F92672">span</span><span style="color:#F8F8F2">>Alice</</span><span style="color:#F92672">span</span><span style="color:#F8F8F2">>!</</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span> <span class="line"><span style="color:#F8F8F2"></</span><span style="color:#F92672">hello-world</span><span style="color:#F8F8F2">></span></span> <span class="line"></span></code></pre> <basic-button class="copy"> <button type="button" class="secondary small"> <span class="label">Copy</span> </button> </basic-button> </module-codeblock> <p>This means better SEO, faster initial page loads, and progressive enhancement that works even when JavaScript fails.</p> <h3 id="reactive-by-design"> <a name="reactive-by-design" class="anchor" href="#reactive-by-design"> <span class="permalink">🔗</span> </a> Reactive by Design </h3> <p>UIElement uses signals for efficient, targeted DOM updates. Only the parts that actually changed get updated – no virtual DOM overhead, no unnecessary re-renders.</p> </section> <section> <h2 id="why-choose-uielement"> <a name="why-choose-uielement" class="anchor" href="#why-choose-uielement"> <span class="permalink">🔗</span> </a> Why Choose UIElement? </h2> <p>UIElement shines when you want:</p> <ul> <li><strong>Server-rendered content</strong> with client-side enhancements</li> <li><strong>High performance</strong> on all devices (no virtual DOM overhead)</li> <li><strong>Component reusability</strong> without framework lock-in</li> <li><strong>Future-proof</strong> code built on web standards</li> <li><strong>Easy integration</strong> with existing codebases</li> </ul> <p><strong>Key Benefits:</strong></p> <ul> <li>~4kB gzipped with no dependencies</li> <li>TypeScript support with full type safety</li> <li>Works with any backend or build setup</li> <li>Progressive enhancement friendly</li> </ul> </section> <section> <h2 id="next-steps"> <a name="next-steps" class="anchor" href="#next-steps"> <span class="permalink">🔗</span> </a> Next Steps </h2> <p>Now that you understand what UIElement is and its core philosophy, you're ready to:</p> <ul> <li>Move on to <a href="getting-started.html">Getting Started</a> to install the library and build your first component</li> </ul> </section> </main> <footer class="content-grid"> <div class="content"> <h2 class="visually-hidden">Footer</h2> <p>© 2024 – 2025 Zeix AG</p> </div> </footer> </context-router> </body> </html>