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

<!-- Hero Section -->
<section class="hero">
    <div class="hero-content">
        <img src="/docs/assets/images/logo.svg" class="hero-logo" alt="Lightview Logo" width="512" height="512">
        <h1>Lightview</h1>
        <p class="hero-tagline">Reactive UI's done light</p>
        <p class="hero-description">
            More power. Less energy.
            <br>
            <a id="link-hero-ai-safe" href="#ai-safe"
                style="color: var(--site-primary); font-size: 1.25rem; font-weight: 700; text-decoration: none; display: inline-block; margin-top: 0.25rem; border-bottom: 2px solid var(--site-primary); padding-bottom: 2px;">AI
                Safe</a>
        </p>
        <div class="hero-actions">
            <a id="link-hero-get-started" href="./getting-started/" class="btn btn-primary btn-lg">Get Started</a>
        </div>
        <div class="hero-stats">
            <div class="hero-stat">
                <div class="hero-stat-value">Zero</div>
                <div class="hero-stat-label">Build Steps</div>
            </div>
            <div class="hero-stat">
                <div class="hero-stat-value"><a id="link-hero-ways-to-build"
                        href="http://localhost:3000/docs/api/elements"
                        style="color: inherit; text-decoration: none;">5</a></div>
                <div class="hero-stat-label">Ways to Build</div>
            </div>
            <div class="hero-stat">
                <div class="hero-stat-value">40+</div>
                <div class="hero-stat-label"><a id="link-hero-components" href="http://localhost:3000/docs/components/"
                        style="color: inherit; text-decoration: none;">Components</a></div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="section">
    <div class="section-content">
        <div class="section-header">
            <h2 class="section-title">Why Lightview</h2>
        </div>
        <div class="feature-grid">
            <a id="link-feature-signals" href="./api/signals.html" class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10" />
                        <path d="M12 6v6l4 2" />
                    </svg>
                </div>
                <h3 class="feature-title">Signals and Object State Reactivity</h3>
                <p class="feature-description">
                    Fine-grained reactivity with signals and object state. Updates propagate automatically—no virtual
                    DOM diffing needed. Arrays and Dates are directly reactive without destructing or copying. As a
                    bonus, session and local storage are also supported.
                </p>
            </a>
            <a id="link-feature-elements" href="./api/elements.html" class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="18" height="18" rx="2" />
                        <path d="M3 9h18M9 21V9" />
                    </svg>
                </div>
                <h3 class="feature-title">Multiple Syntaxes</h3>
                <p class="feature-description">
                    Tagged API, vDOM, Object DOM, HTML. Pick your style—they all work together.
                </p>
            </a>
            <a id="link-feature-hypermedia" href="/docs/hypermedia/" class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                        <path
                            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.66 0 3-4 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4-3-9s1.34-9 3-9" />
                    </svg>
                </div>
                <h3 class="feature-title">Hypermedia Ready</h3>
                <p class="feature-description">
                    Fetch HTML, vDOM, or Object DOM with the <code>src</code> attribute. HTMX-like patterns for
                    <code>src</code> and <code>href</code> built right
                    in.
                </p>
            </a>
            <a id="link-feature-components" href="./components/index.html" class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
                    </svg>
                </div>
                <h3 class="feature-title">Component Library</h3>
                <p class="feature-description">
                    Beautiful, accessible components ready to use. Buttons, modals, forms, charts, and more.
                </p>
            </a>
            <a id="link-feature-zerobuild" href="./getting-started/index.html" class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                        <path
                            d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z" />
                    </svg>
                </div>
                <h3 class="feature-title">Zero Build Step</h3>
                <p class="feature-description">
                    No bundler required. Drop in a script tag and start building. Works everywhere.
                </p>
            </a>
            <a id="link-feature-aisafe" href="#ai-safe" class="feature-card">
                <div class="feature-icon">
                    <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                    </svg>
                </div>
                <h3 class="feature-title">AI Safe</h3>
                <p class="feature-description">
                    Build reactive UIs with pure JSON or JSON like data. No eval(), no risky code generation. Safe for
                    AI agents.
                </p>
            </a>

        </div>
    </div>
</section>

