# Getting Started ## Installation ### CDN (recommended) ```html ``` > When using the CDN `

Loading...

``` That's it. No `app.mount()`. No `createApp()`. No `NgModule`. It just works. --- ## How It Works 1. **Parse** — On `DOMContentLoaded`, No.JS walks the DOM looking for elements with known attributes. 2. **Resolve** — Each attribute maps to a **directive** that is executed by priority (data fetching first, then conditionals, then rendering). 3. **React** — All data lives in **reactive contexts** (Proxy-backed). When data changes, every bound element updates automatically. 4. **Scope** — Contexts inherit from parent elements, like lexical scoping. A `bind` inside an `each` loop can access both the loop item and ancestor data. --- ## Core Concepts ### Reactive Context Every element can have a **context** — a reactive data object. Contexts are created by `state`, `get`, `store`, etc. Child elements inherit their parent's context automatically. ``` body → context: { baseUrl } div[get] → context: { user: { name, email } } ← inherits from body span[bind="user.name"] ← reads from div's context div[each] → context: { post: { title } } ← inherits from div (can access user + post) ``` ### Directive Priority Directives run in a defined order: | Priority | Directives | Description | |----------|-----------|-------------| | 0 | `state`, `store` | Initialize local/global state | | 1 | `get`, `post`, `put`, `patch`, `delete` | Fetch data | | 5 | `route` | SPA routing | | 10 | `if`, `switch`, `each`, `foreach` | Structural (add/remove DOM) | | 20 | `bind`, `class-*`, `style-*`, `show`, `hide` | Rendering (update existing DOM) | | 20 | `on:*` | Event binding | | 30 | `validate`, `animate` | Side effects | ### Expression Syntax Most directive values accept **JavaScript expressions** evaluated against the current context: ```html

``` --- **Next:** [Data Fetching →](data-fetching.md)