dy / sprae

∴ sprae > Microhydration for HTML/JSX tree. Open & minimal PE framework with signals-based reactivity. Usage Or with module: Sprae evaluates -attributes and evaporates them, returning reactive state. Directives Set text content. Set innerHTML. Initializes directives in inserted content. Set classes from object, array, or string. Set inline styles from object or string. Supports CSS variables. , Set any attribute. Spread form for multiple. / Conditional rendering. Removes element from DOM when false. Iterate arrays, objects, numbers. Create local reactive state. Inherits from parent scope. Bind state to form input (state → DOM). Write-back from input to state (DOM → state). Handles type coercion. Run side effect. Return cleanup function for disposal. Store element reference in state. Function form calls with element. > For lifecycle hooks with setup/cleanup, use . Attach event listeners. Chain modifiers with . Toggle attribute. Unlike , keeps element in DOM. Lifecycle hook — runs once on connect. Not reactive. Can return cleanup. IntersectionObserver wrapper. Fires on enter, or receive entry for full control. ResizeObserver wrapper. Move element to another container. Modifiers Chain with after directive name. Timing Time formats: (ms), , , , , , . Add to debounce for leading edge. Event targets Event control Key filters Filter keyboard events by key or combination. • , , , — modifier keys • , , , — common keys • — delete or backspace • — any arrow key • — 0-9 • — any unicode letter • — any non-space character • , , , — combinations Signals Sprae uses signals for reactivity. Store creates reactive objects from plain data. Getters become computed, -prefixed properties are untracked. Alternative signals Replace built-in signals with any preact-signals compatible library: | Library | Size | Notes | |---------|------|-------| | Built-in | ~300b | Default | | @preact/signals-core | 1.5kb | Industry standard, best performance | | ulive | 350b | Minimal | | signal | 633b | Enhanced performance. | | usignal | 955b | Async effects support | Configuration CSP-safe evaluator Default uses (fast, but requires CSP). For strict CSP, use the pre-built variant or wire jessie manually: Custom prefix Custom directive Custom modifier Integration JSX / Next.js Avoids — keep server components, let sprae handle client-side interactivity: Markdown / Static Sites Markdown processors strip attributes, so use prefix: Works with Jekyll, Hugo, Eleventy, Astro. Sprae site itself is built this way. Server Templates Same pattern works with PHP, Django, Rails, Jinja — server renders HTML, sprae handles client interactivity: Web Components Sprae treats custom elements as boundaries — directives on the element set props, but sprae does not descend into children. The component owns its DOM. Works with define-element, Lit, or any CE library. Hints • Prevent FOUC: • Attribute order matters: before , not after. • Async expressions work: • Dispose: or • No needed — uses direct list mapping, not DOM diffing. • refers to current element, but prefer or for element access. • Properties prefixed with are untracked. FAQ **What is sprae?** : ~5kb script that adds reactivity to HTML via . No build step, no new syntax. **Learning curve?** : If you know HTML and JS, you know sprae. Just . **How does it compare to Alpine?** : 3x lighter, pluggable signals, prop modifiers, event chains. Faster in benchmarks. **How does it compare to React/Vue?** : No build step, no virtual DOM. Can inject into JSX for server components without framework overhead. **Why signals?** : Signals are the emerging standard for reactivity. Pluggable — first to support native signals when browsers ship. **Is new Function unsafe?** : No more than inline handlers. For strict CSP, use the safe evaluator. **Components?** : Use define-element for declarative web components, or any CE library. For simpler cases, manage duplication with templates/includes. **TypeScript?** : Full types included. **Browser support?** : Any browser with Proxy (all modern browsers, no IE). **Does it scale?** : State is plain reactive objects — scales as far as your data model does. Use store with computed getters and methods for complex apps. **Is it production-ready?** : It is used by a few SaaS systems and landing pages of big guys. **Is it backed by a company?** : Indie project. Support it. Used by settings-panel · wavearea · watr Refs alpine · petite-vue · lucia · nuejs · hmpl · unpoly · dagger ॐ