Getting Started

Lyap adds reactivity to plain HTML. Drop in one script tag, write a little markup, and you're done.

Installation

Download lyap.min.js and include it in your page. Lyap automatically boots and scans your markup on DOMContentLoaded.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
    <script src="lyap.min.js"></script>
</head>
<body>

    <!-- Your markup and scoped scripts go here -->

</body>
</html>

You can also load it from a CDN or any static host:

<script src="https://example.com/lyap.min.js"></script>

Your first reactive page

A Lyap app is just HTML. Scopes, state, derived calculations, and actions are declared inside standard <script> tags using Lyap.scope(name):

Live previewlyap

Count:

<div>
    <script>
        const counter = Lyap.scope('counter');
        counter.state({ count: 0 });
        counter.actions({
            increment() {
                this.count++;
            }
        });
    </script>

    <p>Count: <span ly-text="counter.count"></span></p>
    <button ly-on:click="counter.increment()">Increment</button>
</div>

How it works: Scoped <script> tags declare state and actions attached to their parent container element. Lyap walks the DOM and binds directives like ly-text and ly-on directly to fine-grained reactive signals.

Core ideas

Before continuing, it helps to understand the three pieces of every Lyap scope:

State — declared with scope.state({...}). Plain JavaScript objects wrapped in deep reactive proxies. Mutating a property notifies bound directives automatically.
Derived values — declared with scope.derived({...}). Computed values automatically recalculated whenever their referenced signals change.
Directives — attributes like ly-text, ly-bind, ly-model, ly-on, ly-if, and ly-for that declare reactive behavior directly in HTML.

Tip: Directives bind directly to fine-grained signals, meaning changes update only target DOM elements with zero virtual DOM overhead. See Text & Show.

Next steps

State & Derived — the reactive heart of Lyap.
Events & Actions — respond to clicks, inputs, and custom events.
Forms & Binding — two-way data binding with modifiers.
Directive Reference — every directive at a glance.