Syntaxes

One reactive engine, four ways to build your UI.

Lightview is uniquely flexible. It doesn't force you into a single way of describing your DOM. Whether you prefer concise JavaScript functions, structured JSON, or standard HTML, the same signal-based reactivity powers it all.

Comparison at a Glance

Syntax	Style	Best For	Requirement
Tagged API	`div(h1('Title'))`	Application logic, dynamic UIs	Core
vDOM	`{ tag: 'div', ... }`	Serialization, data-driven UI	Core
oDOM (Object DOM)	`{ div: { ... } }`	Concise templates, config files	Lightview X
Custom Elements	`<lv-button>`	Progressive enhancement, CMS	Lightview X

1. Tagged API

Inspired by Bau.js, this is the most concise way to build UIs in JavaScript. Every HTML tag is available as a function.

const { tags, signal, $ } = Lightview;
const { div, p, button } = tags;

const count = signal(0);

const app = div({ class: 'container' },
    p(() => `Count: ${count.value}`),
    button({ onclick: () => count.value++ }, 'Increment')
);

$('body').content(app);

Pros: Extremely readable, feels like "HTML in JS" without a compiler, full IDE autocomplete.

2. vDOM Syntax

Represent your UI as plain JavaScript objects. This is the underlying format for all non-string elements in Lightview.

const { signal, $ } = Lightview;

const count = signal(0);

const app = { 
    tag: 'div', 
    attributes: { class: 'container' }, 
    children: [
        { tag: 'p', children: [() => `Count: ${count.value}`] },
        { tag: 'button', attributes: { onclick: () => count.value++ }, children: ['Increment'] }
    ] 
};

$('body').content(app);

Pros: Unambiguous, easy to serialize/deserialize as JSON, perfect for programmatic generation.

3. oDOM

A more compact JSON representation provided by Lightview X. It uses the tag name as a key to reduce verbosity.

const { signal, $ } = Lightview;

const count = signal(0);

const app = { 
    div: { 
        class: 'container', 
        children: [
            { p: { children: [() => `Count: ${count.value}`] } },
            { button: { onclick: () => count.value++, children: ['Increment'] } }
        ] 
    } 
};

$('body').content(app);

Pros: Highly readable for templates stored in JSON, significantly less boilerplate than standard vDOM.

4. HTML Custom Elements

Use standard HTML tags to instantiate Lightview components. Ideal for multi-page apps or content managed by a CMS.

<!-- Requires registered components & Lightview X -->
<lv-card>
    <h3 slot="title">User Profile</h3>
    <lv-badge color="primary">Admin</lv-badge>
    <p>Active since 2024</p>
    <lv-button onclick="alert('Clicked!')">Settings</lv-button>
</lv-card>

Pros: Familiar HTML syntax, framework-agnostic, excellent for progressive enhancement of server-rendered pages.