Creating Elements

Lightview gives you three ways to build UI. Pick your favorite - or mix and match. They all use the same reactive system under the hood.

Comparison

Style	Pros	Cons
Tagged API	Most concise, natural to write	Requires destructuring
vDOM	JSON serializable, easy to validate	Most verbose
Object DOM	Compact JSON, clean templates	Harder to validate than explicit vDOM

const { signal, tags, $ } = Lightview;
const { div, h1, p, button } = tags;
const count = signal(0);
const app = div({ class: 'container' },
    h1('Hello Lightview'),
    p(() => `Count: ${count.value}`),
    button({ onclick: () => count.value++ }, 'Click me')
);
$('#example').content(app);

const { signal, element, $ } = Lightview;
const count = signal(0);
const app = { tag:'div', attributes: { class: 'container' }, children: [
    { tag: 'h1', attributes: {}, children: ['Hello Lightview'] },
    { tag: 'p', attributes: {}, children: [() => `Count: ${count.value}`] },
    { tag: 'button', attributes: { onclick: () => count.value++ }, children: ['Click me'] }
]};
$('#example').content(app);

const { signal, tags, $ } = Lightview;
const { div } = tags;
const count = signal(0);
const app = { div: { class: 'container', children: [
    { h1: { children: ['Hello Lightview'] } },
    { p: { children: [() => `Count: ${count.value}`] } },
    { button: { onclick: () => count.value++, children: ['Click me'] } }
]}};
$('#example').content(app);

Attributes & Events

Pass attributes as the first argument (Tagged API) or in the attributes object (others):

// Standard attributes
div({ 
    id: 'my-div',
    class: 'container active',
    style: 'color: red;',
    'data-value': '42'
})

// Reactive attributes - use functions!
div({
    class: () => isActive.value ? 'active' : 'inactive',
    style: () => `opacity: ${visible.value ? 1 : 0}`,
    disabled: () => isLoading.value
})

// Event handlers - use "on" prefix
button({
    onclick: (e) => handleClick(e),
    onmouseenter: () => setHovered(true),
    onmouseleave: () => setHovered(false)
})

Children

Children can be strings, numbers, elements, arrays, or functions:

div(
    'Static text',                          // String
    42,                                     // Number (converted to string)
    span('Nested element'),                 // Element
    () => `Dynamic: ${value.value}`,        // Reactive function
    () => items.value.map(i => li(i.name)), // Reactive list
    condition && span('Conditional')        // Conditional (falsy = not rendered)
)

The domEl Property

Every Lightview element has a domEl property - the actual DOM node:

const myDiv = div({ class: 'box' }, 'Hello');

// Access the real DOM element
document.body.appendChild(myDiv.domEl);

// You can also manipulate it directly
myDiv.domEl.classList.add('another-class');