https://github.com/dy/sprae
Reactive sprinkles for HTML/JSX
https://github.com/dy/sprae
alpinejs config-free declarative hydration island-architecture jsx partial-hydration petite-vue preact-signals progressive-enhancement signals spraejs ssr template-parts zero-config
Last synced: 4 days ago
JSON representation
Reactive sprinkles for HTML/JSX
- Host: GitHub
- URL: https://github.com/dy/sprae
- Owner: dy
- License: mit
- Created: 2022-11-13T01:19:23.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-12-23T18:13:48.000Z (3 months ago)
- Last Synced: 2025-12-24T11:29:54.757Z (3 months ago)
- Topics: alpinejs, config-free, declarative, hydration, island-architecture, jsx, partial-hydration, petite-vue, preact-signals, progressive-enhancement, signals, spraejs, ssr, template-parts, zero-config
- Language: JavaScript
- Homepage: https://dy.github.io/sprae/
- Size: 3.96 MB
- Stars: 174
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Funding: .github/funding.yml
- License: license
Awesome Lists containing this project
README
# [∴](https://dy.github.io/sprae) spræ [](https://github.com/dy/sprae/actions/workflows/node.js.yml)  [](https://www.npmjs.com/package/sprae)
Microhydration for HTML/JSX tree.
## usage
```html
Welcome to Spræ!
.light { background: #fff; color: #000; }
.dark { background: #333; color: #fff; }
```
```html
Initialize
Press Esc to close
...
![]()
```
## [docs](docs.md)
#### directives
[`:text`](docs.md#text) [`:class`](docs.md#class) [`:style`](docs.md#style) [`:value`](docs.md#value) [`:change`](docs.md#change) [`:`](docs.md#attr-) [`:if :else`](docs.md#if-else) [`:each`](docs.md#each) [`:scope`](docs.md#scope) [`:fx`](docs.md#fx) [`:ref`](docs.md#ref) [`:hidden`](docs.md#hidden) [`:mount`](docs.md#mount) [`:intersect`](docs.md#intersect) [`:resize`](docs.md#resize) [`:portal`](docs.md#portal) [`:on`](docs.md#onevent)
#### modifiers
[`.debounce`](docs.md#debounce-ms) [`.throttle`](docs.md#throttle-ms) [`.delay`](docs.md#tick) [`.once`](docs.md#once)
[`.window`](docs.md#window-document-body-root-parent-away-self) [`.document`](docs.md#window-document-body-root-parent-away-self) [`.root`](docs.md#window-document-body-root-parent-away-self) [`.body`](docs.md#window-document-body-root-parent-away-self) [`.parent`](docs.md#window-document-body-root-parent-away-self) [`.self`](docs.md#window-document-body-root-parent-away-self) [`.away`](docs.md#window-document-body-root-parent-away-self)
[`.passive`](docs.md#passive-captureevents-only) [`.capture`](docs.md#passive-captureevents-only) [`.prevent`](docs.md#prevent-stop-immediateevents-only) [`.stop`](docs.md#prevent-stop-immediateevents-only) [`.`](docs.md#key-filters)
#### core
[start](docs.md#start) [store](docs.md#store) [signals](docs.md#signals) [config](docs.md#configuration) [evaluator](docs.md#evaluator) [jsx](docs.md#jsx) [build](docs.md#custom-build) [hints](docs.md#hints)
## used by
[settings-panel](https://dy.github.io/settings-panel), [wavearea](https://dy.github.io/wavearea), [watr](https://dy.github.io/watr/play) and others
## alternatives
[alpine](https://github.com/alpinejs/alpine), [petite-vue](https://github.com/vuejs/petite-vue), [lucia](https://github.com/aidenybai/lucia), [nuejs](https://github.com/nuejs/nuejs), [hmpl](https://github.com/hmpl-language/hmpl), [unpoly](https://unpoly.com/up.link), [dagger](https://github.com/dagger8224/dagger.js)