∴ spræ

Simple reactivity for HTML/JSX with signals-based attributes.

usage

<div id="counter" :scope="{count: 1}">
  <p :text="`Clicked ${count} times`"></p>
  <button :onclick="count++">Click me</button>
</div>

<script type="module">
  import sprae from '//unpkg.com/sprae?module'

  const state = sprae(document.getElementById('counter'), { count: 0 })
  state.count++
</script>

docs

start  store  signals  evaluator  jsx  build  hints

directives

:text :class :style :value :<attr> :if :else :each :scope :fx :ref :on<event>

modifiers

.debounce .throttle .delay .once
.window .document .root .body .parent .self .outside
.passive .capture .prevent .stop .<key>

why

Move UI wiring to markup, decluttering app or components logic.
Perfect for SPA, PWA, static sites, prototypes, micro-frontends, lightweight UI.
Inspired by preact-signals, alpine, lodash and others.

Made with 🫰 for better DX.