@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="preload" href="./assets/main.css?v=452f3291" as="style" /> <link rel="modulepreload" href="./assets/main.js?v=4387827c" /> <link rel="stylesheet" href="./assets/main.css?v=452f3291" /> <script type="module" src="./assets/main.js?v=4387827c" ></script> </head> <body class=""> <context-router> <header class="content-grid"> <a href="#main" class="skiplink visually-hidden"> Skip to main content </a> <h1 class="content"> UIElement Docs <small>Version 0.14.0</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 id="main" class="content-grid"><section-hero> <h1 id="introduction"> <a name="introduction" class="anchor" href="#introduction"> <span class="permalink">🔗</span> <span class="title">📖 Introduction</span> </a> </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="#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 class="breakout"> <h2 id="what-is-uielement"> <a name="what-is-uielement" class="anchor" href="#what-is-uielement"> <span class="permalink">🔗</span> <span class="title">What is UIElement?</span> </a> </h2> <module-carousel> <div class="slides"> <div id="slide1" role="tabpanel" aria-current="true" style="background: var(--color-purple-20);"> <h3 id="we-can-have-nice-things"> <a name="we-can-have-nice-things" class="anchor" href="#we-can-have-nice-things"> <span class="permalink">🔗</span> <span class="title">We Can Have Nice Things!</span> </a> </h3> <div class="slide-content"> <ul> <li>Embrace the Web Platform</li> <li>Use any server-side technology to render HTML</li> <li>Have components</li> <li>Have reactivity</li> <li>Have type safety</li> <li>Have optimal performance</li> <li>Have fun!</li> </ul> </div> </div> <div id="slide2" role="tabpanel" aria-current="false" style="background: var(--color-pink-20);"> <h3 id="html-first"> <a name="html-first" class="anchor" href="#html-first"> <span class="permalink">🔗</span> <span class="title">HTML First.</span> </a> </h3> <div class="slide-content"> <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="file">hello-world.html</span><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></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> </div> </div> <div id="slide3" role="tabpanel" aria-current="false" style="background: var(--color-orange-20);"> <h3 id="add-javascript"> <a name="add-javascript" class="anchor" href="#add-javascript"> <span class="permalink">🔗</span> <span class="title">Add JavaScript.</span> </a> </h3> <div class="slide-content"> <p>Progressively enhance the user experience by adding interactivity:</p> <module-codeblock language="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> <p class="meta"><span class="file">hello-world.js</span><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:#F92672">import</span><span style="color:#F8F8F2"> { asString, component, setText } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> '@zeix/ui-element'</span></span> <span class="line"></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: </span><span style="color:#A6E22E">asString</span><span style="color:#F8F8F2">() }, (</span><span style="color:#FD971F;font-style:italic">_</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> </div> </div> <div id="slide4" role="tabpanel" aria-current="false" style="background: var(--color-green-20);"> <h3 id="faster-because-we-do-less"> <a name="faster-because-we-do-less" class="anchor" href="#faster-because-we-do-less"> <span class="permalink">🔗</span> <span class="title">Faster. Because We Do Less.</span> </a> </h3> <div class="slide-content"> <ul> <li>Unlike SPA frameworks (React, Vue, Angular, Svelte, Lit, etc.) we <strong>never render</strong> on the client. Instead, the server and browser do this work. Like it's 1995.</li> <li>Because we never render on the client, we need no JSON data and no JS templates either. This means less data over the wire and no plumbing DB → JSON → JS → HTML.</li> <li>We just add event listeners and set up a signal graph. Invisible work that doesn't cause layout shifts.</li> <li>When the user interacts with the UI, we know exactly what to do. We just do fine-grained updates to the DOM. No VDOM, no diffing. Wait for signal 🚦 and go! 🏁</li> </ul> </div> </div> <div id="slide5" role="tabpanel" aria-current="false" style="background: var(--color-blue-20);"> <h3 id="minimal-size"> <a name="minimal-size" class="anchor" href="#minimal-size"> <span class="permalink">🔗</span> <span class="title">Minimal Size.</span> </a> </h3> <div class="slide-content"> <p>Because we add less abstractions, we can keep the library small (approximately 5kB gzipped).</p> <p>UIElement is a lightweight library that provides a simple and efficient way to build reactive user interfaces. It is designed to be easy to use and understand, while still providing powerful features for building complex applications.</p> <p>HTML ain't broken. CSS ain't broken. JavaScript ain't broken. We just want to split it in chunks (components), detect bugs early (type safety), and have predictable updates (reactivity). That's what we stand for.</p> </div> </div> </div> <nav aria-label="Carousel Navigation"> <button type="button" class="prev" aria-label="Previous">❮</button> <button type="button" class="next" aria-label="Next">❯</button> <div role="tablist"> <button role="tab" aria-selected="true" aria-controls="slide1" aria-label="Slide 1" data-index="0" tabindex="0" > ● </button> <button role="tab" aria-current="false" aria-controls="slide2" aria-label="Slide 2" data-index="1" tabindex="-1" > ● </button> <button role="tab" aria-current="false" aria-controls="slide3" aria-label="Slide 3" data-index="2" tabindex="-1" > ● </button> <button role="tab" aria-current="false" aria-controls="slide4" aria-label="Slide 4" data-index="3" tabindex="-1" > ● </button> <button role="tab" aria-current="false" aria-controls="slide5" aria-label="Slide 5" data-index="4" tabindex="-1" > ● </button> </div> </nav> </module-carousel> </section> <section> <h2 id="why-choose-uielement"> <a name="why-choose-uielement" class="anchor" href="#why-choose-uielement"> <span class="permalink">🔗</span> <span class="title">Why Choose UIElement?</span> </a> </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>~5kB 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> <span class="title">Next Steps</span> </a> </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>