<!-- AI Catch Section -->
<section class="section" id="ai-safe">
    <div class="section-content"
        style="background: linear-gradient(135deg, #1a1c2c 0%, #4a1942 100%); color: white; border-radius: 2rem; padding: 4rem 2rem; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden;">
        <!-- Glowing background elements -->
        <div
            style="position: absolute; top: -20%; left: -10%; width: 50%; height: 140%; background: radial-gradient(circle, rgba(138, 43, 226, 0.2) 0%, transparent 70%); filter: blur(60px); pointer-events: none;">
        </div>
        <div
            style="position: absolute; bottom: -20%; right: -10%; width: 50%; height: 140%; background: radial-gradient(circle, rgba(255, 20, 147, 0.15) 0%, transparent 70%); filter: blur(60px); pointer-events: none;">
        </div>

        <div style="position: relative; z-index: 1;">
            <div class="section-header">
                <h2 class="section-title" style="color: white; font-size: 2.5rem;">The AI-Safe UI Engine</h2>
                <p class="section-subtitle" style="color: rgba(255, 255, 255, 0.85); max-width: 800px; margin: 0 auto;">
                    Lightview's <strong>cDOM</strong> and <strong>JPRX</strong> are purpose-built for the era of
                    AI-driven development, providing a safe, standard-based foundation for agentic UI generation.
                </p>
            </div>

            <div
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; margin-top: 3.5rem;">
                <div
                    style="background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem; padding: 2.5rem; transition: transform 0.3s ease;">
                    <div
                        style="width: 48px; height: 48px; background: rgba(138, 43, 226, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
                        <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#a78bfa" stroke-width="2">
                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                        </svg>
                    </div>
                    <h3 style="color: white; font-size: 1.5rem; margin-bottom: 1rem;">Execution Safety</h3>
                    <p style="color: rgba(255, 255, 255, 0.75); line-height: 1.6;">AI-generated UIs usually require
                        risky JavaScript strings. cDOM creates reactive interfaces using <strong>pure JSON
                            or JSON like data</strong> and <a id="link-ai-safe-cdom-helpers"
                            href="/docs/cdom.html#helpers"
                            style="color: #a78bfa; text-decoration: underline; font-weight: 600;">over 50 built-in
                            functions</a> that bring spreadsheet-like
                        functionality to the DOM. No <code>eval()</code>, no <code>new Function()</code>, and <strong>no
                            access to global JavaScript context</strong>. When used in conjunction with <a
                            id="link-ai-safe-hypermedia" href="/docs/hypermedia/"
                            style="color: #a78bfa; text-decoration: underline; font-weight: 600;">Lightview hypermedia
                            support</a>, it strictly limits security exposure.</p>
                </div>

                <div
                    style="background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem; padding: 2.5rem; transition: transform 0.3s ease;">
                    <div
                        style="width: 48px; height: 48px; background: rgba(255, 20, 147, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
                        <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#fb7185" stroke-width="2">
                            <path d="M7 21h10M12 21V3m0 0l-5 5m5-5l5 5" />
                        </svg>
                    </div>
                    <h3 style="color: white; font-size: 1.5rem; margin-bottom: 1rem;">Standards-First Design</h3>
                    <p style="color: rgba(255, 255, 255, 0.75); line-height: 1.6;"><a id="link-ai-safe-cdom"
                            href="/docs/cdom.html"
                            style="color: #fb7185; text-decoration: underline; font-weight: 600;">cDOM</a>
                        (Computational DOM) and <a id="link-ai-safe-jprx" href="/docs/cdom.html#JPRX"
                            style="color: #fb7185; text-decoration: underline; font-weight: 600;">JPRX</a> (JSON Pointer
                        Reactive eXpressions) built based on <a id="link-ai-safe-json-pointers"
                            href="https://datatracker.ietf.org/doc/html/rfc6901" target="_blank"
                            style="color: #fb7185; text-decoration: underline; font-weight: 600;">JSON
                            Pointers</a> (RFC 6901), <a id="link-ai-safe-json-schema" href="https://json-schema.org/"
                            target="_blank" style="color: #fb7185; text-decoration: underline; font-weight: 600;">JSON
                            Schema</a>, and
                        <a id="link-ai-safe-xpath" href="https://www.w3.org/TR/xpath/" target="_blank"
                            style="color: #fb7185; text-decoration: underline; font-weight: 600;">XPath</a>. AI agents
                        describe complex relationships through proven standards and path languages, not imperative
                        logic.
                    </p>
                </div>

                <div
                    style="background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem; padding: 2.5rem; transition: transform 0.3s ease;">
                    <div
                        style="width: 48px; height: 48px; background: rgba(56, 189, 248, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;">
                        <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#38bdf8" stroke-width="2">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                            <line x1="16" y1="13" x2="8" y2="13"></line>
                            <line x1="16" y1="17" x2="8" y2="17"></line>
                            <polyline points="10 9 9 9 8 9"></polyline>
                        </svg>
                    </div>
                    <h3 style="color: white; font-size: 1.5rem; margin-bottom: 1rem;">Context for Agents</h3>
                    <p style="color: rgba(255, 255, 255, 0.75); line-height: 1.6;">
                        Accelerate development by pointing your AI assistant to the
                        <a id="link-ai-safe-guidance" href="/AI-GUIDANCE.md" target="_blank"
                            style="color: #38bdf8; text-decoration: underline; font-weight: 600;">AI Guidance
                            Manual</a>.
                        A definitive implementation guide optimized for LLM consumption.
                    </p>
                </div>
            </div>

            <div style="text-align: center; margin-top: 4rem;">
                <a id="link-ai-safe-cta" href="/docs/cdom.html" class="btn btn-primary btn-lg"
                    style="background: white; color: #1a1c2c; border: none; font-weight: 600;">
                    Unleash the Power of cDOM
                </a>
            </div>
        </div>
    </div>
</section>

<section class="section">
    <div class="section-content">
        <div class="section-header">
            <h2 class="section-title">Lighten Up.</h2>
            <p class="section-subtitle">
                Get started in minutes. No npm install. No webpack or vite build process. Just code.
            </p>
        </div>
        <div style="text-align: center;">
            <a id="link-footer-cta" href="/docs/getting-started/" class="btn btn-primary btn-lg">Enlighten Your UI</a>
        </div>
    </div>
</section>