> ## Documentation Index > Fetch the complete documentation index at: https://sprincul.sinfullycoded.com/llms.txt > Use this file to discover all available pages before exploring further. # Sprincul: Add Reactivity to HTML with JavaScript Classes > Sprincul adds reactivity to your HTML using plain JavaScript classes and data attributes — no bundler, no template syntax, no virtual DOM. Sprincul is a lightweight, browser-side JavaScript framework that enhances server-rendered HTML with reactive behavior. Instead of replacing your markup with a virtual DOM, Sprincul connects your existing HTML elements to JavaScript class instances through `data-*` attributes — keeping behavior close to your markup without sacrificing code organization. Build your first reactive component in under five minutes. Install via npm, pnpm, bun, or import directly from a CDN. Understand models, data bindings, events, and lifecycle hooks. Full reference for the Sprincul class and SprinculModel base class. ## How it works Sprincul revolves around three things: **models**, **bindings**, and **HTML attributes**. You write a plain JavaScript class, annotate your HTML, and Sprincul wires everything together at initialization. Create a class that extends `SprinculModel`. Initialize reactive state in `beforeInit()` and add methods that update the DOM or handle events. Register your model classes with `Sprincul.register()`, then call `Sprincul.init()` to scan the DOM and wire all bindings. Mark elements with `data-model`, `data-bind-*`, and native event attributes like `onclick`. Sprincul handles the rest. ## Why Sprincul? Behavior lives in your JavaScript classes, not inline expressions. No template language to learn. Import directly from a CDN via `