Reactive Mastro 🧙

A tiny (2.8kB min.gz) 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).

Get started Why 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 "@mastrojs/reactive"

customElements.define("my-counter", class extends ReactiveElement {
  count = signal(0)

  inc () {
    this.count.set(c => c + 1)
  }
})

Result is:

For more examples, check out the Todo list CodePen, client-side examples, SSR example, or continue reading.

Get started with Reactive Mastro

1. Installing Reactive Mastro
2. Why Reactive Mastro?
3. Using Reactive Mastro
4. Reference