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: 16 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 (about 2 months ago)
• Last Synced: 2025-12-24T11:29:54.757Z (about 2 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æ [![tests](https://github.com/dy/sprae/actions/workflows/node.js.yml/badge.svg)](https://github.com/dy/sprae/actions/workflows/node.js.yml) ![size](https://img.shields.io/badge/size-~5kb-white) [![npm](https://img.shields.io/npm/v/sprae?color=white)](https://www.npmjs.com/package/sprae)

Ræctive sprinkles for HTML/JSX

## usage

```html

  A

  B

  Content A

  Content B



  




```

## [docs](docs.md)

[`:text`](docs.md#text) [`:class`](docs.md#class) [`:style`](docs.md#style) [`:value`](docs.md#value) [`:`](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) [`:portal`](docs.md#portal) [`:on`](docs.md#onevent)

[`.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)

## vs alpine

|                  | [alpine](alpine.md) | sprae |

|------------------|--------|-------|

| _size_           | ~16kb | ~5kb |

| _performance_    | ~2× slower | 1.00× |

| _CSP_            | limited | full |

| _reactivity_     | custom | [signals](docs.md#signals) |

| _sandboxing_     | no | yes |

| _typescript_     | partial | full |

| _JSX/SSR_        | no | [yes](docs.md#jsx) |

| _prefix_         | `x-`, `:`, `@` | `:` or [custom](docs.md#custom-build) |

[benchmark](https://krausest.github.io/js-framework-benchmark/current.html). CSP via [jessie](docs.md#evaluator).

## used by

[watr](https://dy.github.io/watr/play), [wavearea](https://dy.github.io/wavearea)



ॐ