🔗 🍽️ Examples & Recipes
Discover practical examples and patterns for building reactive, modular components with UIElement. Each example focuses on showcasing a specific feature or best practice, guiding you through real-world use cases.
🔗 Counter
Source Code
Loading...
🔗 Carousel
Slides
Source Code
Loading...
🔗 Combobox
- Amsterdam
- Berlin
- Copenhagen
- Dublin
- Edinburgh
- Frankfurt
- Geneva
- Helsinki
- Istanbul
- Jakarta
- Kairo
- London
- Madrid
- New York
- Oslo
- Paris
- Qingdao
- Rome
- Stockholm
- Tokyo
- Ulan Bator
- Vienna
- Warsaw
- Xi'an
- Yokohama
- Zurich
Tell us where you live so we can set your timezone for our calendar and notification features.
Source Code
Loading...
🔗 Todo App
ModuleTodo Source Code
Loading...
InputTextbox Source Code
Loading...
InputButton Source Code
Loading...
InputCheckbox Source Code
Loading...
InputRadiogroup Source Code
Loading...
🔗 Lazy Loading
This example shows how to handle asynchronous data loading and error states.
Features:
- Lazy loading with intersection observer
- Loading states and error handling
- Content replacement patterns
component(
'module-lazy',
{
src: asString(),
loaded: asBoolean(),
loading: asBoolean(),
error: asString(),
},
(el, { first }) => {
let observer
const loadContent = async () => {
if (el.loaded || el.loading || !el.src) return
el.loading = true
el.error = ''
try {
const response = await fetch(el.src)
if (!response.ok) throw new Error(`HTTP ${response.status}`)
const content = await response.text()
el.querySelector('.content').innerHTML = content
el.loaded = true
} catch (err) {
el.error = err.message
} finally {
el.loading = false
}
}
return [
// Loading state
first(
'.loading',
setStyle('display', () => (el.loading ? 'block' : 'none')),
),
// Error state
first(
'.error',
setText('error'),
setStyle('display', () => (el.error ? 'block' : 'none')),
),
// Content container
first(
'.content',
setStyle('display', () => (el.loaded ? 'block' : 'none')),
),
// Setup intersection observer
() => {
observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
loadContent()
observer.disconnect()
}
})
observer.observe(el)
return () => observer?.disconnect()
},
]
},
)
<module-lazy src="/api/user-profile">
<div class="loading">Loading user profile...</div>
<div class="error"></div>
<div class="content"></div>
</module-lazy>