∴ spræ

DOM microhydration

Reactive sprinkles for HTML/JSX

<div :scope="{ q: '', items: ['Apple', 'Apricot', 'Banana', 'Cherry', 'Date', 'Elderberry'] }">
  <input :value="q" placeholder="Search fruits..." />
  <ul>
    <li :each="item in items.filter(i => i.includes(q))" :text="item"></li>
  </ul>
</div>

Principles

Minimal: 5kb gzipped.
Standard JS expressions.
No new syntax.
Open: State as plain objects.
Preact-signals core.
Configurable parts.
Practical: No build step, no deps.
HTML, JSX, any template.
TypeScript support.

Usage

<!-- CDN -->
<script src="//unpkg.com/sprae" data-start></script>

<!-- ESM -->
<script type="module">import sprae from 'sprae'</script>

Docs →

Reference

directive	description	example
`:text`	Set text content	`<span :text="name">`
`:html`	Set innerHTML	`<div :html="content">`
`:class`	Set classes	`<div :class="{active: isOn}">`
`:style`	Set styles	`<div :style="{color}">`
`:value`	Bind input value	`<input :value="text">`
`:<prop>`	Set any attribute	`<a :href="url">`
`:hidden`	Toggle visibility	`<div :hidden="!show">`
`:if` `:else`	Conditional render	`<div :if="cond">`
`:each`	List render	`<li :each="item in list">`
`:scope`	Define state	`<div :scope="{x:1}">`
`:ref`	Get element ref	`<input :ref="el">`
`:fx`	Run effect	`<div :fx="log(x)">`
`:on<event>`	Event listener	`<button :onclick="fn()">`

modifier	description	example
`.once`	Run once	`:onclick.once`
`.prevent`	Prevent default	`:onclick.prevent`
`.stop`	Stop propagation	`:onclick.stop`
`.window` `.document` `.self`	Change target	`:onkeydown.window`
`.away`	Click outside	`:onclick.away`
`.debounce` `.throttle` `.delay`	Timing control	`:oninput.debounce-300`
`.passive` `.capture`	Listener options	`:onscroll.passive`
`.enter` `.esc` `.ctrl` …	Key filters	`:onkeydown.enter`

API →

FAQ

Yet another framework?: Not a framework. A 5kb enhancer for existing HTML. No build, no ecosystem lock-in.
What’s special?: Open state (inspect/modify from console), signals reactivity, modular directives, works with any backend.
Why not Alpine?: 3× lighter, ESM-first, signals, prop modifiers. See comparison.
Why not React/Vue?: No build step, no virtual DOM, augments JSX for server components.
Is it slow?: Benchmark. Faster than Alpine, comparable to Vue.
Components?: Manage duplication or use web components.
Is it maintained?: Yes. 3+ years, 12 major versions. Roadmap.

FAQ →