A tiny (2.7kB minzipped) reactive GUI library for your existing MPA. Reactive Mastro sits somewhere in between React/Vue/Solid/Svelte one one end, and Alpine/HTMX/Stimulus on the other end – while being smaller and simpler than all of them.
Reactive Mastro was conceived as the client-side part of Mastro, but you can just as well use it with any other static site or server that renders HTML (such as Rails, Django, PHP, etc).
Learn more about Reactive Mastro
You can install Reactive Mastro with npm/pnpm/deno etc. or via CDN. See Installing Reactive Mastro
Server-side part is plain HTML:
<my-counter>
Count is <span data-bind="count">0</span>
<button data-onclick="inc">Click me</button>
</my-counter>Client-side part is plain JavaScript:
import { ReactiveElement, signal } from "https://esm.sh/jsr/@mastrojs/[email protected]?bundle";
customElements.define("my-counter", class extends ReactiveElement {
count = signal(0)
inc () {
this.count.set(c => c + 1)
}
})To learn more, read Using Reactive Mastro.