-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (158 loc) · 6.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!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">
<base href="./">
<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>