<div :scope="count=0">
<button :onclick="count++">+</button>
<button :onclick="count--">–</button>
Count: <span :text="count"></span>
</div>Reference
-
dir
-
Set text content.
<span :text="user.name">Guest</span>mod
Set text content.
<span :text="user.name">Guest</span>FAQ
Why sprae?
- Minimal syntax, valid HTML
- Signals based, preact-signals compatible
- No build, no config, zero deps
- Ecosystem-agnostic (CDN, ESM, JSX)
- Open, configurable
- Fast, practical and safe.
Why not Alpine.js?
More coherent API, smaller, better ESM integration, open state, signals support, syntax sugar (prop modifiers, aliases, chains).
Why not vanilla JS?
createElement is wrong mantra. Just use framework.
Why not Next/React?
Sprae augments JSX, which can help server components. But some find react not worth the time.
Why signals?
It is standard for reactivity. Preact-signals provide minimal API surface.
Who cares for progressive enhancement?
PE is long-lasting, low-maintenance, fail-proof, accessible, portable and SEO-optimized web.
Is it just a toy?
It is indeed fun to play and state comes with sandbox. But it is used in production as well.
Does it scale to complex state?
As far as you and CPU can handle it.
Is new Function unsafe?
If your HTML comes from strangers, there is safe evaluator for CSP.
Components support?
Try to manage duplication, otherwise plop a simple web-component:
class MyComponent extends HTMLElement {
connectedCallback() {
if (!this.shadowRoot) {
this.attachShadow({mode: 'open'}).innerHTML = ``;
sprae(this.shadowRoot, { msg: 'Hello' });
}
}
}
customElements.define('my-component', MyComponent);
TypeScript support?
If you need it please leave a request.
Browser Compatibility?
Any browser with Proxy support.
Is it stable?
Yes, since v10.
How old is it?
enough years old (first commit Nov 7, 2022).
Will it be maintained long-term?
12 versions, 1.5k+ commits and future plans.
What’s future plan?
Plugins, components, integration cases, generators.
Is it backed by a company?
No, indie. You can support it!
Comparison
| Framework | Size | Build Step | Philosophy |
|---|---|---|---|
| Sprae | ~5KB | No | Minimal, declarative, reactive |
| Alpine.js | ~10KB | No | Rich features, declarative |
| Petite-Vue | ~6KB | No | Subset of Vue features |
| Lucia | ~3KB | No | Small reactive core |