Skip to main content
Sprincul is a lightweight JavaScript framework that brings reactivity to existing HTML without replacing it. You write plain JavaScript classes, annotate your markup with data-* attributes, and Sprincul wires the two together — no build step, no virtual DOM, no framework-specific templating language required.

​
The problem it solves

Most frontend frameworks assume they own the page. They render HTML themselves and expect you to structure your entire application around their component model. This is a poor fit when you have server-rendered or static HTML that you want to enhance with a bit of interactivity. Sprincul takes the opposite approach. It starts from your existing markup and progressively adds reactive behavior. State lives in your JavaScript class, HTML stays in the server’s hands, and data-* attributes form the bridge between them.

​
How it compares

Sprincul will feel familiar if you have used Stimulus or Alpine.js.
  • Like Stimulus, Sprincul enhances server-rendered HTML by connecting JavaScript classes to elements through data-* attributes instead of taking over rendering. Unlike Stimulus, you do not need to declare static targets, values, or actions — Sprincul works directly with the methods you define on the class.
  • Like Alpine.js, behavior stays close to your markup. Unlike Alpine.js, Sprincul does not evaluate inline JavaScript expressions. All behavior lives in your model class, which keeps logic testable and co-located in one place rather than scattered across HTML attributes.
Sprincul is not meant to compete with either project. The goal is to offer another way to enhance HTML with fewer framework-specific concepts to learn.

​
Key highlights

  • Attribute-driven bindings — connect state to DOM elements with data-bind-<prop>="<callback>" attributes and native event attributes like onclick and oninput.
  • Plain JavaScript classes — your components are standard classes that extend SprinculModel. No decorators, no special syntax, no compiler required.
  • Nanostores under the hood — reactive state is powered by nanostores, giving you efficient, fine-grained updates batched via requestAnimationFrame.
  • No bundler required — import Sprincul directly from a CDN in any <script type="module"> tag. Use a bundler if you want to, but it is never a requirement.

​
What’s in the docs

The documentation covers everything you need to build reactive components with Sprincul:
  • Get Started — install Sprincul and build your first component end to end
  • Data bindings — connect state properties to DOM elements and keep the UI in sync
  • Events — handle user interactions with native event attributes wired to your model methods
  • Computed properties — derive values from state that automatically recalculate when dependencies change
  • Lifecycle hooks — run setup and async hydration code at the right point in the initialization sequence
  • Global store — share state across multiple models without prop-drilling