Skip to main content
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.

Quick Start

Build your first reactive component in under five minutes.

Installation

Install via npm, pnpm, bun, or import directly from a CDN.

Core Concepts

Understand models, data bindings, events, and lifecycle hooks.

API Reference

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.
1

Define a model

Create a class that extends SprinculModel. Initialize reactive state in beforeInit() and add methods that update the DOM or handle events.
2

Register and initialize

Register your model classes with Sprincul.register(), then call Sprincul.init() to scan the DOM and wire all bindings.
3

Annotate your HTML

Mark elements with data-model, data-bind-*, and native event attributes like onclick. Sprincul handles the rest.

​
Why Sprincul?

No framework syntax

Behavior lives in your JavaScript classes, not inline expressions. No template language to learn.

No bundler required

Import directly from a CDN via <script type="module"> and get started immediately.

Works with server-rendered HTML

Enhance existing markup without rewriting your templates or adopting a full SPA framework.

TypeScript ready

First-class TypeScript support with typed state interfaces and exported types.