# Sprincul

## Docs

- [Computed Properties: Automatic Derived State in Sprincul](https://sprincul.sinfullycoded.com/concepts/computed-properties.md): Register derived values with addComputedProp() and Sprincul automatically recomputes them when their dependencies change, batched with other state updates.
- [Data Bindings: Sync Reactive State to DOM Elements](https://sprincul.sinfullycoded.com/concepts/data-bindings.md): Use data-bind-* attributes to declare which DOM elements update when a state property changes. Sprincul calls your callback method on every change.
- [Event Handling in Sprincul with Native HTML Attributes](https://sprincul.sinfullycoded.com/concepts/events.md): Sprincul converts standard onclick, oninput, and other native event attributes into proper DOM event listeners wired to your model's methods.
- [Sprincul Model Lifecycle: beforeInit and afterInit Hooks](https://sprincul.sinfullycoded.com/concepts/lifecycle.md): Sprincul calls beforeInit() before bindings attach and afterInit() after they're ready. Use these hooks to set up state, fetch data, and run async work.
- [Sprincul Models: JavaScript Classes as Reactive Components](https://sprincul.sinfullycoded.com/concepts/models.md): In Sprincul, a model is a plain JavaScript class that extends SprinculModel. It holds reactive state and the methods that update your DOM.
- [Prevent Flash of Uninitialized UI with data-cloaked](https://sprincul.sinfullycoded.com/guides/cloaking.md): Add data-cloaked to model containers or the body element to hide content until Sprincul finishes initializing, preventing layout flicker.
- [Hydrate Sprincul Models in Dynamically Injected HTML](https://sprincul.sinfullycoded.com/guides/dynamic-content.md): Sprincul does not auto-initialize elements added after the first init call. Learn how to hydrate new model roots using a manual reinit pattern.
- [Share State Across Sprincul Models with the Global Store](https://sprincul.sinfullycoded.com/guides/global-store.md): Use Sprincul.store to set, get, and subscribe to shared key/value state. Any model on the page can read and react to store changes without direct coupling.
- [TypeScript Support and Typed State in Sprincul Models](https://sprincul.sinfullycoded.com/guides/typescript.md): Sprincul ships TypeScript types out of the box. Extend SprinculModel with a typed state interface to get full autocomplete and type safety.
- [Install Sprincul via npm, pnpm, bun, or a CDN Import](https://sprincul.sinfullycoded.com/installation.md): Add Sprincul to your project using npm, pnpm, or bun, or import it directly from esm.sh in any script module tag. No bundler or build step required.
- [Sprincul: Browser-Side HTML Reactivity Without a Framework](https://sprincul.sinfullycoded.com/introduction.md): Sprincul is a browser-side reactivity framework that enhances server-rendered HTML with JavaScript classes and data attributes — no virtual DOM required.
- [Sprincul Quick Start: Build Your First Reactive Component](https://sprincul.sinfullycoded.com/quickstart.md): Learn how to build your first reactive component with Sprincul in three steps: define a model, register it, and annotate your HTML.
- [HTML Attribute Reference for Sprincul: data-model and More](https://sprincul.sinfullycoded.com/reference/html-attributes.md): Reference for every HTML attribute Sprincul recognizes: data-model, data-bind-*, data-cloaked, and native onclick and oninput event wiring attributes.
- [Sprincul Limitations, FAQ, and Troubleshooting Guide](https://sprincul.sinfullycoded.com/reference/limitations-faq.md): Known limitations of Sprincul's DOM model, plus answers to common questions about bindings, events, initialization order, and the global store.
- [Sprincul Static Class: Full API Reference and Examples](https://sprincul.sinfullycoded.com/reference/sprincul-api.md): Complete reference for the Sprincul static class: register, registerAll, init, onReady, and the global store API with types and usage examples.
- [SprinculModel Base Class: Properties, Hooks, and Methods](https://sprincul.sinfullycoded.com/reference/sprincul-model-api.md): Complete reference for SprinculModel: the $el property, the reactive state object, beforeInit, afterInit lifecycle hooks, and addComputedProp.