lightview/docs/api/index.html

A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation

<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js?base=/index.html"></script>

</script>

<div class="docs-layout">
    <aside class="docs-sidebar" src="./nav.html" data-preserve-scroll="docs-nav"></aside>

    <main class="docs-content">
        <h1>API Reference</h1>
        <p>
            Lightview provides a small but powerful API. Everything you need, nothing you don't.
            <em>Keep it light, remember?</em>
        </p>

        <h2>Lightview Overview</h2>

        <table class="api-table">
            <thead>
                <tr>
                    <th>Function</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a
                            href="./signals.html"><code>signal(value, optionsOrName?)</code></a><br><code>signal.get(name)</code>
                    </td>
                    <td>Create reactive state that triggers updates when changed. Optional name or options object allows
                        global access and persistence.
                    </td>
                </tr>
                <tr>
                    <td><a href="./computed.html"><code>computed(fn)</code></a></td>
                    <td>Derive values from signals automatically</td>
                </tr>
                <tr>
                    <td><a href="./effects.html"><code>effect(fn)</code></a></td>
                    <td>Run side effects when dependencies change</td>
                </tr>
                <tr>
                    <td><a href="./elements.html"><code>tags.*</code></a></td>
                    <td>Shorthand element creators (div, span, button, etc.)</td>
                </tr>
                <tr>
                    <td><code>$(selector)</code></td>
                    <td>Query the DOM and return a native element enhanced with a <code>.content(node, location?)</code>
                        method.
                        The <code>location</code> can be <code>'inner'</code> (default), <code>'outer'</code>,
                        <code>'shadow'</code>,
                        <code>'beforebegin'</code>, <code>'afterbegin'</code>, <code>'beforeend'</code>, or
                        <code>'afterend'</code>.
                        The <code>node</code> argument is polymorphic and can be a real DOM node, a virtual node (vDOM),
                        Object DOM, or an array of these.
                    </td>
                </tr>
                <tr>
                    <td><a href="./enhance.html"><code>enhance(selector, options)</code></a></td>
                    <td>Add reactivity to existing DOM elements. Perfect for progressive enhancement of traditional HTML
                        pages.</td>
                </tr>
            </tbody>
        </table>

        <h2>Lightview X Overview</h2>
        <p>
            Lightview X automatically enhances the core Lightview instance when loaded, adding hypermedia capabilities,
            template literal support, and deep reactive state. Object DOM syntax is now always available in core
            Lightview.
        </p>

        <table class="api-table">
            <thead>
                <tr>
                    <th>Feature / Function</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a
                            href="./state.html"><code>state(obj, optionsOrName?)</code></a><br><code>state.get(name)</code>
                    </td>
                    <td>Create deep reactive state for complex objects/arrays. Optional name or options object allows
                        global access and persistence.</td>
                </tr>
                <tr>
                    <td><code>registerStyleSheet(id, css)</code></td>
                    <td>Register a named stylesheet for use in Shadow DOM components. Can take a CSS string, a URL, or a
                        selector to a <code>&lt;style&gt;</code> tag.</td>
                </tr>
                <tr>
                    <td><code>registerThemeSheet(url)</code></td>
                    <td>Register a global theme stylesheet that is automatically applied to all Shadow DOM components.
                    </td>
                </tr>
                <tr>
                    <td><a href="/docs/hypermedia/#fetching-content"><code>src="..."</code></a></td>
                    <td>Attribute to automatically fetch HTML or JSON representing HTML and inject it into the element.
                    </td>
                </tr>
                <tr>
                    <td><a href="/docs/hypermedia/#href-navigation"><code>href="..."</code></a></td>
                    <td>Attribute for SPA navigation and src injection on any element. Supports targeting content
                        before, at the start of, and the end of or after other elements via CSS selectors.</td>
                </tr>
                <tr>
                    <td>
                        <code>&lt;div&gt;${signal.get('count').value}&lt;/div&gt;</code><br><code>&lt;span&gt;${state.get('user').name}&lt;/span&gt;</code>
                    </td>
                    <td>Syntax support for using signals and state directly inside string templates in HTML or JSON
                        representation of HTML.</td>
                </tr>
            </tbody>
        </table>

        <h2>Using Lightview</h2>
        <pre><code>&lt;!-- Core only --&gt;
&lt;script src="lightview.js"&gt;&lt;/script&gt;

&lt;!-- Full power --&gt;
&lt;script src="lightview.js"&gt;&lt;/script&gt;
&lt;script src="lightview-x.js"&gt;&lt;/script&gt;</code></pre>
        <pre><code>// Destructure what you need from the global instances
const { signal, computed, effect, element, tags, $, enhance } = Lightview;
const { state } = LightviewX; // Deep state (lightview-x)</code></pre>



        <h2>Core Modules</h2>

        <div class="feature-grid" style="margin-top: 1.5rem;">
            <a href="./signals" class="feature-card" style="text-decoration: none; color: inherit;">
                <h3 class="feature-title">Signals</h3>
                <p class="feature-description">
                    The foundation. Reactive primitives that make everything tick.
                </p>
            </a>
            <a href="./computed" class="feature-card" style="text-decoration: none; color: inherit;">
                <h3 class="feature-title">Computed</h3>
                <p class="feature-description">
                    Derived state. Values that update themselves.
                </p>
            </a>
            <a href="./effects" class="feature-card" style="text-decoration: none; color: inherit;">
                <h3 class="feature-title">Effects</h3>
                <p class="feature-description">
                    Side effects. Do things when state changes.
                </p>
            </a>
            <a href="./elements.html" class="feature-card" style="text-decoration: none; color: inherit;">
                <h3 class="feature-title">Syntax Styles</h3>
                <p class="feature-description">
                    Five ways to build UI: tag functions, vDOM, Object DOM, Custom Elements, and the experimental cDOM.
                </p>
                <p style="margin-top: 1rem; font-style: italic;">
                    An exciting 5th option is coming: the <strong>Computational DOM</strong>, a.k.a. <strong><a
                            href="/docs/cdom.html">cDOM</a></strong>.
                </p>
            </a>
            <a href="./enhance" class="feature-card" style="text-decoration: none; color: inherit;">
                <h3 class="feature-title">Enhance</h3>
                <p class="feature-description">
                    Add reactivity to existing HTML. Progressive enhancement made easy.
                </p>
            </a>
            <a href="/docs/hypermedia/" class="feature-card" style="text-decoration: none; color: inherit;">
                <h3 class="feature-title">Hypermedia</h3>
                <p class="feature-description">
                    Fetch content with src. HTM-style patterns, built in.
                </p>
            </a>
        </div>

    </main>
</div>