HTML-first
Keep your HTML, JSX, MD or template – no rewrite, no build step. Pure progressive enhancement.
Minimal reactivity
for HTML/JSX
Sprinkle :attributes on your HTML tree –sprae evaporates them, hydrating the DOM
<div :scope="{ text: 'Hello.' }">
<textarea :value="text" :change="v => text = v"></textarea>
<p :text="text.length + ' characters'"></p>
</div>NOT A FRAMEWORK
Features
Light & fast
No virtual DOM, no swapping. Direct DOM updates. Faster than React, Vue, Lit, Alpine.
Open
UI state is open to JavaScript.
Built with preact-signals, swappable. Configurable init.
Usage
Sprae runs as a script CDN or locally, or as an ES module for manual init from JS. There are also preact-signals and CSP builds.
Read the docsAspects
Reference
Example
Comparison
Sprae intends to minimize syntax footprint, keeping code elegance and intuitivity. How much code that takes with other libraries? See all examples.
FAQ
Why a library, when AI writes the code?
To keep frontend simple. Sprae doesn't add a build step, dependencies or framework rules. Less bugs, faster iterations. A perfect fit for static pages, markdown files etc. Agents can write sprae code easily.
Is evaluating attributes safe?
As far as you trust your HTML. Expressions compile with new Function, same as any inline script. For unsafe content, use the CSP build which provides safe execution.
What if the script fails to load?
Sprae progressively enhances your markup, so it falls back to the original HTML. To hide FOUC, use [\:if],[\:each]{visibility:hidden}.
Does it have components?
Until fragment include landed, manage duplication with includes or templates from your environment (tailwindcss recommendation). Custom elements can be made with define-element or any CE library. For Alpine.data() alternative see the migration guide.
Who is it not for?
Routing, deep component trees, server data flows – take a framework there, add sprae for UI effects if needed. Sprae is for pages where a framework is overkill.
How do I debug an expression?
Error displays the element and the expression in the console. State is plain object, console is available from attributes.
Is it production-ready?
Yes. Used by many websites. Works in any browser with Proxy. 3+ years of releases, no dependencies, tests across both compilers and alternative signals.
Who maintains it?
Dmitry Iv, since 2022, under MIT. Independent, no company behind it. Please consider sponsoring if you like it.