lightview/docs/about.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>

<div class="section">
    <div class="section-content" style="max-width: 800px;">
        <h1>About Lightview</h1>
        <p class="text-secondary" style="font-size: 1.125rem;">
            A lighter way to build.
        </p>

        <div
            style="background: var(--site-bg-alt); border-radius: var(--site-radius-lg); padding: 2rem; margin: 2rem 0; text-align: center;">
            <img src="/docs/assets/images/logo.svg" alt="Lightview"
                style="width: 80px; height: 80px; margin-bottom: 1rem;">
            <p style="font-size: 1.25rem; font-style: italic; color: var(--site-text-secondary); margin: 0;">
                "The view is beautiful from here."
            </p>
        </div>

        <h2>Genesis</h2>

        <p>
            It all started with a mix of admiration and frustration. I liked <strong>Bau</strong>,
            <strong>HTMX</strong>, and
            <strong>Juris</strong>. They were elegant, but they were also opinionated—they forced a choice.
        </p>

        <p>
            I didn't want to choose. I wanted a framework that supported <em>all</em> approaches. None of them quite hit
            the mark on their own. Plus, I wanted something none provided, template literals right inside HTML. I also
            wanted a rich component library (with
            charts!) without having to build everything from scratch available as both JavaScript and custom HTML
            elements.
        </p>

        <p>
            I wanted a framework that was easy to use and learn, as close to regular HTML and JavaScript as possible,
            something that felt more like regular HTML than even HTMX does.
            This would also require thorough and fully interactive documentation accessible via direct URLs and an SPA
            like experience.
            This mandated a router with at least partial "automatic" SSR—where code could execute and replace itself on
            the server with a simple
            DOM emulation and "have-your-cake-and-eat-it-too" single page apps that are SEO-enabled without any extra
            work.
        </p>

        <p>
            In today's age, the ability of an LLM to generate cohesive applications using the library is also important
            to me. I figured that if an LLM generated it and it followed conventional patterns, it will be able to use
            it well and perhaps generate a little less slop.
        </p>

        <p>
            So, I decided to run an experiment. I told Claude Opus 4.5 via Google Antigravity to "create me the
            combo of HTMX, Bau, and
            Juris with no special attribute names plus HTML template literals, and an SPA router. And, give me a UI
            component library like
            Bau's with automatic custom element creation but don't build it from scratch. Finally, make it possible to
            create SEO-enabled apps with no extra work." I also provided a few examples of the kind of code I wanted to
            write
            using the library.
        </p>

        <p>
            Naturally, it took a little iterating, but the basic framework was in place after just a few hours of
            working with both Claude Opus 4.5 and Gemini 3 Pro. I then asked for
            an extensive interactive website for documenting and promoting Lightview that also used Lightview, despite
            the fact that in the age of LLM code generation the need for extensive documentation websites is limited.
            This took a lot more work, 3
            weeks in fact. Very little of this time was spent addressing issues with or enhancing Lightview. Most of it
            was spent adding, debugging, and testing all the UI components. The LLM would get locked in on a particular
            approach that worked for simple components but not more complex ones.
            But, that is a story for another time. So, 3 weeks later I had about 2,000 lines of code for
            Lightview
            as a whole across three
            files, 25,000 lines of component code, and 30,000 lines of documentation. Lightview has grown a lot since
            then! You can see my article about initial development after week 4 on <a
                href="https://hackernoon.com/lightview-a-lightweight-javascript-framework-for-building-single-page-applications-1768144869105"
                target="_blank">Hackernoon</a>.
        </p>

        <p>
            The resulting Lightview 2.0 library is a replacement for an experiment I ran 4 years ago to create a library
            with
            remote state storage and extended type declarations for state management.
            Although Lightview 2.0 drops some of the features of Lightview v1.0 and is not syntax compatible, it brings
            together
            the features I craved without
            locking me into a single paradigm. I hope you like it.
        </p>

        <h2>Design Principles</h2>

        <div
            style="background: var(--site-accent-light); border-left: 4px solid var(--site-accent); padding: 1.5rem; border-radius: 0 var(--site-radius) var(--site-radius) 0; margin: 1.5rem 0;">
            <p style="margin: 0; color: var(--site-text-primary); font-size: 1.25rem; font-style: italic;">
                "My opinion, don't be opinionated!"
            </p>
        </div>

        <div class="feature-grid" style="margin-top: 1.5rem;">
            <div class="feature-card">
                <h3 class="feature-title">🪶 Keep It Light</h3>
                <p class="feature-description">
                    Life's too short for heavy frameworks. Although Lightview is not tiny (core is 7.75K), I tried to
                    keep
                    it lean and modular so your apps stay fast.
                </p>
            </div>
            <div class="feature-card">
                <h3 class="feature-title">🚀 No Build Step</h3>
                <p class="feature-description">
                    Drop in a script tag and go. Instant gratification. Your bundler can take the day off.
                </p>
            </div>
            <div class="feature-card">
                <h3 class="feature-title">🎨 Your Way</h3>
                <p class="feature-description">
                    Four syntaxes, one system. Incremental adoption by enhancing just the HTML you want. Pick what
                    feels right. See the function <code>enhance</code> in the <a href="./api/enhance">API docs</a>.
                </p>
            </div>
            <div class="feature-card">
                <h3 class="feature-title">😊 Have Fun</h3>
                <p class="feature-description">
                    Coding should spark joy. Simple API, clear and interactive docs, helpful errors. Built for humans
                    who like to smile and LLMs that need structure (so humans don't cry about slop).
                </p>
            </div>
        </div>

        <h2>Credits & Inspiration</h2>
        <p>
            Lightview stands on the shoulders of giants. Big thanks to:
        </p>
        <ul>
            <li><strong>Bau.js</strong> — The elegant tagged template API</li>
            <li><strong>HTMX</strong> — Hypermedia as the engine of application state</li>
            <li><strong>Juris.js</strong> — Simplicity and progressive enhancement</li>
        </ul>

        <h2 id="comparison">Library Comparison</h2>
        <p>
            Lightview occupies a unique space, combining the hypermedia power of HTMX with the reactive component model
            of modern libraries, all without a build step.
        </p>

        <h3>Features</h3>
        <div class="overflow-x-auto">
            <table class="table w-full">
                <thead>
                    <tr>
                        <th>Feature</th>
                        <th>Lightview</th>
                        <th>React</th>
                        <th>HTMX</th>
                        <th>Bau.js</th>
                        <th>Juris.js</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>Bundle Size</strong></td>
                        <td>~7.75KB<sup>1</sup></td>
                        <td>~33KB</td>
                        <td>~15KB</td>
                        <td>~2KB</td>
                        <td>~50KB</td>
                    </tr>
                    <tr>
                        <td><strong>No Build Step Required</strong></td>
                        <td>✅</td>
                        <td>❌</td>
                        <td>✅</td>
                        <td>✅</td>
                        <td>✅</td>
                    </tr>
                    <tr>
                        <td><strong>Multiple Syntaxes</strong></td>
                        <td>✅</td>
                        <td>❌</td>
                        <td>❌</td>
                        <td>❌</td>
                        <td>✅</td>
                    </tr>
                    <tr>
                        <td><strong>Native Hypermedia</strong></td>
                        <td>✅</td>
                        <td>❌</td>
                        <td>✅</td>
                        <td>❌</td>
                        <td>❌</td>
                    </tr>
                    <tr>
                        <td><strong>Custom Elements</strong></td>
                        <td>✅</td>
                        <td>❌</td>
                        <td>❌</td>
                        <td>❌</td>
                        <td>❌</td>
                    </tr>
                    <tr>
                        <td><strong>Event Gating</strong></td>
                        <td>✅</td>
                        <td>❌</td>
                        <td>✅</td>
                        <td>❌</td>
                        <td>❌</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <h3>Reactive Capabilities</h3>
        <div class="overflow-x-auto">
            <table class="table w-full">
                <thead>
                    <tr>
                        <th>Capability</th>
                        <th>Lightview</th>
                        <th>React</th>
                        <th>HTMX</th>
                        <th>Bau.js</th>
                        <th>Juris.js</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>Signal/Proxy Based</strong></td>
                        <td>✅</td>
                        <td>❌</td>
                        <td>❌</td>
                        <td>✅</td>
                        <td>✅</td>
                    </tr>
                    <tr>
                        <td><strong>Deep Reactivity</strong></td>
                        <td>✅</td>
                        <td>❌</td>
                        <td>❌</td>
                        <td>✅</td>
                        <td>✅</td>
                    </tr>
                    <tr>
                        <td><strong>Auto Array Mutations</strong></td>
                        <td>✅</td>
                        <td>❌</td>
                        <td>❌</td>
                        <td>✅</td>
                        <td>❌</td>
                    </tr>
                    <tr>
                        <td><strong>Auto Date Mutations</strong></td>
                        <td>✅</td>
                        <td>❌</td>
                        <td>❌</td>
                        <td>❌</td>
                        <td>❌</td>
                    </tr>
                    <tr>
                        <td><strong>Auto Resource Cleanup</strong></td>
                        <td>✅</td>
                        <td>✅</td>
                        <td>❌</td>
                        <td>✅</td>
                        <td>✅</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <p class="text-xs text-secondary italic" style="margin-top: 1rem;">
            <sup>1</sup> Bundle size for Lightview core. Add ~20KB for Lightview-X (hypermedia, template literals, and
            components) and ~3KB for the router.
        </p>




        <h2>License</h2>
        <p>
            Lightview is open source software licensed under the <a href="https://opensource.org/licenses/MIT"
                target="_blank" rel="noopener">MIT License</a>.
        </p>
        <p>
            Free to use, modify, and distribute. Go forth and build light things. ✨
        </p>

        <div style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--site-border); text-align: center;">
            <p style="font-size: 1.125rem; margin-bottom: 1rem;">
                Ready to lighten up?
            </p>
            <a href="./getting-started" class="btn btn-primary">Enlighten Your UI</a>
        </div>
    </div>
</div>